/* global React */
const { useState, useEffect, useRef } = React;

// ───────────────────────────────────────────────────────────────
// Analytics helper — fires a Vercel Analytics custom event with the
// CTA name + its location on the page. Safe-noops if va isn't loaded.
// ───────────────────────────────────────────────────────────────
function track(name, location) {
  try {
    if (typeof window !== "undefined" && typeof window.va === "function") {
      window.va("event", { name, location });
    }
  } catch (e) { /* swallow — never block navigation on tracking */ }
}

// ───────────────────────────────────────────────────────────────
// WAR MACHINE MARK — refined bracket / clip glyph with descending
// signal-bars. No background tile — uses currentColor so it inherits
// the parent's text color (ink on light bg, paper/amber on dark bg).
// Matches /favicon.svg shape; favicon keeps its dark tile for browser
// chrome, but inline uses sit cleanly on whatever's behind them.
// ───────────────────────────────────────────────────────────────
function WMMark({ size = 28, className = "" }) {
  return (
    <span style={{ width: size, height: size, display: "inline-flex" }} className={className} aria-hidden="true">
      <svg viewBox="0 0 100 100" width={size} height={size}>
        <g fill="currentColor">
          <polygon points="20,18 32,18 32,21 25,21 23,23 23,76 25,78 32,78 32,82 20,82" />
          <polygon points="80,18 68,18 68,21 75,21 77,23 77,76 75,78 68,78 68,82 80,82" />
          <rect x="35" y="32" width="30" height="4" />
          <rect x="35" y="43" width="22" height="4" />
          <rect x="35" y="54" width="14" height="4" />
          <rect x="35" y="67" width="12" height="3" />
        </g>
      </svg>
    </span>
  );
}

// ───────────────────────────────────────────────────────────────
// DIALER MOCK — cinematic parallel-dial demo. Walks through the full
// flow: 5 lines dial in parallel → some hit voicemail (auto-drop pre-rec
// + roll new numbers) → one connects → other lines auto-drop instantly →
// live transcript types out, AI coach pivots. Loops every ~25s.
// ───────────────────────────────────────────────────────────────
const PARALLEL_LEADS = [
  { name: "Tom Reyes",        num: "+1 (619) 555-0142" },
  { name: "Marisol Quintero", num: "+1 (619) 555-0118" },
  { name: "Beverly Adler",    num: "+1 (619) 555-0177" },
  { name: "Daniel Park",      num: "+1 (760) 555-0193" },
  { name: "Greg Holcombe",    num: "+1 (858) 555-0125" },
];
const ROLLED_LEADS = [
  { name: "Aaron Kimble",  num: "+1 (619) 555-0461" },
  { name: "Lupe Vasquez",  num: "+1 (760) 555-0223" },
  { name: "Marv Espinoza", num: "+1 (442) 555-0188" },
];

const PHASES = [
  // 0 — parallel dial out
  {
    duration: 3200,
    title: "5 LINES DIALING — IN PARALLEL",
    sub: "All 5 numbers ringing at once. First to pick up wins.",
    coachLabel: "Standby",
    coachBody: "Five leads dialing in parallel. Listening for human pickup vs. voicemail tone on each line.",
    transcript: null,
    leadsForLines: [0, 1, 2, 3, 4],
    states: ["dialing", "dialing", "dialing", "dialing", "dialing"],
  },
  // 1 — ringing
  {
    duration: 2800,
    title: "RINGING · WAITING FOR PICKUP",
    sub: "Each line waits for an answer. Voicemails get auto-detected.",
    coachLabel: "Standby",
    coachBody: "Five leads ringing. AI is listening for a human voice on every line — voicemail tones are flagged instantly.",
    transcript: null,
    leadsForLines: [0, 1, 2, 3, 4],
    states: ["ringing", "ringing", "ringing", "ringing", "ringing"],
  },
  // 2 — voicemails detected, dropping pre-rec
  {
    duration: 3200,
    title: "VOICEMAILS HIT · DROPPING PRE-REC",
    sub: "L1, L4, L5 hit voicemail. Pre-recorded message dropping automatically.",
    coachLabel: "Voicemail blast",
    coachBody: "3 voicemails detected → pre-recorded drop firing on those lines. Rep doesn't lift a finger.",
    transcript: null,
    leadsForLines: [0, 1, 2, 3, 4],
    states: ["voicemail", "ringing", "ringing", "voicemail", "voicemail"],
  },
  // 3 — voicemails sent, rolling new numbers
  {
    duration: 2400,
    title: "VOICEMAILS SENT · ROLLING NEW NUMBERS",
    sub: "Those lines auto-pull the next 3 leads from the pool.",
    coachLabel: "Auto-rolling",
    coachBody: "3 fresh numbers being pulled from the lead pool. Marcus stays focused — system handles it.",
    transcript: null,
    leadsForLines: [5, 1, 2, 6, 7], // 0,3,4 rotated to new leads
    states: ["dialing", "ringing", "ringing", "dialing", "dialing"],
  },
  // 4 — CONNECT! all other lines auto-drop
  {
    duration: 4500,
    title: "🔥 PICKED UP · LINE 3 — BEVERLY ADLER",
    sub: "All other lines auto-dropped. Live call routed to Marcus.",
    coachLabel: "Live coach",
    coachBody: "Beverly picked up. Open with name + dealership, NOT pitch. Build 5 sec of rapport before the ask.",
    transcript: "stage1",
    leadsForLines: [5, 1, 2, 6, 7],
    states: ["dropped", "dropped", "connected", "dropped", "dropped"],
  },
  // 5 — live call, transcript continues
  {
    duration: 5200,
    title: "🔥 LIVE CALL · BEVERLY ADLER · L3",
    sub: "Marcus owns the conversation. AI coaches in real time.",
    coachLabel: "Live coach",
    coachBody: "Lease objection coming. Pivot to payment-down: pull her current monthly + run a 60-mo on the '25 RAV4.",
    transcript: "stage2",
    leadsForLines: [5, 1, 2, 6, 7],
    states: ["dropped", "dropped", "connected", "dropped", "dropped"],
  },
];

const ALL_LEADS = [...PARALLEL_LEADS, ...ROLLED_LEADS];

const TRANSCRIPT_STAGE1 = [
  { who: "Beverly", text: "Hello?" },
  { who: "Marcus",  text: "Hi Beverly — Marcus over at Toyota of Kearny. Got 30 seconds?" },
  { who: "Beverly", text: "Uh, sure — what's this about?" },
];
const TRANSCRIPT_STAGE2 = [
  ...TRANSCRIPT_STAGE1,
  { who: "Marcus",  text: "Quick courtesy call — your '22 RAV4 is in heavy demand right now. Wanted to see if you'd looked at upgrading." },
  { who: "Beverly", text: "Honestly we were going to wait till next spring, the lease isn't up till March." },
  { who: "Marcus",  text: "Totally hear you. If I could get you out of that lease early AND drop your payment, would that change things?" },
];

