'use client';

import { MessageCircle, ClipboardCheck, Store } from 'lucide-react';
import Button from '@/components/ui/Button';
import { WHATSAPP_URL } from '@/lib/constants';
import { useTranslation } from '@/hooks/useTranslation';

export default function HowItWorks() {
  const { t } = useTranslation();

  const steps = [
    {
      icon: MessageCircle,
      step: '01',
      title: t('howItWorks.step1Title'),
      description: t('howItWorks.step1Desc'),
    },
    {
      icon: ClipboardCheck,
      step: '02',
      title: t('howItWorks.step2Title'),
      description: t('howItWorks.step2Desc'),
    },
    {
      icon: Store,
      step: '03',
      title: t('howItWorks.step3Title'),
      description: t('howItWorks.step3Desc'),
    },
  ];

  return (
    <section className="bg-brand-950 py-20 text-white">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mb-12 text-center">
          <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-400">
            {t('howItWorks.label')}
          </span>
          <h2 className="font-display text-3xl font-bold md:text-4xl">
            {t('howItWorks.title')}
          </h2>
        </div>

        <div className="mb-12 grid gap-8 md:grid-cols-3">
          {steps.map((step) => (
            <div key={step.step} className="relative text-center">
              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-brand-800">
                <step.icon className="h-7 w-7 text-gold-400" />
              </div>
              <span className="mb-2 inline-block text-xs font-bold uppercase tracking-widest text-gold-500">
                {t('howItWorks.step', { n: step.step })}
              </span>
              <h3 className="mb-2 font-display text-xl font-bold">{step.title}</h3>
              <p className="text-sm leading-relaxed text-brand-200">{step.description}</p>
            </div>
          ))}
        </div>

        <div className="text-center">
          <Button href={WHATSAPP_URL} external variant="gold" size="lg">
            <MessageCircle className="h-4 w-4" />
            {t('howItWorks.whatsapp')}
          </Button>
        </div>
      </div>
    </section>
  );
}