// Research Methods landing page — sections built on the Askable UI kit.
// Primitives: Logo, Icon, Button, Chip, Card (global)
// Chrome: Navbar (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 MINT = "#1a8a6a";
const LINE = "rgba(34,6,19,0.10)";

/* ---------- Vendored asset paths (all local, no external CDN) ---------- */
const FIGMA = "./assets/figma";
const METHOD_ICONS = {
  ai: `${FIGMA}/method-ai.svg`,
  remote: `${FIGMA}/method-remote.svg`,
  prototype: `${FIGMA}/method-prototype.svg`,
  liveSite: `${FIGMA}/method-livesite.svg`,
  surveys: `${FIGMA}/method-surveys.svg`,
  fiveSec: `${FIGMA}/method-fivesec.svg`,
  tree: `${FIGMA}/method-tree.svg`,
  card: `${FIGMA}/method-card.svg`,
  firstClick: `${FIGMA}/method-firstclick.svg`,
  stack: `${FIGMA}/method-stack.svg`,
};
const BENEFIT_IMAGES = {
  time: `${FIGMA}/benefit-time.png`,
  unified: `${FIGMA}/benefit-unified.png`,
  global: `${FIGMA}/benefit-global.png`,
};
const HERO_IMG = `${FIGMA}/hero-product-mockup.png`;
const AVATAR_GROUP = `${FIGMA}/avatar-group.png`;
const STARS_ICON = `${FIGMA}/stars-rating.svg`;
const GLOBE_MAP = `${FIGMA}/globe-map.webp`;
const TRUST_BADGES_IMG = `${FIGMA}/trust-badges-legacy.png`;
const PRODUCT_SCREENSHOTS = {
  one: `${FIGMA}/product-screenshot-1.png`,
  surveys: `${FIGMA}/product-screenshot-surveys.png`,
  frame: `${FIGMA}/product-screenshot-frame.png`,
};

/* ============================================================
   MethodsTicker — sticky announcement bar, rotates 3 messages
============================================================ */
function MethodsTicker({ variant, onDismiss }) {
  const items = [
    { copy: "Every research method, on every plan.", cta: "See the methods", anchor: "#methods" },
    { copy: "97.8% show rate, on a panel we own.", cta: "See the panel", anchor: "#panel" },
    { copy: "Get the inside track on pricing.", cta: "Run the numbers", anchor: "#pricing" },
  ];
  const v = items[variant];
  return (
    <div style={{
      background: INK, color: "#fff",
      borderBottom: "1px solid rgba(255,255,255,0.08)",
      position: "relative", zIndex: 1,
    }}>
      <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>
          <a href={v.anchor} style={{
            color: RED, fontWeight: 600, textDecoration: "none",
            display: "inline-flex", alignItems: "center", gap: 4,
          }}>
            {v.cta} <Icon name="arrowRight" size={14} color={RED} />
          </a>
        </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>
  );
}

