/**
 * WelcomeHeroSection — editorial 2-column hero + live-ticker strip (DEBT-005 extraction).
 *
 * Extracted verbatim from Welcome.tsx (Wave-2 content preserved, move not rewrite).
 * Contains: header badge, headline, CTA buttons, trust meta, annotated mockup,
 * PH badge, and the live-metrics readout strip.
 */
import { ArrowRight, CheckCircle2, Lock, Play, ShieldCheck } from 'lucide-react';

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

import { HeroDashboardMockup } from '@/Components/marketing/HeroDashboardMockup';
import { AnnotatedScreenshot } from '@/Components/marketing/operator/AnnotatedScreenshot';
import { LiveTickerMetric } from '@/Components/marketing/operator/LiveTickerMetric';
import { ScrollReveal } from '@/Components/marketing/operator/ScrollReveal';
import { ProductHuntBadge } from '@/Components/marketing/ProductHuntBadge';
import type { SocialProofMetrics } from '@/Components/marketing/WelcomePageData';
import { Button } from '@/Components/ui/button';
import { PageHeading } from '@/Components/ui/typography';
import { CTA_LABELS } from '@/config/cta-labels';
import { trackEvent } from '@/lib/analytics';
import { CTA_CLICKED } from '@/lib/event-catalog';

export interface WelcomeHeroSectionProps {
  canRegister: boolean;
  heroBadgeText: string;
  heroCta: string;
  heroBadgeVariant: 'a' | 'b';
  demoVideoUrl: string | undefined;
  setIsDemoModalOpen: (open: boolean) => void;
  metrics: SocialProofMetrics;
  metricsState: 'capability' | 'early' | 'full';
  /** AB-01 + FEAT-001: H1 copy variant. Defaults to 'control'. */
  h1Variant?: 'control' | 'treatment';
  /** AB-02 + HOME-003: social-proof strip copy variant. Defaults to 'control'. */
  socialProofVariant?: 'control' | 'treatment';
}