function DialerMock() {
  const [phaseIdx, setPhaseIdx] = useState(0);
  const [dialsToday, setDialsToday] = useState(187);

  // advance phases
  useEffect(() => {
    const phase = PHASES[phaseIdx];
    const t = setTimeout(() => {
      setPhaseIdx((i) => (i + 1) % PHASES.length);
      // bump dials count when phase crosses a real dial event
      if (phaseIdx === 0 || phaseIdx === 3) {
        setDialsToday((d) => d + Math.floor(Math.random() * 3) + 2);
      }
    }, phase.duration);
    return () => clearTimeout(t);
  }, [phaseIdx]);

  const phase = PHASES[phaseIdx];
  const lines = phase.leadsForLines.map((leadIdx, i) => ({
    id: i + 1,
    ...ALL_LEADS[leadIdx],
    state: phase.states[i],
  }));

  return (
    <div className="card-light p-5 sm:p-6 relative">
      {/* HEADER — phase title flips smoothly */}
      <div className="flex items-start justify-between mb-5 gap-4">
        <div className="flex items-start gap-3 min-w-0 flex-1">
          <div className="w-2.5 h-2.5 rounded-full bg-amber dial-pulse mt-1.5 shrink-0" />
          <div className="min-w-0">
            <div key={`title-${phaseIdx}`} className="phase-fade font-display-700 text-[15px] sm:text-[17px] text-ink leading-tight">
              {phase.title}
            </div>
            <div key={`sub-${phaseIdx}`} className="phase-fade font-mono text-[11px] text-muted mt-1 leading-snug">
              {phase.sub}
            </div>
          </div>
        </div>
        <div className="text-right shrink-0">
          <div className="eyebrow text-muted">Marcus V. · today</div>
          <div className="font-display text-3xl text-ink tabular-nums leading-none mt-1">{dialsToday}</div>
        </div>
      </div>

      {/* LINES GRID */}
      <div className="grid grid-cols-1 gap-2">
        {lines.map((l) => (
          <DialerLine key={l.id} line={l} />
        ))}
      </div>

      {/* AI COACH + TRANSCRIPT */}
      <div className="mt-5 grid grid-cols-1 md:grid-cols-5 gap-3">
        {/* Transcript — visible when phase has one, otherwise shows phase status */}
        <div className="md:col-span-3 bg-paper border border-rule rounded-md p-4 min-h-[140px]">
          {phase.transcript ? (
            <Transcript stage={phase.transcript} />
          ) : (
            <div>
              <div className="eyebrow text-burnt mb-2">Live transcript</div>
              <div className="text-[13px] text-muted italic">
                Waiting for a human pickup… <span className="caret text-amber">▍</span>
              </div>
            </div>
          )}
        </div>
        {/* AI Coach */}
        <div className="md:col-span-2 bg-ink text-paper rounded-md p-4 relative overflow-hidden">
          <div className="eyebrow text-amber mb-1.5">AI Coach · {phase.coachLabel}</div>
          <div key={`coach-${phaseIdx}`} className="phase-fade text-[13px] leading-snug">
            {phase.coachBody}
          </div>
          <div className="mt-3 flex items-end gap-1 h-7">
            {[0.4,0.7,0.5,0.9,0.6,0.8,0.45,0.7,0.55,0.85,0.5,0.7].map((h,i) => (
              <div key={i} className="wave-bar w-[3px] bg-amber rounded-sm"
                   style={{ height: `${h*100}%`, animationDelay: `${i*0.07}s` }} />
            ))}
          </div>
        </div>
      </div>

      {/* DISPOSITIONS */}
      <div className="mt-4">
        <div className="eyebrow text-muted mb-2">After every call · 1-tap disposition</div>
        <div className="flex flex-wrap gap-1.5">
          {[
            { l: "No Answer",      tone: "neutral" },
            { l: "Voicemail",      tone: "neutral" },
            { l: "Wrong #",        tone: "danger" },
            { l: "Not Interested", tone: "danger" },
            { l: "Don't Call Again", tone: "danger" },
            { l: "Callback",       tone: "neutral" },
            { l: "Connected · Follow-up", tone: "amber" },
            { l: "Meeting Booked",  tone: "amber" },
          ].map(d => (
            <button key={d.l}
              className={`text-[11px] font-mono uppercase tracking-wider px-2.5 py-1.5 rounded border transition
                ${d.tone === "amber" ? "bg-amber border-amber text-ink hover:brightness-95"
                : d.tone === "danger" ? "bg-white border-rule text-ink hover:border-[#B83A3A] hover:text-[#B83A3A]"
                : "bg-white border-rule text-ink hover:border-burnt"}`}>
              {d.l}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function DialerLine({ line }) {
  // Each state has its own color + behavior. "connected" gets a strong
  // green flash + scale; "dropped" fades out with strikethrough; "voicemail"
  // stays subdued; "dialing" / "ringing" pulse amber.
  const cfg = {
    dialing:   { label: "DIALING",        tone: "text-burnt",      dot: "bg-amber dial-pulse",   row: "bg-paper" },
    ringing:   { label: "RINGING…",       tone: "text-burnt",      dot: "bg-amber dial-pulse",   row: "bg-paper" },
    voicemail: { label: "VOICEMAIL · DROPPING", tone: "text-muted", dot: "bg-muted",              row: "bg-rule/50" },
    connected: { label: "CONNECTED · LIVE", tone: "text-[#1F8A5B]", dot: "bg-[#1F8A5B] dial-pulse-green", row: "bg-[#1F8A5B]/10 ring-2 ring-[#1F8A5B]/40" },
    dropped:   { label: "AUTO-DROPPED",   tone: "text-[#B83A3A]/70", dot: "bg-[#B83A3A]/40",     row: "bg-rule/30 opacity-50" },
  };
  const s = cfg[line.state] ?? cfg.dialing;
  return (
    <div className={`dialer-line flex items-center gap-3 px-3 py-2.5 border border-rule rounded transition-all duration-500 ${s.row}`}>
      <div className={`w-2 h-2 rounded-full shrink-0 ${s.dot}`} />
      <div className="font-mono text-[11px] text-muted w-9 shrink-0">L{line.id}</div>
      <div className="flex-1 min-w-0">
        <div className={`text-sm font-medium truncate ${line.state === "dropped" ? "text-ink/50 line-through" : "text-ink"}`}>{line.name}</div>
        <div className={`font-mono text-[11px] ${line.state === "dropped" ? "text-muted/60 line-through" : "text-muted"}`}>{line.num}</div>
      </div>
      <div className={`font-mono text-[10px] sm:text-[11px] tracking-wider font-bold whitespace-nowrap ${s.tone}`}>{s.label}</div>
    </div>
  );
}

// Types out the transcript line-by-line. Resets when stage changes.
function Transcript({ stage }) {
  const lines = stage === "stage2" ? TRANSCRIPT_STAGE2 : TRANSCRIPT_STAGE1;
  const [shownLines, setShownLines] = useState(0);
  const [typingChars, setTypingChars] = useState(0);

  useEffect(() => {
    setShownLines(0);
    setTypingChars(0);
  }, [stage]);

  useEffect(() => {
    if (shownLines >= lines.length) return;
    const currentLine = lines[shownLines];
    if (typingChars < currentLine.text.length) {
      const t = setTimeout(() => setTypingChars((c) => c + 1), 22);
      return () => clearTimeout(t);
    }
    // line fully typed, pause then advance
    const t = setTimeout(() => {
      setShownLines((s) => s + 1);
      setTypingChars(0);
    }, 600);
    return () => clearTimeout(t);
  }, [shownLines, typingChars, lines]);

  return (
    <div>
      <div className="eyebrow text-burnt mb-2">Live transcript · Beverly Adler</div>
      <div className="text-[13px] leading-relaxed text-ink space-y-1.5">
        {lines.slice(0, shownLines).map((l, i) => (
          <div key={i}>
            <span className={l.who === "Beverly" ? "text-muted" : "text-burnt font-semibold"}>{l.who}:</span>{" "}
            <span>&ldquo;{l.text}&rdquo;</span>
          </div>
        ))}
        {shownLines < lines.length && (
          <div>
            <span className={lines[shownLines].who === "Beverly" ? "text-muted" : "text-burnt font-semibold"}>{lines[shownLines].who}:</span>{" "}
            <span>&ldquo;{lines[shownLines].text.slice(0, typingChars)}</span>
            <span className="caret text-amber">▍</span>
          </div>
        )}
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
// LEADERBOARD MOCK — dark ink card, gamified
// ───────────────────────────────────────────────────────────────
function LeaderboardMock() {
  const seed = [
    { rank: 1, name: "Marcus Vega",   init: "MV", dials: 187, conn: 47, app: 11, fire: 3 },
    { rank: 2, name: "Tanya Brooks",  init: "TB", dials: 142, conn: 33, app:  7, fire: 2 },
    { rank: 3, name: "Devin Park",    init: "DP", dials: 128, conn: 28, app:  6, fire: 1 },
    { rank: 4, name: "Rosa Klein",    init: "RK", dials: 117, conn: 24, app:  5, fire: 0 },
    { rank: 5, name: "Jamal Atwater", init: "JA", dials: 103, conn: 19, app:  4, fire: 0 },
    { rank: 6, name: "Cory Bellamy",  init: "CB", dials:  92, conn: 17, app:  3, fire: 0 },
    { rank: 7, name: "Hank Solis",    init: "HS", dials:  74, conn: 13, app:  2, fire: 0 },
  ];
  const [reps, setReps] = useState(seed);
  const [flashId, setFlashId] = useState(null);

  useEffect(() => {
    const t = setInterval(() => {
      setReps(prev => {
        // each tick, bump 1-3 reps by 1 dial
        const next = prev.map(r => ({...r}));
        const bumps = 1 + Math.floor(Math.random()*3);
        for (let i = 0; i < bumps; i++) {
          const idx = Math.floor(Math.random() * next.length);
          next[idx].dials += 1;
          if (Math.random() > 0.85) next[idx].conn += 1;
          if (Math.random() > 0.97) next[idx].app += 1;
        }
        next.sort((a,b) => b.dials - a.dials);
        next.forEach((r,i) => r.rank = i + 1);
        // flash the rep that just gained
        const recent = next.find(r => r.dials === Math.max(...next.map(x=>x.dials)));
        if (recent) {
          setFlashId(recent.name);
          setTimeout(() => setFlashId(null), 600);
        }
        return next;
      });
    }, 1400);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="card-ink p-5 sm:p-6 relative overflow-hidden">
      {/* subtle amber glow corner */}
      <div className="absolute -top-24 -right-24 w-64 h-64 rounded-full" style={{ background: "radial-gradient(circle, rgba(245,184,0,0.20), transparent 60%)" }} />

      <div className="flex items-center justify-between mb-5 relative">
        <div>
          <div className="eyebrow text-amber">Today · Live</div>
          <div className="font-display text-3xl text-paper leading-none mt-1.5">THE FLOOR</div>
        </div>
        <div className="text-right">
          <div className="bg-amber text-ink font-mono text-[10px] font-bold tracking-widest uppercase px-2 py-1 rounded">SPIFF · $500 TO #1</div>
        </div>
      </div>

      {/* HEADER ROW */}
      <div className="grid grid-cols-12 gap-2 px-3 py-2 text-[10px] font-mono uppercase tracking-widest text-paper/40 border-b border-paper/10">
        <div className="col-span-1">#</div>
        <div className="col-span-5">Rep</div>
        <div className="col-span-2 text-right">Dials</div>
        <div className="col-span-2 text-right">Conn</div>
        <div className="col-span-2 text-right">Appts</div>
      </div>

      <div className="divide-y divide-paper/5">
        {reps.map(r => (
          <div key={r.name}
               className={`ticker-row grid grid-cols-12 gap-2 items-center px-3 py-3 ${flashId === r.name ? "flash" : ""}`}>
            <div className="col-span-1 font-display text-2xl text-paper/90">{r.rank}</div>
            <div className="col-span-5 flex items-center gap-2.5 min-w-0">
              <div className={`w-8 h-8 rounded-full grid place-items-center font-mono text-[11px] font-bold
                ${r.rank === 1 ? "bg-amber text-ink" : "bg-paper/10 text-paper"}`}>
                {r.init}
              </div>
              <div className="min-w-0">
                <div className="text-sm font-semibold text-paper truncate">{r.name}</div>
                <div className="font-mono text-[10px] text-paper/40 uppercase tracking-wider">
                  {r.fire > 0 ? `${"🔥".repeat(r.fire).replace(/🔥/g, "★ ").trim()} ON FIRE` : "ACTIVE"}
                </div>
              </div>
              {r.fire > 0 && (
                <div className="ml-auto pr-1 flame text-amber text-lg leading-none">▲</div>
              )}
            </div>
            <div className="col-span-2 text-right font-display text-2xl text-paper tabular-nums">{r.dials}</div>
            <div className="col-span-2 text-right font-display text-2xl text-paper/70 tabular-nums">{r.conn}</div>
            <div className="col-span-2 text-right font-display text-2xl text-amber tabular-nums">{r.app}</div>
          </div>
        ))}
      </div>

      <div className="mt-4 pt-4 border-t border-paper/10 grid grid-cols-3 gap-2 text-center">
        <div>
          <div className="eyebrow text-paper/40">Floor Dials</div>
          <div className="font-display text-3xl text-paper mt-1">{reps.reduce((s,r) => s+r.dials, 0)}</div>
        </div>
        <div>
          <div className="eyebrow text-paper/40">Connects</div>
          <div className="font-display text-3xl text-paper mt-1">{reps.reduce((s,r) => s+r.conn, 0)}</div>
        </div>
        <div>
          <div className="eyebrow text-amber">Appts Set</div>
          <div className="font-display text-3xl text-amber mt-1">{reps.reduce((s,r) => s+r.app, 0)}</div>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
// EMAIL MOCKS — spammy vs human
// ───────────────────────────────────────────────────────────────
function SpammyEmail() {
  return (
    <div className="rounded-md bg-white border border-[#B83A3A]/40 glow-red overflow-hidden">
      {/* inbox chrome */}
      <div className="flex items-center justify-between px-4 py-2.5 bg-[#FBF1F1] border-b border-[#B83A3A]/20">
        <div className="flex items-center gap-2">
          <div className="w-2 h-2 rounded-full bg-[#B83A3A]" />
          <div className="font-mono text-[10px] uppercase tracking-widest text-[#B83A3A] font-bold">SPAM · LIKELY</div>
        </div>
        <div className="font-mono text-[10px] text-muted">Tue 3:47 PM</div>
      </div>
      <div className="px-5 py-4">
        <div className="text-[11px] font-mono text-muted">
          From: <span className="text-ink">deals@autonationblastemail.biz</span>
        </div>
        <div className="text-[11px] font-mono text-muted">To: <span className="text-ink">tom.reyes@gmail.com</span></div>
        <div className="mt-3 font-display text-[22px] sm:text-[26px] text-[#B83A3A] leading-tight" style={{ letterSpacing: "0.01em" }}>
          🔥🔥 HUGE SAVINGS THIS WEEKEND ONLY!! 🔥🔥
        </div>
      </div>
      {/* fake banner ad */}
      <div className="mx-5 my-2 rounded p-4 text-center text-paper"
           style={{ background: "repeating-linear-gradient(45deg, #B83A3A 0 16px, #8a2a2a 16px 32px)" }}>
        <div className="font-display text-3xl">$0 DOWN!!!</div>
        <div className="font-mono text-[11px] tracking-widest mt-1">EVERYBODY DRIVES — EVERYBODY APPROVED</div>
      </div>
      <div className="px-5 pt-3 pb-5 text-[12px] text-ink leading-relaxed">
        <p className="font-bold">DON&rsquo;T MISS OUT!!!</p>
        <p className="mt-1.5">
          🚗💨 The BIGGEST sale of the year is happening RIGHT NOW! 💰💰💰
          We&rsquo;re practically GIVING THEM AWAY! Trade-ins WORTH MORE!! 0% APR!!!
          Hurry — these prices won&rsquo;t last!!! 👀⏰
        </p>
        <p className="mt-2 font-bold uppercase">⭐ ACT NOW BEFORE IT&rsquo;S TOO LATE ⭐</p>
        <div className="mt-3 inline-block bg-[#B83A3A] text-paper font-display px-4 py-2 rounded text-lg">
          CLICK HERE!!! &rarr;
        </div>
        <p className="mt-3 text-[10px] font-mono text-muted">
          unsubscribe · privacy · disclaimer · terms · stop2optout · stop2quit · STOP STOP STOP
        </p>
      </div>
    </div>
  );
}

function HumanEmail() {
  return (
    <div className="rounded-md bg-ink text-paper glow-amber overflow-hidden">
      <div className="flex items-center justify-between px-4 py-2.5 bg-[#0F0F0E] border-b border-amber/20">
        <div className="flex items-center gap-2">
          <div className="w-2 h-2 rounded-full bg-amber" />
          <div className="font-mono text-[10px] uppercase tracking-widest text-amber font-bold">PRIMARY · INBOX</div>
        </div>
        <div className="font-mono text-[10px] text-paper/50">Today 4:12 PM</div>
      </div>
      <div className="px-5 py-4">
        <div className="text-[11px] font-mono text-paper/50">
          From: <span className="text-paper">ben.harrigan@warmachine-chevy.com</span>
        </div>
        <div className="text-[11px] font-mono text-paper/50">To: <span className="text-paper">tom.reyes@gmail.com</span></div>
        <div className="mt-3 text-[15px] text-paper">
          Subject: <span className="font-medium">good talking earlier, Tom</span>
        </div>
      </div>
      <div className="px-5 pb-5 text-[14px] leading-relaxed text-paper/90 space-y-3">
        <p>Hey Tom,</p>
        <p>It&rsquo;s Ben over at WarMachine Chevrolet. I enjoyed talking to you today, I appreciate you being a good sport about the cold call.</p>
        <p>Whenever you&rsquo;re ready, I&rsquo;d love to show you why I get so many repeat customers and referrals. If you&rsquo;d rather do business with a professional who&rsquo;s going to shoot you straight and give you a world-class car-buying experience, I&rsquo;m your guy.</p>
        <p>Any questions come up, don&rsquo;t hesitate to reach out.</p>
        <p>— Ben</p>
        <div className="pt-2 mt-2 border-t border-paper/10 font-mono text-[10px] text-paper/40 uppercase tracking-widest">
          Ben Harrigan · Sales · WarMachine Chevrolet · (619) 555-0188
        </div>
      </div>
    </div>
  );
}

// expose to window so the main app can import them


/* global React, ReactDOM */
// (mocks inlined above; useState/useEffect/useRef already destructured)
// ─── reveal-on-scroll hook ─────────────────────────────────────
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".fade-up");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ─── tiny svg icons (no external libs) ─────────────────────────
const Arrow = ({ cls = "w-4 h-4" }) => (
  <svg className={cls} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="square">
    <path d="M5 12h14M13 6l6 6-6 6" />
  </svg>
);
const Down = ({ cls = "w-5 h-5" }) => (
  <svg className={cls} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="square">
    <path d="M12 5v14M6 13l6 6 6-6" />
  </svg>
);
const Phone = ({ cls = "w-4 h-4" }) => (
  <svg className={cls} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="square">
    <path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2z" />
  </svg>
);

// ─── NAV ───────────────────────────────────────────────────────
function Nav() {
  return (
    <nav className="absolute top-0 inset-x-0 z-30 hero-nav-wash">
      <div className="max-w-content mx-auto px-6 sm:px-10 py-5 flex items-center justify-between">
        <a href="/" className="flex items-center gap-2.5 group text-ink">
          <WMMark size={28} />
          <span className="font-display text-xl tracking-tight text-ink">WAR MACHINE</span>
          <span className="hidden sm:inline-flex items-center font-display text-[15px] tracking-[0.18em] uppercase font-extrabold text-ink ml-3 border-l border-ink/30 pl-3">FOR DEALERS</span>
        </a>
        <div className="hidden md:flex items-center gap-2 font-mono text-[13px] uppercase tracking-widest text-ink font-bold">
          <a href="#dialer"      className="px-3.5 py-2 rounded border border-rule bg-paper hover:bg-ink hover:text-paper hover:border-ink transition-colors">Dialer</a>
          <a href="#automation"  className="px-3.5 py-2 rounded border border-rule bg-paper hover:bg-ink hover:text-paper hover:border-ink transition-colors">Automation</a>
          <a href="/leaderboard" className="px-3.5 py-2 rounded border border-rule bg-paper hover:bg-ink hover:text-paper hover:border-ink transition-colors">Leaderboard</a>
          <a href="#pricing"     className="px-3.5 py-2 rounded border border-rule bg-paper hover:bg-ink hover:text-paper hover:border-ink transition-colors">Pricing</a>
        </div>
        <div className="flex items-center gap-2 sm:gap-2.5">
          <a href="#dialer" onClick={() => track("click_show_me_how", "nav")} className="hidden sm:inline-flex font-mono text-[13px] uppercase tracking-widest font-bold px-5 py-3 rounded items-center gap-2 bg-burnt text-paper border border-burnt hover:bg-ink hover:border-ink transition-colors">
            Show me how <Arrow />
          </a>
          <a href="https://buy.stripe.com/00w3cv8ELg9s0fzc13cEw05" target="_blank" rel="noopener" onClick={() => track("click_get_started", "nav")} className="btn-amber font-mono text-[12px] sm:text-[13px] uppercase tracking-widest font-bold px-3.5 sm:px-5 py-2.5 sm:py-3 rounded inline-flex items-center gap-1.5 sm:gap-2 whitespace-nowrap">
            Get started <Arrow />
          </a>
        </div>
      </div>
    </nav>
  );
}

// ─── HERO ──────────────────────────────────────────────────────
function Hero({ t }) {
  return (
    <section className="relative min-h-screen flex flex-col overflow-hidden">
      {/* video bg */}
      <video
        className="hero-video absolute inset-0 w-full h-full object-cover"
        src="video/dealership-loop.mp4"
        autoPlay muted loop playsInline
        poster=""
      />
      <div className="absolute inset-0 hero-overlay"
           style={{ "--overlay-strength": t.heroOverlay }} />

      <Nav />

      {/* HEADLINE — H1 nudged down, body card moved up + left in a more
          translucent paper panel that lets the video bleed through */}
      <div className="relative z-10 flex-1 flex items-start">
        <div className="max-w-content mx-auto w-full px-6 sm:px-10 pt-20 sm:pt-24 pb-8 text-center">
          <h1 className="hero-h1 font-display text-[44px] sm:text-[64px] md:text-[84px] lg:text-[104px] text-ink hero-headline mx-auto leading-[0.92]">
            <span className="hero-h1-line block">SALES MANAGERS &amp; OWNERS,</span>
            <span className="hero-h1-accent text-burnt relative inline-block">
              YOU KNOW THE TRUTH.
              <span className="hero-h1-underline" aria-hidden="true" />
            </span>
          </h1>
          <div className="mx-auto sm:ml-auto sm:mr-[20%] mt-1 sm:mt-2 max-w-[60ch]">
            <div className="hero-body-card text-left">
              <p className="hero-body text-[20px] sm:text-[23px] md:text-[26px] leading-snug">
                Your sales team has a <span className="hero-body-emph">TON</span> of down time during the day.
              </p>
              <p className="hero-body text-[20px] sm:text-[23px] md:text-[26px] leading-snug mt-4">
                The GSM just chewed these guys out at the morning meeting for being below activity KPI&apos;s.{" "}<span className="hero-body-stamp">This is them by 2:00.</span>
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* BOTTOM BAND — italic pull quote + CTA on the paper-fade band */}
      <div className="relative z-10">
        <div className="max-w-content mx-auto w-full px-6 sm:px-10 pb-14 sm:pb-16 pt-8">
          <p className="fade-up d3 font-editorial text-[28px] sm:text-[36px] md:text-[44px] text-burnt leading-tight hero-pull">
            &ldquo;A tale as old as time in the car business.&rdquo;
          </p>
        </div>
      </div>
    </section>
  );
}

// ─── 1.5 BIG HOOK — flows out of hero ──────────────────────────
function HookSection() {
  return (
    <section className="bg-paper border-t border-rule">
      <div className="max-w-content mx-auto px-6 sm:px-10 py-20 sm:py-28">
        <div className="grid grid-cols-12 gap-6">
          <div className="col-span-12">
            <p className="fade-up font-display text-[28px] sm:text-[44px] md:text-[60px] lg:text-[72px] text-ink leading-[1.18] sm:leading-[1.05] md:leading-[1.02]">
              What if you could <span className="bg-amber px-2 -mx-1">10x every rep&rsquo;s output</span>, make the activity{" "}
              <span className="font-figure normal-case tracking-normal text-burnt">fun</span>, and never wonder if calls are being faked again?
            </p>
            <div className="fade-up d2 mt-10 sm:mt-14 flex justify-end">
              <a href="#dialer" onClick={() => track("click_show_me_how", "hook_section")} className="btn-amber btn-magnetic font-display-700 text-base sm:text-lg px-6 py-3.5 rounded inline-flex items-center gap-2">
                Show me how <Arrow cls="w-5 h-5" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── 2. THE PAIN ───────────────────────────────────────────────
function PainSection() {
  return (
    <section className="py-24 sm:py-32 border-t border-rule">
      <div className="max-w-content mx-auto px-6 sm:px-10 text-center">
        <h2 className="fade-up d1 font-display text-5xl sm:text-6xl md:text-[80px] text-ink leading-[0.95]">
          Why your reps don&rsquo;t<br/>cold-call the database.
        </h2>
        <p className="fade-up d2 mt-10 mx-auto max-w-2xl text-[19px] sm:text-[20px] leading-relaxed text-ink/85">
          Find the number. Type it in. Listen to it ring. No answer. Hang up. Find the next number. Type it in.
          <span className="block mt-4 font-semibold">Repeat 200 times to get 12 conversations.</span>
          <span className="block mt-2 font-semibold">Spend 6+ hours.</span>
        </p>
      </div>
    </section>
  );
}

function ManualDialMock() {
  // animate the agonizing sequence
  const steps = [
    { t: "Pull lead from spreadsheet…", w: 1400 },
    { t: "Type +1 (619) 555-0142", w: 1100 },
    { t: "Ringing… ringing… ringing…", w: 2200 },
    { t: "No answer. Hang up.", w: 900 },
    { t: "Pull next lead…", w: 1100 },
    { t: "Type +1 (760) 555-0193", w: 1100 },
    { t: "Voicemail. Hang up.", w: 900 },
    { t: "Pull next lead…", w: 1100 },
  ];
  const [i, setI] = useState(0);
  const [count, setCount] = useState(3);
  useEffect(() => {
    const t = setTimeout(() => {
      setI((i + 1) % steps.length);
      if (steps[i].t.startsWith("Pull")) setCount(c => c + 1);
    }, steps[i].w);
    return () => clearTimeout(t);
  }, [i]);

  return (
    <div className="fade-up d2 card-light p-6 relative">
      <div className="flex items-center justify-between mb-4">
        <div className="eyebrow text-burnt">Manual Dialing · 1 line</div>
        <div className="font-mono text-[10px] text-muted">2:14 PM</div>
      </div>
      <div className="grid grid-cols-3 gap-2">
        {["1","2","3","4","5","6","7","8","9","*","0","#"].map(k => (
          <div key={k} className="aspect-square grid place-items-center bg-paper border border-rule rounded font-display text-2xl text-ink/70">{k}</div>
        ))}
      </div>
      <div className="mt-4 font-mono text-[12px] text-ink bg-paper border border-rule rounded p-3 min-h-[58px]">
        <span className="text-muted">{">"}</span> {steps[i].t}
        <span className="caret text-burnt ml-1">▍</span>
      </div>
      <div className="mt-4 grid grid-cols-3 gap-3">
        <div>
          <div className="eyebrow text-muted">Dials</div>
          <div className="font-display text-3xl mt-1">{14 + count}</div>
        </div>
        <div>
          <div className="eyebrow text-muted">Connects</div>
          <div className="font-display text-3xl text-burnt mt-1">2</div>
        </div>
        <div>
          <div className="eyebrow text-muted">Hours in</div>
          <div className="font-display text-3xl mt-1">3.5</div>
        </div>
      </div>
      <div className="mt-4 text-[12px] text-muted italic">
        At this pace: 30 dials by close. 3 conversations. 0 appointments.
      </div>
    </div>
  );
}

// ─── 3. THE SOLUTION ───────────────────────────────────────────
function SolutionSection() {
  return (
    <section id="dialer" className="py-24 sm:py-32 border-t border-rule bg-paper">
      <div className="max-w-content mx-auto px-6 sm:px-10">
        <div className="grid grid-cols-12 gap-6 items-end">
          <div className="col-span-12 lg:col-span-8">
            <h2 className="fade-up d1 font-display text-amber text-5xl sm:text-6xl md:text-[88px] leading-[0.92]">
              War Machine<br/>Parallel Dialer.
            </h2>
            <p className="fade-up d2 mt-8 text-[20px] sm:text-[24px] text-ink/90 max-w-2xl leading-snug">
              <span className="font-semibold">200+ dials per rep per day.</span> Without them touching a single number.
            </p>
          </div>
          <div className="fade-up d3 col-span-12 lg:col-span-4 lg:text-right">
            <a href="https://cal.com/war-machine/30min" target="_blank" rel="noopener" onClick={() => track("click_book_demo", "dialer_section_header")} className="btn-amber btn-magnetic font-display-700 text-base sm:text-lg px-6 py-3.5 rounded inline-flex items-center gap-2">
              Book a demo <Arrow cls="w-5 h-5" />
            </a>
          </div>
        </div>

        <div className="mt-14 fade-up">
          <DialerShowcase />
        </div>

        <div className="mt-20 grid grid-cols-12 gap-6 items-end">
          <div className="col-span-12 lg:col-span-6">
            <h3 className="fade-up d1 font-display text-4xl sm:text-5xl md:text-[64px] leading-[0.95] text-ink">
              The leaderboard<br/>your reps will <span className="text-burnt">fight for.</span>
            </h3>
          </div>
          <div className="col-span-12 lg:col-span-6">
            <p className="fade-up d2 text-[16px] sm:text-[18px] leading-relaxed text-ink/85 max-w-md lg:ml-auto">
              Live wallboard for the floor. Real-time dials, connects, talk time, dispositions — with running color commentary and on-fire flame ranks. Drop it on a TV in the bullpen. Watch what happens.
            </p>
          </div>
        </div>

        <div className="fade-up mt-8">
          <LeaderboardShowcase />
        </div>

        <div className="fade-up mt-16">
          <div className="hairline mb-6" />
          <div className="grid grid-cols-12 gap-6 items-end">
            <p className="col-span-12 lg:col-span-8 font-display text-[34px] sm:text-[44px] text-ink leading-[1.02]">
              Cold calling becomes a <span className="text-burnt">competition</span>.<br/>
              Reps want to win. Spiffs and leaderboards keep them dialing.
            </p>
            <div className="col-span-12 lg:col-span-4 lg:text-right">
              <a href="https://cal.com/war-machine/30min" target="_blank" rel="noopener" onClick={() => track("click_book_demo", "gamification_section")} className="btn-amber btn-magnetic font-display-700 text-base sm:text-lg px-6 py-3.5 rounded inline-flex items-center gap-2">
                Book a demo <Arrow cls="w-5 h-5" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Live embed of the parallel-dialer widget inside the same browser-style
// frame as the leaderboard. The widget runs in its own iframe (own fonts,
// scoped styles, vanilla JS) so it can't collide with the landing page.
function DialerShowcase() {
  return (
    <div className="rounded-lg overflow-hidden border border-rule shadow-[0_30px_60px_-30px_rgba(26,26,24,0.4)] bg-ink">
      {/* browser chrome */}
      <div className="flex items-center gap-3 bg-[#0F0F0E] border-b border-paper/10 px-4 py-2.5">
        <div className="flex items-center gap-1.5">
          <div className="w-2.5 h-2.5 rounded-full bg-[#FF5F57]" />
          <div className="w-2.5 h-2.5 rounded-full bg-[#FEBC2E]" />
          <div className="w-2.5 h-2.5 rounded-full bg-[#28C840]" />
        </div>
        <div className="flex-1 flex items-center justify-center">
          <div className="bg-paper/5 text-paper/60 font-mono text-[11px] tracking-wider px-3 py-1 rounded border border-paper/10 max-w-md w-full text-center truncate">
            warmachine.app/dialer/marcus-v
          </div>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-1.5 h-1.5 rounded-full bg-[#38e5ff] dial-pulse" />
          <span className="font-mono text-[10px] uppercase tracking-widest text-amber font-bold">LIVE</span>
        </div>
      </div>
      {/* parallel-dialer widget — full mobile height so it's actually
          visible. Touch-action overlay + pointer-events:none on the
          iframe lets users scroll past freely on iOS Safari. */}
      <div className="relative bg-[#05070d] h-[680px] sm:h-auto sm:aspect-[16/10] overflow-hidden">
        <iframe
          src="/dialer-widget"
          title="War Machine Parallel Dialer — live"
          loading="lazy"
          tabIndex={-1}
          scrolling="no"
          aria-hidden="true"
          className="absolute inset-0 w-full h-full wm-dialer-iframe"
          style={{ border: 0, pointerEvents: "none" }}
        />
        <div
          className="absolute inset-0 z-10"
          style={{ touchAction: "pan-y", background: "transparent" }}
          aria-hidden="true"
        />
      </div>
    </div>
  );
}

// Live embed of the actual War Machine Leaderboard inside a browser-style frame
function LeaderboardShowcase() {
  return (
    <div className="rounded-lg overflow-hidden border border-rule shadow-[0_30px_60px_-30px_rgba(26,26,24,0.4)] bg-ink">
      {/* browser chrome */}
      <div className="flex items-center gap-3 bg-[#0F0F0E] border-b border-paper/10 px-4 py-2.5">
        <div className="flex items-center gap-1.5">
          <div className="w-2.5 h-2.5 rounded-full bg-[#FF5F57]" />
          <div className="w-2.5 h-2.5 rounded-full bg-[#FEBC2E]" />
          <div className="w-2.5 h-2.5 rounded-full bg-[#28C840]" />
        </div>
        <div className="flex-1 flex items-center justify-center">
          <div className="bg-paper/5 text-paper/60 font-mono text-[11px] tracking-wider px-3 py-1 rounded border border-paper/10 max-w-md w-full text-center truncate">
            warmachine.app/leaderboard/riverside-ford-north
          </div>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-1.5 h-1.5 rounded-full bg-[#1F8A5B] dial-pulse" />
          <span className="font-mono text-[10px] uppercase tracking-widest text-amber font-bold">LIVE</span>
        </div>
      </div>
      {/* the actual leaderboard — full mobile height so the dashboard is
          actually visible. Touch-action overlay + pointer-events:none on
          the iframe lets users scroll past freely on iOS Safari, even
          though the iframe is tall. */}
      <div className="relative bg-[#0A0A08] h-[1500px] sm:h-screen sm:min-h-[1000px] sm:max-h-[1100px] overflow-hidden">
        <iframe
          src="/leaderboard-widget"
          title="War Machine Leaderboard — live"
          loading="lazy"
          aria-hidden="true"
          className="absolute inset-0 w-full h-full wm-leaderboard-iframe"
          style={{ border: 0, pointerEvents: "none" }}
        />
        <div
          className="absolute inset-0 z-10"
          style={{ touchAction: "pan-y", background: "transparent" }}
          aria-hidden="true"
        />
      </div>
    </div>
  );
}

// ─── 4. AUTOMATION FLOW ───────────────────────────────────────
function AutomationSection() {
  const branches = [
    { tag: "No Answer",  tone: "neutral",
      then: "Keeps calling on cadence. Eventually rolls into a nurture sequence and is removed from the direct dialing pool." },
    { tag: "Wrong number / Not interested / Don't call again",  tone: "danger",
      then: "Instantly blacklisted. Scrubbed from the database. Your floor never wastes a dial on it again." },
    { tag: "Connected — interested, needs follow-up",  tone: "amber",
      then: "Auto-enrolled in a follow-up sequence. Personable SMS + email on a thoughtful cadence." },
    { tag: "Interested in specific vehicle",  tone: "amber",
      then: "Rep tags the vehicle on the customer profile. Every follow-up SMS + email automatically references that exact vehicle — make, model, trim, color." },
    { tag: "Connected — meeting booked",  tone: "amber",
      then: "Auto-confirmation flow: same-day text from the rep, email the night before, text the morning of." },
    { tag: "No-show",  tone: "neutral",
      then: "Auto-enrolled in a win-back sequence. Periodic email + SMS check-ins until they re-engage or opt out." },
  ];
  return (
    <section id="automation" className="py-24 sm:py-32 border-t border-rule">
      <div className="max-w-content mx-auto px-6 sm:px-10">
        <div className="max-w-5xl">
          <h2 className="fade-up d1 font-display text-5xl sm:text-6xl md:text-[80px] text-ink leading-[0.95]">
            All your rep does is say<br/>what happened on the call.
          </h2>
          <p className="fade-up d2 mt-8 text-[19px] sm:text-[22px] text-ink/85 max-w-3xl leading-snug">
            That triggers the appropriate follow-up automation. <span className="font-semibold text-ink">Rep does NOTHING manual</span> — they just field warm responses.
          </p>
        </div>

        <div className="mt-16 grid grid-cols-12 gap-6">
          <div className="col-span-12 lg:col-span-3">
            <div className="fade-up sticky top-8">
              <div className="card-ink p-5">
                <div className="eyebrow text-amber">Single input</div>
                <div className="font-display text-3xl text-paper mt-2 leading-tight">1-tap<br/>disposition.</div>
                <p className="mt-3 text-paper/70 text-[13px] leading-relaxed">After every call the rep taps one button. Everything below happens automatically.</p>
              </div>
              <div className="mt-2 ml-6 w-px h-10 branch-line hidden lg:block" />
            </div>
          </div>

          <div className="col-span-12 lg:col-span-9">
            <div className="space-y-3">
              {branches.map((b, idx) => (
                <BranchCard key={idx} idx={idx + 1} {...b} />
              ))}
            </div>
            <div className="fade-up mt-10 font-figure text-[22px] sm:text-[28px] text-burnt">
              &ldquo;Your reps just dial and disposition. The automation takes over from there.&rdquo;
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BranchCard({ idx, tag, tone, then }) {
  const toneCls = tone === "amber" ? "border-amber bg-amber/[0.06]"
    : tone === "danger" ? "border-[#B83A3A]/40 bg-[#B83A3A]/[0.04]"
    : "border-rule bg-white";
  const tagCls = tone === "amber" ? "bg-amber text-ink"
    : tone === "danger" ? "bg-[#B83A3A] text-paper"
    : "bg-ink text-paper";
  return (
    <div className={`fade-up relative grid grid-cols-12 gap-4 sm:gap-6 items-start p-5 sm:p-6 border rounded-md ${toneCls}`}>
      <div className="col-span-12 sm:col-span-5 flex items-start gap-3">
        <div className="font-mono text-[11px] text-muted pt-2 w-7">0{idx}</div>
        <div className="flex-1">
          <div className={`inline-block ${tagCls} font-mono text-[10px] uppercase tracking-widest font-bold px-2 py-1 rounded`}>
            Disposition
          </div>
          <div className="mt-2 font-display text-[22px] sm:text-[26px] leading-tight text-ink">
            {tag}
          </div>
        </div>
      </div>
      <div className="hidden sm:flex col-span-1 items-center justify-center pt-7">
        <div className="w-full h-px branch-line-h" />
      </div>
      <div className="col-span-12 sm:col-span-6 pt-1">
        <div className="eyebrow mb-1.5 text-burnt">Then →</div>
        <p className="text-[15px] leading-relaxed text-ink/85">{then}</p>
      </div>
    </div>
  );
}

// ─── 5. EMAIL COMPARISON ──────────────────────────────────────
function EmailSection() {
  return (
    <section className="py-24 sm:py-32 border-t border-rule bg-[#F5F4EE]">
      <div className="max-w-content mx-auto px-6 sm:px-10">
        <div className="max-w-4xl">
          <h2 className="fade-up d1 font-display text-5xl sm:text-6xl md:text-[80px] text-ink leading-[0.95]">
            Who do you think<br/>gets a response?
          </h2>
        </div>

        <div className="mt-14 grid grid-cols-12 gap-6 lg:gap-10 items-start">
          <div className="fade-up col-span-12 lg:col-span-6">
            <SpammyEmail />
            <div className="mt-4 font-mono text-[10px] uppercase tracking-widest text-[#B83A3A] font-bold">
              DEALERSHIP MARKETING EMAILS &middot; 99% OF THE INDUSTRY
            </div>
          </div>
          <div className="fade-up d2 col-span-12 lg:col-span-6">
            <HumanEmail />
            <div className="mt-4 font-mono text-[10px] uppercase tracking-widest text-burnt font-bold">
              WAR MACHINE FOLLOW-UP &middot; WRITTEN BY A SALESMAN
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── 6. SETUP ─────────────────────────────────────────────────
function SetupSection() {
  const cards = [
    { n: "01", t: "You give us the lead pool",
      d: "Your old DMS leads, internet leads, web form leads — whatever isn't being worked. We&rsquo;ll take it." },
    { n: "02", t: "We provision rep accounts",
      d: "Each rep gets their own dialer, their own number, and their own follow-up sequences configured." },
    { n: "03", t: "We warm proper sending domains",
      d: "We actually deliver to inboxes. Not the spam folder. (Unlike 99% of car-dealer marketing email.)" },
    { n: "04", t: "We monitor automations",
      d: "Mappings stay correct. Sequences stay running. You never have to think about it." },
  ];
  return (
    <section className="py-24 sm:py-32 border-t border-rule">
      <div className="max-w-content mx-auto px-6 sm:px-10">
        <div className="grid grid-cols-12 gap-6 items-end">
          <div className="col-span-12 lg:col-span-7">
            <h2 className="fade-up d1 font-display text-5xl sm:text-6xl md:text-[80px] text-ink leading-[0.95]">
              Do I have to train<br/>my reps on all this?
            </h2>
          </div>
          <div className="col-span-12 lg:col-span-5 lg:text-right">
            <div className="fade-up d2 inline-block">
              <div className="font-display text-[160px] sm:text-[200px] md:text-[260px] text-amber leading-[0.85]">
                NO.
              </div>
            </div>
          </div>
        </div>

        <div className="hairline mt-10 mb-12" />

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
          {cards.map((c, i) => (
            <div key={c.n} className={`fade-up d${i % 4} card-light p-6 flex flex-col gap-3 min-h-[230px]`}>
              <div className="font-display text-5xl text-amber leading-none">{c.n}</div>
              <div className="font-display-700 text-[20px] text-ink leading-tight">{c.t}</div>
              <p className="text-[14px] text-muted leading-relaxed" dangerouslySetInnerHTML={{ __html: c.d }} />
            </div>
          ))}
        </div>

        <div className="fade-up mt-12 grid grid-cols-12 gap-6 items-end">
          <p className="col-span-12 lg:col-span-8 font-figure text-[24px] sm:text-[32px] text-ink max-w-3xl">
            Your reps press play on the dialer and talk. <span className="text-burnt">That&rsquo;s it.</span>
          </p>
          <div className="col-span-12 lg:col-span-4 lg:text-right">
            <a href="#dialer" onClick={() => track("click_show_me_how", "press_play_section")} className="btn-amber btn-magnetic font-display-700 text-base sm:text-lg px-6 py-3.5 rounded inline-flex items-center gap-2">
              Show me how <Arrow cls="w-5 h-5" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── 7. MANAGER VISIBILITY ────────────────────────────────────
function VisibilitySection() {
  const cards = [
    { t: "Team activity dashboard",
      d: "Dials, connects, pitches, conversations, meetings — every metric for every rep, in real time.",
      mock: <ActivityWidget /> },
    { t: "Transcripts + recordings",
      d: "Every call recorded and transcribed. Search any keyword, jump to any moment, listen to anyone.",
      mock: <TranscriptsWidget /> },
    { t: "Fake-dial + abuse alerts",
      d: "We flag suspicious patterns the second they happen — fake dials, gamed dispositions, idle accounts. You see it. They can't hide it.",
      mock: <AbuseWidget /> },
  ];
  return (
    <section id="visibility" className="py-24 sm:py-32 border-t border-rule bg-paper">
      <div className="max-w-content mx-auto px-6 sm:px-10">
        <div className="max-w-4xl">
          <h2 className="fade-up d1 font-display text-5xl sm:text-6xl md:text-[80px] text-ink leading-[0.95]">
            Full visibility.<br/><span className="text-burnt">Zero guesswork.</span>
          </h2>
          <p className="fade-up d2 mt-8 text-[19px] sm:text-[22px] text-ink/85 max-w-3xl leading-snug">
            Full view of your entire team&rsquo;s activity and transcripts. Alerts the second a rep fakes dials or abuses the system in any way.
            <span className="block mt-3 font-semibold text-ink">You&rsquo;ll be able to say — for 100% — that every rep is doing their activities.</span>
          </p>
        </div>
        <div className="mt-14 grid grid-cols-1 md:grid-cols-3 gap-5">
          {cards.map((c, i) => (
            <div key={c.t} className={`fade-up d${i} card-light p-5 flex flex-col`}>
              <div className="rounded bg-paper border border-rule p-4 mb-5 min-h-[200px] flex flex-col">{c.mock}</div>
              <div className="font-display-700 text-[20px] text-ink leading-tight">{c.t}</div>
              <p className="mt-2 text-[14px] text-muted leading-relaxed">{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Activity dashboard — Trellus-style KPI grid with sparklines + deltas.
// Numbers tick up live to feel alive without screenshot-y staticness.
function ActivityWidget() {
  const [t, setT] = useState(0);
  useEffect(() => { const i = setInterval(() => setT(x=>x+1), 1100); return () => clearInterval(i); }, []);
  const stats = [
    { k: "DIAL",    v: 1148 + t,         d: "+187%", up: true,  spark: [3,5,4,7,6,9,8,10] },
    { k: "CONNECT", v: 129 + Math.floor(t/4), d: "+130%", up: true,  spark: [2,3,3,5,4,6,7,8] },
    { k: "PITCH",   v: 82  + Math.floor(t/8), d: "+164%", up: true,  spark: [1,2,2,4,3,5,4,6] },
    { k: "CONV.",   v: 42  + Math.floor(t/14), d: "+110%", up: true,  spark: [1,2,1,3,2,3,2,4] },
    { k: "MEETING", v: 1,                d: "−88%", up: false, spark: [4,3,3,2,2,1,1,1] },
  ];
  return (
    <div className="flex-1 flex flex-col">
      <div className="flex items-center justify-between mb-2.5">
        <div className="eyebrow text-burnt">Analytics · Last 30d</div>
        <div className="font-mono text-[9px] text-muted">+ 4 reps</div>
      </div>
      <div className="grid grid-cols-2 gap-1.5 flex-1">
        {stats.map((s) => (
          <div key={s.k} className="bg-white border border-rule rounded-sm p-2 flex flex-col">
            <div className="flex items-center justify-between mb-1">
              <div className="font-mono text-[8.5px] tracking-widest text-muted">{s.k}</div>
              <div className={`font-mono text-[8.5px] font-bold ${s.up ? "text-[#1F8A5B]" : "text-[#B83A3A]"}`}>{s.d}</div>
            </div>
            <div className="font-display text-[20px] text-ink leading-none tabular-nums">{s.v.toLocaleString()}</div>
            <Sparkline pts={s.spark} up={s.up} className="mt-auto" />
          </div>
        ))}
        <div className="bg-amber/15 border border-amber/50 rounded-sm p-2 flex flex-col justify-center">
          <div className="font-mono text-[8.5px] tracking-widest text-burnt">DIAL → MEETING</div>
          <div className="font-display text-[20px] text-ink leading-none mt-0.5">2.4%</div>
          <div className="font-mono text-[8.5px] text-muted mt-0.5">overall conversion</div>
        </div>
      </div>
    </div>
  );
}

function Sparkline({ pts, up, className = "" }) {
  const max = Math.max(...pts);
  const min = Math.min(...pts);
  const w = 60, h = 14;
  const step = w / (pts.length - 1);
  const path = pts.map((p, i) => {
    const x = i * step;
    const y = h - ((p - min) / (max - min || 1)) * h;
    return `${i === 0 ? "M" : "L"} ${x.toFixed(1)} ${y.toFixed(1)}`;
  }).join(" ");
  return (
    <svg className={className} width={w} height={h} viewBox={`0 0 ${w} ${h}`} aria-hidden="true">
      <path d={path} fill="none" stroke={up ? "#1F8A5B" : "#B83A3A"} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// Transcripts widget — call list with disposition pills + a sample
// conversation excerpt with rep/prospect speech bubbles.
function TranscriptsWidget() {
  const calls = [
    { name: "Joe Genovese", time: "4:17p",  tag: "No Answer", tone: "neutral" },
    { name: "Scott Bennett", time: "4:01p", tag: "Voicemail", tone: "neutral", active: false },
    { name: "Beverly Adler", time: "3:42p", tag: "Booked",    tone: "amber",   active: true },
    { name: "Tom Reyes",     time: "3:28p", tag: "Brush Off", tone: "danger" },
  ];
  return (
    <div className="flex-1 flex gap-2">
      {/* call list */}
      <div className="w-[42%] border-r border-rule pr-2 -mr-2 flex flex-col gap-1.5">
        <div className="eyebrow text-burnt mb-1">Today · 47 calls</div>
        {calls.map((c, i) => (
          <div key={i} className={`px-1.5 py-1 rounded-sm ${c.active ? "bg-amber/15 border border-amber/40" : "bg-white border border-transparent hover:border-rule"}`}>
            <div className="flex items-center justify-between gap-1">
              <div className="text-[10px] text-ink truncate font-medium">{c.name}</div>
              <div className="font-mono text-[8px] text-muted">{c.time}</div>
            </div>
            <div className={`mt-0.5 inline-block font-mono text-[7.5px] uppercase tracking-widest px-1 py-[1px] rounded-sm ${
              c.tone === "amber" ? "bg-amber text-ink"
              : c.tone === "danger" ? "bg-[#B83A3A]/15 text-[#B83A3A]"
              : "bg-rule text-muted"
            }`}>{c.tag}</div>
          </div>
        ))}
      </div>
      {/* transcript pane */}
      <div className="flex-1 flex flex-col">
        <div className="flex items-center justify-between mb-1.5">
          <div className="font-mono text-[8.5px] text-muted">Beverly · 3:42p</div>
          <div className="flex items-end gap-0.5 h-3">
            {[0.5,0.8,0.4,0.9,0.6,0.7].map((h,i) => (
              <div key={i} className="wave-bar w-[2px] bg-amber rounded-sm" style={{ height: `${h*100}%`, animationDelay: `${i*0.08}s` }} />
            ))}
          </div>
        </div>
        <div className="flex flex-col gap-1.5 text-[10.5px] leading-snug">
          <div className="bg-white border border-rule rounded-sm p-1.5 max-w-[88%]">
            <span className="text-muted text-[8.5px]">Beverly · 02:14</span>
            <div className="text-ink">"Open if the payment came in under five."</div>
          </div>
          <div className="bg-amber/15 border border-amber/40 rounded-sm p-1.5 max-w-[88%] ml-auto">
            <span className="text-burnt text-[8.5px] font-bold">REP · 02:31</span>
            <div className="text-ink">"Done. Come in Saturday at 11."</div>
          </div>
          <div className="self-center font-mono text-[8.5px] bg-amber text-ink px-1.5 py-0.5 rounded-sm font-bold">
            APPOINTMENT BOOKED ✓
          </div>
        </div>
      </div>
    </div>
  );
}

// Abuse alerts — stack of fraud-detection signals: fake dials, gamed
// dispositions, idle accounts. Tinted by severity.
function AbuseWidget() {
  const [pulse, setPulse] = useState(0);
  useEffect(() => { const i = setInterval(() => setPulse(p=>p+1), 1500); return () => clearInterval(i); }, []);
  const alerts = [
    { sev: "high",   rep: "T. Brooks",  msg: "47 dials in 8 min · all auto-disposed",  tag: "REVIEW" },
    { sev: "med",    rep: "J. Stowe",   msg: "All connects flagged 'Wrong #' (12 in a row)", tag: "FLAGGED" },
    { sev: "low",    rep: "K. Larkin",  msg: "Idle 22 min · session active, 0 dials",  tag: "WATCH" },
    { sev: "med",    rep: "D. Park",    msg: "Dispo'd before voicemail tone (3×)",     tag: "FLAGGED" },
  ];
  return (
    <div className="flex-1 flex flex-col">
      <div className="flex items-center justify-between mb-2">
        <div className="eyebrow text-[#B83A3A]">Abuse signals · Today</div>
        <div className="flex items-center gap-1">
          <div className={`w-1.5 h-1.5 rounded-full bg-[#B83A3A] ${pulse % 2 === 0 ? "dial-pulse" : ""}`} />
          <span className="font-mono text-[9px] uppercase tracking-widest text-[#B83A3A] font-bold">4 active</span>
        </div>
      </div>
      <div className="flex flex-col gap-1.5 flex-1">
        {alerts.map((a, i) => {
          const sev = a.sev === "high"
            ? { bg: "bg-[#B83A3A]/10", border: "border-[#B83A3A]/40", tag: "bg-[#B83A3A] text-paper" }
            : a.sev === "med"
            ? { bg: "bg-amber/15", border: "border-amber/50", tag: "bg-amber text-ink" }
            : { bg: "bg-rule/40", border: "border-rule", tag: "bg-muted/30 text-muted" };
          return (
            <div key={i} className={`px-2 py-1.5 rounded-sm border ${sev.bg} ${sev.border}`}>
              <div className="flex items-start justify-between gap-2">
                <div className="min-w-0 flex-1">
                  <div className="font-display-700 text-[11px] text-ink leading-tight">{a.rep}</div>
                  <div className="font-mono text-[9px] text-ink/80 leading-snug mt-0.5">{a.msg}</div>
                </div>
                <div className={`font-mono text-[7.5px] uppercase tracking-widest font-bold px-1 py-[1px] rounded-sm shrink-0 ${sev.tag}`}>{a.tag}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── 8. PRICING — EVERYTHING INCLUDED ─────────────────────────
function PricingSection() {
  const features = [
    "5-line parallel dialer",
    "CRM setup & provisioning",
    "Unlimited number rotation",
    "Spam remediation",
    "Text & email follow-up automations — DFY",
    "Live AI coaching",
    "Gamified cold-call leaderboard",
    "Voicemail drops",
    "Priority support",
  ];
  return (
    <section id="pricing" className="bg-paper py-28 sm:py-36 border-t border-rule">
      <div className="max-w-content mx-auto px-6 sm:px-10">
        <div className="text-center max-w-3xl mx-auto mb-14 sm:mb-16">
          <div className="eyebrow text-burnt mb-4">Pricing</div>
          <h2 className="fade-up font-display text-ink text-5xl sm:text-6xl md:text-7xl leading-[0.95]">
            One price. <span className="font-figure normal-case tracking-normal text-burnt">no add-ons.</span>
          </h2>
          <p className="fade-up d1 mt-6 font-body text-lg sm:text-xl text-ink/75 leading-relaxed">
            Do <span className="font-display tracking-wide text-ink">NOTHING</span> but dial and monitor your reps.
            We handle absolutely every bit of the setup.
          </p>
        </div>

        <div className="grid grid-cols-12 gap-6 lg:gap-8 items-stretch">
          {/* Price plate */}
          <div className="fade-up col-span-12 lg:col-span-5 bg-ink text-paper rounded-md p-8 sm:p-10 flex flex-col relative overflow-hidden">
            <div className="absolute -top-16 -right-16 w-48 h-48 rounded-full bg-amber/10 blur-3xl pointer-events-none" />
            <div className="font-mono text-[11px] tracking-widest text-amber uppercase font-bold">Per rep · per month</div>
            <div className="mt-3 flex items-baseline gap-2">
              <div className="font-display text-[88px] sm:text-[104px] text-paper leading-[0.85]">$249</div>
              <div className="font-mono text-[13px] text-paper/55 uppercase tracking-widest">/rep/mo</div>
            </div>
            <div className="mt-2 font-mono text-[11px] text-paper/55 uppercase tracking-widest">first month <span className="text-amber">$349</span> &middot; includes full setup</div>
            <div className="mt-7 hairline opacity-20" />
            <div className="mt-6 font-body text-paper/80 text-[15px] leading-relaxed flex-1">
              Every dealership gets the full stack. Pricing scales by seat &mdash; no feature gates, no tier games.
            </div>
            <a href="https://buy.stripe.com/00w3cv8ELg9s0fzc13cEw05" target="_blank" rel="noopener" onClick={() => track("click_get_started", "pricing_section")} className="btn-amber btn-magnetic font-display text-xl sm:text-2xl px-6 py-4 rounded mt-8 inline-flex items-center justify-center gap-2 w-full">
              Get started <Arrow cls="w-5 h-5" />
            </a>
            <a href="https://cal.com/war-machine/30min" target="_blank" rel="noopener" onClick={() => track("click_book_demo", "pricing_section")} className="mt-3 font-display-700 text-base sm:text-lg tracking-wide uppercase text-paper border border-paper/30 hover:border-amber hover:text-amber px-6 py-3.5 rounded text-center inline-flex items-center justify-center gap-2 w-full transition-colors">
              or book a 15-min demo <Arrow cls="w-5 h-5" />
            </a>
            <div className="mt-2 font-mono text-[10px] tracking-widest text-paper/40 uppercase text-center">
              cancel anytime &middot; <a href="/terms" className="hover:text-amber">terms</a> &middot; <a href="/privacy" className="hover:text-amber">privacy</a>
            </div>
          </div>

          {/* Features grid */}
          <div className="fade-up d1 col-span-12 lg:col-span-7 bg-white border border-rule rounded-md p-8 sm:p-10">
            <div className="eyebrow text-burnt mb-6">Everything you get</div>
            <ul className="grid sm:grid-cols-2 gap-x-8 gap-y-4">
              {features.map((f, i) => (
                <li key={i} className="flex items-start gap-3">
                  <div className="mt-0.5 shrink-0 w-5 h-5 rounded-full bg-amber/20 grid place-items-center">
                    <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
                      <path d="M2 5.5 L4.5 8 L9 3" fill="none" stroke="#7A5A00" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                  <span className="font-body text-ink text-[15px] leading-snug">{f}</span>
                </li>
              ))}
            </ul>
            <div className="mt-7 pt-5 border-t border-rule">
              <div className="font-mono text-[10px] tracking-widest text-burnt uppercase">The promise</div>
              <p className="mt-2 font-body text-ink text-[15px] leading-relaxed">
                You and your reps just <span className="font-display tracking-wide">DIAL</span>.
                We handle CRM, numbers, automations, leaderboards &mdash; all of it.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── 9. FINAL CTA — DARK PANEL ────────────────────────────────
function FinalCTA() {
  return (
    <section id="book" className="bg-ink text-paper py-28 sm:py-36 border-t border-ink">
      <div className="max-w-content mx-auto px-6 sm:px-10">
        <div className="grid grid-cols-12 gap-6 items-end">
          <div className="col-span-12 lg:col-span-8">
            <h2 className="fade-up d1 font-display text-paper text-5xl sm:text-7xl md:text-[100px] leading-[0.94]">
              If you&rsquo;d rather your reps<br/>
              make <span className="text-amber">200 calls a day</span>, every day —<br/>
              and know every follow-up text<br/>
              and email is going out —<br/>
              <span className="font-figure normal-case tracking-normal text-amber">let&rsquo;s talk.</span>
            </h2>
          </div>
          <div className="col-span-12 lg:col-span-4">
            <div className="fade-up d2">
              <div className="font-mono text-amber text-[13px] tracking-[0.18em] uppercase font-bold leading-relaxed">
                $249/mo per rep<br/>
                $349 first month (setup included)<br/>
                cancel anytime
              </div>
            </div>
          </div>
        </div>

        <div className="mt-12 hairline opacity-20" />

        <div className="mt-12 flex flex-col sm:flex-row sm:items-end justify-between gap-8">
          <div className="fade-up">
            <a href="https://buy.stripe.com/00w3cv8ELg9s0fzc13cEw05" target="_blank" rel="noopener" onClick={() => track("click_get_started", "final_cta")} className="btn-amber font-display text-2xl sm:text-3xl px-7 sm:px-10 py-5 rounded inline-flex items-center gap-3">
              Get started <Arrow cls="w-6 h-6" />
            </a>
            <div className="mt-5 font-mono text-[11px] uppercase tracking-widest text-paper/55 max-w-md leading-relaxed">
              Built by a 7-year car salesman. Used by dealerships closing 30% more on the existing floor.
            </div>
          </div>
          <div className="fade-up d2 flex flex-col gap-2 sm:items-end">
            <div className="font-mono text-[10px] uppercase tracking-widest text-paper/40">Or talk to us first</div>
            <a href="https://cal.com/war-machine/30min" target="_blank" rel="noopener" onClick={() => track("click_book_demo", "final_cta")} className="font-display text-2xl sm:text-3xl text-paper hover:text-amber transition-colors inline-flex items-center gap-2">
              Book a 15-min demo <Arrow cls="w-5 h-5" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="bg-ink text-paper/55 py-10 border-t border-paper/10">
      <div className="max-w-content mx-auto px-6 sm:px-10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-5">
        <div className="flex items-center gap-2.5 text-amber">
          <WMMark size={24} />
          <span className="font-display text-lg text-paper">WAR MACHINE</span>
          <span className="inline-flex items-center font-display text-[13px] tracking-[0.18em] uppercase font-extrabold text-paper ml-2 border-l border-paper/25 pl-2.5">FOR DEALERS</span>
        </div>
        <div className="flex flex-col sm:items-end gap-2">
          <div className="flex items-center gap-4 font-mono text-[10px] uppercase tracking-widest">
            <a href="/terms" className="hover:text-amber transition-colors">Terms</a>
            <span className="text-paper/20">·</span>
            <a href="/privacy" className="hover:text-amber transition-colors">Privacy</a>
            <span className="text-paper/20">·</span>
            <a href="mailto:alex@chainbreakerconsulting.com" className="hover:text-amber transition-colors">Contact</a>
          </div>
          <div className="font-mono text-[10px] uppercase tracking-widest">
            dealerwarmachine.com &middot; &copy; 2026 ChainBreaker Consulting LLC
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─── APP ─────────────────────────────────────────────────────
function App() {
  useReveal();
  // Production: tweak hooks stripped along with the design-time panel.
  // Static defaults from window.TWEAK_DEFAULTS drive the same vars.
  const t = window.TWEAK_DEFAULTS || {
    heroOverlay: 0.85,
    headlineColor: "ink",
    showHook: true,
    bodyScale: 1,
  };

  React.useEffect(() => {
    document.documentElement.style.setProperty("--body-scale", t.bodyScale);
  }, [t.bodyScale]);

  // override the headline accent color via inline style on a wrapper
  const headlineColor = t.headlineColor === "amber" ? "#F5B800"
    : t.headlineColor === "burnt" ? "#7A5A00"
    : "#1A1A18";

  return (
    <div style={{ "--headline-accent": headlineColor }}>
      <Hero t={t} />
      {t.showHook && <HookSection />}
      <PainSection />
      <SolutionSection />
      <AutomationSection />
      <EmailSection />
      <SetupSection />
      <VisibilitySection />
      <PricingSection />
      <FinalCTA />
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);