/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/home/HowItWorks.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)
// Lucide icons — lightweight SVG icon components
import { MessageCircle, ClipboardCheck, Store } 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 { WHATSAPP_URL } 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 HowItWorks() {
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
// (blank line — separates logical blocks for readability)
  // Line 11: const steps = [
  const steps = [
    // Line 12: {
    {
      // Property or array item — trailing comma allowed in TypeScript
      icon: MessageCircle,
      // Property or array item — trailing comma allowed in TypeScript
      step: '01',
      // Property or array item — trailing comma allowed in TypeScript
      title: t('howItWorks.step1Title'),
      // Property or array item — trailing comma allowed in TypeScript
      description: t('howItWorks.step1Desc'),
    // Closing brace — end of block (function, if, object, JSX)
    },
    // Line 18: {
    {
      // Property or array item — trailing comma allowed in TypeScript
      icon: ClipboardCheck,
      // Property or array item — trailing comma allowed in TypeScript
      step: '02',
      // Property or array item — trailing comma allowed in TypeScript
      title: t('howItWorks.step2Title'),
      // Property or array item — trailing comma allowed in TypeScript
      description: t('howItWorks.step2Desc'),
    // Closing brace — end of block (function, if, object, JSX)
    },
    // Line 24: {
    {
      // Property or array item — trailing comma allowed in TypeScript
      icon: Store,
      // Property or array item — trailing comma allowed in TypeScript
      step: '03',
      // Property or array item — trailing comma allowed in TypeScript
      title: t('howItWorks.step3Title'),
      // Property or array item — trailing comma allowed in TypeScript
      description: t('howItWorks.step3Desc'),
    // Closing brace — end of block (function, if, object, JSX)
    },
  // End of array literal
  ];
// (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="mb-12 text-center">
          // 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 37: {t('howItWorks.label')}
            {t('howItWorks.label')}
          // JSX element — HTML-like tag becomes React component in browser
          </span>
          // JSX element — HTML-like tag becomes React component in browser
          <h2 className="font-display text-3xl font-bold md:text-4xl">
            // Line 40: {t('howItWorks.title')}
            {t('howItWorks.title')}
          // JSX element — HTML-like tag becomes React component in browser
          </h2>
        // 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="mb-12 grid gap-8 md:grid-cols-3">
          // Array.map — transform each item (often render a list of components)
          {steps.map((step) => (
            // JSX element — HTML-like tag becomes React component in browser
            <div key={step.step} className="relative text-center">
              // JSX element — HTML-like tag becomes React component in browser
              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-brand-800">
                // JSX element — HTML-like tag becomes React component in browser
                <step.icon className="h-7 w-7 text-gold-400" />
              // 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-xs font-bold uppercase tracking-widest text-gold-500">
                // Line 51: {t('howItWorks.step', { n: step.step })}
                {t('howItWorks.step', { n: step.step })}
              // JSX element — HTML-like tag becomes React component in browser
              </span>
              // JSX element — HTML-like tag becomes React component in browser
              <h3 className="mb-2 font-display text-xl font-bold">{step.title}</h3>
              // JSX element — HTML-like tag becomes React component in browser
              <p className="text-sm leading-relaxed text-brand-200">{step.description}</p>
            // JSX element — HTML-like tag becomes React component in browser
            </div>
          // Line 56: ))}
          ))}
        // 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="text-center">
          // 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">
              // JSX element — HTML-like tag becomes React component in browser
              <MessageCircle className="h-4 w-4" />
              // Line 63: {t('howItWorks.whatsapp')}
              {t('howItWorks.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
    </section>
  // Line 69: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
