/**
 * Brand voice: "The WordPress SEO tool that closes the loop between analysis and proof."
 * Voice pillars: (1) Real data not estimates, (2) Included not add-on, (3) Measured not claimed
 * Tone: authoritative but accessible — not academic, not salesy
 */
import {
  ArrowRight,
  BarChart3,
  Bell,
  CheckCircle2,
  ChevronDown,
  FileSearch,
  FileText,
  Play,
  Search,
  Shield,
  Star,
  Target,
  TrendingUp,
  Users,
  X,
  Zap,
} from 'lucide-react';

import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';

import { Head, Link, usePage } from '@inertiajs/react';

import { LaunchPricingBadge } from '@/Components/billing/LaunchPricingBadge';
import { AiBanner } from '@/Components/marketing/AiBanner';
import { CompetitorComparisonTable } from '@/Components/marketing/CompetitorComparisonTable';
import { ContentIntelSection } from '@/Components/marketing/ContentIntelSection';
import { ExitIntentCapture } from '@/Components/marketing/ExitIntentCapture';
import { HeroDashboardMockup } from '@/Components/marketing/HeroDashboardMockup';
import { MarketingFooter } from '@/Components/marketing/MarketingFooter';
import { MarketingNav } from '@/Components/marketing/MarketingNav';
import { NewsletterSignup } from '@/Components/marketing/NewsletterSignup';
import { ProductHuntBadge } from '@/Components/marketing/ProductHuntBadge';
import { type Testimonial } from '@/Components/marketing/TestimonialCarousel';
import { TestimonialsSection } from '@/Components/marketing/TestimonialsSection';
import { TrustSection } from '@/Components/marketing/TrustSection';
// Below-the-fold mockups: lazy-loaded to reduce initial bundle and improve LCP
const BlankEditorMockup = React.lazy(() =>
  import('@/Components/marketing/BlankEditorMockup').then((m) => ({
    default: m.BlankEditorMockup,
  })),
);
const RankWizResultsMockup = React.lazy(() =>
  import('@/Components/marketing/RankWizResultsMockup').then((m) => ({
    default: m.RankWizResultsMockup,
  })),
);
const ManualRoiMockup = React.lazy(() =>
  import('@/Components/marketing/RoiTrackerMockup').then((m) => ({ default: m.ManualRoiMockup })),
);
const RoiTrackerMockup = React.lazy(() =>
  import('@/Components/marketing/RoiTrackerMockup').then((m) => ({ default: m.RoiTrackerMockup })),
);
const SerpEditorMockup = React.lazy(() =>
  import('@/Components/marketing/SerpEditorMockup').then((m) => ({ default: m.SerpEditorMockup })),
);
const SpreadsheetMockup = React.lazy(() =>
  import('@/Components/marketing/SpreadsheetMockup').then((m) => ({
    default: m.SpreadsheetMockup,
  })),
);
const ProductDemoAnimation = React.lazy(() =>
  import('@/Components/marketing/ProductDemoAnimation').then((m) => ({
    default: m.ProductDemoAnimation,
  })),
);
import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { Card, CardContent } from '@/Components/ui/card';
import { PageHeading } from '@/Components/ui/typography';
import { CTA_LABELS, CTA_SUBTITLES } from '@/config/cta-labels';
import { useScrollDepthTracking } from '@/hooks/useScrollDepthTracking';
import { trackEvent } from '@/lib/analytics';
import {
  CTA_CLICKED,
  COMMUNITY_LINK_CLICKED,
  PAGE_VIEWED,
  VIDEO_PLAYED,
} from '@/lib/event-catalog';
import { allFaqs, generalFaqs } from '@/lib/faqs';
import { formatNumber } from '@/lib/format';
import { softwareApplicationBase } from '@/lib/schema';
import { cn } from '@/lib/utils';
import { type PageProps } from '@/types';

interface SocialProofMetrics {
  analyses_run: number;
  recommendations_generated: number;
  sites_connected: number;
}

interface WelcomePricing {
  free_price: number;
  free_drafts: number;
  pro_price: number;
  pro_drafts: number;
  team_price: number;
  team_drafts: number;
}

interface WelcomeProps {
  can_login: boolean;
  can_register: boolean;
  metrics: SocialProofMetrics;
  is_product_hunt_referral: boolean;
  hero_badge_variant?: 'a' | 'b';
  testimonials?: Testimonial[];
  pricing?: WelcomePricing;
  launch_pricing?: boolean;
  active_trial_count?: number;
}

const features = [
  {
    icon: Search,
    title: 'Live GSC Data',
    description: 'Real-time Google Search Console integration with traffic analysis.',
  },
  {
    icon: Target,
    title: '12 Recommendation Types',
    description: 'From noindex fixes to full rewrites, ranked by impact.',
  },
  {
    icon: TrendingUp,
    title: 'Keyword Opportunities',
    description: 'Striking distance keywords, CTR gaps, and rising queries.',
  },
  {
    icon: FileSearch,
    title: 'SERP Content Scoring',
    description: 'Optimize word count, headings, and term coverage in real time.',
  },
  {
    icon: Zap,
    title: 'One-Click WordPress Publish',
    description: 'Publish AI drafts directly to WordPress. Batch operations included.',
  },
  {
    icon: BarChart3,
    title: 'ROI Tracking',
    description:
      'Measure clicks, CTR, and position changes at 7, 14, 30, and 90 days. Impact scores self-improve based on what actually works for your site.',
  },
  {
    icon: Bell,
    title: 'Traffic Anomaly Alerts',
    description: 'Automatic detection of sudden drops, sustained declines, and spikes.',
  },
  {
    icon: FileText,
    title: 'Shareable Reports',
    description: 'White-label reports with custom branding and shared links.',
  },
  {
    icon: Users,
    title: 'Team Collaboration',
    description: 'Role-based permissions with full audit trail of all changes.',
  },
];

