// Switch landing page — sections built on the Askable UI kit.
// Primitives: Logo, Icon, Button, Chip, Card (global)
// Chrome: Navbar, FooterBottom (global)

const { useState, useMemo, useEffect } = React;

/* ---------- shared constants ---------- */
const INK = "rgb(34,6,19)";
const INK_MUTED = "rgba(34,6,19,0.65)";
const PAPER = "rgb(249,245,244)";
const PAPER_WARM = "rgb(255,251,250)";
const PEACH = "rgb(255,239,241)";
const PEACH_DEEP = "rgb(255,219,223)";
const RED = "rgb(251,81,83)";
const UT_BLUE = "rgb(35,78,235)";
const RED_DEEP = "rgb(83,7,15)";
const MINT = "#1a8a6a";
const MINT_LIGHT = "rgb(155,232,196)";
const LINE = "rgba(34,6,19,0.10)";

/* ============================================================
   SwitchTicker — sticky announcement bar, rotates 2 messages.
   Both CTAs open the booking modal via window.askableOpenBooking.
============================================================ */
const TICKER_ITEMS = [
  { copy: "Switching from UserTesting? We cover your contract overlap.", cta: "Book a switch call" },
  { copy: "Stuck in a contract? We can help.", cta: "Book a switch call" },
];

function SwitchTicker({ variant, onDismiss }) {
  const v = TICKER_ITEMS[variant % TICKER_ITEMS.length];
  return (
    <div className="ticker-bar" style={{
      background: INK, color: "#fff",
      borderBottom: "1px solid rgba(255,255,255,0.08)",
    }}>
      <div style={{
        maxWidth: 1440, margin: "0 auto", padding: "12px 40px",
        display: "flex", alignItems: "center", justifyContent: "center",
        gap: 18, position: "relative",
      }}>
        <div key={variant} className="ticker-in" style={{
          display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap", justifyContent: "center",
          font: "500 14px/1.3 Instrument Sans, sans-serif",
        }}>
          <span style={{ width: 7, height: 7, borderRadius: 999, background: RED, flexShrink: 0 }} />
          <span style={{ color: "rgba(255,255,255,0.9)" }}>{v.copy}</span>
          <button onClick={() => window.askableOpenBooking && window.askableOpenBooking()} style={{
            color: RED, fontWeight: 600, background: "transparent", border: 0,
            padding: 0, cursor: "pointer",
            font: "600 14px/1.3 Instrument Sans, sans-serif",
            display: "inline-flex", alignItems: "center", gap: 4,
          }}>
            {v.cta} <Icon name="arrowRight" size={14} color={RED} />
          </button>
        </div>
        <button onClick={onDismiss} aria-label="Dismiss" style={{
          position: "absolute", right: 24, background: "transparent", border: 0,
          color: "rgba(255,255,255,0.45)", cursor: "pointer",
        }}>
          <Icon name="close" size={16} />
        </button>
      </div>
    </div>
  );
}

// Expose count so the App component can rotate variants correctly.
window.SWITCH_TICKER_COUNT = TICKER_ITEMS.length;

