/**
 * WelcomeBeforeAfterSection — "Three things that used to take hours" (DEBT-005 extraction).
 *
 * Before/after three-row comparison: Diagnose · Fix · Prove.
 * Extracted from Welcome.tsx verbatim (Wave-2 content preserved, move not rewrite).
 */
import React, { Suspense } from 'react';

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

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

// Below-the-fold mockups: lazy-loaded to preserve 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,
  })),
);

export interface WelcomeBeforeAfterSectionProps {
  canRegister: boolean;
}

export function WelcomeBeforeAfterSection({ canRegister }: WelcomeBeforeAfterSectionProps) {
  return (
    <section className="border-b border-border bg-background">
      <div className="container max-w-6xl py-16 md:py-20">
        {/* D2-A-004: replaced "in minutes" speed cliché with a concrete, verifiable outcome */}
        <SectionHeader
          eyebrow="The product, in one page"
          title="Three things that used to take hours."
          emphasis="Now happen in one GSC sync."
          description="Diagnose what changed, fix it with AI drafts grounded in real SERPs, and prove what worked. Measured against your own GSC data."
          align="left"
          className="mb-14"
        />

        {/* Compact terminal proof - what an operator's flow actually looks like. */}
        <ScrollReveal className="mb-16 max-w-2xl">
          <TerminalCallout
            title="rankwiz · operator workflow"
            lines={[
              { kind: 'cmd', text: 'rankwiz connect gsc --site=example.com' },
              { kind: 'out', text: '✓ verified · syncing 28-day window' },
              { kind: 'cmd', text: 'rankwiz diff' },
              {
                kind: 'out',
                text: '✓ 4 winners · 7 losers · 3 cannibalized · 2 striking-distance',
              },
              { kind: 'cmd', text: 'rankwiz fix --priority=high' },
              {
                kind: 'note',
                text: 'next: review 3 AI drafts → publish → ROI tracked at 7d, 14d, 30d',
              },
            ]}
          />
        </ScrollReveal>

        {/* Row 1: Diagnose */}
        <ScrollReveal className="mb-16 grid gap-px overflow-hidden rounded-2xl border border-border bg-border md:grid-cols-2">
          <div className="bg-card p-6 md:p-8">
            <span className="font-data text-xs font-semibold tracking-[0.18em] text-muted-foreground/70">
              01 · BEFORE
            </span>
            <h3 className="mt-2 text-xl font-semibold text-foreground">
              Diagnosing what changed
            </h3>
            <p className="mt-1 text-sm text-muted-foreground">
              Export, pivot, sort, guess. By the time you find the page, the traffic's already gone.
            </p>
            <div className="mt-6">
              <Suspense fallback={<Skeleton className="h-48 w-full" />}>
                <SpreadsheetMockup />
              </Suspense>
            </div>
          </div>
          <div className="relative bg-card p-6 md:p-8">
            <div
              className="absolute inset-0 bg-linear-to-br from-primary/5 via-transparent to-success/5"
              aria-hidden="true"
            />
            <div className="relative">
              <span className="font-data text-xs font-semibold tracking-[0.18em] text-primary">
                01 · WITH RANKWIZ
              </span>
              <h3 className="mt-2 text-xl font-semibold text-foreground">
                Surfaced and ranked, automatically
              </h3>
              <p className="mt-1 text-sm text-muted-foreground">
                Winners, losers, and the queries driving the change, sorted by impact. Not
                alphabetically.
              </p>
              <div className="mt-6">
                <Suspense fallback={<Skeleton className="h-48 w-full" />}>
                  <RankWizResultsMockup />
                </Suspense>
              </div>
            </div>
          </div>
        </ScrollReveal>

        {/* Row 2: Write */}
        <ScrollReveal className="mb-16 grid gap-px overflow-hidden rounded-2xl border border-border bg-border md:grid-cols-2">
          <div className="bg-card p-6 md:p-8">
            <span className="font-data text-xs font-semibold tracking-[0.18em] text-muted-foreground/70">
              02 · BEFORE
            </span>
            <h3 className="mt-2 text-xl font-semibold text-foreground">
              Writing content that "feels right"
            </h3>
            <p className="mt-1 text-sm text-muted-foreground">
              Blank editor. No idea what the top pages cover. Pray Google rewards effort.
            </p>
            <div className="mt-6">
              <Suspense fallback={<Skeleton className="h-48 w-full" />}>
                <BlankEditorMockup />
              </Suspense>
            </div>
          </div>
          <div className="relative bg-card p-6 md:p-8">
            <div
              className="absolute inset-0 bg-linear-to-br from-primary/5 via-transparent to-success/5"
              aria-hidden="true"
            />
            <div className="relative">
              <span className="font-data text-xs font-semibold tracking-[0.18em] text-primary">
                02 · WITH RANKWIZ
              </span>
              <h3 className="mt-2 text-xl font-semibold text-foreground">
                Drafts grounded in the live SERP
              </h3>
              <p className="mt-1 text-sm text-muted-foreground">
                Real-time content score, topic coverage, headings, and word-count benchmarks. All
                pulled from the pages you're trying to outrank.
              </p>
              <div className="mt-6">
                <Suspense fallback={<Skeleton className="h-48 w-full" />}>
                  <SerpEditorMockup />
                </Suspense>
              </div>
            </div>
          </div>
        </ScrollReveal>

        {/* Row 3: Prove */}
        <ScrollReveal className="grid gap-px overflow-hidden rounded-2xl border border-border bg-border md:grid-cols-2">
          <div className="bg-card p-6 md:p-8">
            <span className="font-data text-xs font-semibold tracking-[0.18em] text-muted-foreground/70">
              03 · BEFORE
            </span>
            <h3 className="mt-2 text-xl font-semibold text-foreground">
              Hand-tracking ROI in a sheet
            </h3>
            <p className="mt-1 text-sm text-muted-foreground">
              Snapshot today, snapshot in 30 days, do the math, hope you remembered to timestamp it.
            </p>
            <div className="mt-6">
              <Suspense fallback={<Skeleton className="h-48 w-full" />}>
                <ManualRoiMockup />
              </Suspense>
            </div>
          </div>
          <div className="relative bg-card p-6 md:p-8">
            <div
              className="absolute inset-0 bg-linear-to-br from-primary/5 via-transparent to-success/5"
              aria-hidden="true"
            />
            <div className="relative">
              <span className="font-data text-xs font-semibold tracking-[0.18em] text-primary">
                03 · WITH RANKWIZ
              </span>
              <h3 className="mt-2 text-xl font-semibold text-foreground">
                Auto-tracked at 7, 14, 30, and 90 days
              </h3>
              <p className="mt-1 text-sm text-muted-foreground">
                Clicks, CTR, and position, measured against your own GSC data. The product grades
                its own work.
              </p>
              <div className="mt-6">
                <Suspense fallback={<Skeleton className="h-48 w-full" />}>
                  <RoiTrackerMockup />
                </Suspense>
              </div>
            </div>
          </div>
        </ScrollReveal>

        {/* Time-saved summary */}
        <div className="mt-14 flex flex-col items-start gap-4 rounded-2xl border border-border bg-muted/40 p-6 md:flex-row md:items-center md:justify-between md:p-8">
          <div className="flex items-center gap-6">
            <div>
              <p className="font-data text-xs uppercase tracking-[0.18em] text-muted-foreground">
                Old workflow
              </p>
              <p className="font-data text-2xl font-semibold tracking-tight text-foreground line-through opacity-70">
                4+ hrs / week
              </p>
            </div>
            {/* Workflow arrow: bumped from /50 to /70 for dark-mode contrast (F-DM-04) */}
            <span aria-hidden="true" className="text-2xl text-muted-foreground/70">
              →
            </span>
            <div>
              <p className="font-data text-xs uppercase tracking-[0.18em] text-primary">
                With RankWizAI
              </p>
              <p className="font-data text-2xl font-semibold tracking-tight text-foreground">
                Auto-tracked
              </p>
            </div>
          </div>
          {canRegister && (
            <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>
  );
}