/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/home/ContactPreview.tsx
 * NOT used by the app — read this to learn how the real file works
 */
// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
'use client';
// (blank line — separates logical blocks for readability)
// Next.js Link — fast client-side navigation without full page reload
import Link from 'next/link';
// Lucide icons — lightweight SVG icon components
import { Phone, MapPin, Clock, MessageCircle, ExternalLink } from 'lucide-react';
// Import project module (@/ alias = src/ folder in tsconfig)
import Button from '@/components/ui/Button';
// Import project module (@/ alias = src/ folder in tsconfig)
import Logo from '@/components/ui/Logo';
// Import external package or local module
import {
  // Property or array item — trailing comma allowed in TypeScript
  SITE_ADDRESS,
  // Property or array item — trailing comma allowed in TypeScript
  SITE_PHONE_DISPLAY,
  // Property or array item — trailing comma allowed in TypeScript
  SITE_HOURS,
  // Property or array item — trailing comma allowed in TypeScript
  WHATSAPP_URL,
  // Property or array item — trailing comma allowed in TypeScript
  MAPS_URL,
// Closing brace — end of block (function, if, object, JSX)
} from '@/lib/constants';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useTranslation } from '@/hooks/useTranslation';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function ContactPreview() {
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
  // Line 18: const telHref = `tel:+46725855050`;
  const telHref = `tel:+46725855050`;
// (blank line — separates logical blocks for readability)
  // Return JSX — describes UI tree React renders to the DOM
  return (
    // JSX element — HTML-like tag becomes React component in browser
    <section className="bg-brand-950 py-20 text-white">
      // JSX element — HTML-like tag becomes React component in browser
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        // JSX element — HTML-like tag becomes React component in browser
        <div className="grid gap-12 lg:grid-cols-2 lg:gap-16">
          // JSX element — HTML-like tag becomes React component in browser
          <div>
            // JSX element — HTML-like tag becomes React component in browser
            <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-400">
              // Line 26: {t('contact.label')}
              {t('contact.label')}
            // JSX element — HTML-like tag becomes React component in browser
            </span>
            // JSX element — HTML-like tag becomes React component in browser
            <h2 className="mb-8 font-display text-3xl font-bold md:text-4xl">
              // Line 29: {t('contact.title')}
              {t('contact.title')}
            // JSX element — HTML-like tag becomes React component in browser
            </h2>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <ul className="mb-8 space-y-5">
              // JSX element — HTML-like tag becomes React component in browser
              <li className="flex gap-4">
                // JSX element — HTML-like tag becomes React component in browser
                <MapPin className="mt-0.5 h-5 w-5 shrink-0 text-gold-400" />
                // JSX element — HTML-like tag becomes React component in browser
                <div>
                  // JSX element — HTML-like tag becomes React component in browser
                  <p className="text-xs font-semibold uppercase tracking-wider text-gold-400">
                    // Line 37: {t('contact.addressLabel')}
                    {t('contact.addressLabel')}
                  // JSX element — HTML-like tag becomes React component in browser
                  </p>
                  // JSX element — HTML-like tag becomes React component in browser
                  <p className="text-brand-100">{SITE_ADDRESS}</p>
                // JSX element — HTML-like tag becomes React component in browser
                </div>
              // JSX element — HTML-like tag becomes React component in browser
              </li>
              // JSX element — HTML-like tag becomes React component in browser
              <li className="flex gap-4">
                // JSX element — HTML-like tag becomes React component in browser
                <Phone className="mt-0.5 h-5 w-5 shrink-0 text-gold-400" />
                // JSX element — HTML-like tag becomes React component in browser
                <div>
                  // JSX element — HTML-like tag becomes React component in browser
                  <p className="text-xs font-semibold uppercase tracking-wider text-gold-400">
                    // Line 46: {t('contact.phoneLabel')}
                    {t('contact.phoneLabel')}
                  // JSX element — HTML-like tag becomes React component in browser
                  </p>
                  // JSX element — HTML-like tag becomes React component in browser
                  <a href={telHref} className="text-brand-100 hover:text-white">
                    // Line 49: {SITE_PHONE_DISPLAY}
                    {SITE_PHONE_DISPLAY}
                  // JSX element — HTML-like tag becomes React component in browser
                  </a>
                // JSX element — HTML-like tag becomes React component in browser
                </div>
              // JSX element — HTML-like tag becomes React component in browser
              </li>
              // JSX element — HTML-like tag becomes React component in browser
              <li className="flex gap-4">
                // JSX element — HTML-like tag becomes React component in browser
                <Clock className="mt-0.5 h-5 w-5 shrink-0 text-gold-400" />
                // JSX element — HTML-like tag becomes React component in browser
                <div>
                  // JSX element — HTML-like tag becomes React component in browser
                  <p className="text-xs font-semibold uppercase tracking-wider text-gold-400">
                    // Line 57: {t('contact.hoursLabel')}
                    {t('contact.hoursLabel')}
                  // JSX element — HTML-like tag becomes React component in browser
                  </p>
                  // JSX element — HTML-like tag becomes React component in browser
                  <p className="text-brand-100">
                    // Line 60: {t('contact.hoursValue', { hours: SITE_HOURS })}
                    {t('contact.hoursValue', { hours: SITE_HOURS })}
                  // JSX element — HTML-like tag becomes React component in browser
                  </p>
                // JSX element — HTML-like tag becomes React component in browser
                </div>
              // JSX element — HTML-like tag becomes React component in browser
              </li>
            // JSX element — HTML-like tag becomes React component in browser
            </ul>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <div className="flex flex-col gap-3 sm:flex-row">
              // JSX element — HTML-like tag becomes React component in browser
              <Link href="/about#contact">
                // JSX element — HTML-like tag becomes React component in browser
                <Button
                  // Line 69: variant="secondary"
                  variant="secondary"
                  // Line 70: size="lg"
                  size="lg"
                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
                  className="w-full border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15 sm:w-auto"
                // Line 72: >
                >
                  // Line 73: {t('contact.learnMore')}
                  {t('contact.learnMore')}
                // JSX element — HTML-like tag becomes React component in browser
                </Button>
              // JSX element — HTML-like tag becomes React component in browser
              </Link>
              // JSX element — HTML-like tag becomes React component in browser
              <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
                // JSX element — HTML-like tag becomes React component in browser
                <Button variant="gold" size="lg" className="w-full sm:w-auto">
                  // JSX element — HTML-like tag becomes React component in browser
                  <MessageCircle className="h-4 w-4" />
                  // Line 79: {t('contact.writeUs')}
                  {t('contact.writeUs')}
                // JSX element — HTML-like tag becomes React component in browser
                </Button>
              // JSX element — HTML-like tag becomes React component in browser
              </a>
              // JSX element — HTML-like tag becomes React component in browser
              <a href={telHref}>
                // JSX element — HTML-like tag becomes React component in browser
                <Button
                  // Line 84: variant="secondary"
                  variant="secondary"
                  // Line 85: size="lg"
                  size="lg"
                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
                  className="w-full border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15 sm:w-auto"
                // Line 87: >
                >
                  // JSX element — HTML-like tag becomes React component in browser
                  <Phone className="h-4 w-4" />
                  // Line 89: {t('contact.callUs')}
                  {t('contact.callUs')}
                // JSX element — HTML-like tag becomes React component in browser
                </Button>
              // JSX element — HTML-like tag becomes React component in browser
              </a>
            // JSX element — HTML-like tag becomes React component in browser
            </div>
          // JSX element — HTML-like tag becomes React component in browser
          </div>
// (blank line — separates logical blocks for readability)
          // JSX element — HTML-like tag becomes React component in browser
          <div className="flex flex-col justify-center">
            // JSX element — HTML-like tag becomes React component in browser
            <a
              // Link target URL — internal route or external https://
              href={MAPS_URL}
              // Line 98: target="_blank"
              target="_blank"
              // Line 99: rel="noopener noreferrer"
              rel="noopener noreferrer"
              // Tailwind CSS utility classes — styling (colors, spacing, layout)
              className="card-premium group flex flex-col items-center gap-4 bg-brand-900/50 p-8 text-center transition-all hover:bg-brand-900/70"
            // Line 101: >
            >
              // JSX element — HTML-like tag becomes React component in browser
              <Logo size="lg" className="ring-gold-400/30" />
              // JSX element — HTML-like tag becomes React component in browser
              <div>
                // JSX element — HTML-like tag becomes React component in browser
                <p className="font-display text-xl font-bold">{t('site.name')}</p>
                // JSX element — HTML-like tag becomes React component in browser
                <p className="mt-1 text-sm text-brand-200">{SITE_ADDRESS}</p>
              // JSX element — HTML-like tag becomes React component in browser
              </div>
              // JSX element — HTML-like tag becomes React component in browser
              <span className="inline-flex items-center gap-2 text-sm font-semibold text-gold-400 transition-colors group-hover:text-gold-300">
                // Line 108: {t('contact.openMaps')}
                {t('contact.openMaps')}
                // JSX element — HTML-like tag becomes React component in browser
                <ExternalLink className="h-4 w-4" />
              // JSX element — HTML-like tag becomes React component in browser
              </span>
            // JSX element — HTML-like tag becomes React component in browser
            </a>
          // JSX element — HTML-like tag becomes React component in browser
          </div>
        // JSX element — HTML-like tag becomes React component in browser
        </div>
      // JSX element — HTML-like tag becomes React component in browser
      </div>
    // JSX element — HTML-like tag becomes React component in browser
    </section>
  // Line 116: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