/* ============================================================
   SwitchHero — editorial split layout on warm paper
   Oversize Bricolage headline on the left, LinkedIn quote card
   styled as a small paper-on-paper card on the right.
============================================================ */
function SwitchHero() {
  return (
    <section id="talk" data-region="hero" style={{
      background: "rgb(254,239,241)", padding: "96px 40px 120px",
      borderWidth: 0, borderBottomStyle: "solid", borderBottomColor: LINE,
      position: "relative", overflow: "hidden",
    }}>
      <div style={{ maxWidth: 1440, margin: "0 auto", position: "relative", zIndex: 1,
        display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 72, alignItems: "center" }}>
        <div>
          <h1 style={{
            font: "700 92px / 0.86 'Bricolage Grotesque', sans-serif",
            color: INK, margin: "0 0 24px", letterSpacing: "-2px",
          }}>We all make<br/>mistakes.</h1>
          <p className="lead" style={{
            font: "500 22px / 1.3 'Instrument Sans', sans-serif",
            color: INK, margin: "0 0 14px", maxWidth: 620, opacity: 0.9,
          }}>Stuck in a UserTesting contract? Credits that run out, seats that bill per head, acquired and merged products to learn.</p>
          <p style={{
            font: "400 18px/1.55 Instrument Sans, sans-serif",
            color: INK_MUTED, margin: "0 0 40px", maxWidth: 560,
          }}>We help research and design teams switch. One platform, one price, every method. We can offer contract overlap when you move.</p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
            <Button variant="red" size="lg" icon="arrowRight" onClick={() => window.askableOpenBooking && window.askableOpenBooking()}>Book a switch call</Button>
          </div>
          <p style={{
            font: "400 13px/1 Instrument Sans, sans-serif",
            color: INK_MUTED, marginTop: 22,
          }}>20 minutes. No pitch, no slides.</p>
        </div>

        {/* Customer quote card */}
        <div style={{ display: "flex", justifyContent: "center" }}>
          <div style={{
            background: "#fff", borderRadius: 24, padding: "36px 36px 32px",
            border: `1px solid ${LINE}`, maxWidth: 480, width: "100%",
            boxShadow: "0 14px 40px -12px rgba(44,17,11,0.18)",
          }}>
            {/* Combined logo: Deliveroo + DoorDash */}
            <img src="assets/clients/deliveroo-doordash.png" alt="Deliveroo (now part of DoorDash)" style={{
              height: 32, width: "auto", display: "block",
              marginBottom: 32,
            }} />

            {/* Quote */}
            <p style={{
              font: "500 22px/1.45 Bricolage Grotesque, sans-serif",
              color: INK, margin: "0 0 36px",
              letterSpacing: "-0.01em",
              textWrap: "balance",
            }}>
              "Askable has been game-changing. We're moving faster than ever with more confidence. Every team is asking for insights every week now, and I can't see us going back to the old way."
            </p>

            {/* Attribution */}
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <img src="assets/jamie-nathan.png" alt="Jamie Nathan" style={{
                width: 48, height: 48, borderRadius: 999, objectFit: "cover",
                flexShrink: 0,
              }} />
              <div style={{ flex: 1 }}>
                <div style={{ font: "700 14px/1.3 Instrument Sans, sans-serif", color: INK }}>Jamie Nathan</div>
                <div style={{ font: "400 13px/1.3 Instrument Sans, sans-serif", color: INK_MUTED }}>Head of Consumer Insight</div>
                <div style={{ font: "400 13px/1.3 Instrument Sans, sans-serif", color: INK_MUTED }}>Deliveroo (now part of DoorDash)</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   TrustStrip — client logos, uses existing ClientLogoStrip
============================================================ */
function TrustStrip() {
  return (
    <section data-region="trust" style={{ background: "#fff", padding: "56px 40px", borderWidth: 0, borderBottomStyle: "solid", borderBottomColor: LINE }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div className="eyebrow" style={{
          font: "500 13px/1 Instrument Sans, sans-serif",
          letterSpacing: "0.08em", textTransform: "uppercase",
          color: INK_MUTED, marginBottom: 28, textAlign: "center",
        }}>Trusted by 10,000+ research and product teams</div>
        <ClientLogoStrip tone="dark" />
      </div>
    </section>
  );
}

/* ============================================================
   TheMath — crossed-out UT receipt + calculator
   On warm paper to feel continuous with hero
============================================================ */
function TheMath() {
  const [sus, setSus] = useState(2500);
  const [moderated, setModerated] = useState(2);
  const [unmoderated, setUnmoderated] = useState(1);
  const moderatedBurn = moderated * 8 * 30; // 8 participants × 30 SUs each
  const unmoderatedBurn = unmoderated * 200; // ~200 SUs per unmoderated study
  const monthlyBurn = Math.max(moderatedBurn + unmoderatedBurn, 1);
  const monthsToZero = useMemo(() => Math.max(0.5, Math.round((sus / monthlyBurn) * 10) / 10), [sus, monthlyBurn]);
  const monthsBlocked = Math.max(0, 12 - monthsToZero).toFixed(1);
  const runout = Math.ceil(monthsToZero);
  const bars = Array.from({ length: 12 }, (_, i) => i + 1);

  const utLines = [
    { label: "Subscription fee", value: "ask procurement" },
    { label: "Session credits", value: "runs out month 4" },
    { label: "Per-seat pricing", value: "× team size" },
    { label: "Feature tier upgrade", value: "for card sort" },
    { label: "Overage charges", value: "ask procurement" },
  ];

  return (
    <section id="math" data-region="math" style={{ background: PEACH, padding: "200px 40px" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 72 }}>
          <h2 style={{
            font: "700 64px/0.95 Bricolage Grotesque, sans-serif",
            color: INK, margin: "0 0 14px", letterSpacing: "-0.02em",
          }}>Research shouldn't be<br/>a budgeting exercise.</h2>
          <p className="lead" style={{
            font: "400 20px/1.4 Instrument Sans, sans-serif",
            color: INK_MUTED, maxWidth: 620, margin: "0 auto",
          }}>With Askable, you get one invoice. No credits. No per-seat cost. No overage charges.</p>
        </div>

        {/* Receipts */}
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64,
          maxWidth: 920, margin: "0 auto 96px",
        }}>
          {/* UT receipt — crossed out */}
          <div style={{
            background: "#fff", padding: 32, borderRadius: 6,
            boxShadow: "0 10px 30px -10px rgba(44,17,11,0.2)",
            transform: "rotate(-1.2deg)", position: "relative",
            fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace",
            borderWidth: "4px 0 0", borderStyle: "solid", borderColor: UT_BLUE,
          }}>
            {/* UT mark, top-right */}
            <div style={{
              position: "absolute", top: 16, right: 16,
              width: 22, height: 22, borderRadius: "50%",
              background: UT_BLUE, color: "#fff",
              display: "flex", alignItems: "center", justifyContent: "center",
              font: "800 11px/1 'Bricolage Grotesque', sans-serif", letterSpacing: 0,
            }}>UT</div>
            <div style={{ borderBottom: `2px dashed ${LINE}`, paddingBottom: 14, marginBottom: 18 }}>
              <div style={{ font: "700 16px/1 'Bricolage Grotesque', sans-serif", color: UT_BLUE, letterSpacing: "0.1em", marginBottom: 6 }}>USERTESTING INVOICE</div>
              <div style={{ font: "400 14px/1 'Instrument Sans', sans-serif", color: INK_MUTED, opacity: 0.7 }}>Year 1 of 3</div>
            </div>
            {utLines.map((line, i) => (
              <div key={i} style={{
                display: "flex", justifyContent: "space-between", padding: "9px 0",
                borderBottom: "1px dotted rgba(34,6,19,0.15)", fontSize: 12,
                color: INK, position: "relative",
              }}>
                <span>{line.label}</span>
                <span style={{ color: INK_MUTED }}>{line.value}</span>
                <div style={{
                  position: "absolute", top: "50%", left: -4, right: -4, height: 1.5,
                  background: RED, opacity: 0.7,
                }} />
              </div>
            ))}
            <div style={{
              borderTop: `2px dashed ${LINE}`, marginTop: 14, paddingTop: 14,
              display: "flex", justifyContent: "space-between",
              fontWeight: 700, fontSize: 13, color: INK,
            }}>
              <span>TOTAL</span>
              <span style={{ color: INK }}>unpredictable</span>
            </div>
          </div>

          {/* Askable receipt — clean */}
          <div style={{
            background: "#fff", padding: 32, borderRadius: 6,
            boxShadow: "0 10px 30px -10px rgba(44,17,11,0.12)",
            transform: "rotate(1deg)", position: "relative",
            fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace",
            borderWidth: "4px 0 0", borderStyle: "solid", borderColor: RED,
          }}>
            {/* Askable mark, top-right */}
            <div style={{ position: "absolute", top: 14, right: 14 }}>
              <IconMark variant="red" size={22} />
            </div>
            <div style={{ borderBottom: `2px dashed ${LINE}`, paddingBottom: 14, marginBottom: 18 }}>
              <div style={{ font: "700 16px/1 'Bricolage Grotesque', sans-serif", color: RED, letterSpacing: "0.1em", marginBottom: 6 }}>ASKABLE INVOICE</div>
              <div style={{ font: "400 14px/1 'Instrument Sans', sans-serif", color: INK_MUTED, opacity: 0.7 }}>Annual contract</div>
            </div>
            <div style={{ padding: "10px 0", fontSize: 14, color: INK }}>One price. Every method.<br/>Unlimited seats. No credits.</div>
            <div style={{
              display: "flex", justifyContent: "space-between", padding: "9px 0",
              borderTop: "1px dotted rgba(34,6,19,0.15)", fontSize: 14, color: INK,
            }}>
              <span style={{ fontSize: 14 }}>Everything, included</span>
              <span style={{ color: INK_MUTED, fontSize: 14 }}>one line</span>
            </div>
            <div style={{
              borderTop: `2px dashed ${LINE}`, marginTop: 14, paddingTop: 14,
              display: "flex", justifyContent: "space-between",
              fontWeight: 700, fontSize: 14, color: INK,
            }}>
              <span style={{ fontSize: 14 }}>TOTAL</span>
              <span style={{ color: INK, fontSize: 14 }}>one number</span>
            </div>
          </div>
        </div>

        {/* Calculator — on ink, inverted from section */}
        <div style={{ maxWidth: 1120, margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: 32 }}>
            <h3 style={{
              font: "700 56px/1 'Bricolage Grotesque', sans-serif",
              color: INK, margin: "0 0 10px", letterSpacing: "-0.02em",
            }}>Your numbers. Your burn rate.</h3>
            <p style={{ font: "400 16px/1.4 Instrument Sans, sans-serif", color: INK_MUTED }}>
              Move the sliders. See the month your team stops.
            </p>
          </div>

          <Card tone={INK} pad={44} elevation={3} style={{ color: "#fff", borderRadius: 24, border: 0 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }}>
              <div>
                <CalcSlider
                  label="Annual session units on your contract"
                  value={sus} valueDisplay={sus.toLocaleString()}
                  min={500} max={10000} step={100}
                  onChange={setSus}
                  minLabel="500" maxLabel="10,000"
                />
                <CalcSlider
                  label="Moderated studies per month"
                  value={moderated} valueDisplay={`${moderated} (${moderatedBurn.toLocaleString()} SUs)`}
                  min={0} max={8} step={1}
                  onChange={setModerated}
                  minLabel="0" maxLabel="8"
                />
                <CalcSlider
                  label="Unmoderated studies per month"
                  value={unmoderated} valueDisplay={`${unmoderated} (${unmoderatedBurn.toLocaleString()} SUs)`}
                  min={0} max={6} step={1}
                  onChange={setUnmoderated}
                  minLabel="0" maxLabel="6"
                />
                {/* Bar chart — moved into left column */}
                <div style={{
                  font: "400 18px/1 Instrument Sans, sans-serif",
                  color: "#fff", marginBottom: 18, marginTop: 28,
                }}>&nbsp;</div>
                <div style={{
                  display: "flex", alignItems: "stretch", gap: 6,
                  height: 140, marginBottom: 40,
                }}>
                  {bars.map((m) => {
                    const remaining = Math.max(0, sus - (m - 1) * monthlyBurn);
                    const hpct = (remaining / sus) * 100;
                    const isFuture = m > runout;
                    const t = runout > 1 ? Math.min(1, (m - 1) / (runout - 1)) : 1;
                    // Stay in blue range (220–260) until ~80% gone, then jump to red for the last bar
                    const inRed = t > 0.85;
                    const hue = inRed ? 8 : 225 - t * 10;
                    const sat = inRed ? 80 : 75;
                    const lit = inRed ? 56 : 62 - t * 18;
                    const barColor = `hsl(${hue}, ${sat}%, ${lit}%)`;
                    const trackColor = isFuture
                      ? "rgba(120,20,30,0.22)"
                      : `hsla(${hue}, ${Math.max(40, sat - 20)}%, 14%, 0.85)`;
                    return (
                      <div key={m} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 8, minWidth: 0 }}>
                        <div style={{
                          width: "100%", flex: 1,
                          background: trackColor,
                          borderRadius: 10,
                          display: "flex", alignItems: "flex-end",
                          overflow: "hidden",
                          transition: "background .25s",
                          minHeight: 0,
                        }}>
                          <div style={{
                            width: "100%",
                            height: isFuture ? 0 : `${Math.max(hpct, 4)}%`,
                            background: isFuture ? "transparent" : barColor,
                            borderRadius: 10,
                            transition: "height .3s ease, background .25s",
                          }} />
                        </div>
                        <div style={{
                          font: "500 12px/1 Instrument Sans, sans-serif",
                          color: "rgba(255,255,255,0.55)",
                          textAlign: "center",
                        }}>{m}</div>
                      </div>
                    );
                  })}
                </div>
                <div style={{
                  padding: 30, background: "rgba(52,93,243,0.29)",
                  borderWidth: 0, borderLeftStyle: "solid", borderLeftColor: UT_BLUE,
                  borderRadius: 16,
                }}>
                  <div style={{
                    font: "600 14px/1 Instrument Sans, sans-serif",
                    color: "rgb(134,160,255)", letterSpacing: "0.12em", marginBottom: 8,
                    textTransform: "uppercase",
                  }}>Your burn rate</div>
                  <div style={{
                    font: "400 54px/1 Bricolage Grotesque, sans-serif",
                    color: "#fff", marginBottom: 8, letterSpacing: "-0.02em",
                  }}>
                    {monthlyBurn.toLocaleString()}{" "}
                    <span style={{
                      font: "500 16px/1 Instrument Sans, sans-serif",
                      color: "rgba(255,255,255,0.6)",
                    }}>SUs / month</span>
                  </div>
                  <div style={{
                    font: "500 14px/1.5 Instrument Sans, sans-serif",
                    color: "rgba(255,255,255,0.75)",
                  }}>
                    Credits gone by <b style={{ color: "#fff" }}>month {monthsToZero.toFixed(1)}</b>. Then <b style={{ color: "rgb(255,92,67)" }}>{monthsBlocked} months</b> of rationing.
                  </div>
                </div>
              </div>

              <div style={{
                display: "flex", flexDirection: "column", justifyContent: "center",
                padding: 40, color: "#fff",
                background: RED,
                borderRadius: 20,
              }}>
                <div style={{ paddingTop: 4 }}>
                  {/* Pill badge */}
                  <div style={{
                    display: "inline-flex", alignItems: "center",
                    background: INK, color: "#fff",
                    padding: "8px 18px", borderRadius: 999,
                    font: "500 14px/1 Instrument Sans, sans-serif",
                    marginBottom: 18,
                  }}>On Askable</div>
                  <div style={{
                    font: "600 48px/1.05 Bricolage Grotesque, sans-serif",
                    letterSpacing: "-0.02em", marginBottom: 18,
                  }}>
                    <span style={{ color: "#fff", fontWeight: 600 }}>Zero credit limits.<br/></span>
                    <span style={{ color: "rgba(255,255,255,0.7)", fontWeight: 600 }}>Zero ever.</span>
                  </div>
                  <ul style={{
                    listStyle: "none", padding: 0, margin: 0,
                    display: "flex", flexDirection: "column", gap: 10,
                  }}>
                    {["One price.", "Every method.", "Unlimited seats.", "No credits."].map((t, i) => (
                      <li key={i} style={{
                        display: "flex", alignItems: "center", gap: 12,
                        font: "500 16px/1.3 Instrument Sans, sans-serif", color: "#fff",
                      }}>
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" style={{ flexShrink: 0 }} aria-hidden="true">
                          <path d="M3 9.5L7 13.5L15 5" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                        {t}
                      </li>
                    ))}
                  </ul>
                  <button
                    onClick={() => window.askableOpenBooking && window.askableOpenBooking()}
                    style={{
                      display: "inline-flex", alignItems: "center", gap: 8, marginTop: 24,
                      font: "600 18px/1 Instrument Sans, sans-serif",
                      color: "#fff", background: INK,
                      padding: "14px 22px", borderRadius: 999,
                      border: 0, cursor: "pointer",
                      alignSelf: "flex-start",
                    }}>
                    Book a switch call <Icon name="arrowRight" size={16} color="#fff" />
                  </button>
                </div>
              </div>
            </div>
          </Card>
          <p style={{
            font: "400 12px/1 Instrument Sans, sans-serif",
            color: INK_MUTED, textAlign: "center", marginTop: 18,
          }}>Math assumes 8 participants per moderated study at 30 SUs each, plus one unmoderated at 200 SUs when volume exceeds 2/month. Based on publicly accessible data from UserTesting help docs.</p>
        </div>
      </div>
    </section>
  );
}

