/**
 * WelcomeHowItWorksSection — "Set up in 5 minutes" how-it-works section (DEBT-005 extraction).
 *
 * Section 7 from Welcome.tsx: numbered timeline + CTA.
 * Extracted verbatim (Wave-2 content preserved, move not rewrite).
 */
import { ArrowRight } from 'lucide-react';

import { Link } from '@inertiajs/react';

import { ScrollReveal } from '@/Components/marketing/operator/ScrollReveal';
import { SectionHeader } from '@/Components/marketing/operator/SectionHeader';
import { steps } from '@/Components/marketing/WelcomePageData';
import { Button } from '@/Components/ui/button';
import { CTA_LABELS } from '@/config/cta-labels';
import { trackEvent } from '@/lib/analytics';
import { CTA_CLICKED } from '@/lib/event-catalog';

export interface WelcomeHowItWorksSectionProps {
  canRegister: boolean;
}

export function WelcomeHowItWorksSection({ canRegister }: WelcomeHowItWorksSectionProps) {
  return (
    <section id="how-it-works" className="border-b border-border bg-background">
      <div className="container max-w-5xl py-16 md:py-20">
        <SectionHeader
          eyebrow="From zero to first insight"
          title="Closes the loop, then grades itself."
          description="No onboarding calls. Connect GSC, run analysis, fix with AI — the impact scores adapt based on what actually moved your numbers."
          className="mb-14"
        />

        {/* Numbered timeline. The vertical-rule on desktop replaces the
            dashed-line + circle pattern used on most landing pages. */}
        <div className="relative grid gap-10 md:grid-cols-3 md:gap-0">
          <div
            className="absolute left-0 right-0 top-7 hidden h-px bg-border md:block"
            aria-hidden="true"
          />
          {steps.map((step, index) => (
            <ScrollReveal
              key={step.number}
              delay={index * 120}
              className="relative md:px-8 md:first:pl-0 md:last:pr-0"
            >
              {/* Step marker - square + monospace number, not a generic circle */}
              <div className="relative flex items-center gap-3">
                <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-lg border border-primary/30 bg-card font-data text-2xl font-semibold text-primary shadow-sm">
                  {step.number}
                </div>
                <span className="font-data text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
                  {step.time}
                </span>
              </div>
              <h3 className="mt-4 text-lg font-semibold text-foreground">{step.title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                {step.description}
              </p>
            </ScrollReveal>
          ))}
        </div>

        {canRegister && (
          <div className="mt-14 flex flex-wrap items-center gap-4">
            <Button variant="default" size="lg" asChild>
              <Link
                href={route('register')}
                onClick={() =>
                  trackEvent(CTA_CLICKED, {
                    cta_text: CTA_LABELS.FREE_ENTRY,
                    cta_location: 'how_it_works',
                    page: 'homepage',
                  })
                }
              >
                {CTA_LABELS.FREE_ENTRY}
                <ArrowRight className="ml-2 size-4" aria-hidden="true" />
              </Link>
            </Button>
            <p className="font-data text-xs text-muted-foreground">
              no credit card · 5 min setup · cancel anytime
            </p>
          </div>
        )}
      </div>
    </section>
  );
}