/**
 * WelcomePricingSection — editorial 3-up pricing grid (DEBT-005 extraction).
 *
 * Section 8 from Welcome.tsx. Receives pre-built pricingTiers from Welcome.
 * Extracted verbatim (Wave-2 content preserved, move not rewrite).
 */
import { CheckCircle2 } from 'lucide-react';

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

import { LaunchPricingBadge } from '@/Components/billing/LaunchPricingBadge';
import { SectionHeader } from '@/Components/marketing/operator/SectionHeader';
import { Button } from '@/Components/ui/button';
import { trackEvent } from '@/lib/analytics';
import { CTA_CLICKED } from '@/lib/event-catalog';

export interface PricingTier {
  key: string;
  name: string;
  price: string;
  period: string;
  highlight?: boolean;
  cta: string;
  cta_subtext?: string;
  features: string[];
}

export interface WelcomePricingSectionProps {
  pricingTiers: PricingTier[];
  launchPricing: boolean;
  canRegister: boolean;
}

export function WelcomePricingSection({
  pricingTiers,
  launchPricing,
  canRegister,
}: WelcomePricingSectionProps) {
  return (
    <section className="border-b border-border bg-muted/20">
      <div className="container max-w-5xl py-24 md:py-28">
        <SectionHeader
          eyebrow="Pricing"
          title="Start free."
          emphasis="Upgrade when you need more."
          description="GSC integration, WordPress publishing, content intelligence, and AI drafts ship in every plan. No upsell tier gating the part that does the work."
          className="mb-14"
        />
        {/* D1-A-001: break three-card symmetry by scaling the highlighted card up (scale-105)
            and giving it a distinct top-accent bar. Non-highlighted cards are flat with no ring,
            visually receding behind the featured tier. */}
        <div className="grid gap-4 md:grid-cols-3 md:items-start">
          {pricingTiers.map((tier) => (
            <div
              key={tier.name}
              className={`relative flex flex-col rounded-2xl border p-7 md:p-8 ${
                tier.highlight
                  ? 'z-10 border-primary/30 bg-card shadow-md md:scale-105'
                  : 'border-border bg-card/60'
              }`}
            >
              {tier.highlight && (
                <span
                  className="absolute inset-x-0 top-0 h-0.5 rounded-t-2xl bg-primary/70"
                  aria-hidden="true"
                />
              )}
              {tier.highlight && (
                <span className="mb-3 font-data text-xs font-semibold uppercase tracking-[0.18em] text-primary">
                  Most popular · for solo bloggers publishing weekly
                </span>
              )}
              <div className="flex items-center justify-between">
                <h3 className="text-base font-semibold text-foreground">{tier.name}</h3>
              </div>
              <div className="mt-4 flex items-baseline gap-1">
                <span className="font-data text-4xl font-semibold tracking-tight text-foreground">
                  {tier.price}
                </span>
                <span className="font-data text-xs text-muted-foreground">{tier.period}</span>
              </div>
              {launchPricing && tier.highlight && <LaunchPricingBadge className="mt-3" />}
              <ul className="mt-6 space-y-2.5 text-sm">
                {tier.features.map((feature) => (
                  <li key={feature} className="flex items-start gap-2 text-muted-foreground">
                    <CheckCircle2
                      className="mt-0.5 size-4 shrink-0 text-primary"
                      aria-hidden="true"
                    />
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>
              {canRegister && (
                <div className="mt-auto pt-6">
                  <Button
                    className="w-full"
                    variant={tier.highlight ? 'default' : 'outline'}
                    asChild
                  >
                    <Link
                      href={`${route('register')}${tier.key !== 'free' ? `?plan=${tier.key}` : ''}`}
                      onClick={() =>
                        trackEvent(CTA_CLICKED, {
                          cta_text: tier.cta,
                          cta_location: 'pricing',
                          page: 'homepage',
                          plan_intent: tier.key,
                        })
                      }
                    >
                      {tier.cta}
                    </Link>
                  </Button>
                  {tier.cta_subtext && (
                    <p className="mt-2 text-center font-data text-xs text-muted-foreground">
                      {tier.cta_subtext}
                    </p>
                  )}
                </div>
              )}
            </div>
          ))}
        </div>
        <div className="mt-8 flex justify-center">
          <Button variant="ghost" size="sm" asChild>
            <Link href="/pricing" className="text-muted-foreground hover:text-foreground">
              Compare all plans →
            </Link>
          </Button>
        </div>
      </div>
    </section>
  );
}