function CalcSlider({ label, value, valueDisplay, min, max, step, onChange, minLabel, maxLabel }) {
  return (
    <div style={{ marginBottom: 28 }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
        <label style={{
          font: "400 18px/1 Instrument Sans, sans-serif",
          color: "#fff",
        }}>{label}</label>
        <span style={{
          font: "400 18px/1 Instrument Sans, sans-serif", color: "#fff",
        }}>{valueDisplay}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="ask-range"
        style={{ "--pct": `${((value - min) / (max - min)) * 100}%` }}
      />
      <div style={{
        display: "flex", justifyContent: "space-between", marginTop: 6,
        font: "400 11px/1 Instrument Sans, sans-serif",
        color: "rgba(255,255,255,0.4)",
      }}>
        <span>{minLabel}</span><span>{maxLabel}</span>
      </div>
    </div>
  );
}

/* ============================================================
   ProofBlock — G2 scores + side-by-side feature table
============================================================ */
function ProofBlock() {
  const scores = [
    { label: "Overall", a: "4.6", u: "4.4" },
    { label: "Ease of use", a: "9.1", u: "8.4" },
    { label: "Ease of setup", a: "9.4", u: "8.6" },
    { label: "Support", a: "9.4", u: "9.0" },
    { label: "Product direction", a: "9.2", u: "8.1" },
  ];
  return (
    <section data-region="proof" style={{ background: "#fff", padding: "140px 40px" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <div style={{
            font: "500 13px/1 'Instrument Sans', sans-serif",
            color: INK_MUTED, letterSpacing: "0.14em", marginBottom: 14,
            textTransform: "uppercase",
          }}>G2 ratings · Spring 2026</div>
          <h2 style={{
            font: "700 52px/0.95 Bricolage Grotesque, sans-serif",
            color: INK, margin: 0, letterSpacing: "-0.02em",
          }}>Users score Askable higher<br/>on every dimension.</h2>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 14,
          maxWidth: 960, margin: "0 auto",
        }}>
          {scores.map((s, i) => (
            <Card key={i} tone="paper" pad={22} elevation={0} style={{ textAlign: "center", border: `1px solid ${LINE}`, boxShadow: "none" }}>
              <div style={{
                font: "500 14px/1 'Instrument Sans', sans-serif",
                color: INK_MUTED, marginBottom: 12,
              }}>{s.label}</div>
              <div style={{
                font: "500 54px/1 'Bricolage Grotesque', sans-serif",
                color: INK, letterSpacing: "-0.02em",
              }}>{s.a}</div>
              <div style={{
                font: "500 14px/1 'Instrument Sans', sans-serif",
                color: INK_MUTED, marginTop: 10,
              }}>UT: {s.u}</div>
            </Card>
          ))}
        </div>

        {/* Trust badges row */}
        <div style={{
          maxWidth: 960, margin: "56px auto 0",
          paddingTop: 48, borderTop: `1px solid ${LINE}`,
          textAlign: "center",
        }}>
          <div style={{
            font: "500 13px/1 'Instrument Sans', sans-serif",
            color: INK_MUTED, letterSpacing: "0.14em", marginBottom: 28,
            textTransform: "uppercase",
          }}>Recognised across the industry</div>
          <img
            src="assets/trust-badges.png"
            alt="Industry trust badges and reviews"
            style={{
              maxWidth: "100%",
              height: "auto",
              display: "block",
              margin: "0 auto",
            }}
          />
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SocialProof — feature Tesco quote + supporting pair
============================================================ */
function SocialProof() {
  return (
    <section data-region="social" style={{ background: PAPER, padding: "200px 40px" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 36,
          alignItems: "stretch", maxWidth: 1180, margin: "0 auto",
        }}>
          <div style={{
            background: INK, color: "#fff", padding: "56px 44px",
            borderRadius: 24, position: "relative", overflow: "hidden",
            minHeight: 360,
          }}>
            <div style={{ position: "relative", zIndex: 1 }}>
              <img
                src="assets/clients/tesco-white.svg"
                alt="Tesco"
                style={{ height: 28, width: "auto", display: "block" }}
              />
              <p style={{
                font: "400 34px/1.15 'Bricolage Grotesque', sans-serif",
                color: "#fff", margin: "48px 0 32px", letterSpacing: "-0.02em",
                textWrap: "balance",
              }}>"It's completely transformed how we run research in Central Europe."</p>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <img src="assets/serkan.png" alt="Serkan Ayan" style={{
                  width: 44, height: 44, borderRadius: 999, objectFit: "cover",
                  border: "1.5px solid rgba(255,255,255,0.25)", flexShrink: 0,
                }} />
                <div>
                  <div style={{ font: "700 14px/1.2 Instrument Sans, sans-serif" }}>Serkan Ayan</div>
                  <div style={{ font: "400 12px/1.2 Instrument Sans, sans-serif", opacity: 0.8 }}>UX Research Manager, Tesco</div>
                </div>
              </div>
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            <Card tone="white" pad={28} elevation={2}>
              <p style={{
                font: "italic 400 20px/1.45 'Bricolage Grotesque', Georgia, serif",
                color: INK, margin: "0 0 14px", letterSpacing: "-0.2px",
              }}>"Every week, we were hearing directly from real business owners. It evolved our proposition with confidence."</p>
              <div style={{ font: "600 13px/1.3 Instrument Sans, sans-serif", color: INK }}>Phil James</div>
              <div style={{ font: "400 12px/1.3 Instrument Sans, sans-serif", color: INK_MUTED }}>Head of Design, Allica Bank</div>
            </Card>
            <Card tone="white" pad={28} elevation={2}>
              <p style={{
                font: "italic 400 19px/1.45 'Bricolage Grotesque', Georgia, serif",
                color: INK, margin: "0 0 14px", letterSpacing: "-0.2px",
              }}>"Moving faster than ever with more confidence. I can't see us going back to the old way."</p>
              <div style={{ font: "600 13px/1.3 Instrument Sans, sans-serif", color: INK }}>Jamie Nathan</div>
              <div style={{ font: "400 12px/1.3 Instrument Sans, sans-serif", color: INK_MUTED }}>Head of Consumer Insight, Deliveroo (now part of DoorDash)</div>
            </Card>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Faq — plain language, paper background
============================================================ */
function Faq() {
  const faq = [
    { q: "Can you actually help if we're mid-contract?", a: "Yes. Most teams we talk to are mid-contract on UserTesting. Book a call and tell us about your situation." },
    { q: "Do you compete with UserTesting on every method?", a: "Every method. Moderated interviews, AI-moderated, unmoderated, card sort, tree test, diary, surveys, 5-second tests. All on every plan, with unlimited seats." },
    { q: "How does migration work in practice?", a: "Data import supported. Dedicated onboarding team. Most teams move across smoothly with no service disruption." },
    { q: "What about our existing contract?", a: "We have flexibility on overlap. Book a call and we'll work through your specific contract dates. The shape of the conversation depends on your situation." },
    { q: "What's the AI actually doing?", a: "Askable AI moderates the interview itself in 17+ languages, scores every piece of evidence on five dimensions, and surfaces insights traced to the participant, the quote, and the timestamp. It runs as part of the workflow, not as a separate feature." },
    { q: "Is the panel really first-party?", a: "Yes. We recruit, screen, vet, and pay participants ourselves. No third-party brokers. 50+ countries, millions of verified participants, 97.8% show rate. The panel is the company's foundation, not a feature we bolted on." },
    { q: "Security and compliance?", a: "SOC 2 Type 2, ISO 27001 (2019 + 2022), ISO 27701, ISO 42001 AI, GDPR, CCPA, UK Cyber Essentials. Zero data retention with LLM providers. Training contractually prohibited." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section data-region="faq" style={{ background: "#fff", padding: "200px 40px", borderTop: `1px solid ${LINE}` }}>
      <div style={{
        maxWidth: 1240, margin: "0 auto",
        display: "grid", gridTemplateColumns: "0.8fr 1.4fr", gap: 80,
        alignItems: "start",
      }}>
        <div>
          <h2 style={{
            font: "700 88px/0.9 'Bricolage Grotesque', sans-serif",
            color: INK, margin: "0 0 22px", letterSpacing: "-1px",
          }}>The real<br/>blockers.</h2>
          <p style={{
            font: "400 17px/1.5 Instrument Sans, sans-serif",
            color: INK, opacity: 0.85, margin: 0, maxWidth: 360,
          }}>The questions every team asks before they switch a research tool mid-contract.</p>
        </div>
        <div>
          {faq.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderBottom: `1px solid ${LINE}`,
                padding: i === 0 ? "0 0 24px" : "24px 0",
              }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: "100%", background: "transparent", border: 0, padding: 0,
                    display: "flex", justifyContent: "space-between", alignItems: "center",
                    gap: 24, cursor: "pointer", textAlign: "left",
                  }}>
                  <span style={{
                    font: "600 22px/1.3 'Instrument Sans', sans-serif",
                    color: INK, letterSpacing: "-0.005em",
                  }}>{f.q}</span>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                    stroke={INK} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                    style={{
                      flexShrink: 0,
                      transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
                      transition: "transform .25s ease",
                    }}>
                    <path d="M12 5v14M5 12l7 7 7-7"/>
                  </svg>
                </button>
                {isOpen && (
                  <p className="fade-in" style={{
                    font: "400 15px/1.6 Instrument Sans, sans-serif",
                    color: INK, opacity: 0.75, margin: "16px 0 0", maxWidth: 620,
                  }}>{f.a}</p>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FinalCta — countdown on ink, terracotta waves like Askable footer
============================================================ */
function FinalCta() {
  return (
    <section id="finalcta" data-region="finalcta" style={{
      background: INK, color: "#fff", padding: "160px 40px",
      position: "relative", overflow: "hidden",
    }}>
      <div style={{
        maxWidth: 1240, margin: "0 auto", textAlign: "center",
        position: "relative", zIndex: 1,
      }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 12, marginBottom: 28 }}>
          <img src="assets/jonathan-peck.png" alt="Jona" style={{
            width: 44, height: 44, borderRadius: 999, objectFit: "cover",
            border: "2px solid rgba(255,255,255,0.4)",
          }} />
          <div style={{ textAlign: "left" }}>
            <div style={{
              font: "700 14px/1.2 Instrument Sans, sans-serif", color: "#fff",
            }}>Jona Peck</div>
            <div style={{
              font: "400 12px/1.2 Instrument Sans, sans-serif", color: "rgba(255,255,255,0.65)",
            }}>Head of US, Askable</div>
          </div>
        </div>

        <h2 style={{
          font: "600 80px/0.95 'Bricolage Grotesque', sans-serif",
          color: "#fff", margin: "0 0 22px", letterSpacing: "-0.03em",
          textWrap: "balance",
        }}>Worth a 20-minute<br/>conversation?</h2>
        <p style={{
          font: "400 20px/1.5 Instrument Sans, sans-serif",
          color: "rgba(255,255,255,0.78)", maxWidth: 580, margin: "0 auto 40px",
        }}>We'll walk through your situation and tell you straight whether Askable is the right move. If it isn't, we'll say so.</p>

        <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
          <Button variant="red" size="lg" icon="arrowRight" onClick={() => window.askableOpenBooking && window.askableOpenBooking()}>Book a switch call</Button>
        </div>

        <p style={{
          font: "400 13px/1 Instrument Sans, sans-serif",
          color: "rgba(255,255,255,0.5)", marginTop: 28,
        }}>Same-day response.</p>
      </div>
    </section>
  );
}

/* ============================================================
   FrankV3 — soft-tinted outer cards, 2x2 UT grid + single Askable
   block, status badges (X / check) on the bullet lists.
============================================================ */
function FrankV3() {
  const utCards = [
    { year: "2019", name: "Teston", note: "Norwegian unmoderated platform.", shade: "dark" },
    { year: "2021", name: "EnjoyHQ", note: "Bolted on repository.", shade: "light" },
    { year: "2022", name: "UserZoom", note: "Different pricing logic. Different seat system.", shade: "light" },
    { year: "2026", name: "User Interviews", note: "Panel now controlled by a direct competitor.", shade: "dark" },
  ];
  const utProblems = [
    "UX patterns are confusing.",
    "Pricing model is complex.",
    "AI bolted on, always playing catch-up.",
  ];
  const askableWins = [
    "Every interview compounds. One queryable repository.",
    "One UX across moderated, unmoderated, and AI-driven research.",
    "One price. Every method included. No tier upgrades.",
    "AI that works, with data unified from day one.",
  ];

  const UT_DARK = "rgb(56, 76, 220)";
  const UT_LIGHT = "rgb(108, 128, 240)";
  const UT_TINT = "rgb(238, 242, 254)";
  const ASK_TINT = "rgb(254, 240, 238)";
  const CHECK_GREEN = "rgb(22, 163, 74)";
  const X_RED = "rgb(220, 53, 56)";

  const StatusBadge = ({ type }) => {
    const isX = type === "x";
    return (
      <span style={{
        width: 22, height: 22, borderRadius: 999, flexShrink: 0,
        background: isX ? X_RED : CHECK_GREEN,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
      }}>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
          stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
          {isX ? <><path d="M18 6 6 18"/><path d="m6 6 12 12"/></> : <path d="M20 6 9 17l-5-5"/>}
        </svg>
      </span>
    );
  };

  return (
    <section id="frank-v3" data-region="frank-v3" style={{ background: "#fff", padding: "160px 40px", borderTop: `1px solid ${LINE}` }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 64 }}>
          <h2 style={{
            font: "700 76px/0.95 Bricolage Grotesque, sans-serif",
            color: INK, margin: "0 auto 24px", letterSpacing: "-0.025em",
            maxWidth: 920,
          }}>Stitched together doesn't<br/>mean integrated.</h2>
          <p className="lead" style={{
            font: "400 18px/1.5 Instrument Sans, sans-serif",
            color: INK_MUTED, maxWidth: 580, margin: "0 auto",
          }}>UserTesting assembled a platform through acquisitions and mergers. Previous customers had issues with the user experience and limited features.</p>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32,
          alignItems: "stretch",
        }}>
          {/* UT column */}
          <div style={{ display: "flex", flexDirection: "column" }}>
            <div style={{
              font: "700 17px/1 Instrument Sans, sans-serif",
              color: INK, marginBottom: 18, textAlign: "center",
            }}>UserTesting: Assembled</div>
            <div style={{
              background: UT_TINT, padding: 28, borderRadius: 28,
              display: "flex", flexDirection: "column", flex: 1,
            }}>
              <div style={{
                display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12,
                marginBottom: 32,
              }}>
                {utCards.map((c) => (
                  <div key={c.name} style={{
                    background: c.shade === "dark" ? UT_DARK : UT_LIGHT,
                    color: "#fff", padding: "22px 22px 24px", borderRadius: 18,
                    minHeight: 180, display: "flex", flexDirection: "column",
                  }}>
                    <div style={{ font: "400 13px/1 Instrument Sans, sans-serif", opacity: 0.85, marginBottom: 6 }}>{c.year}</div>
                    <div style={{ font: "700 22px/1.1 Bricolage Grotesque, sans-serif", marginBottom: 10, letterSpacing: "-0.01em" }}>{c.name}</div>
                    <p style={{ font: "400 14px/1.45 Instrument Sans, sans-serif", color: "rgba(255,255,255,0.92)", margin: 0 }}>{c.note}</p>
                  </div>
                ))}
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 16 }}>
                {utProblems.map((p, i) => (
                  <li key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <div style={{ paddingTop: 2 }}><StatusBadge type="x" /></div>
                    <span style={{ font: "400 15px/1.45 Instrument Sans, sans-serif", color: INK }}>{p}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* Askable column */}
          <div style={{ display: "flex", flexDirection: "column" }}>
            <div style={{
              font: "700 17px/1 Instrument Sans, sans-serif",
              color: INK, marginBottom: 18, textAlign: "center",
            }}>Askable: One thing</div>
            <div style={{
              background: ASK_TINT, padding: 28, borderRadius: 28,
              display: "flex", flexDirection: "column", flex: 1,
            }}>
              <div style={{
                background: RED, color: "#fff",
                padding: "32px 28px 0",
                borderRadius: 18, marginBottom: 32,
                overflow: "hidden",
                display: "flex", flexDirection: "column",
              }}>
                <div style={{ font: "400 14px/1 Instrument Sans, sans-serif", opacity: 0.9, marginBottom: 14 }}>2017–now</div>
                <div style={{ font: "700 56px/1 Bricolage Grotesque, sans-serif", marginBottom: 20, letterSpacing: "-0.025em" }}>Askable</div>
                <p style={{ font: "400 16px/1.55 Instrument Sans, sans-serif", color: "rgba(255,255,255,0.95)", margin: "0 0 28px" }}>
                  Built as one platform. One UX.<br/>
                  One pricing model. One data model.<br/>
                  Since day one.
                </p>
                <img
                  src="assets/askable-platform-results.png"
                  alt="Askable platform — results dashboard with goal completion rate and path analysis"
                  style={{
                    display: "block",
                    width: "100%",
                    height: "auto",
                    marginTop: "auto",
                    borderRadius: "10px 10px 0 0",
                    boxShadow: "0 -8px 24px rgba(0,0,0,0.18)",
                  }}
                />
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 16 }}>
                {askableWins.map((w, i) => (
                  <li key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <div style={{ paddingTop: 2 }}><StatusBadge type="check" /></div>
                    <span style={{ font: "400 15px/1.45 Instrument Sans, sans-serif", color: INK }}>{w}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   AIGap — UT can't run AI-moderated interviews properly.
   Askable AI runs the interview itself, in 17+ languages,
   on a panel that actually shows up. (Light participant ref.)
============================================================ */
function AIGap() {
  const rows = [
    { capability: "AI-moderated interviews", ut: "Not available", askable: "17+ languages, hundreds in parallel, 24/7" },
    { capability: "Real-time synthesis with quality scoring", ut: "Post-recording summary", askable: "Concept extraction, scored on 5 dimensions" },
    { capability: "Conversational AI query, evidence-traced", ut: "Limited", askable: "AskAI: every answer linked to a participant, quote, timestamp" },
    { capability: "AI across the entire workflow", ut: "Limited", askable: "One platform, recruit to evidence, end to end" },
    { capability: "MCP pipe into enterprise LLMs", ut: "Not available", askable: "Integration with Claude and Copilot" },
    { capability: "AI on owned first-party panel data", ut: "Mixed third-party signals", askable: "Recruit, screen, moderate on owned panel" },
    { capability: "ISO 42001 AI Management certified", ut: "Not certified", askable: "Certified" },
    { capability: "Zero data retention with LLM providers", ut: "Unknown", askable: "Contractually enforced, no model training" },
    { capability: "AI knowledge that compounds across studies", ut: "Limited", askable: "Cross-study, cross-time, institutional memory" },
    { capability: "AI-generated prototype prompts", ut: "Not available", askable: "Figma and Lovable prompts straight from findings" },
  ];

  return (
    <section id="aigap" data-region="aigap" style={{ background: PAPER, padding: "160px 40px", borderTop: `1px solid ${LINE}` }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 64 }}>
          <Chip tone="peach" dot>AI platform, not AI features</Chip>
          <h2 style={{
            font: "700 64px/0.95 Bricolage Grotesque, sans-serif",
            color: INK, margin: "20px 0 18px", letterSpacing: "-0.02em",
          }}>AI as a feature is not the same<br/>as AI as a platform.</h2>
          <p className="lead" style={{
            font: "400 20px/1.4 Instrument Sans, sans-serif",
            color: INK_MUTED, maxWidth: 720, margin: "0 auto",
          }}>Most research tools bolted AI onto a workflow built before AI existed. Askable AI runs across the entire suite. Here's what that looks like, capability by capability.</p>
        </div>

        {/* Feature comparison table */}
        <div style={{
          maxWidth: 1080, margin: "0 auto", borderRadius: 24, overflow: "hidden",
          border: `1px solid ${LINE}`, background: "#fff",
        }}>
          <table style={{ width: "100%", borderCollapse: "separate", borderSpacing: 0 }}>
            <thead>
              <tr style={{ background: PAPER_WARM }}>
                <th style={{
                  textAlign: "left", padding: "20px 24px",
                  font: "500 13px/1 Instrument Sans, sans-serif",
                  color: INK_MUTED, borderBottom: `1px solid ${LINE}`,
                  width: "38%",
                }}>AI capability</th>
                <th style={{
                  textAlign: "left", padding: "20px 24px",
                  font: "500 13px/1 Instrument Sans, sans-serif",
                  color: INK_MUTED, borderBottom: `1px solid ${LINE}`,
                  width: "30%",
                }}>UserTesting<span style={{ color: INK_MUTED, marginLeft: 2 }}>*</span></th>
                <th style={{
                  textAlign: "left", padding: "20px 24px",
                  font: "700 13px/1 Instrument Sans, sans-serif",
                  color: INK, borderBottom: `1px solid ${LINE}`,
                  width: "32%",
                }}>Askable</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i}>
                  <td style={{
                    padding: "18px 24px",
                    font: "600 15px/1.4 Instrument Sans, sans-serif", color: INK,
                    borderTop: i === 0 ? 0 : `1px solid ${LINE}`,
                    verticalAlign: "top",
                  }}>{r.capability}</td>
                  <td style={{
                    padding: "18px 24px",
                    font: "400 14px/1.5 Instrument Sans, sans-serif",
                    color: INK_MUTED,
                    borderTop: i === 0 ? 0 : `1px solid ${LINE}`,
                    verticalAlign: "top",
                  }}>{r.ut}</td>
                  <td style={{
                    padding: "18px 24px",
                    font: "500 14px/1.5 Instrument Sans, sans-serif",
                    color: INK,
                    borderTop: i === 0 ? 0 : `1px solid ${LINE}`,
                    background: "rgba(251,81,83,0.04)",
                    verticalAlign: "top",
                  }}>
                    <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                      <Icon name="check" size={16} color={MINT} strokeWidth={2.5} />
                      <span style={{ flex: 1 }}>{r.askable}</span>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Source footnote for the comparison table */}
        <p style={{
          maxWidth: 1080, margin: "14px auto 0",
          font: "400 12px/1.4 Instrument Sans, sans-serif",
          color: INK_MUTED, textAlign: "left",
        }}>* Based on information available from <a href="https://www.usertesting.com" target="_blank" rel="noopener" style={{ color: "inherit", textDecoration: "underline" }}>UserTesting.com</a>.</p>

        {/* Procurement-ready callout */}
        <div style={{
          maxWidth: 1080, margin: "40px auto 0",
          padding: "28px 36px", borderRadius: 20,
          background: INK, color: "#fff",
          display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center",
        }}>
          <div>
            <div style={{
              font: "600 12px/1 Instrument Sans, sans-serif",
              color: RED, letterSpacing: "0.14em", marginBottom: 10,
              textTransform: "uppercase",
            }}>Procurement-ready</div>
            <p style={{
              font: "400 16px/1.5 Instrument Sans, sans-serif",
              color: "rgba(255,255,255,0.9)", margin: 0, maxWidth: 680,
            }}>ISO 42001 AI Management certified. Zero data retention with LLM providers, contractually enforced. Model-agnostic architecture so the AI layer evolves without disrupting your evidence base.</p>
          </div>
          <Button variant="red" size="md" icon="arrowRight" onClick={() => window.askableOpenBooking && window.askableOpenBooking()}>Talk it through</Button>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ExitIntentModal — fires once per session when cursor leaves
   the viewport top. Calculator-led CTA (lowest friction).
============================================================ */
function ExitIntentModal({ onClose, onBook }) {
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(34,6,19,0.55)",
      zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center",
      padding: 20, backdropFilter: "blur(6px)",
      animation: "fadeIn 0.25s ease-out",
    }}>
      <div onClick={(e) => e.stopPropagation()} className="fade-in" style={{
        background: "#fff", color: INK, maxWidth: 540, borderRadius: 24,
        padding: "44px 40px", position: "relative",
        border: `1px solid ${LINE}`,
        boxShadow: "0 30px 80px rgba(34,6,19,0.25)",
      }}>
        <button onClick={onClose} aria-label="Close" style={{
          position: "absolute", top: 18, right: 18, background: "transparent",
          border: 0, color: INK_MUTED, cursor: "pointer",
        }}>
          <Icon name="close" size={20} />
        </button>

        <Chip tone="peach" dot>Before you go</Chip>

        <h3 style={{
          font: "700 40px/1.05 'Bricolage Grotesque', sans-serif",
          color: INK, margin: "20px 0 16px", letterSpacing: "-0.02em",
        }}>Stuck in a contract?</h3>
        <p style={{
          font: "400 17px/1.55 Instrument Sans, sans-serif",
          color: INK, opacity: 0.85, margin: "0 0 12px",
        }}>Talk to us before you renew. We can offer contract overlap for free. We've helped 20+ teams switch this year.</p>
        <p style={{
          font: "400 15px/1.55 Instrument Sans, sans-serif",
          color: INK_MUTED, margin: "0 0 28px",
        }}>20 minutes. No pitch, no slides.</p>

        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <Button variant="red" size="lg" icon="arrowRight" onClick={onBook} style={{ flex: 1, minWidth: 200, justifyContent: "center" }}>Book a switch call</Button>
          <Button variant="hollow" size="lg" onClick={onClose}>Not now</Button>
        </div>

        <p style={{
          font: "400 12px/1.4 Instrument Sans, sans-serif",
          color: INK_MUTED, marginTop: 22, textAlign: "center",
        }}>Or <a href="#math" onClick={onClose} style={{
          color: INK, textDecoration: "underline",
        }}>run the math yourself</a> first.</p>
      </div>
    </div>
  );
}

/* ============================================================
   MomentumChip — floating bottom-left social proof chip.
   Appears after 30% scroll depth. Dismissible, remembers via
   sessionStorage. Hidden on mobile via CSS (.momentum-chip).
============================================================ */
function MomentumChip() {
  // Sourced from LP_CONFIG.MOMENTUM_COUNT (set in index.html head).
  // Bump that number every few days from HubSpot (deal stage = "Switch call booked", last 7 days).
  // Set to null/0 in LP_CONFIG to hide the chip entirely.
  const callsThisWeek = (window.LP_CONFIG && window.LP_CONFIG.MOMENTUM_COUNT) || 0;
  const [visible, setVisible] = useState(false);
  const [dismissed, setDismissed] = useState(false);

  useEffect(() => {
    if (sessionStorage.getItem("momentum-dismissed")) {
      setDismissed(true);
      return;
    }
    const handleScroll = () => {
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const pct = docHeight > 0 ? window.scrollY / docHeight : 0;
      if (pct > 0.3) {
        setVisible(true);
        // Stop listening once shown
        window.removeEventListener("scroll", handleScroll);
      }
    };
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const dismiss = () => {
    sessionStorage.setItem("momentum-dismissed", "1");
    setDismissed(true);
  };

  if (!callsThisWeek || dismissed || !visible) return null;

  return (
    <div className="momentum-chip slide-up" style={{
      position: "fixed", bottom: 24, left: 24, zIndex: 80,
      background: "#fff", color: INK,
      border: `1px solid ${LINE}`,
      borderRadius: 16, padding: "14px 18px",
      maxWidth: 320,
      boxShadow: "0 10px 30px -10px rgba(44,17,11,0.18)",
      display: "flex", alignItems: "center", gap: 14,
    }}>
      <div style={{
        width: 8, height: 8, borderRadius: 999,
        background: "rgb(22, 163, 74)",
        flexShrink: 0,
        boxShadow: "0 0 0 4px rgba(22,163,74,0.15)",
      }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          font: "600 13px/1.3 Instrument Sans, sans-serif",
          color: INK, marginBottom: 3,
        }}>{callsThisWeek} switch calls booked this week</div>
        <button onClick={() => window.askableOpenBooking && window.askableOpenBooking()} style={{
          font: "600 12px/1.3 Instrument Sans, sans-serif",
          color: RED, background: "transparent", border: 0, padding: 0,
          cursor: "pointer",
        }}>Add yours →</button>
      </div>
      <button onClick={dismiss} aria-label="Dismiss" style={{
        background: "transparent", border: 0, padding: 4,
        color: INK_MUTED, cursor: "pointer", flexShrink: 0,
      }}>
        <Icon name="close" size={14} />
      </button>
    </div>
  );
}

/* ============================================================
   BookingModal — embeds the ScheduleHero campaign booking page
   in a modal. Triggered by window.askableOpenBooking() from any
   CTA on the page.
============================================================ */
function BookingModal({ onClose }) {
  // Lock body scroll while open
  useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = prev; };
  }, []);

  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(34,6,19,0.55)",
      zIndex: 200, display: "flex", alignItems: "center", justifyContent: "center",
      padding: 20, backdropFilter: "blur(6px)",
      animation: "fadeIn 0.2s ease-out",
    }}>
      <div onClick={(e) => e.stopPropagation()} className="fade-in" style={{
        background: "#fff", color: INK,
        width: "100%", maxWidth: 980, height: "90vh", maxHeight: 860,
        borderRadius: 24, position: "relative",
        border: `1px solid ${LINE}`,
        boxShadow: "0 30px 80px rgba(34,6,19,0.3)",
        overflow: "hidden",
        display: "flex", flexDirection: "column",
      }}>
        <button onClick={onClose} aria-label="Close" style={{
          position: "absolute", top: 16, right: 16, zIndex: 3,
          width: 40, height: 40, borderRadius: 999,
          background: "#fff", border: `1px solid ${LINE}`,
          color: INK, cursor: "pointer",
          display: "flex", alignItems: "center", justifyContent: "center",
          boxShadow: "0 2px 12px rgba(34,6,19,0.12)",
        }}>
          <Icon name="close" size={18} />
        </button>

        <iframe
          src={(window.LP_CONFIG && window.LP_CONFIG.BOOKING_URL) || "https://askable.schedulehero.io/campaign/switch-to-askable"}
          title="Book a switch call with Askable"
          style={{
            border: "none",
            width: "100%", height: "100%",
            borderRadius: 24,
          }}
          allow="camera; microphone; clipboard-write"
        />
      </div>
    </div>
  );
}

Object.assign(window, {
  SwitchTicker, SwitchHero, TrustStrip, TheMath, FrankV3, AIGap,
  ProofBlock, SocialProof, Faq, FinalCta,
  ExitIntentModal, BookingModal, MomentumChip,
});