/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/home/CTA.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';
// Import project module (@/ alias = src/ folder in tsconfig)
import Button from '@/components/ui/Button';
// Lucide icons — lightweight SVG icon components
import { ArrowRight, MessageCircle } from 'lucide-react';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useTranslation } from '@/hooks/useTranslation';
// Import project module (@/ alias = src/ folder in tsconfig)
import { WHATSAPP_URL } from '@/lib/constants';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function CTA() {
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
// (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="py-20">
      // 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="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-700 to-brand-900 px-8 py-16 text-center sm:px-16">
          // JSX element — HTML-like tag becomes React component in browser
          <div className="absolute -right-20 -top-20 h-60 w-60 rounded-full bg-gold-500/10" />
          // JSX element — HTML-like tag becomes React component in browser
          <div className="absolute -bottom-16 -left-16 h-48 w-48 rounded-full bg-gold-500/10" />
// (blank line — separates logical blocks for readability)
          // JSX element — HTML-like tag becomes React component in browser
          <div className="relative">
            // JSX element — HTML-like tag becomes React component in browser
            <h2 className="mb-4 font-display text-3xl font-bold text-white md:text-4xl">
              // Line 21: {t('cta.title')}
              {t('cta.title')}
            // JSX element — HTML-like tag becomes React component in browser
            </h2>
            // JSX element — HTML-like tag becomes React component in browser
            <p className="mx-auto mb-8 max-w-xl text-brand-100">{t('cta.subtitle')}</p>
            // JSX element — HTML-like tag becomes React component in browser
            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
              // JSX element — HTML-like tag becomes React component in browser
              <Link href="/shop">
                // JSX element — HTML-like tag becomes React component in browser
                <Button variant="gold" size="lg">
                  // Line 27: {t('cta.button')}
                  {t('cta.button')}
                  // JSX element — HTML-like tag becomes React component in browser
                  <ArrowRight className="h-4 w-4 rtl:rotate-180" />
                // 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
                  // Line 33: variant="secondary"
                  variant="secondary"
                  // Line 34: size="lg"
                  size="lg"
                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
                  className="border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15"
                // Line 36: >
                >
                  // JSX element — HTML-like tag becomes React component in browser
                  <MessageCircle className="h-4 w-4" />
                  // Line 38: {t('cta.whatsapp')}
                  {t('cta.whatsapp')}
                // 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>
        // 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 46: );
  );
// Closing brace — end of block (function, if, object, JSX)
}