const steps = [
  {
    number: '1',
    title: 'Connect',
    time: '~3 min',
    description:
      'Authorize Google Search Console and install the WordPress plugin. No server configuration needed.',
  },
  {
    number: '2',
    title: 'Analyze',
    time: '~2 min',
    description:
      'Pick a before/after time window. RankWiz identifies traffic changes and generates prioritized recommendations.',
  },
  {
    number: '3',
    title: 'Fix & Track',
    time: 'Ongoing',
    description:
      'Approve AI drafts, publish to WordPress, and watch ROI tracking confirm which changes drove results.',
  },
];

function buildPricingTiers(p?: WelcomePricing, activeTrialCount?: number) {
  const freePrice = p?.free_price ?? 0;
  const freeDrafts = p?.free_drafts ?? 5;
  const proPrice = p?.pro_price ?? 49;
  const proDrafts = p?.pro_drafts ?? 30;
  const teamPrice = p?.team_price ?? 99;

  const teamSubtext =
    activeTrialCount && activeTrialCount > 0
      ? `${activeTrialCount} teams starting free this month`
      : 'No card. Cancel anytime.';

  return [
    {
      key: 'free',
      name: 'Free',
      price: freePrice === 0 ? '$0' : `$${freePrice}`,
      period: '/month',
      cta: CTA_LABELS.FREE_NO_CARD,
      cta_subtext: undefined as string | undefined,
      features: [
        '1 WordPress site',
        `${freeDrafts} AI drafts/month`,
        `Full GSC traffic analysis — all 12 recommendation types, up to 25 pages`,
      ],
    },
    {
      key: 'pro',
      name: 'Pro',
      price: `$${proPrice}`,
      period: '/month',
      highlight: true,
      cta: CTA_LABELS.PRO_TRIAL,
      cta_subtext: 'No card. Cancel anytime.' as string | undefined,
      features: [
        'Up to 5 sites',
        `${proDrafts} AI drafts/month`,
        'Batch AI & SERP scoring',
        'Traffic anomaly alerts',
      ],
    },
    {
      key: 'team',
      name: 'Team',
      price: `$${teamPrice}`,
      period: '/mo per seat',
      cta: CTA_LABELS.TEAM_TRIAL,
      cta_subtext: teamSubtext as string | undefined,
      features: [
        'Unlimited sites, pages & AI drafts',
        'White-label reports & custom domain',
        'Team roles with full audit trail',
        'Bulk operations & client-ready ROI reports',
      ],
    },
  ];
}

// FAQs imported from shared source — also used for JSON-LD FAQPage schema
const faqs = generalFaqs;

type WelcomeComponent = ((props: WelcomeProps) => JSX.Element) & {
  disableGlobalUi?: boolean;
};

function formatExactMetric(value: number): string {
  if (value > 100) return formatNumber(value);
  if (value > 0) return `${value}+`;
  return '—';
}