export function WelcomeHeroSection({
  canRegister,
  heroBadgeText,
  heroCta,
  heroBadgeVariant,
  demoVideoUrl,
  setIsDemoModalOpen,
  metrics,
  metricsState,
  h1Variant = 'control',
  socialProofVariant = 'control',
}: WelcomeHeroSectionProps) {
  return (
    <section className="relative overflow-hidden border-b border-border">
      {/* Ambient backdrop: hairline grid + soft top-spotlight. Adds depth
          without asking the eye to do work. */}
      <div className="absolute inset-0 bg-grid-hair opacity-40" aria-hidden="true" />
      <div className="absolute inset-0 bg-spotlight" aria-hidden="true" />
      <div
        className="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-primary/40 to-transparent"
        aria-hidden="true"
      />

      <div className="container relative grid gap-14 py-24 md:py-28 lg:grid-cols-12 lg:gap-10">
        {/* Left column: copy + CTA */}
        <div className="lg:col-span-7 lg:pr-6">
          {/* HOME-001: single editorial-rule badge — one typographic unit above H1.
              Treatment replaces both the recovery link and the badge with the
              treatment badge so the H1 sits cleanly below one signal. */}
          {h1Variant === 'treatment' ? (
            <div className="editorial-rule left max-w-md animate-fade-in-up">
              <span className="font-data">
                The only WordPress SEO tool that proves what worked
              </span>
            </div>
          ) : (
            <>
              <div className="editorial-rule left max-w-md animate-fade-in-up">
                <Link
                  href={route('recover')}
                  className="font-data hover:underline hover:underline-offset-4"
                >
                  Google-update recovery, proven on your own Search Console data.
                </Link>
              </div>
              <div className="editorial-rule left max-w-md animate-fade-in-up mt-2">
                <span className="font-data">{heroBadgeText}</span>
              </div>
            </>
          )}

          {/* AB-01 + FEAT-001: H1 copy variant */}
          {h1Variant === 'treatment' ? (
            <PageHeading className="animate-fade-in-up animate-delay-100 mt-6 text-balance font-display text-4xl font-semibold tracking-tight text-foreground sm:text-5xl md:text-6xl">
              Diagnose traffic drops.{' '}
              <span className="scribble always inline-block">Fix with AI. Prove the ROI.</span>
            </PageHeading>
          ) : (
            <PageHeading className="animate-fade-in-up animate-delay-100 mt-6 text-balance font-display text-4xl font-semibold tracking-tight text-foreground sm:text-5xl md:text-6xl">
              Hit by a Google update? See the decay. Fix the cohort.{' '}
              <span className="scribble always inline-block">Watch your own data move.</span>
            </PageHeading>
          )}

          {/* CONSIST-004: "competitor-gap intelligence" replaced with an accurate
              capability description (keyword-gap and cannibalization detection —
              both ship in the product). Smaller honest edit chosen over dropping
              the clause entirely to preserve the sentence rhythm. */}
          {/* D1-A-003: stagger — delay-200 (was delay-100, same as H1; stagger never fired) */}
          <p className="animate-fade-in-up animate-delay-200 mt-6 max-w-xl text-lg leading-relaxed text-muted-foreground md:text-xl">
            Free read-only GSC diagnosis shows exactly which pages decayed and when. Surgically
            refresh the affected cohort, publish to WordPress, then track the before/after on your
            real Search Console numbers.
          </p>
          {/* D1-A-003: stagger — delay-300 (was delay-200; paragraph now occupies 200) */}
          {/* MKT-HERO-CTA: single primary + at most one secondary (demo button or sample link).
              Removed the ghost "See a Sample Audit" button — it competed with both the primary
              and the demo/sample secondary. Demo affordance stays as the single quieter secondary. */}
          <div className="animate-fade-in-up animate-delay-300 mt-8 flex flex-wrap items-center gap-x-5 gap-y-3">
            {canRegister && (
              // D1-A-004: removed min-h-12 arbitrary override; size="lg" maps to h-11 (44px), which is the design system's lg button height
              <Button variant="default" size="lg" asChild>
                <Link
                  href={route('register')}
                  onClick={() =>
                    trackEvent(CTA_CLICKED, {
                      cta_text: heroCta,
                      cta_location: 'hero',
                      page: 'homepage',
                      hero_badge_variant: heroBadgeVariant,
                    })
                  }
                >
                  {heroCta}
                  {/* D1-A-002: translate-y-px for optical baseline alignment; aria-hidden per D1-A-008 */}
                  <ArrowRight className="ml-2 size-4 translate-y-px" aria-hidden="true" />
                </Link>
              </Button>
            )}
            {demoVideoUrl ? (
              <button
                type="button"
                className="group inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
                onClick={() => {
                  trackEvent(CTA_CLICKED, {
                    cta_type: 'demo_video',
                    cta_location: 'hero',
                    page: 'homepage',
                    hero_badge_variant: heroBadgeVariant,
                  });
                  setIsDemoModalOpen(true);
                }}
                aria-label="Watch 90-second product demo"
              >
                <span className="flex size-7 items-center justify-center rounded-full border border-border bg-background shadow-sm transition-colors group-hover:border-primary/50">
                  <Play className="size-3 fill-current" aria-hidden="true" />
                </span>
                90-second demo
              </button>
            ) : (
              <Link
                href={route('free-audit')}
                className="text-sm text-muted-foreground hover:text-foreground"
                onClick={() =>
                  trackEvent(CTA_CLICKED, {
                    cta_type: 'sample_analysis',
                    cta_location: 'hero',
                    page: 'homepage',
                    hero_badge_variant: heroBadgeVariant,
                  })
                }
              >
                {CTA_LABELS.SECONDARY} →
              </Link>
            )}
          </div>

          {/* Single-line trust meta - replaces the 3-checkmark row */}
          {/* D1-A-003: delay-300 to appear after the CTA block */}
          {canRegister && (
            <p className="animate-fade-in-up animate-delay-300 mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground">
              <span className="inline-flex items-center gap-1.5">
                <CheckCircle2 className="size-4 text-success" aria-hidden="true" />
                No credit card
              </span>
              {/* Separators: bumped from /40 to /70 so they remain perceptible
                  in dark mode (40% × 72% lightness over near-black ≈ 2:1). (F-DM-04) */}
              <span aria-hidden="true" className="text-muted-foreground/70">
                ·
              </span>
              <span className="inline-flex items-center gap-1.5">
                <CheckCircle2 className="size-4 text-success" aria-hidden="true" />
                First insights in 10 min
              </span>
              <span aria-hidden="true" className="text-muted-foreground/70">
                ·
              </span>
              <span className="inline-flex items-center gap-1.5">
                <CheckCircle2 className="size-4 text-success" aria-hidden="true" />
                Free AI drafts included
              </span>
            </p>
          )}

          {/*
           * MKT-PROOF-CTA: credible proof unit adjacent to the CTA.
           * Every claim is individually verified in the codebase before display:
           *   - "Read-only GSC access": config/gsc.php line 21 uses webmasters.readonly scope
           *   - "Credentials encrypted at rest": GscConnection/UserAiKey/WpConnection use
           *     Laravel encrypted casts; config/app.php cipher = AES-256-CBC
           *   - "Measured on your own GSC data": honest mechanism — correlational, not causal
           * No fabricated testimonials, logos, user counts, or star ratings.
           */}
          <div className="animate-fade-in-up animate-delay-300 mt-5 flex flex-wrap items-center gap-x-4 gap-y-2">
            <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
              <ShieldCheck className="size-3.5 text-success-strong" aria-hidden="true" />
              Read-only GSC access
            </span>
            <span aria-hidden="true" className="text-muted-foreground/70 text-xs">
              ·
            </span>
            <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
              <Lock className="size-3.5 text-success-strong" aria-hidden="true" />
              Credentials encrypted at rest
            </span>
            <span aria-hidden="true" className="text-muted-foreground/70 text-xs">
              ·
            </span>
            <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
              <CheckCircle2 className="size-3.5 text-success-strong" aria-hidden="true" />
              Recovery measured on your own GSC data
            </span>
          </div>
        </div>

        {/* Right column: annotated product mockup. Replaces the centered hero image. */}
        <div className="relative lg:col-span-5">
          <ScrollReveal delay={120} className="relative">
            <AnnotatedScreenshot
              annotations={[
                {
                  text: 'real GSC data, not estimates',
                  anchor: 'top-left',
                  offset: { x: 12, y: 18 },
                  tilt: 'left',
                },
                {
                  text: 'ranked by impact',
                  anchor: 'right',
                  offset: { x: -8, y: -40 },
                  tilt: 'right',
                },
                {
                  text: 'before/after on your own data',
                  anchor: 'bottom-right',
                  offset: { x: -20, y: -8 },
                  tilt: 'left',
                },
              ]}
              className="relative"
            >
              <div className="rounded-2xl border border-border bg-card ring-1 ring-black/10 dark:ring-white/8 [box-shadow:var(--shadow-md)]">
                <HeroDashboardMockup className="rounded-2xl" />
              </div>
            </AnnotatedScreenshot>
          </ScrollReveal>

          {/* Non-causal disclaimer — mandatory under any hero metric or chart-like proof element.
              Placed outside metricsState conditionals so it renders in all states. */}
          <p className="mt-3 text-xs text-muted-foreground text-center">
            Measured on your own Google Search Console data before and after your edits. Search
            rankings move for many reasons; this shows the change, not its cause.
          </p>

          {/* Product Hunt badge tucked to the side, not stacked into the headline */}
          <div className="mt-4 flex justify-center lg:justify-end">
            <ProductHuntBadge />
          </div>
        </div>
      </div>

      {/* Live readout strip - three live-ticking metrics anchor the hero
          with proof-of-life rather than another stack of trust badges. */}
      {/* D1-A-005: removed backdrop-blur-sm — strip is opaque (bg-muted/20 on a solid bg); blur had no visual effect and caused Safari compositing overhead */}
      <div className="border-t border-border bg-muted/20">
        <div className="container py-6">
          {metricsState === 'full' ? (
            <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
              <LiveTickerMetric
                value={metrics.analyses_run}
                label="analyses run"
                align="left"
                drift
              />
              <LiveTickerMetric
                value={metrics.recommendations_generated}
                label="recommendations shipped"
                align="left"
                drift
              />
              <LiveTickerMetric
                value={metrics.sites_connected}
                label="WordPress sites connected"
                align="left"
              />
            </div>
          ) : metricsState === 'early' ? (
            <p className="font-data text-sm text-muted-foreground">
              <span className="live-dot mr-2 inline-block" aria-hidden="true" />~
              {Math.round(metrics.analyses_run / 10) * 10}+ analyses run ·{' '}
              {/* AB-02 + HOME-003: social-proof strip variant
                  MKT-PROOF-CTA: control variant updated to fact-based copy;
                  "0 marketing-fluff metrics" placeholder removed */}
              {socialProofVariant === 'treatment'
                ? 'GSC-verified · WordPress-native · before-after ROI on every fix'
                : 'read-only GSC access · credentials encrypted · correlational, not claimed'}
            </p>
          ) : (
            <p className="font-data text-sm text-muted-foreground">
              <span className="live-dot mr-2 inline-block" aria-hidden="true" />
              {/* AB-02 + HOME-003: social-proof strip variant
                  MKT-PROOF-CTA: control variant updated to fact-based copy;
                  "0 marketing-fluff metrics" placeholder removed */}
              {socialProofVariant === 'treatment'
                ? 'GSC-verified · WordPress-native · before-after ROI on every fix'
                : 'Founder-built · read-only GSC access · credentials encrypted at rest'}
            </p>
          )}
        </div>
      </div>
    </section>
  );
}