/* ============================================================
   MethodsHero — split layout, headline left, product hero right
============================================================ */
function MethodsHero() {
  return (
    <section id="top" data-region="hero" style={{
      background: "#fff", padding: "72px 40px 64px",
      position: "relative", overflow: "hidden",
    }}>
      <div style={{ maxWidth: 1440, margin: "0 auto", position: "relative", zIndex: 1,
        display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: 56, alignItems: "center" }}>
        <div>
          <h1 style={{
            font: "700 72px / 0.95 'Bricolage Grotesque', sans-serif",
            color: INK, margin: "0 0 20px", letterSpacing: "-2px",
          }}>Every method. Owned panel. One platform.</h1>
          <p className="lead" style={{
            font: "400 19px / 1.45 'Instrument Sans', sans-serif",
            color: INK_MUTED, margin: "0 0 32px", maxWidth: 520,
          }}>AI-moderated, unmoderated, surveys, card sort, tree test, prototype. Run on a first-party panel with 97.8% show rate. Brief to evidence in 48 hours.</p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center", marginBottom: 20 }}>
            <Button variant="red" size="lg" icon="arrowRight" onClick={() => window.askableOpenBooking && window.askableOpenBooking()}>Get a demo</Button>
            <a href="https://www.askable.com/explore-product" target="_blank" rel="noopener" style={{ textDecoration: "none" }}>
              <Button variant="hollow" size="lg" icon="play">See it in action</Button>
            </a>
          </div>

        </div>

        {/* Right: hero product image — bigger, breaks out to the right edge */}
        <div style={{
          display: "flex", justifyContent: "flex-end", alignItems: "center",
          position: "relative",
        }}>
          <img
            src="./assets/figma/hero-results.png"
            alt="Askable user research platform — prototype testing path analysis dashboard"
            style={{
              width: "100%", maxWidth: 820, height: "auto", display: "block",
              borderRadius: 14,
              boxShadow: "0 32px 64px -20px rgba(34,6,19,0.2)",
              marginRight: 0,
            }}
            onError={(e) => {
              e.currentTarget.style.display = "none";
              const ph = e.currentTarget.nextElementSibling;
              if (ph) ph.style.display = "flex";
            }}
          />
          <div style={{
            display: "none",
            width: "100%", maxWidth: 1000, aspectRatio: "16/10",
            background: PAPER, border: `1px dashed ${LINE}`, borderRadius: 16,
            alignItems: "center", justifyContent: "center",
            font: "500 14px/1.5 Instrument Sans, sans-serif",
            color: INK_MUTED, padding: 40, textAlign: "center",
          }}>
            Drop hero-results.png in assets/figma/ to replace this placeholder.
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   TrustStrip — client logos
============================================================ */
function TrustStrip() {
  return (
    <section data-region="trust" style={{ background: "#fff", padding: "56px 40px" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div 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+ enterprise research and product teams</div>
        <ClientLogoStrip tone="dark" />
      </div>
    </section>
  );
}

/* ============================================================
   BenefitsRow — 3 outcome-led benefit blocks with illustrations
============================================================ */
function BenefitsRow() {
  const benefits = [
    {
      headline: "3x faster time to insight",
      body: "Recruit in hours. Sessions in parallel. Synthesis in minutes. Answers in the window where the decision still matters.",
      img: BENEFIT_IMAGES.time,
    },
    {
      headline: "Every method, one platform",
      body: "Moderated, unmoderated, AI moderation, surveys, card sort, tree test. Stop juggling four tools and three contracts.",
      img: BENEFIT_IMAGES.unified,
    },
    {
      headline: "Global panel, fully integrated",
      body: "Millions of verified participants across 50+ countries. 97.8% show rate on a panel we built, run, and pay above average.",
      img: BENEFIT_IMAGES.global,
    },
  ];
  return (
    <section data-region="benefits" style={{ background: "#fff", padding: "140px 40px" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 72 }}>
          <Chip tone="peach" dot>Why teams pick Askable</Chip>
          <h2 style={{
            font: "700 64px/0.95 Bricolage Grotesque, sans-serif",
            color: INK, margin: "20px 0 14px", letterSpacing: "-0.02em",
          }}>Built for the way research actually runs.</h2>
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24,
          maxWidth: 1280, margin: "0 auto",
        }}>
          {benefits.map((b, i) => (
            <div key={i} style={{
              background: PAPER, borderRadius: 24, padding: 32,
              border: `1px solid ${LINE}`,
              display: "flex", flexDirection: "column", gap: 24,
            }}>
              <div style={{
                background: "#fff", borderRadius: 18, padding: 20,
                aspectRatio: "16/10",
                display: "flex", alignItems: "center", justifyContent: "center",
                overflow: "hidden",
                border: `1px solid ${LINE}`,
              }}>
                <img src={b.img} alt="" style={{
                  maxWidth: "100%", maxHeight: "100%", height: "auto", width: "auto",
                  display: "block",
                }} />
              </div>
              <div>
                <h3 style={{
                  font: "700 26px/1.15 Bricolage Grotesque, sans-serif",
                  color: INK, margin: "0 0 10px", letterSpacing: "-0.015em",
                }}>{b.headline}</h3>
                <p style={{
                  font: "400 15px/1.55 Instrument Sans, sans-serif",
                  color: INK_MUTED, margin: 0,
                }}>{b.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   MethodsGrid — every method, with real askable.com icons
============================================================ */
function MethodsGrid() {
  const categories = [
    {
      key: "ai-moderated",
      name: "AI moderated",
      body: "Automated in-depth interviews that scale.",
      image: "./assets/figma/ai-moderated.png",
    },
    {
      key: "unmoderated",
      name: "Unmoderated",
      body: "Self-guided studies to evaluate concepts.",
      image: "./assets/figma/unmoderated.png",
    },
    {
      key: "interview",
      name: "Interview",
      body: "Schedule and conduct remote interviews.",
      image: "./assets/figma/interview.png",
    },
    {
      key: "survey",
      name: "Survey",
      body: "Collect structured feedback at scale.",
      image: "./assets/figma/survey.png",
    },
  ];
  const [activeKey, setActiveKey] = useState("unmoderated");
  const active = categories.find((c) => c.key === activeKey) || categories[0];

  return (
    <section id="methods" data-region="methods" style={{ background: "#fff", padding: "120px 40px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        {/* Eyebrow + heading */}
        <div style={{ marginBottom: 64, maxWidth: 720 }}>
          <span style={{
            display: "inline-block",
            font: "600 11px/1 Instrument Sans, sans-serif",
            color: RED, letterSpacing: "0.14em", textTransform: "uppercase",
            background: PEACH, padding: "8px 14px", borderRadius: 999,
            marginBottom: 22,
          }}>Methods</span>
          <h2 style={{
            font: "700 56px/1.02 Bricolage Grotesque, sans-serif",
            color: INK, margin: "0 0 14px", letterSpacing: "-0.025em",
          }}>Run every method, when you need to.</h2>
          <p style={{
            font: "400 19px/1.5 Instrument Sans, sans-serif",
            color: INK_MUTED, maxWidth: 560, margin: 0,
          }}>Every research method on one platform. Compose, recruit, run.</p>
        </div>

        {/* Tabbed layout: 4 categories left, image right */}
        <div style={{
          display: "grid", gridTemplateColumns: "0.45fr 1fr", gap: 64,
          alignItems: "start",
        }}>
          {/* Left: 4 category tabs */}
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {categories.map((c) => {
              const isActive = c.key === activeKey;
              return (
                <button
                  key={c.key}
                  onClick={() => setActiveKey(c.key)}
                  style={{
                    background: "transparent",
                    border: 0,
                    padding: "20px 0",
                    textAlign: "left",
                    cursor: "pointer",
                    borderBottom: `1px solid ${LINE}`,
                    transition: "color .2s ease",
                  }}
                >
                  <div style={{
                    font: "700 24px/1.15 Bricolage Grotesque, sans-serif",
                    color: isActive ? INK : "rgba(34,6,19,0.35)",
                    marginBottom: 6, letterSpacing: "-0.015em",
                  }}>{c.name}</div>
                  <div style={{
                    font: "400 15px/1.45 Instrument Sans, sans-serif",
                    color: isActive ? INK_MUTED : "rgba(34,6,19,0.4)",
                  }}>{c.body}</div>
                </button>
              );
            })}
          </div>

          {/* Right: image that swaps with the active tab */}
          <div style={{
            display: "flex", alignItems: "center", justifyContent: "center",
            minHeight: 480,
            background: PAPER,
            borderRadius: 20,
            padding: 32,
          }}>
            <img
              key={active.key}
              src={active.image}
              alt={`Askable ${active.name} research method — UX research platform screenshot`}
              className="fade-in"
              style={{
                width: "100%", maxWidth: 960, height: "auto", display: "block",
              }}
              onError={(e) => {
                e.currentTarget.style.display = "none";
                const ph = e.currentTarget.nextElementSibling;
                if (ph) ph.style.display = "flex";
              }}
            />
            <div style={{
              display: "none",
              width: "100%", maxWidth: 760, aspectRatio: "4/3",
              background: PAPER, border: `1px dashed ${LINE}`, borderRadius: 12,
              alignItems: "center", justifyContent: "center",
              font: "500 14px/1.5 Instrument Sans, sans-serif",
              color: INK_MUTED, padding: 40, textAlign: "center",
            }}>
              Drop {active.key}.png in assets/figma/ to fill this tile.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   AIShowcase — visual feature showcase, no comparison table
============================================================ */
function AIShowcase() {
  const features = [
    {
      eyebrow: "AI Moderator",
      headline: "Interviews that run themselves.",
      body: "17+ native languages, 24/7. Context-aware follow-ups. Hundreds in parallel.",
      img: "./assets/figma/ai-moderator.png",
    },
    {
      eyebrow: "AskAI",
      headline: "Ask anything. Get evidence.",
      body: "Every answer links to the participant, the quote, the timestamp. Five-dimension quality scoring.",
      img: "./assets/figma/ask-ai.png",
    },
    {
      eyebrow: "Compounding knowledge",
      headline: "Every study makes the next richer.",
      body: "Cross-study concept merging. One question today can surface evidence from two years ago.",
      img: "./assets/figma/compounding-knowledge.png",
    },
  ];
  return (
    <section id="ai" data-region="ai" style={{ background: "#fff", padding: "120px 40px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <h2 style={{
            font: "700 48px/1.02 Bricolage Grotesque, sans-serif",
            color: INK, margin: "0 0 14px", letterSpacing: "-0.02em",
          }}>AI-native end to end. Not bolted on top.</h2>
          <p style={{
            font: "400 18px/1.5 Instrument Sans, sans-serif",
            color: INK_MUTED, maxWidth: 540, margin: 0,
          }}>One AI layer that runs through the whole platform. ISO 42001 certified. Zero data retention with LLM providers.</p>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20,
          maxWidth: 1240, margin: "0 auto",
        }}>
          {features.map((f, i) => (
            <div key={i} style={{
              background: PAPER, borderRadius: 20, padding: 28,
              border: `1px solid ${LINE}`,
              display: "flex", flexDirection: "column", gap: 20,
            }}>
              <img src={f.img} alt={`${f.eyebrow} — Askable AI research platform feature`} style={{
                width: "100%", height: "auto", display: "block",
                borderRadius: 12,
              }} />
              <div>
                <div style={{
                  font: "600 11px/1 Instrument Sans, sans-serif",
                  color: RED, letterSpacing: "0.14em", marginBottom: 10,
                  textTransform: "uppercase",
                }}>{f.eyebrow}</div>
                <h3 style={{
                  font: "700 22px/1.2 Bricolage Grotesque, sans-serif",
                  color: INK, margin: "0 0 10px", letterSpacing: "-0.015em",
                }}>{f.headline}</h3>
                <p style={{
                  font: "400 14px/1.55 Instrument Sans, sans-serif",
                  color: INK_MUTED, margin: 0,
                }}>{f.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   PanelStats — first-party panel as a bento of participants + tiles
============================================================ */
function PanelStats() {
  // Image placeholder helper — falls back to a dashed placeholder if the file isn't dropped yet
  const ImgTile = ({ src, alt, gridArea, aspect, fallbackLabel }) => (
    <div style={{ gridArea, position: "relative" }}>
      <img
        src={src}
        alt={alt}
        style={{
          width: "100%", height: "100%", objectFit: "cover",
          display: "block", borderRadius: 16,
        }}
        onError={(e) => {
          e.currentTarget.style.display = "none";
          const ph = e.currentTarget.nextElementSibling;
          if (ph) ph.style.display = "flex";
        }}
      />
      <div style={{
        display: "none",
        width: "100%", height: "100%", aspectRatio: aspect,
        background: PAPER, border: `1px dashed ${LINE}`, borderRadius: 16,
        alignItems: "center", justifyContent: "center",
        font: "500 12px/1.4 Instrument Sans, sans-serif",
        color: INK_MUTED, padding: 20, textAlign: "center",
      }}>{fallbackLabel}</div>
    </div>
  );

  return (
    <section id="panel" data-region="panel" style={{
      background: "#fff", padding: "120px 40px",
    }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        {/* Eyebrow + heading */}
        <div style={{ marginBottom: 56, maxWidth: 760 }}>
          <span style={{
            display: "inline-block",
            font: "600 11px/1 Instrument Sans, sans-serif",
            color: RED, letterSpacing: "0.14em", textTransform: "uppercase",
            background: PEACH, padding: "8px 14px", borderRadius: 999,
            marginBottom: 22,
          }}>Trust</span>
          <h2 style={{
            font: "700 56px/1.02 Bricolage Grotesque, sans-serif",
            color: INK, margin: "0 0 16px", letterSpacing: "-0.025em",
          }}>Real participants.<br/>Verified before they enter a study.</h2>
          <p style={{
            font: "400 19px/1.5 Instrument Sans, sans-serif",
            color: INK_MUTED, margin: 0, maxWidth: 620,
          }}>Askable owns its panel. Every participant is verified at three points: at sign-up, after sign-up, and at session start.</p>
        </div>

        {/* Bento grid */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1.2fr 0.8fr 0.8fr",
          gridTemplateRows: "240px 240px",
          gap: 12,
        }}>
          {/* Top-left: participant 1 */}
          <ImgTile
            src="./assets/figma/participant-1.png"
            alt="Verified Askable research participant — first-party participant panel"
            gridArea="1 / 1 / 2 / 2"
            aspect="1/1"
            fallbackLabel="participant-1.png"
          />

          {/* Center big: participant 2 (spans 2 rows) */}
          <ImgTile
            src="./assets/figma/participant-2.png"
            alt="Verified Askable research participant taking a remote UX study"
            gridArea="1 / 2 / 3 / 3"
            aspect="3/4"
            fallbackLabel="participant-2.png (the big one)"
          />

          {/* Top right: participant 3 */}
          <ImgTile
            src="./assets/figma/participant-3.png"
            alt="Verified Askable research participant — global panel coverage"
            gridArea="1 / 3 / 2 / 4"
            aspect="1/1"
            fallbackLabel="participant-3.png"
          />

          {/* Top far-right: multilingual card */}
          <div style={{
            gridArea: "1 / 4 / 2 / 5",
            background: RED, color: "#fff",
            borderRadius: 16, padding: 24,
            display: "flex", flexDirection: "column", justifyContent: "center", gap: 6,
          }}>
            <div style={{ font: "700 32px/1.1 Bricolage Grotesque, sans-serif", letterSpacing: "-0.02em" }}>Hello</div>
            <div style={{ font: "500 18px/1.2 Instrument Sans, sans-serif", color: "rgba(255,255,255,0.85)" }}>Hola</div>
            <div style={{ font: "500 18px/1.2 Instrument Sans, sans-serif", color: "rgba(255,255,255,0.75)" }}>你好</div>
            <div style={{ font: "500 18px/1.2 Instrument Sans, sans-serif", color: "rgba(255,255,255,0.65)" }}>مرحبا</div>
            <div style={{ font: "500 18px/1.2 Instrument Sans, sans-serif", color: "rgba(255,255,255,0.55)" }}>Bonjour</div>
          </div>

          {/* Bottom-left: phone tasks mockup placeholder */}
          <ImgTile
            src="./assets/figma/panel-tasks.png"
            alt="Askable participant mobile app — paid UX research tasks and rewards"
            gridArea="2 / 1 / 3 / 2"
            aspect="1/1"
            fallbackLabel="panel-tasks.png (phone mockup)"
          />

          {/* Bottom right: country code card */}
          <div style={{
            gridArea: "2 / 3 / 3 / 4",
            background: INK, color: "#fff",
            borderRadius: 16, padding: "24px 28px",
            display: "flex", flexDirection: "column", justifyContent: "center", gap: 6,
          }}>
            {["USA", "UK", "AU", "CA", "ESP"].map((c, i) => (
              <div key={c} style={{
                font: "700 22px/1.1 Bricolage Grotesque, sans-serif",
                color: i === 0 ? "#fff" : `rgba(255,255,255,${0.85 - i * 0.15})`,
                letterSpacing: "-0.01em",
              }}>{c}</div>
            ))}
            <div style={{
              font: "500 11px/1 Instrument Sans, sans-serif",
              color: "rgba(255,255,255,0.55)", marginTop: 8,
              letterSpacing: "0.08em", textTransform: "uppercase",
            }}>+ 45 more</div>
          </div>

          {/* Bottom far-right: live status / chat */}
          <div style={{
            gridArea: "2 / 4 / 3 / 5",
            background: PEACH, borderRadius: 16, padding: 18,
            display: "flex", flexDirection: "column", justifyContent: "center", gap: 10,
          }}>
            {[
              { name: "Paige H", time: "just now" },
              { name: "Daniel J", time: "3 min ago" },
            ].map((c) => (
              <div key={c.name} style={{
                background: "#fff", borderRadius: 10, padding: "10px 12px",
                display: "flex", alignItems: "center", gap: 10,
              }}>
                <div style={{
                  width: 28, height: 28, borderRadius: 999,
                  background: "linear-gradient(135deg, #f7bf81, #fb5153)",
                  flexShrink: 0,
                }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
                    <span style={{
                      font: "700 12px/1.2 Instrument Sans, sans-serif",
                      color: INK,
                    }}>{c.name}</span>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 2 }}>
                    <span style={{
                      width: 6, height: 6, borderRadius: 999,
                      background: "rgb(34,155,122)",
                      boxShadow: "0 0 0 3px rgba(34,155,122,0.15)",
                    }} />
                    <span style={{
                      font: "500 10px/1.2 Instrument Sans, sans-serif",
                      color: INK_MUTED,
                    }}>In progress · {c.time}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Stats strip below the bento */}
        <div style={{
          marginTop: 56,
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14,
        }}>
          {[
            { num: "97.8%", label: "show rate" },
            { num: "Millions", label: "verified participants" },
            { num: "50+", label: "countries" },
            { num: "17+", label: "AI moderation languages" },
          ].map((s, i) => (
            <div key={i} style={{
              padding: "20px 22px",
              borderRadius: 14,
              background: PAPER,
              border: `1px solid ${LINE}`,
            }}>
              <div style={{
                font: "600 36px/1 Bricolage Grotesque, sans-serif",
                color: INK, letterSpacing: "-0.02em", marginBottom: 6,
              }}>{s.num}</div>
              <div style={{
                font: "500 13px/1.3 Instrument Sans, sans-serif",
                color: INK_MUTED,
              }}>{s.label}</div>
            </div>
          ))}
        </div>

        {/* Bottom: enterprise security badges */}
        <div style={{
          marginTop: 56, paddingTop: 36,
          borderTop: `1px solid ${LINE}`,
          textAlign: "center",
        }}>
          <img
            src="./assets/figma/enterprise-security-icons.png"
            alt="Enterprise security certifications: ISO 27001, ISO 27701, GDPR, AICPA SOC 2, CCPA, WIZ"
            style={{
              maxWidth: "100%", width: "auto", height: "auto",
              maxHeight: 64, display: "block", margin: "0 auto",
            }}
          />
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   TescoStory — featured customer testimonial with outcome stats
============================================================ */
function TescoStory() {
  const stats = [
    { num: "97.8%", label: "show rate", sub: "vs 60% from third-party providers" },
    { num: "4x", label: "faster research", sub: "from 8 weeks to 2 weeks" },
    { num: "10x", label: "participant quality", sub: "across Central Europe markets" },
  ];
  return (
    <section id="tesco-story" data-region="tesco-story" style={{
      background: PEACH, padding: "120px 40px",
    }}>
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 72,
          alignItems: "center",
        }}>
          {/* Left: quote + attribution + CTA */}
          <div>
            <img
              src="./assets/clients/tesco-black.svg"
              alt="Tesco"
              style={{ height: 32, width: "auto", display: "block", marginBottom: 28 }}
            />
            <blockquote style={{
              font: "500 32px/1.25 'Bricolage Grotesque', sans-serif",
              color: INK, margin: "0 0 32px", letterSpacing: "-0.02em",
              textWrap: "balance",
            }}>
              "Before Askable, we were juggling agencies across three countries. No visibility, no consistency. Now we've got one platform, native-language support, and participant quality that's 10x better."
            </blockquote>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
              <img src="./assets/serkan.png" alt="Serkan Ayan, UX Research Manager at Tesco" style={{
                width: 56, height: 56, borderRadius: 999, objectFit: "cover",
                border: `1.5px solid ${LINE}`, flexShrink: 0,
              }} />
              <div>
                <div style={{ font: "700 16px/1.2 Instrument Sans, sans-serif", color: INK }}>Serkan Ayan, PhD</div>
                <div style={{ font: "400 14px/1.3 Instrument Sans, sans-serif", color: INK_MUTED }}>UX Research Manager, Tesco</div>
              </div>
            </div>

            {/* Wistia popup video trigger — clicking "Watch the story" opens the Tesco video overlay */}
            <wistia-player
              media-id="z6w458xfse"
              popover-content="link"
              wistia-popover="true"
              aspect="1.7777777777777777"
              style={{ display: "inline-block" }}
            >
              <a href="#" style={{
                display: "inline-flex", alignItems: "center", gap: 10,
                font: "600 15px/1 Instrument Sans, sans-serif",
                color: "#fff", background: INK,
                padding: "14px 20px", borderRadius: 999,
                textDecoration: "none", cursor: "pointer",
              }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">
                  <polygon points="6 4 20 12 6 20 6 4" />
                </svg>
                Watch the Tesco story
              </a>
            </wistia-player>
          </div>

          {/* Right: outcome stats stacked */}
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {stats.map((s, i) => (
              <div key={i} style={{
                background: "#fff", borderRadius: 16, padding: "24px 28px",
                border: `1px solid ${LINE}`,
                display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "center",
              }}>
                <div style={{
                  font: "600 56px/1 Bricolage Grotesque, sans-serif",
                  color: RED, letterSpacing: "-0.025em",
                  minWidth: 110,
                }}>{s.num}</div>
                <div>
                  <div style={{
                    font: "700 17px/1.2 Instrument Sans, sans-serif",
                    color: INK, marginBottom: 4, letterSpacing: "-0.005em",
                  }}>{s.label}</div>
                  <div style={{
                    font: "400 14px/1.4 Instrument Sans, sans-serif",
                    color: INK_MUTED,
                  }}>{s.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   WhySwitch — comparison table, Askable vs other platforms
============================================================ */
function WhySwitch() {
  const rows = [
    {
      feature: "Owned, verified participant panel",
      detail: "Triple-verified at sign-up, after sign-up, and at session start. 97.8% show rate.",
      askable: true,
      others: false,
      othersNote: "Third-party brokers. 60% industry average show rate.",
    },
    {
      feature: "AI end-to-end, not bolted on",
      detail: "One AI layer across recruit, moderate, synthesise, retrieve. Built around it from day one.",
      askable: true,
      others: false,
      othersNote: "AI features added on top of legacy workflows.",
    },
    {
      feature: "AI moderator for live interviews",
      detail: "17+ native languages, 24/7. Context-aware follow-ups. Hundreds in parallel.",
      askable: true,
      others: false,
      othersNote: "Not available or limited to one language.",
    },
    {
      feature: "Askable MCP for enterprise LLMs",
      detail: "Native integration with Claude, Copilot, and other enterprise AI clients.",
      askable: true,
      others: false,
      othersNote: "Not available.",
    },
    {
      feature: "All-inclusive pricing",
      detail: "One annual price. Every method included. Unlimited seats. Incentives handled.",
      askable: true,
      others: false,
      othersNote: "Per-seat fees. Tier upgrades. Add-ons. Incentives extra.",
    },
    {
      feature: "Every method on every plan",
      detail: "Card sort, tree test, AI moderation, diary, prototype, surveys. All from day one.",
      askable: true,
      others: false,
      othersNote: "Half the methods gated behind enterprise tiers.",
    },
    {
      feature: "24/7 customer support",
      detail: "Real humans, any timezone. Plus dedicated CSM for enterprise.",
      askable: true,
      others: false,
      othersNote: "Business hours, ticket queues, regional gaps.",
    },
    {
      feature: "ISO 42001 AI Management certified",
      detail: "Zero data retention with LLM providers, contractually enforced.",
      askable: true,
      others: false,
      othersNote: "Rarely certified. Retention policies vary by vendor.",
    },
  ];

  const Check = () => (
    <span style={{
      width: 28, height: 28, borderRadius: 999, flexShrink: 0,
      background: "rgb(22,163,74)",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
    }}>
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
        stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
        <path d="M20 6 9 17l-5-5"/>
      </svg>
    </span>
  );
  const Cross = () => (
    <span style={{
      width: 28, height: 28, borderRadius: 999, flexShrink: 0,
      background: "rgba(34,6,19,0.08)",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
    }}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
        stroke="rgb(34,6,19)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
      </svg>
    </span>
  );

  return (
    <section id="why-switch" data-region="why-switch" style={{
      background: PAPER, padding: "120px 40px",
    }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        {/* Eyebrow + heading */}
        <div style={{ marginBottom: 56, maxWidth: 760 }}>
          <span style={{
            display: "inline-block",
            font: "600 11px/1 Instrument Sans, sans-serif",
            color: RED, letterSpacing: "0.14em", textTransform: "uppercase",
            background: PEACH, padding: "8px 14px", borderRadius: 999,
            marginBottom: 22,
          }}>Why switch</span>
          <h2 style={{
            font: "700 56px/1.02 Bricolage Grotesque, sans-serif",
            color: INK, margin: "0 0 16px", letterSpacing: "-0.025em",
          }}>Built as one platform.<br/>Not stitched together.</h2>
          <p style={{
            font: "400 19px/1.5 Instrument Sans, sans-serif",
            color: INK_MUTED, margin: 0, maxWidth: 620,
          }}>What you get on Askable that you don't get from a research platform assembled through acquisitions.</p>
        </div>

        {/* Table */}
        <div style={{
          background: "#fff", borderRadius: 24, overflow: "hidden",
          border: `1px solid ${LINE}`,
          boxShadow: "0 8px 24px -12px rgba(34,6,19,0.08)",
        }}>
          {/* Header row */}
          <div style={{
            display: "grid", gridTemplateColumns: "1.4fr 0.9fr 0.9fr",
            background: PAPER_WARM,
            borderBottom: `1px solid ${LINE}`,
          }}>
            <div style={{ padding: "22px 28px" }}>
              <div style={{
                font: "600 12px/1 Instrument Sans, sans-serif",
                color: INK_MUTED, letterSpacing: "0.12em", textTransform: "uppercase",
              }}>Capability</div>
            </div>
            <div style={{
              padding: "22px 28px",
              background: "rgba(251,81,83,0.06)",
              borderLeft: `1px solid ${LINE}`,
              borderRight: `1px solid ${LINE}`,
              position: "relative",
            }}>
              <div style={{
                display: "flex", alignItems: "center", gap: 8,
              }}>
                <IconMark variant="red" size={18} />
                <div style={{
                  font: "700 14px/1 Bricolage Grotesque, sans-serif",
                  color: INK, letterSpacing: "-0.005em",
                }}>Askable</div>
              </div>
            </div>
            <div style={{ padding: "22px 28px" }}>
              <div style={{
                font: "500 14px/1 Instrument Sans, sans-serif",
                color: INK_MUTED,
              }}>Other platforms</div>
            </div>
          </div>

          {/* Body rows */}
          {rows.map((r, i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "1.4fr 0.9fr 0.9fr",
              borderBottom: i < rows.length - 1 ? `1px solid ${LINE}` : 0,
            }}>
              {/* Feature + detail */}
              <div style={{ padding: "24px 28px" }}>
                <div style={{
                  font: "600 16px/1.3 Instrument Sans, sans-serif",
                  color: INK, marginBottom: 6, letterSpacing: "-0.005em",
                }}>{r.feature}</div>
                <p style={{
                  font: "400 14px/1.5 Instrument Sans, sans-serif",
                  color: INK_MUTED, margin: 0,
                }}>{r.detail}</p>
              </div>
              {/* Askable column */}
              <div style={{
                padding: "24px 28px",
                background: "rgba(251,81,83,0.04)",
                borderLeft: `1px solid ${LINE}`,
                borderRight: `1px solid ${LINE}`,
                display: "flex", alignItems: "center", gap: 14,
              }}>
                <Check />
                <span style={{
                  font: "600 14px/1.4 Instrument Sans, sans-serif",
                  color: INK,
                }}>Included</span>
              </div>
              {/* Others column */}
              <div style={{
                padding: "24px 28px",
                display: "flex", alignItems: "flex-start", gap: 14,
              }}>
                <Cross />
                <span style={{
                  font: "400 13px/1.45 Instrument Sans, sans-serif",
                  color: INK_MUTED, paddingTop: 6,
                }}>{r.othersNote}</span>
              </div>
            </div>
          ))}
        </div>

        {/* Bottom CTA strip */}
        <div style={{
          marginTop: 40,
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 24, flexWrap: "wrap",
        }}>
          <p style={{
            font: "500 16px/1.4 Instrument Sans, sans-serif",
            color: INK, margin: 0, maxWidth: 620,
          }}>One platform. One contract. One panel. The full method set on every plan.</p>
          <Button variant="solid" size="lg" icon="arrowRight" onClick={() => window.askableOpenBooking && window.askableOpenBooking()}>Get a demo</Button>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   PricingForm — interactive 3-step form, embedded
============================================================ */
function PricingForm() {
  const [step, setStep] = useState(1);
  const [volume, setVolume] = useState(null);
  const [useCases, setUseCases] = useState([]);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState("");

  const volumeOptions = ["1-10", "11-30", "31-50", "50+"];
  const useCaseOptions = [
    "End to end research tooling",
    "Participant recruitment",
    "Multilingual research projects",
    "Continuous insights",
    "AI user research",
  ];

  const toggleUseCase = (uc) => {
    setUseCases((prev) =>
      prev.includes(uc) ? prev.filter((x) => x !== uc) : [...prev, uc]
    );
  };

  const validEmail = (e) => /\S+@\S+\.\S+/.test(e);

  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!name.trim() || !validEmail(email)) {
      setError("Please enter your name and a valid work email.");
      return;
    }
    setError("");
    setSubmitting(true);

    // HubSpot Forms Submissions API — same form as the booking modal
    const HUBSPOT_PORTAL_ID = "8293753";
    const HUBSPOT_FORM_ID = "ffd98cba-1bea-4cd7-b359-79848ed268db";
    const endpoint = `https://api.hsforms.com/submissions/v3/integration/submit/${HUBSPOT_PORTAL_ID}/${HUBSPOT_FORM_ID}`;

    // Only send first name + email to HubSpot. Volume + use cases are local
    // UI state used to qualify intent; not transmitted.
    const firstname = name.trim().split(" ")[0];

    const payload = {
      fields: [
        { objectTypeId: "0-1", name: "firstname", value: firstname },
        { objectTypeId: "0-1", name: "email", value: email },
      ],
      context: {
        pageUri: window.location.href,
        pageName: document.title,
      },
    };

    try {
      const res = await fetch(endpoint, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (!res.ok) {
        // Still mark as submitted to avoid bad UX. Log the failure.
        const errBody = await res.text();
        console.warn("HubSpot submit failed", res.status, errBody);
      }
    } catch (err) {
      console.warn("HubSpot submit error", err);
      // Fail open — show thank-you state anyway so the user isn't blocked.
    }
    setSubmitting(false);
    setSubmitted(true);
  };

  const StepDot = ({ n }) => (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <div style={{
        width: 28, height: 28, borderRadius: 999,
        background: step >= n ? RED : "rgba(255,255,255,0.1)",
        color: step >= n ? "#fff" : "rgba(255,255,255,0.5)",
        display: "flex", alignItems: "center", justifyContent: "center",
        font: "700 13px/1 Instrument Sans, sans-serif",
      }}>{n}</div>
      <span style={{
        font: "500 13px/1 Instrument Sans, sans-serif",
        color: step === n ? "#fff" : "rgba(255,255,255,0.55)",
      }}>
        {n === 1 ? "Volume" : n === 2 ? "Use case" : "Contact"}
      </span>
    </div>
  );

  return (
    <section id="pricing" data-region="pricing" style={{ background: PAPER, padding: "120px 40px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64,
          alignItems: "stretch",
        }}>
          {/* Left: pitch + benefits */}
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <h2 style={{
              font: "700 44px/1.02 Bricolage Grotesque, sans-serif",
              color: INK, margin: "0 0 16px", letterSpacing: "-0.02em",
            }}>Simple, all-inclusive pricing. No confusion.</h2>
            <p style={{
              font: "400 18px/1.5 Instrument Sans, sans-serif",
              color: INK_MUTED, margin: "0 0 32px", maxWidth: 480,
            }}>Tell us your study volume and what you need to run. We'll come back with numbers tailored to your team. No revealing call required.</p>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                "Unlimited participants. No recruitment fee.",
                "Unlimited team seats on every plan.",
                "Full method set, no gatekeeping.",
              ].map((line, i) => (
                <li key={i} style={{ display: "flex", gap: 12, alignItems: "center" }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 999, background: RED,
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    flexShrink: 0,
                  }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
                      stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M20 6 9 17l-5-5"/>
                    </svg>
                  </span>
                  <span style={{ font: "500 16px/1.4 Instrument Sans, sans-serif", color: INK }}>{line}</span>
                </li>
              ))}
            </ul>
            <p style={{
              font: "400 13px/1.5 Instrument Sans, sans-serif",
              color: INK_MUTED, margin: "32px 0 0",
            }}>3-step form. ~30 seconds. We'll come back with pricing tailored to your study volume.</p>
          </div>

          {/* Right: form */}
          <div style={{
            background: INK, borderRadius: 28, padding: "44px 44px 40px",
            color: "#fff",
            display: "flex", flexDirection: "column",
            boxShadow: "0 30px 60px -20px rgba(34,6,19,0.4)",
          }}>
            {!submitted && (
              <div style={{
                display: "flex", alignItems: "center", justifyContent: "space-between",
                gap: 12, marginBottom: 36, flexWrap: "wrap",
              }}>
                <StepDot n={1} />
                <div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.12)", minWidth: 16 }} />
                <StepDot n={2} />
                <div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.12)", minWidth: 16 }} />
                <StepDot n={3} />
              </div>
            )}

            {step === 1 && !submitted && (
              <div className="fade-in">
                <div style={{
                  font: "500 12px/1 Instrument Sans, sans-serif",
                  color: RED, letterSpacing: "0.14em", marginBottom: 12,
                  textTransform: "uppercase",
                }}>Step 01</div>
                <h3 style={{
                  font: "700 28px/1.15 Bricolage Grotesque, sans-serif",
                  color: "#fff", margin: "0 0 24px", letterSpacing: "-0.01em",
                }}>How many studies does your team run a month?</h3>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12, marginBottom: 8 }}>
                  {volumeOptions.map((v) => {
                    const selected = volume === v;
                    return (
                      <button key={v} type="button" onClick={() => {
                        setVolume(v);
                        // Auto-advance to step 2 — small delay so the user sees the selection register
                        setTimeout(() => setStep(2), 220);
                      }} style={{
                        padding: "20px 22px",
                        background: selected ? "#fff" : "rgba(255,255,255,0.06)",
                        color: selected ? INK : "#fff",
                        border: `1px solid ${selected ? "#fff" : "rgba(255,255,255,0.15)"}`,
                        borderRadius: 14,
                        font: "600 17px/1 Instrument Sans, sans-serif",
                        cursor: "pointer", textAlign: "left",
                        transition: "all .15s ease",
                      }}>{v}</button>
                    );
                  })}
                </div>
                <p style={{
                  font: "400 12px/1.4 Instrument Sans, sans-serif",
                  color: "rgba(255,255,255,0.5)", margin: "12px 0 0",
                }}>Select a range to continue.</p>
              </div>
            )}

            {step === 2 && !submitted && (
              <div className="fade-in">
                <div style={{
                  font: "500 12px/1 Instrument Sans, sans-serif",
                  color: RED, letterSpacing: "0.14em", marginBottom: 12,
                  textTransform: "uppercase",
                }}>Step 02</div>
                <h3 style={{
                  font: "700 28px/1.15 Bricolage Grotesque, sans-serif",
                  color: "#fff", margin: "0 0 8px", letterSpacing: "-0.01em",
                }}>How can we help your team?</h3>
                <p style={{
                  font: "400 13px/1.4 Instrument Sans, sans-serif",
                  color: "rgba(255,255,255,0.6)", margin: "0 0 22px",
                }}>Select all that apply.</p>
                <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 28 }}>
                  {useCaseOptions.map((uc) => {
                    const selected = useCases.includes(uc);
                    return (
                      <button key={uc} type="button" onClick={() => toggleUseCase(uc)} style={{
                        padding: "16px 20px",
                        background: selected ? "rgba(251,81,83,0.18)" : "rgba(255,255,255,0.06)",
                        color: "#fff",
                        border: `1px solid ${selected ? RED : "rgba(255,255,255,0.15)"}`,
                        borderRadius: 12,
                        font: "500 15px/1 Instrument Sans, sans-serif",
                        cursor: "pointer", textAlign: "left",
                        display: "flex", alignItems: "center", gap: 12,
                        transition: "all .15s ease",
                      }}>
                        <span style={{
                          width: 18, height: 18, borderRadius: 5,
                          background: selected ? RED : "transparent",
                          border: `1.5px solid ${selected ? RED : "rgba(255,255,255,0.3)"}`,
                          display: "inline-flex", alignItems: "center", justifyContent: "center",
                          flexShrink: 0,
                        }}>
                          {selected && (
                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
                              stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
                              <path d="M20 6 9 17l-5-5"/>
                            </svg>
                          )}
                        </span>
                        {uc}
                      </button>
                    );
                  })}
                </div>
                <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                  <button onClick={() => setStep(1)} style={{
                    background: "transparent", border: "1px solid rgba(255,255,255,0.2)",
                    color: "#fff", padding: "12px 18px", borderRadius: 999, cursor: "pointer",
                    font: "600 14px/1 Instrument Sans, sans-serif",
                  }}>Back</button>
                  <Button variant="red" size="md" icon="arrowRight" onClick={() => useCases.length > 0 && setStep(3)} style={{ opacity: useCases.length > 0 ? 1 : 0.5, pointerEvents: useCases.length > 0 ? "auto" : "none" }}>Next</Button>
                </div>
              </div>
            )}

            {step === 3 && !submitted && (
              <form onSubmit={handleSubmit} className="fade-in">
                <div style={{
                  font: "500 12px/1 Instrument Sans, sans-serif",
                  color: RED, letterSpacing: "0.14em", marginBottom: 12,
                  textTransform: "uppercase",
                }}>Step 03</div>
                <h3 style={{
                  font: "700 28px/1.15 Bricolage Grotesque, sans-serif",
                  color: "#fff", margin: "0 0 22px", letterSpacing: "-0.01em",
                }}>Where do we send your pricing?</h3>
                <div style={{ display: "flex", flexDirection: "column", gap: 14, marginBottom: 24 }}>
                  <label style={{ display: "block" }}>
                    <span style={{
                      font: "500 13px/1 Instrument Sans, sans-serif",
                      color: "rgba(255,255,255,0.7)", marginBottom: 8, display: "block",
                    }}>Full name</span>
                    <input
                      type="text" value={name} onChange={(e) => setName(e.target.value)}
                      placeholder="Jordan Lee"
                      style={{
                        width: "100%", padding: "14px 18px",
                        background: "rgba(255,255,255,0.06)",
                        border: "1px solid rgba(255,255,255,0.15)",
                        borderRadius: 12, color: "#fff",
                        font: "500 15px/1 Instrument Sans, sans-serif",
                        outline: "none",
                      }}
                    />
                  </label>
                  <label style={{ display: "block" }}>
                    <span style={{
                      font: "500 13px/1 Instrument Sans, sans-serif",
                      color: "rgba(255,255,255,0.7)", marginBottom: 8, display: "block",
                    }}>Work email</span>
                    <input
                      type="email" value={email} onChange={(e) => setEmail(e.target.value)}
                      placeholder="jordan@company.com"
                      style={{
                        width: "100%", padding: "14px 18px",
                        background: "rgba(255,255,255,0.06)",
                        border: "1px solid rgba(255,255,255,0.15)",
                        borderRadius: 12, color: "#fff",
                        font: "500 15px/1 Instrument Sans, sans-serif",
                        outline: "none",
                      }}
                    />
                  </label>
                </div>
                {error && (
                  <div style={{
                    font: "500 13px/1.4 Instrument Sans, sans-serif",
                    color: "rgb(255,180,180)", marginBottom: 14,
                  }}>{error}</div>
                )}
                <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 18 }}>
                  <button type="button" onClick={() => setStep(2)} style={{
                    background: "transparent", border: "1px solid rgba(255,255,255,0.2)",
                    color: "#fff", padding: "12px 18px", borderRadius: 999, cursor: "pointer",
                    font: "600 14px/1 Instrument Sans, sans-serif",
                  }}>Back</button>
                  <button type="submit" disabled={submitting} style={{
                    background: RED, color: "#fff",
                    padding: "14px 28px", borderRadius: 999, border: 0,
                    cursor: submitting ? "wait" : "pointer",
                    opacity: submitting ? 0.7 : 1,
                    font: "700 16px/1 Bricolage Grotesque, sans-serif",
                    display: "inline-flex", alignItems: "center", gap: 8,
                  }}>
                    {submitting ? "Sending..." : "Send me pricing"}
                    {!submitting && (
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
                        stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M20 6 9 17l-5-5"/>
                      </svg>
                    )}
                  </button>
                </div>
                <p style={{
                  font: "400 11px/1.4 Instrument Sans, sans-serif",
                  color: "rgba(255,255,255,0.5)", margin: 0,
                }}>We take privacy seriously. Read our <a href="https://www.askable.com/privacy" style={{ color: "rgba(255,255,255,0.75)", textDecoration: "underline" }}>privacy policy</a>.</p>
              </form>
            )}

            {submitted && (
              <div className="fade-in" style={{ textAlign: "center", padding: "40px 0" }}>
                <div style={{
                  width: 64, height: 64, borderRadius: 999,
                  background: "rgba(22,163,74,0.18)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  marginBottom: 24,
                }}>
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none"
                    stroke="rgb(22,163,74)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M20 6 9 17l-5-5"/>
                  </svg>
                </div>
                <h3 style={{
                  font: "700 28px/1.15 Bricolage Grotesque, sans-serif",
                  color: "#fff", margin: "0 0 12px", letterSpacing: "-0.01em",
                }}>Thanks, {name.split(" ")[0] || "you"}.</h3>
                <p style={{
                  font: "400 15px/1.5 Instrument Sans, sans-serif",
                  color: "rgba(255,255,255,0.75)", margin: 0, maxWidth: 380, marginLeft: "auto", marginRight: "auto",
                }}>We'll be in touch within one business day with pricing tailored to your team.</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   TrustBadges — "Your CTO will love us" enterprise trust
============================================================ */
function TrustBadges() {
  return (
    <section data-region="trust-badges" style={{ background: "#fff", padding: "120px 40px" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto", textAlign: "center" }}>
        <Chip tone="peach" dot>Enterprise-ready</Chip>
        <h2 style={{
          font: "700 56px/0.95 Bricolage Grotesque, sans-serif",
          color: INK, margin: "20px 0 16px", letterSpacing: "-0.02em",
        }}>Your CTO will love us.</h2>
        <p style={{
          font: "400 17px/1.5 Instrument Sans, sans-serif",
          color: INK_MUTED, margin: "0 auto 48px", maxWidth: 580,
        }}>SOC 2 Type 2, ISO 27001, ISO 27701, ISO 42001 AI Management, GDPR, CCPA. Zero data retention with LLM providers. Model training contractually prohibited.</p>
        <img
          src={TRUST_BADGES_IMG}
          alt="Industry trust badges and reviews"
          style={{
            maxWidth: "100%", height: "auto", display: "block",
            margin: "0 auto",
          }}
        />
      </div>
    </section>
  );
}

/* ============================================================
   JonaPanel — brand-forward, paper background, soft and short
============================================================ */
function JonaPanel() {
  return (
    <section id="jona" data-region="jona" style={{ background: PAPER, padding: "140px 40px" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 56,
          alignItems: "center", maxWidth: 1180, margin: "0 auto",
        }}>
          <div style={{
            background: INK, aspectRatio: "16/9", borderRadius: 24,
            display: "flex", alignItems: "center", justifyContent: "center",
            position: "relative", overflow: "hidden",
          }}>
            <div style={{
              position: "absolute", inset: 0,
              background: "radial-gradient(circle at 45% 50%, rgba(223,181,255,0.28) 0%, transparent 65%)",
            }} />
            <div style={{
              zIndex: 1, width: 88, height: 88, borderRadius: 999,
              background: "rgba(255,255,255,0.14)", backdropFilter: "blur(6px)",
              display: "flex", alignItems: "center", justifyContent: "center",
              border: "2px solid rgba(255,255,255,0.5)",
            }}>
              <Icon name="play" size={28} color="#fff" />
            </div>
            <div style={{
              position: "absolute", bottom: 20, left: 24,
              font: "500 12px/1 Instrument Sans, sans-serif",
              color: "rgba(255,255,255,0.7)",
            }}>Jona, 60 seconds, no script</div>
          </div>

          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
              <img src="./assets/jonathan-peck.png" alt="Jonathan Peck" style={{
                width: 60, height: 60, borderRadius: 999, objectFit: "cover",
                border: `1px solid ${LINE}`, flexShrink: 0,
              }} />
              <div>
                <div style={{ font: "700 17px/1.2 Instrument Sans, sans-serif", color: INK }}>Jonathan Peck</div>
                <div style={{ font: "400 14px/1.2 Instrument Sans, sans-serif", color: INK_MUTED }}>Head of US, Askable</div>
              </div>
            </div>
            <h3 style={{
              font: "700 38px/1.1 Bricolage Grotesque, sans-serif",
              color: INK, margin: "0 0 18px", letterSpacing: "-0.02em",
            }}>20-minute call beats a brochure.</h3>
            <p style={{
              font: "400 17px/1.55 Instrument Sans, sans-serif",
              color: INK, opacity: 0.8, margin: "0 0 28px",
            }}>If Askable isn't right for where you are, I'll tell you. We'll walk through your real use case and the methods that fit it.</p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <Button variant="red" size="lg" iconLeft="calendar" onClick={() => window.askableOpenBooking && window.askableOpenBooking()}>Book a demo</Button>
              <Button variant="hollow" size="lg" icon="play">Watch the demo</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ProofBlock — verified rating + uptime
============================================================ */
function ProofBlock() {
  const stats = [
    { num: "4.8/5", label: "average customer rating", sub: "across G2, Capterra, and TrustRadius" },
    { num: "97.8%", label: "show rate", sub: "vs 60% industry average" },
    { num: "99.99%", label: "platform uptime", sub: "enterprise reliability, contractually backed" },
  ];
  return (
    <section data-region="proof" style={{ background: "#fff", padding: "120px 40px" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto" }}>
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <h2 style={{
            font: "700 36px/1.05 Bricolage Grotesque, sans-serif",
            color: INK, margin: 0, letterSpacing: "-0.02em",
          }}>The numbers behind the platform.</h2>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18,
          maxWidth: 1080, margin: "0 auto",
        }}>
          {stats.map((s, i) => (
            <Card key={i} tone="paper" pad={36} elevation={0} style={{ textAlign: "center", border: `1px solid ${LINE}`, boxShadow: "none" }}>
              <div style={{
                font: "600 64px/1 'Bricolage Grotesque', sans-serif",
                color: INK, letterSpacing: "-0.025em", marginBottom: 12,
              }}>{s.num}</div>
              <div style={{
                font: "700 15px/1.2 'Instrument Sans', sans-serif",
                color: INK, marginBottom: 6,
              }}>{s.label}</div>
              <div style={{
                font: "400 13px/1.4 'Instrument Sans', sans-serif",
                color: INK_MUTED,
              }}>{s.sub}</div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SocialProof — three customer quotes with photos
============================================================ */
function SocialProof() {
  const quotes = [
    {
      quote: "With Askable, we're getting a team that's genuinely invested in our success. It feels like working with real people who care, and that makes all the difference when researching in new markets.",
      photo: "./assets/serkan.png",
      name: "Serkan Ayan",
      role: "UX Research Manager",
    },
    {
      quote: "Every team is asking for insights every week now. I can't see us going back to the old way.",
      photo: "./assets/jamie-nathan.png",
      name: "Jamie Nathan",
      role: "Head of Customer Insights",
      company: "Deliveroo",
    },
    {
      quote: "Being able to interview hundreds of real humans in such a natural way to supercharge discovery. At scale, fast, with high quality.",
      photo: `${FIGMA}/jo-pforr.png`,
      name: "Jo Pforr",
      role: "Product and Innovation Lead",
    },
  ];
  return (
    <section data-region="social" style={{ background: PAPER, padding: "140px 40px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <h2 style={{
            font: "700 40px/1.05 Bricolage Grotesque, sans-serif",
            color: INK, margin: "0 0 14px", letterSpacing: "-0.02em",
          }}>What teams say after they switch.</h2>
          <p style={{
            font: "400 17px/1.5 Instrument Sans, sans-serif",
            color: INK_MUTED, margin: 0,
          }}>Verbatim, attributed, recent.</p>
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24,
        }}>
          {quotes.map((q, i) => (
            <div key={i} style={{
              background: "#fff", borderRadius: 24, padding: 32,
              border: `1px solid ${LINE}`,
              display: "flex", flexDirection: "column", gap: 24,
              boxShadow: "0 6px 20px -10px rgba(44,17,11,0.08)",
            }}>
              {q.logoOverride && (
                <img src={q.logoOverride} alt={q.company} style={{ height: 24, width: "auto", display: "block" }} />
              )}
              <p style={{
                font: "500 19px/1.45 Bricolage Grotesque, sans-serif",
                color: INK, margin: 0, letterSpacing: "-0.01em",
                flex: 1,
              }}>"{q.quote}"</p>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <img src={q.photo} alt={q.name} style={{
                  width: 44, height: 44, borderRadius: 999, objectFit: "cover",
                  flexShrink: 0, border: `1px solid ${LINE}`,
                }} />
                <div>
                  <div style={{ font: "700 14px/1.2 Instrument Sans, sans-serif", color: INK }}>{q.name}</div>
                  <div style={{ font: "400 13px/1.3 Instrument Sans, sans-serif", color: INK_MUTED }}>
                    {q.role}{q.company ? `, ${q.company}` : ""}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Faq — keyword-optimised for paid search intent
============================================================ */
function Faq() {
  const faq = [
    { q: "What is the Askable user research platform?", a: "Askable is an all-in-one UX research platform that combines participant recruitment, every research method (AI-moderated, moderated, unmoderated, prototype, card sort, tree test, surveys, 5-second tests, diary studies, live website testing), and AI-powered synthesis on one platform. One annual price, unlimited seats." },
    { q: "Does Askable support unmoderated user testing?", a: "Yes. Unmoderated testing is included on every plan, alongside prototype testing, live website testing, live mobile testing, and async task-based research. Screen and voice capture, on demand, with verified participants from our first-party panel." },
    { q: "Can I run card sorting and tree testing on Askable?", a: "Yes, both are included on every plan, no upgrade required. Card sorting supports open, closed, and hybrid sorts. Tree testing validates information architecture before you commit to navigation." },
    { q: "What AI-moderated research tools does Askable offer?", a: "Askable AI runs structured interviews in 17+ native languages, 24/7. It asks context-aware follow-ups, detects nuance, and scores quality on five dimensions. Hundreds of interviews can run in parallel. Every transcript is processed individually, not summarised in one pass." },
    { q: "How is the Askable participant panel different?", a: "We own and operate it directly. First-party. We recruit, screen, vet, and pay participants. 97.8% show rate vs the 60% industry average. Millions of verified participants across 50+ countries. Triple verification on identity, engagement, and quality." },
    { q: "How does Askable pricing work?", a: "One annual price. Every research method included. Unlimited seats, no per-seat fees. Participant incentives handled by Askable directly. Run the pricing form above for tailored numbers based on your study volume." },
    { q: "How does Askable compare to other research platforms?", a: "Askable was built as one platform from day one, not stitched together through acquisitions. Every method on every plan, an owned and verified panel, AI end-to-end (not bolted on), Askable MCP for enterprise LLMs, 24/7 support, and ISO 42001 AI Management certified." },
    { q: "Are card sort and tree test really included on every plan?", a: "Yes. Every method, every plan, no add-ons. Card sorting, tree testing, prototype testing, AI-moderated, unmoderated, moderated interviews, surveys, 5-second tests, diary studies, live website testing." },
    { q: "Can I migrate from UserTesting, Maze, or another research tool?", a: "Yes. Data import supported. Dedicated onboarding team. Most teams cut over in three weeks. We've moved teams mid-contract with existing platforms." },
    { q: "Is Askable enterprise-ready for security and compliance?", a: "SOC 2 Type 2, ISO 27001 (2019 + 2022), ISO 27701, ISO 42001 AI Management, GDPR, CCPA, UK Cyber Essentials. Zero data retention with LLM providers, contractually enforced. SSO, SCIM, audit logs, AI feature toggles." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section data-region="faq" style={{ background: "#fff", padding: "140px 40px" }}>
      <div style={{
        maxWidth: 1240, margin: "0 auto",
        display: "grid", gridTemplateColumns: "0.8fr 1.4fr", gap: 80,
        alignItems: "start",
      }}>
        <div>
          <h2 style={{
            font: "700 44px/1.02 'Bricolage Grotesque', sans-serif",
            color: INK, margin: "0 0 18px", letterSpacing: "-0.02em",
          }}>The real questions.</h2>
          <p style={{
            font: "400 16px/1.5 Instrument Sans, sans-serif",
            color: INK, opacity: 0.85, margin: 0, maxWidth: 320,
          }}>Plain answers. Not the marketing version.</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 20px/1.3 'Instrument Sans', sans-serif",
                    color: INK, letterSpacing: "-0.005em",
                  }}>{f.q}</span>
                  <svg width="20" height="20" 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 — terracotta-wave footer reprise
============================================================ */
function FinalCta() {
  const stats = [
    { num: "97.8%", label: "show rate" },
    { num: "48hr", label: "brief to evidence" },
    { num: "16", label: "research methods" },
    { num: "17+", label: "AI languages" },
  ];
  return (
    <section id="finalcta" data-region="finalcta" style={{
      background: PEACH, color: INK, padding: "120px 40px",
      position: "relative", overflow: "hidden",
    }}>
      <div style={{
        maxWidth: 880, margin: "0 auto", textAlign: "center",
        position: "relative", zIndex: 1,
      }}>
        <h2 style={{
          font: "700 64px/0.98 'Bricolage Grotesque', sans-serif",
          color: INK, margin: "0 0 18px", letterSpacing: "-0.03em",
          textWrap: "balance",
        }}>Switch to the research platform that runs at the speed of product.</h2>
        <p style={{
          font: "400 20px/1.5 Instrument Sans, sans-serif",
          color: INK_MUTED, margin: "0 auto 40px", maxWidth: 620,
        }}>One platform. One contract. Every method. We'll walk through your use case and show you the platform on your study volume.</p>

        <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap", marginBottom: 48 }}>
          <Button variant="red" size="xl" icon="arrowRight" onClick={() => window.askableOpenBooking && window.askableOpenBooking()}>Get a demo</Button>
        </div>

        {/* Stats strip */}
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16,
          maxWidth: 720, margin: "0 auto",
          paddingTop: 40,
          borderTop: `1px solid rgba(34,6,19,0.12)`,
        }}>
          {stats.map((s, i) => (
            <div key={i} style={{ textAlign: "center" }}>
              <div style={{
                font: "600 36px/1 Bricolage Grotesque, sans-serif",
                color: INK, letterSpacing: "-0.02em", marginBottom: 6,
              }}>{s.num}</div>
              <div style={{
                font: "500 12px/1.3 Instrument Sans, sans-serif",
                color: INK_MUTED,
              }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ExitIntentModal — light, demo-led
============================================================ */
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>

        <span style={{
          display: "inline-block",
          font: "600 11px/1 Instrument Sans, sans-serif",
          color: RED, letterSpacing: "0.14em", textTransform: "uppercase",
          background: PEACH, padding: "8px 14px", borderRadius: 999,
          marginBottom: 22,
        }}>Switch to Askable</span>

        <h3 style={{
          font: "700 36px/1.05 'Bricolage Grotesque', sans-serif",
          color: INK, margin: "0 0 14px", letterSpacing: "-0.025em",
        }}>Stuck in a contract? We can help.</h3>
        <p style={{
          font: "400 16px/1.55 Instrument Sans, sans-serif",
          color: INK_MUTED, margin: "0 0 32px",
        }}>We've moved teams mid-contract from UserTesting, Maze, and other platforms. Three-week cutover, dedicated onboarding team, data import supported.</p>

        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <Button variant="red" size="lg" icon="arrowRight" onClick={onBook}>Talk to sales</Button>
          <a href="https://www.askable.com/explore-product" target="_blank" rel="noopener" style={{ textDecoration: "none" }}>
            <Button variant="hollow" size="lg" icon="play">See it in action</Button>
          </a>
        </div>

        <p style={{
          font: "400 12px/1.5 Instrument Sans, sans-serif",
          color: INK_MUTED, margin: "24px 0 0",
        }}>20-minute call. Same-day response. No pitch deck.</p>
      </div>
    </div>
  );
}

/* ============================================================
   MomentumChip — floating bottom-left social proof
============================================================ */
function MomentumChip() {
  const [visible, setVisible] = useState(false);
  const [dismissed, setDismissed] = useState(false);
  const demosThisWeek = 18;

  useEffect(() => {
    if (sessionStorage.getItem("momentum-dismissed-methods")) {
      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);
        window.removeEventListener("scroll", handleScroll);
      }
    };
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

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

  if (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,
        }}>{demosThisWeek} demos 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 campaign booking iframe
============================================================ */
function BookingModal({ onClose }) {
  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: 720,
        height: "92vh", maxHeight: 900,
        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>

        {/* RevenueHero hosted scheduler — form + calendar in one flow */}
        <iframe
          src="https://askable.schedulehero.io/inbound/research-methods-router-g-ads"
          title="Book a demo with Askable"
          style={{
            border: 0, width: "100%", height: "100%",
            display: "block",
          }}
          allow="camera; microphone; clipboard-write"
        />
      </div>
    </div>
  );
}

Object.assign(window, {
  MethodsTicker, MethodsHero, TrustStrip, BenefitsRow, MethodsGrid,
  AIShowcase, PanelStats, TescoStory, WhySwitch, PricingForm, TrustBadges, JonaPanel,
  ProofBlock, SocialProof, Faq, FinalCta,
  ExitIntentModal, BookingModal, MomentumChip,
});