function PositionPill({
  items,
}: {
  items: Array<{ type: 'rank' | 'keyword'; value: string; variant?: 'good' | 'bad' }>;
}) {
  return (
    <div className="flex items-center justify-center gap-3 py-8 flex-wrap">
      {items.map((item, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="text-muted-foreground">→</span>}
          {item.type === 'rank' ? (
            <span
              className={cn(
                'rounded-lg px-3 py-1.5 text-sm font-bold',
                item.variant === 'good'
                  ? 'bg-success/10 text-success'
                  : 'bg-destructive/10 text-destructive',
              )}
              aria-label={
                item.variant === 'good'
                  ? `Rank ${item.value} (strong)`
                  : `Rank ${item.value} (weak)`
              }
            >
              {item.value}
            </span>
          ) : (
            <span className="rounded-md border bg-muted px-3 py-1 text-sm text-muted-foreground font-medium">
              {item.value}
            </span>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

const Welcome: WelcomeComponent = ({
  can_login,
  can_register,
  metrics,
  is_product_hunt_referral,
  hero_badge_variant: heroBadgeVariant = 'a',
  testimonials = [],
  pricing,
  launch_pricing = false,
  active_trial_count,
}) => {
  const appName = import.meta.env.VITE_APP_NAME || 'RankWiz';
  const demoVideoUrl = import.meta.env.VITE_DEMO_VIDEO_URL as string | undefined;
  const { app_url } = usePage<PageProps>().props;
  const [openFaq, setOpenFaq] = useState<number | null>(0);
  const [isDemoModalOpen, setIsDemoModalOpen] = useState(false);
  const [showStickyCta, setShowStickyCta] = useState(false);

  const pricingTiers = useMemo(
    () => buildPricingTiers(pricing, active_trial_count),
    [pricing, active_trial_count],
  );

  // Tiered social proof: capability-proof (0-9), early-rounded (10-99), full animated (100+)
  const metricsState: 'capability' | 'early' | 'full' =
    metrics.analyses_run >= 100 ? 'full' : metrics.analyses_run >= 10 ? 'early' : 'capability';

  // Fix 4 (LAND-003): animated count-up counters triggered by IntersectionObserver
  const counterRef = useRef<HTMLDivElement>(null);
  const [countedValues, setCountedValues] = useState({ analyses: 0, recommendations: 0, sites: 0 });
  const [counterFired, setCounterFired] = useState(false);

  const animateCounters = useCallback(() => {
    const duration = 1400;
    const start = performance.now();
    const targets = {
      analyses: metrics.analyses_run,
      recommendations: metrics.recommendations_generated,
      sites: metrics.sites_connected,
    };
    const tick = (now: number) => {
      const progress = Math.min((now - start) / duration, 1);
      const ease = 1 - Math.pow(1 - progress, 3);
      setCountedValues({
        analyses: Math.round(targets.analyses * ease),
        recommendations: Math.round(targets.recommendations * ease),
        sites: Math.round(targets.sites * ease),
      });
      if (progress < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  }, [metrics]);

  useEffect(() => {
    if (metricsState !== 'full' || counterFired || !counterRef.current) return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setCounterFired(true);
          animateCounters();
          observer.disconnect();
        }
      },
      { threshold: 0.3 },
    );
    observer.observe(counterRef.current);
    return () => observer.disconnect();
  }, [metricsState, counterFired, animateCounters]);

  const heroCta = CTA_LABELS.FREE_ENTRY;

  // HOME-001: A/B badge variant — assigned server-side (WelcomeController) and passed as prop.
  // Session-persisted on the server for consistency across refreshes; no SSR hydration mismatch.
  const heroBadgeText =
    heroBadgeVariant === 'a'
      ? 'For WordPress SEO Professionals'
      : 'For SEO consultants, agencies, and site owners';

  useScrollDepthTracking('welcome');

  useEffect(() => {
    trackEvent(PAGE_VIEWED, { page: 'homepage', hero_badge_variant: heroBadgeVariant });
  }, [heroBadgeVariant]);

  // LAND-009: Show sticky CTA bar once visitor scrolls 60% of the page
  useEffect(() => {
    if (!can_register) return;
    const handleScroll = () => {
      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
      if (scrollHeight <= 0) return;
      const pct = (window.scrollY / scrollHeight) * 100;
      if (pct >= 60) {
        setShowStickyCta(true);
        window.removeEventListener('scroll', handleScroll);
      }
    };
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, [can_register]);

  return (
    <>
      {is_product_hunt_referral && (
        <div
          role="banner"
          className="bg-[#ff6154] text-white py-2.5 px-4 text-center text-sm font-medium"
        >
          <span className="inline-flex items-center gap-2">
            <Star className="h-4 w-4 fill-white" aria-hidden="true" />
            Welcome, Product Hunt visitors! Upvote us today and get started free — no credit card
            needed.
            <Star className="h-4 w-4 fill-white" aria-hidden="true" />
          </span>
        </div>
      )}

      <Head title={`${appName} — WordPress SEO Audit Tool | GSC Traffic Analysis`}>
        <link rel="canonical" href={`${app_url}/`} />
        <meta
          name="description"
          content="Connect Google Search Console (GSC). See which pages lost clicks. Get AI drafts ranked by impact. Publish to WordPress in one click. Track ROI on every change."
        />
        <meta
          property="og:title"
          content={`${appName} — The WordPress SEO tool that closes the loop between analysis and proof`}
        />
        <meta
          property="og:description"
          content="SEO ROI platform for WordPress that diagnoses traffic changes, generates AI drafts ranked by impact, publishes in one click, and proves what worked with before/after ROI tracking. Free to start."
        />
        <meta property="og:type" content="website" />
        <meta property="og:url" content={app_url} />
        <meta property="og:image" content={`${app_url}/og-image.png`} />
        <meta property="og:image:alt" content={`${appName} — SEO ROI Platform for WordPress`} />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@rankwiz_ai" />
        <meta
          name="twitter:title"
          content={`${appName} — The WordPress SEO tool that closes the loop between analysis and proof`}
        />
        <meta
          name="twitter:description"
          content="Connect Google Search Console (GSC). See which pages lost clicks. Get AI drafts ranked by impact. Publish to WordPress in one click. Track ROI on every change."
        />
        <meta name="twitter:image" content={`${app_url}/og-image.png`} />
        <meta name="twitter:image:width" content="1200" />
        <meta name="twitter:image:height" content="630" />
        <script type="application/ld+json">
          {JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'WebSite',
            '@id': `${app_url}/#website`,
            name: appName,
            url: app_url,
            description:
              'SEO ROI platform for WordPress that connects your real Google data to AI-powered fixes and proves they worked',
            potentialAction: {
              '@type': 'SearchAction',
              target: {
                '@type': 'EntryPoint',
                urlTemplate: `${app_url}/blog?search={search_term_string}`,
              },
              'query-input': 'required name=search_term_string',
            },
          })}
        </script>
        <script type="application/ld+json">
          {JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'Organization',
            '@id': `${app_url}/#organization`,
            name: appName,
            description:
              'SEO ROI platform for WordPress that connects your real Google data to AI-powered fixes and proves they worked',
            url: app_url,
            sameAs: ['https://twitter.com/rankwiz', 'https://github.com/rankwiz'],
          })}
        </script>
        <script type="application/ld+json">
          {JSON.stringify({
            '@context': 'https://schema.org',
            ...softwareApplicationBase(appName),
            description:
              'SEO ROI platform for WordPress with Google Search Console integration, AI draft generation, ROI tracking, and team collaboration.',
            offers: {
              '@type': 'AggregateOffer',
              lowPrice: '0',
              highPrice: String(pricing?.team_price ?? 99),
              priceCurrency: 'USD',
              offerCount: '3',
              offers: pricingTiers.map((tier) => ({
                '@type': 'Offer' as const,
                name: tier.name,
                price: tier.price.replace('$', ''),
                priceCurrency: 'USD',
              })),
            },
            ...(testimonials.length > 0 &&
            testimonials.every((t) => typeof t.rating === 'number' && t.rating > 0)
              ? {
                  aggregateRating: {
                    '@type': 'AggregateRating',
                    ratingValue: parseFloat(
                      (
                        testimonials.reduce((sum, t) => sum + (Number(t.rating) || 0), 0) /
                        testimonials.length
                      ).toFixed(1),
                    ),
                    reviewCount: testimonials.length,
                    bestRating: 5,
                    worstRating: 1,
                  },
                }
              : {}),
          })}
        </script>
        <script type="application/ld+json">
          {JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'FAQPage',
            mainEntity: allFaqs.map((faq) => ({
              '@type': 'Question',
              name: faq.question,
              acceptedAnswer: {
                '@type': 'Answer',
                text: faq.answer,
              },
            })),
          })}
        </script>
        <script type="application/ld+json">
          {JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'WebPage',
            '@id': `${app_url}/#webpage`,
            url: app_url,
            name: `${appName} — The WordPress SEO tool that closes the loop between analysis and proof`,
            description:
              'SEO ROI platform for WordPress. Connect Google Search Console, diagnose traffic changes, generate AI content fixes, publish to WordPress, and track ROI on every change.',
            isPartOf: {
              '@type': 'WebSite',
              '@id': `${app_url}/#website`,
              name: appName,
              url: app_url,
            },
            about: {
              '@type': 'SoftwareApplication',
              name: appName,
            },
            speakable: {
              '@type': 'SpeakableSpecification',
              cssSelector: ['h1', 'h2', '[data-speakable]'],
            },
          })}
        </script>
        <script type="application/ld+json">
          {JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'BreadcrumbList',
            itemListElement: [
              {
                '@type': 'ListItem',
                position: 1,
                name: 'Home',
                item: app_url,
              },
            ],
          })}
        </script>
        <script type="application/ld+json">
          {JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'ItemList',
            name: `${appName} Key Features`,
            description: 'Core features of the RankWiz SEO ROI platform for WordPress',
            itemListElement: features.map((feature, index) => ({
              '@type': 'ListItem',
              position: index + 1,
              name: feature.title,
              description: feature.description,
            })),
          })}
        </script>
      </Head>

      <div className="min-h-screen bg-linear-to-b from-background to-muted/30">
        <MarketingNav canLogin={can_login} canRegister={can_register} />

        <main id="main-content">
          {/* 1. Hero Section */}
          <section className="container py-24 text-center">
            <div className="mx-auto max-w-3xl space-y-6">
              <div className="animate-fade-in-up inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/5 px-4 py-2 text-sm font-semibold text-primary">
                <Shield className="h-4 w-4" aria-hidden="true" />
                {heroBadgeText}
              </div>

              <PageHeading className="animate-fade-in-up animate-delay-100 text-4xl sm:text-5xl md:text-6xl">
                The WordPress SEO tool that{' '}
                <span className="text-primary">closes the loop between analysis and proof</span>
              </PageHeading>

              <p className="animate-fade-in-up animate-delay-100 mx-auto max-w-2xl text-lg text-muted-foreground md:text-xl">
                RankWiz connects to your Google Search Console, spots what&rsquo;s declining, writes
                AI-powered fixes, and tracks whether they worked — so you know exactly what moved
                the needle.
              </p>

              <div className="animate-fade-in-up animate-delay-200 flex flex-wrap items-center justify-center gap-4 pt-4">
                {can_register && (
                  <Button size="lg" className="min-h-12" asChild>
                    <Link
                      href={route('register')}
                      onClick={() =>
                        trackEvent(CTA_CLICKED, {
                          cta_text: heroCta,
                          cta_location: 'hero',
                          page: 'homepage',
                          hero_badge_variant: heroBadgeVariant,
                        })
                      }
                    >
                      {heroCta}
                      <ArrowRight className="ml-2 h-4 w-4" aria-hidden="true" />
                    </Link>
                  </Button>
                )}
                <Button
                  variant="ghost"
                  size="sm"
                  asChild
                  onClick={() =>
                    trackEvent(CTA_CLICKED, {
                      cta_type: 'sample_analysis',
                      cta_location: 'hero',
                      page: 'homepage',
                      hero_badge_variant: heroBadgeVariant,
                    })
                  }
                >
                  <Link
                    href={route('free-audit')}
                    className="text-muted-foreground hover:text-foreground"
                  >
                    {CTA_LABELS.SECONDARY}
                  </Link>
                </Button>
              </div>

              {demoVideoUrl && (
                <div className="animate-fade-in-up animate-delay-200 flex justify-center">
                  <button
                    type="button"
                    className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors group"
                    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 h-7 w-7 items-center justify-center rounded-full border border-border bg-background shadow-sm group-hover:border-primary/50 transition-colors">
                      <Play className="h-3 w-3 fill-current" aria-hidden="true" />
                    </span>
                    Watch 90-sec demo
                  </button>
                </div>
              )}

              <div className="mt-4">
                <ProductHuntBadge />
              </div>

              {can_register && (
                <p className="animate-fade-in-up animate-delay-200 text-sm text-muted-foreground">
                  See which pages lost traffic in 10 minutes
                </p>
              )}

              {/* Fix 7 (LAND-004): persona-specific links */}
              <div className="animate-fade-in-up animate-delay-200 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-muted-foreground">
                <Link
                  href={route('use-cases.agencies')}
                  className="underline underline-offset-4 hover:text-foreground"
                  onClick={() =>
                    trackEvent(CTA_CLICKED, {
                      cta_type: 'persona_agency',
                      cta_location: 'hero',
                      page: 'homepage',
                    })
                  }
                >
                  For agencies →
                </Link>
                <Link
                  href={route('use-cases.bloggers')}
                  className="underline underline-offset-4 hover:text-foreground"
                  onClick={() =>
                    trackEvent(CTA_CLICKED, {
                      cta_type: 'persona_blogger',
                      cta_location: 'hero',
                      page: 'homepage',
                    })
                  }
                >
                  For bloggers →
                </Link>
                <Link
                  href={route('use-cases.ecommerce')}
                  className="underline underline-offset-4 hover:text-foreground"
                  onClick={() =>
                    trackEvent(CTA_CLICKED, {
                      cta_type: 'persona_ecommerce',
                      cta_location: 'hero',
                      page: 'homepage',
                    })
                  }
                >
                  For ecommerce →
                </Link>
                <Link
                  href={route('use-cases.consultants')}
                  className="underline underline-offset-4 hover:text-foreground"
                  onClick={() =>
                    trackEvent(CTA_CLICKED, {
                      cta_type: 'persona_consultant',
                      cta_location: 'hero',
                      page: 'homepage',
                    })
                  }
                >
                  For consultants →
                </Link>
              </div>

              {/* Social proof metrics — tiered by data maturity (LAND-004) */}
              {metricsState === 'full' && (
                <p className="animate-fade-in-up animate-delay-200 mx-auto max-w-md text-sm text-muted-foreground">
                  {formatExactMetric(metrics.analyses_run)} analyses run &middot;{' '}
                  {formatExactMetric(metrics.recommendations_generated)} recommendations generated
                </p>
              )}
              {metricsState === 'early' && (
                <p className="animate-fade-in-up animate-delay-200 mx-auto max-w-md text-sm text-muted-foreground">
                  ~{Math.round(metrics.analyses_run / 10) * 10}+ analyses run &middot; growing fast
                </p>
              )}
              {metricsState === 'capability' && (
                <p className="animate-fade-in-up animate-delay-200 mx-auto max-w-md text-sm text-muted-foreground">
                  Connects GSC + WordPress &middot; AI-powered fixes &middot; tracks ROI
                </p>
              )}

              {/* Trust Signals — Three checks */}
              <div className="animate-fade-in-up animate-delay-200 flex flex-wrap items-center justify-center gap-8 pt-4">
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="h-5 w-5 text-green-600" aria-hidden="true" />
                  <span className="text-sm text-muted-foreground">No credit card required</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="h-5 w-5 text-green-600" aria-hidden="true" />
                  <span className="text-sm text-muted-foreground">5-minute setup</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="h-5 w-5 text-green-600" aria-hidden="true" />
                  <span className="text-sm text-muted-foreground">AI drafts included free</span>
                </div>
              </div>

              {/* Integration trust signals — addresses "will it work with my setup?" (LAND-008) */}
              <div className="animate-fade-in-up animate-delay-200 flex flex-wrap items-center justify-center gap-x-3 gap-y-2 pt-2">
                <span className="text-xs text-muted-foreground/70 font-medium tracking-wide uppercase">
                  Works with:
                </span>
                <span className="inline-flex items-center rounded-full border border-border bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
                  Google Search Console
                </span>
                <span className="inline-flex items-center rounded-full border border-border bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
                  WordPress
                </span>
                <span className="inline-flex items-center rounded-full border border-border bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
                  OpenAI
                </span>
                <span className="inline-flex items-center rounded-full border border-border bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
                  Yoast SEO
                </span>
                <span className="inline-flex items-center rounded-full border border-border bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
                  Rank Math
                </span>
              </div>

              {/* Fix 3 (LAND-002): Animated product demo — lazy-loaded, above-fold alternative to static mockup */}
              <Suspense fallback={null}>
                <div className="mt-10 mx-auto w-full max-w-lg">
                  <ProductDemoAnimation />
                </div>
              </Suspense>

              {/* Hero visual — product dashboard preview */}
              <div className="mt-8 relative">
                <div
                  className="absolute -inset-6 rounded-3xl bg-gradient-to-b from-primary/8 to-transparent pointer-events-none"
                  aria-hidden="true"
                />
                <HeroDashboardMockup className="relative mx-auto max-w-2xl" />
              </div>
            </div>
          </section>

          {/* 1b. Brand differentiators — three pillars (Real data / Included / Measured) */}
          <section className="border-t bg-muted/30 py-10">
            <div className="container mx-auto max-w-4xl">
              <div className="grid gap-8 md:grid-cols-3 text-center">
                <div className="space-y-1.5">
                  <p className="font-semibold text-foreground">Real data, not estimates</p>
                  <p className="text-sm text-muted-foreground">
                    Pulled directly from Google Search Console — your actual clicks, impressions,
                    and positions. No sampling or third-party proxies.
                  </p>
                </div>
                <div className="space-y-1.5">
                  <p className="font-semibold text-foreground">Included, not add-on</p>
                  <p className="text-sm text-muted-foreground">
                    AI drafts, ROI tracking, and WordPress publishing ship in every plan — not
                    locked behind an upsell tier.
                  </p>
                </div>
                <div className="space-y-1.5">
                  <p className="font-semibold text-foreground">Measured, not claimed</p>
                  <p className="text-sm text-muted-foreground">
                    Every recommendation tracks before/after clicks, CTR, and position at 7, 14, and
                    30 days so you see exactly what moved.
                  </p>
                </div>
              </div>
            </div>
          </section>

          {/* 2. Before/After Comparison Section */}
          <section className="container py-24 border-t">
            <div className="mx-auto max-w-6xl">
              <h2 className="mb-4 text-center text-3xl font-bold">
                The old way vs. the RankWiz way
              </h2>
              <p className="mb-16 text-center text-lg text-muted-foreground max-w-2xl mx-auto">
                Three things that used to take hours — now happen in minutes.
              </p>

              {/* Row 1: Spreadsheet → RankWiz Results */}
              <div className="mb-12">
                <h3 className="mb-4 text-center text-xl font-semibold">
                  Diagnosing what changed in your traffic
                </h3>
                <PositionPill
                  items={[
                    { type: 'rank', value: '#4', variant: 'bad' },
                    { type: 'keyword', value: 'best seo plugins' },
                    { type: 'rank', value: '#18', variant: 'bad' },
                  ]}
                />
                <div className="grid gap-6 md:grid-cols-2">
                  <div className="rounded-lg border bg-red-50 p-6">
                    <Suspense fallback={<div className="h-48" />}>
                      <SpreadsheetMockup />
                    </Suspense>
                  </div>
                  <div className="rounded-lg border bg-green-50 p-6">
                    <Suspense fallback={<div className="h-48" />}>
                      <RankWizResultsMockup />
                    </Suspense>
                  </div>
                </div>
              </div>

              {/* Row 2: Blank Editor → SERP Editor */}
              <div className="mb-12">
                <h3 className="mb-4 text-center text-xl font-semibold">
                  Writing content that actually ranks
                </h3>
                <PositionPill
                  items={[
                    { type: 'keyword', value: 'best seo plugins' },
                    { type: 'rank', value: '#14', variant: 'good' },
                  ]}
                />
                <div className="grid gap-6 md:grid-cols-2">
                  <div className="rounded-lg border bg-red-50 p-6">
                    <Suspense fallback={<div className="h-48" />}>
                      <BlankEditorMockup />
                    </Suspense>
                  </div>
                  <div className="rounded-lg border bg-green-50 p-6">
                    <Suspense fallback={<div className="h-48" />}>
                      <SerpEditorMockup />
                    </Suspense>
                  </div>
                </div>
              </div>

              {/* Row 3: Manual ROI → ROI Tracker */}
              <div className="mb-12">
                <h3 className="mb-4 text-center text-xl font-semibold">
                  Proving your SEO work actually moved the needle
                </h3>
                <PositionPill
                  items={[
                    { type: 'rank', value: '#14', variant: 'bad' },
                    { type: 'keyword', value: 'after content rewrite' },
                    { type: 'rank', value: '#5', variant: 'good' },
                  ]}
                />
                <div className="grid gap-6 md:grid-cols-2">
                  <div className="rounded-lg border bg-red-50 p-6">
                    <Suspense fallback={<div className="h-48" />}>
                      <ManualRoiMockup />
                    </Suspense>
                  </div>
                  <div className="rounded-lg border bg-green-50 p-6">
                    <Suspense fallback={<div className="h-48" />}>
                      <RoiTrackerMockup />
                    </Suspense>
                  </div>
                </div>
              </div>

              {/* Result Summary */}
              <div className="grid gap-6 md:grid-cols-2 mt-12">
                <Card className="border-red-200 bg-red-50">
                  <CardContent className="p-6 text-center">
                    <p className="text-sm text-red-600 font-medium mb-2">The Old Way</p>
                    <p className="text-3xl font-bold text-red-700">4+ hrs</p>
                    <p className="text-xs text-red-600 mt-2">
                      Spreadsheets, guessing, manual tracking
                    </p>
                  </CardContent>
                </Card>
                <Card className="border-green-200 bg-green-50">
                  <CardContent className="p-6 text-center">
                    <p className="text-sm text-green-600 font-medium mb-2">The RankWiz Way</p>
                    <p className="text-3xl font-bold text-green-700">Auto-tracked</p>
                    <p className="text-xs text-green-600 mt-2">
                      ROI measured from your own GSC data — clicks, position, and CTR before &amp;
                      after every change
                    </p>
                  </CardContent>
                </Card>
              </div>

              {/* Secondary CTA — re-engage scrollers who passed the hero */}
              {can_register && (
                <div className="mt-12 text-center">
                  <Button variant="outline" size="lg" asChild>
                    <Link
                      href={route('free-audit')}
                      onClick={() =>
                        trackEvent(CTA_CLICKED, {
                          cta_text: CTA_LABELS.SECONDARY,
                          cta_location: 'before_after_bottom',
                          page: 'homepage',
                        })
                      }
                    >
                      {CTA_LABELS.SECONDARY}
                    </Link>
                  </Button>
                </div>
              )}
            </div>
          </section>

          {/* 3. AI Banner */}
          <section className="container py-24 border-t">
            <AiBanner
              freeDrafts={pricing?.free_drafts}
              proDrafts={pricing?.pro_drafts}
              teamDrafts={pricing?.team_drafts}
            />
          </section>

          {/* 4. Content Intelligence Section */}
          <section className="container py-24 border-t">
            <ContentIntelSection />
          </section>

          {/* 5. Feature Highlights (9 features) */}
          <section className="container border-t py-24">
            <div className="mx-auto max-w-5xl">
              <p className="mb-3 text-center text-sm font-semibold uppercase tracking-wider text-primary">
                The WordPress SEO tool that closes the loop between analysis and proof
              </p>
              <h2 className="mb-4 text-center text-3xl font-bold">
                From Diagnosis to Fix to Proof — in One Tool
              </h2>
              <p className="mb-12 text-center text-lg text-muted-foreground max-w-2xl mx-auto">
                Not another AI writer. A diagnostic workflow that tells you what to fix and proves
                it worked.
              </p>
              <div className="grid gap-8 md:grid-cols-3">
                {features.map((feature) => (
                  <div
                    key={feature.title}
                    className="rounded-lg border bg-card p-6 text-card-foreground"
                  >
                    <div className="mb-3 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                      <feature.icon className="h-5 w-5 text-primary" aria-hidden="true" />
                    </div>
                    <h3 className="mb-2 font-semibold">{feature.title}</h3>
                    <p className="text-sm text-muted-foreground">{feature.description}</p>
                  </div>
                ))}
              </div>
            </div>
          </section>

          {/* 5b. Positioning callout — addresses "I already have Ahrefs/Semrush" objection */}
          <section className="container py-8 pb-16">
            <div className="mx-auto max-w-3xl rounded-lg border bg-muted/40 px-6 py-5 text-center">
              <p className="text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-2">
                Not a replacement for your existing tools
              </p>
              <p className="text-base text-foreground">
                Use <span className="font-semibold">Ahrefs</span> for backlinks.{' '}
                <span className="font-semibold">Semrush</span> for competitors.{' '}
                <span className="font-semibold">RankWiz</span> for the action: diagnose, fix, and
                prove.
              </p>
              <p className="mt-2 text-sm text-muted-foreground">
                RankWiz handles the GSC → Fix → Proof loop that Surfer and Semrush skip.
              </p>
            </div>
          </section>

          {/* 6. Competitor Comparison Table */}
          <section className="container border-t py-24">
            <div className="mx-auto max-w-5xl">
              <CompetitorComparisonTable proPrice={pricing?.pro_price ?? 49} />
            </div>
          </section>

          {/* 7. How It Works (3 steps) */}
          <section id="how-it-works" className="container border-t py-24">
            <div className="mx-auto max-w-4xl">
              <h2 className="mb-4 text-center text-3xl font-bold">
                Set Up in 5 Minutes. First Results in 10.
              </h2>
              <p className="mb-12 text-center text-lg text-muted-foreground max-w-2xl mx-auto">
                No onboarding calls. No complex configuration. Connect, analyze, fix.
              </p>
              <div className="grid gap-8 md:grid-cols-3">
                {steps.map((step, index) => (
                  <div
                    key={step.number}
                    className="relative flex flex-col items-center text-center gap-3"
                  >
                    {index < steps.length - 1 && (
                      <div
                        className="absolute left-[calc(50%+24px)] top-6 hidden h-px w-[calc(100%-48px)] border-t border-dashed border-muted-foreground/30 md:block"
                        aria-hidden="true"
                      />
                    )}
                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground text-lg font-bold">
                      {step.number}
                    </div>
                    <h3 className="font-semibold">{step.title}</h3>
                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
                      <Shield className="h-3 w-3" aria-hidden="true" />
                      {step.time}
                    </div>
                    <p className="text-sm text-muted-foreground">{step.description}</p>
                  </div>
                ))}
              </div>
              {can_register && (
                <div className="mt-10 text-center">
                  <Button 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 h-4 w-4" aria-hidden="true" />
                    </Link>
                  </Button>
                </div>
              )}
            </div>
          </section>

          {/* 8. Pricing */}
          <section className="container border-t py-24">
            <div className="mx-auto max-w-4xl">
              <h2 className="mb-4 text-center text-3xl font-bold">
                Start Free. Upgrade When You Need More.
              </h2>
              <p className="mb-12 text-center text-lg text-muted-foreground max-w-2xl mx-auto">
                All plans include GSC integration, WordPress publishing, content intelligence, and
                bundled AI drafts.
              </p>
              <div className="grid gap-6 md:grid-cols-3">
                {pricingTiers.map((tier) => (
                  <Card
                    key={tier.name}
                    className={tier.highlight ? 'border-primary shadow-md' : ''}
                  >
                    <CardContent className="p-6">
                      <div className="mb-4 flex items-center justify-between">
                        <h3 className="text-lg font-semibold">{tier.name}</h3>
                        {tier.highlight && <Badge variant="default">Most Popular</Badge>}
                      </div>
                      <div className="mb-4">
                        <span className="text-3xl font-bold">{tier.price}</span>
                        <span className="text-sm text-muted-foreground">{tier.period}</span>
                      </div>
                      {launch_pricing && tier.highlight && (
                        <LaunchPricingBadge className="mb-4" />
                      )}
                      <ul className="mb-6 space-y-2 text-sm">
                        {tier.features.map((feature) => (
                          <li
                            key={feature}
                            className="flex items-center gap-2 text-muted-foreground"
                          >
                            <CheckCircle2
                              className="h-4 w-4 text-primary shrink-0"
                              aria-hidden="true"
                            />
                            {feature}
                          </li>
                        ))}
                      </ul>
                      {can_register && (
                        <>
                          <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 text-xs text-muted-foreground">
                              {tier.cta_subtext}
                            </p>
                          )}
                        </>
                      )}
                    </CardContent>
                  </Card>
                ))}
              </div>
              <div className="mt-8 text-center">
                <Button variant="outline" size="lg" asChild>
                  <Link href="/pricing">Compare All Plans</Link>
                </Button>
                <p className="mt-4 text-sm text-muted-foreground">
                  Need custom limits, SSO, or dedicated support?{' '}
                  <a
                    href="mailto:enterprise@rankwiz.app"
                    className="underline underline-offset-4 hover:text-foreground"
                  >
                    Talk to us about Enterprise
                  </a>
                  .
                </p>
              </div>
            </div>
          </section>

          {/* 8a. Testimonials */}
          <TestimonialsSection testimonials={testimonials} />

          {/* 8b. Social proof counters — tiered by data maturity (LAND-004) */}
          {metricsState !== 'capability' && (
            <section className="border-t py-16" aria-label="Usage statistics">
              <div className="container">
                <div
                  ref={counterRef}
                  className="mx-auto grid max-w-3xl grid-cols-3 gap-8 text-center"
                >
                  <div>
                    <p className="text-4xl font-bold tabular-nums">
                      {metricsState === 'full'
                        ? `${formatNumber(countedValues.analyses)}+`
                        : `~${Math.round(metrics.analyses_run / 10) * 10}+`}
                    </p>
                    <p className="mt-1 text-sm text-muted-foreground">SEO analyses run</p>
                  </div>
                  <div>
                    <p className="text-4xl font-bold tabular-nums">
                      {metricsState === 'full'
                        ? `${formatNumber(countedValues.recommendations)}+`
                        : `~${Math.round(metrics.recommendations_generated / 10) * 10}+`}
                    </p>
                    <p className="mt-1 text-sm text-muted-foreground">AI fixes generated</p>
                  </div>
                  <div>
                    <p className="text-4xl font-bold tabular-nums">
                      {metricsState === 'full'
                        ? `${formatNumber(countedValues.sites)}+`
                        : `~${Math.round(metrics.sites_connected / 10) * 10}+`}
                    </p>
                    <p className="mt-1 text-sm text-muted-foreground">WordPress sites connected</p>
                  </div>
                </div>
              </div>
            </section>
          )}

          {/* 9. Trust Section */}
          <section className="container border-t py-24">
            <TrustSection />
          </section>

          {/* 10. FAQ Section */}
          <section className="container border-t py-24">
            <div className="mx-auto max-w-3xl">
              <h2 className="mb-8 text-center text-3xl font-bold">Frequently Asked Questions</h2>
              <div className="space-y-3">
                {faqs.map((faq, index) => (
                  <div key={index} className="rounded-lg border bg-card">
                    <button
                      type="button"
                      className="flex w-full items-center justify-between rounded-lg p-4 text-left hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                      onClick={() => setOpenFaq(openFaq === index ? null : index)}
                      aria-expanded={openFaq === index ? true : false}
                    >
                      <h3 className="font-semibold pr-4">{faq.question}</h3>
                      <ChevronDown
                        className={`h-4 w-4 shrink-0 transition-transform ${openFaq === index ? 'rotate-180' : ''}`}
                        aria-hidden="true"
                      />
                    </button>
                    {openFaq === index && (
                      <div className="border-t px-4 pb-4 pt-3 text-sm text-muted-foreground">
                        {faq.answer}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </section>

          {/* 11. Final CTA */}
          <section className="container border-t py-24">
            <div className="mx-auto max-w-3xl text-center">
              <div className="rounded-2xl bg-primary/5 p-12">
                <TrendingUp className="mx-auto mb-4 h-10 w-10 text-primary" aria-hidden="true" />
                <h2 className="text-3xl font-bold">
                  Your GSC Data Is Waiting. Turn It Into Results.
                </h2>
                <p className="mt-4 text-lg text-muted-foreground">
                  5 minutes to connect. First insights in under 10. Connect GSC, see which pages
                  need attention, generate AI drafts, publish to WordPress, and track every result.
                </p>
                {can_register && (
                  <div className="mt-8">
                    <Button size="lg" asChild>
                      <Link
                        href={route('register')}
                        onClick={() =>
                          trackEvent(CTA_CLICKED, {
                            cta_text: heroCta,
                            cta_location: 'bottom_cta',
                            page: 'homepage',
                          })
                        }
                      >
                        {heroCta}
                        <ArrowRight className="ml-2 h-4 w-4" aria-hidden="true" />
                      </Link>
                    </Button>
                    <p className="mt-3 text-sm text-muted-foreground">
                      {CTA_SUBTITLES.NO_CREDIT_CARD}. Real data in 2 minutes.
                    </p>
                  </div>
                )}
              </div>
            </div>
          </section>
        </main>

        {/* Newsletter signup */}
        <section className="container border-t py-16">
          <div className="mx-auto max-w-lg">
            <NewsletterSignup />
          </div>
        </section>

        {/* Community touchpoints — WordPress SEO practitioners are active in these channels */}
        <section className="container border-t py-12">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-lg font-semibold mb-2">Join the conversation</h2>
            <p className="text-sm text-muted-foreground mb-6">
              Discuss SEO strategy with practitioners in the communities where WordPress SEOs hang
              out.
            </p>
            <div className="flex flex-wrap justify-center gap-3">
              <a
                href="https://www.reddit.com/r/SEO/"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-muted-foreground hover:border-primary/50 hover:text-foreground transition-colors"
                onClick={() => trackEvent(COMMUNITY_LINK_CLICKED, { community: 'reddit_seo' })}
              >
                r/SEO
              </a>
              <a
                href="https://www.reddit.com/r/Wordpress/"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-muted-foreground hover:border-primary/50 hover:text-foreground transition-colors"
                onClick={() =>
                  trackEvent(COMMUNITY_LINK_CLICKED, { community: 'reddit_wordpress' })
                }
              >
                r/Wordpress
              </a>
              <a
                href="https://wordpress.org/support/forum/how-to-and-troubleshooting/"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-muted-foreground hover:border-primary/50 hover:text-foreground transition-colors"
                onClick={() =>
                  trackEvent(COMMUNITY_LINK_CLICKED, { community: 'wordpress_org_forums' })
                }
              >
                WordPress.org Forums
              </a>
              <a
                href="https://twitter.com/rankwiz_ai"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-muted-foreground hover:border-primary/50 hover:text-foreground transition-colors"
                onClick={() => trackEvent(COMMUNITY_LINK_CLICKED, { community: 'twitter' })}
              >
                Follow @rankwiz_ai
              </a>
            </div>
          </div>
        </section>

        <MarketingFooter />
      </div>

      {/* Demo video modal — lazy-loaded iframe, no autoplay, no inline embed (no LCP impact) */}
      {isDemoModalOpen && demoVideoUrl && (
        <div
          role="dialog"
          aria-modal="true"
          aria-label="Product demo video"
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 p-0 sm:p-6"
          onClick={() => {
            setIsDemoModalOpen(false);
            trackEvent(VIDEO_PLAYED, { action: 'dismissed', cta_location: 'hero' });
          }}
        >
          <div
            className="relative w-full h-full sm:h-auto sm:max-w-3xl sm:rounded-lg overflow-hidden bg-black"
            onClick={(e) => e.stopPropagation()}
          >
            <button
              type="button"
              className="absolute top-3 right-3 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white hover:bg-black/80 transition-colors"
              onClick={() => {
                setIsDemoModalOpen(false);
                trackEvent(VIDEO_PLAYED, { action: 'dismissed', cta_location: 'hero' });
              }}
              aria-label="Close demo video"
            >
              <X className="h-4 w-4" aria-hidden="true" />
            </button>
            <div className="relative w-full" style={{ paddingBottom: '56.25%' }}>
              <iframe
                className="absolute inset-0 h-full w-full"
                src={demoVideoUrl}
                title="RankWiz 90-second product demo"
                allow="autoplay; fullscreen; picture-in-picture"
                allowFullScreen
                onLoad={() => trackEvent(VIDEO_PLAYED, { action: 'loaded', cta_location: 'hero' })}
              />
            </div>
          </div>
        </div>
      )}

      {/* Fix 10 (LAND-005): Exit-intent email capture — once per session, desktop only */}
      {can_register && <ExitIntentCapture />}

      {/* LAND-009: Sticky bottom CTA bar — shown after 60% scroll depth, unregistered visitors only */}
      {can_register && showStickyCta && (
        <div
          className="fixed bottom-0 left-0 right-0 z-40 border-t bg-background/95 backdrop-blur-sm shadow-lg"
          role="complementary"
          aria-label="Get started prompt"
        >
          <div className="container flex items-center justify-between gap-4 py-3">
            <p className="text-sm font-medium text-foreground hidden sm:block">
              Ready to turn your GSC data into results?
            </p>
            <div className="flex items-center gap-3 ml-auto">
              <Button size="sm" asChild>
                <Link
                  href={route('register')}
                  onClick={() =>
                    trackEvent(CTA_CLICKED, {
                      cta_text: CTA_LABELS.FREE_NO_CARD,
                      cta_location: 'sticky_bottom',
                      page: 'homepage',
                    })
                  }
                >
                  {CTA_LABELS.FREE_NO_CARD}
                  <ArrowRight className="ml-1.5 h-3.5 w-3.5" aria-hidden="true" />
                </Link>
              </Button>
              <button
                type="button"
                className="text-muted-foreground hover:text-foreground transition-colors"
                onClick={() => setShowStickyCta(false)}
                aria-label="Dismiss"
              >
                <X className="h-4 w-4" aria-hidden="true" />
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

Welcome.disableGlobalUi = true;

export default Welcome;