/* global React */
const { useState: useS72 } = React;

// ───────────────────────────────────────────────────────────────────────
// V7.2 — REGULATED VANGUARD
// + Staged hero timeline · log stream re-calibrated to 1.5%
// + Magnetic scroll-snap on loop · weighted 240ms easing everywhere
// (replaces v7.1)
// + Amethyst ambient hover on CTAs · Sticky-scroll dashboard mutator (loop)
// + Monospace prompt emulator (Q Brain) · Background log stream (methodology)
// V6 chrome (editorial, boardroom, calm) × V5 furniture-retail context
// (JYSK, Mio, Bolia, boucle chairs). Zero radius. Tactile hovers.
// Asynchronous focus in hero, hairline anchor in product loop.
// ───────────────────────────────────────────────────────────────────────

const K = {
  paper:      "#fbfbfa",
  paperWarm:  "#f4f1ea",
  panelWarm:  "#ece7df",
  card:       "#ffffff",
  ink:        "#1a1916",
  inkDeep:    "#0c0b09",
  inkMute:    "rgba(26,25,22,0.66)",
  inkDim:     "rgba(26,25,22,0.46)",
  inkFaint:   "rgba(26,25,22,0.20)",
  hair:       "#e0ded6",
  hair2:      "rgba(26,25,22,0.12)",
  signal:     "#5c44e0",
  signalInk:  "#2c1f99",
  signalSoft: "rgba(92,68,224,0.06)",
  pos:        "#3a7d4a",
  neg:        "#b1432b",
  warn:       "#8a6a1a",
};

const v72Serif = { fontFamily: "ui-serif, Georgia, 'Times New Roman', serif" };
const v72It    = { ...v72Serif, fontStyle: "italic", fontWeight: 400 };
const v72Mono  = { fontFamily: "ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace" };

// Tactile button — sharp rectangles, lift on hover, amethyst inner-shadow + arrow drift
function V72Btn({ variant = "primary", children, wider = false }) {
  const [hover, setHover] = useS72(false);
  const isPrimary = variant === "primary";
  const isInverted = variant === "invertedPrimary";
  const isHairline = variant === "hairline";
  let style = {
    display: "inline-flex", alignItems: "center", gap: 10,
    padding: wider ? "14px 32px" : "12px 22px",
    font: "500 14px/1 var(--font-sans)", letterSpacing: "-0.005em",
    border: "1px solid transparent", cursor: "pointer",
    transition: "all 240ms cubic-bezier(0.25, 1, 0.5, 1)",
    transform: hover ? "translateY(-1px)" : "translateY(0)",
  };
  if (isPrimary) {
    style = { ...style, background: K.inkDeep, color: "#fff",
      boxShadow: hover
        ? "inset 0 0 0 1px rgba(168,85,247,0.20), 0 6px 16px -8px rgba(0,0,0,0.4)"
        : "none" };
  } else if (isInverted) {
    style = { ...style, background: "#fff", color: K.inkDeep,
      boxShadow: hover
        ? "inset 0 0 0 1px rgba(168,85,247,0.22), 0 6px 16px -8px rgba(0,0,0,0.3)"
        : "none" };
  } else if (isHairline) {
    style = { ...style, background: "transparent", color: K.ink,
      border: "1px solid " + K.hair,
      boxShadow: hover ? "inset 0 0 0 1px rgba(168,85,247,0.18)" : "none",
      opacity: hover ? 1 : 0.92 };
  } else { // textlink
    style = { ...style, background: "transparent", color: K.ink, padding: wider ? "14px 6px" : "12px 4px",
      borderBottom: "1px solid " + (hover ? "rgba(168,85,247,0.45)" : K.hair2), transform: "none" };
  }
  // Wrap children: scan for a trailing arrow glyph and animate its translateX on hover.
  const arrowStyle = { transition: "transform 240ms cubic-bezier(0.25, 1, 0.5, 1)", display: "inline-block", transform: hover ? "translateX(3px)" : "translateX(0)" };
  const renderedChildren = React.Children.map(children, (child) => {
    if (typeof child === "string") {
      // split off a trailing arrow if present
      const m = child.match(/^(.*?)(\s*[→›])(\s*)$/);
      if (m) {
        return <>{m[1]}<span style={arrowStyle}>{m[2]}</span>{m[3]}</>;
      }
      return child;
    }
    return child;
  });
  return (
    <span onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={style}>{renderedChildren}</span>
  );
}

// ── 01 NAV ─────────────────────────────────────────────────────────────
function V72Nav() {
  return (
    <div style={{ background: K.paper, borderBottom: "1px solid " + K.hair, height: 64, display: "flex", alignItems: "center", padding: "0 44px", gap: 32, color: K.ink, font: "500 13px/1 var(--font-sans)" }}>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 10, fontWeight: 500, fontSize: 17, letterSpacing: "-0.005em" }}>
        <span style={{ width: 8, height: 8, background: K.ink }}/>
        Qaptic
      </span>
      <span style={{ width: 1, height: 16, background: K.hair2, marginLeft: 8 }}/>
      {["Product", "Q Brain", "Use cases", "Pricing"].map(it => (
        <span key={it} style={{ color: K.inkMute, opacity: 0.84 }}>{it}</span>
      ))}
      <span style={{ marginLeft: "auto", display: "flex", gap: 12, alignItems: "center" }}>
        <V72Btn variant="hairline">See sample brief</V72Btn>
        <V72Btn variant="primary">Book demo <span style={{ opacity: 0.7 }}>→</span></V72Btn>
      </span>
    </div>
  );
}

// ── 02 HERO ────────────────────────────────────────────────────────────
function V72Hero() {
  return (
    <section style={{ background: K.paper, color: K.ink, padding: "92px 44px 110px" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", paddingBottom: 18, borderBottom: "1px solid " + K.hair, marginBottom: 56 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 10, ...v72Mono, fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: K.inkMute }}>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: K.pos }}/>
            Live · indexing 80+ retail nodes
          </span>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: K.inkMute }}>
            Commercial intelligence · furniture retail
          </span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "0.92fr 1.08fr", gap: 80, alignItems: "start" }}>
          {/* LEFT */}
          <div className="v72-stage v72-stage-h1" style={{ paddingTop: 6 }}>
            <h1 style={{ fontSize: 72, lineHeight: 1.0, letterSpacing: "-0.035em", fontWeight: 500, margin: 0, textWrap: "balance", color: K.inkDeep }}>
              Every market move,<br/>
              <span style={v72It}>turned into one</span><br/>
              decision brief.
            </h1>
            <div style={{ width: 56, height: 1, background: K.ink, margin: "32px 0" }}/>
            <p style={{ font: "400 18px/1.55 var(--font-sans)", letterSpacing: "-0.005em", color: K.inkMute, maxWidth: 470, margin: 0, textWrap: "pretty" }}>
              Qaptic captures competitor signals across prices, campaigns, assortment, and demand — then turns them into prioritized actions before your day starts.
            </p>
            <div style={{ marginTop: 36, display: "inline-flex", alignItems: "center", gap: 16 }}>
              <V72Btn variant="primary" wider>Book a demo →</V72Btn>
              <V72Btn variant="textlink">See sample morning brief</V72Btn>
            </div>
            <div style={{ marginTop: 22, ...v72Mono, fontSize: 11, letterSpacing: "0.10em", textTransform: "uppercase", color: K.inkDim }}>
              Used by category leaders at Mio · JYSK · Bolia · Trademax
            </div>

            {/* Micro-flow */}
            <div style={{ marginTop: 48, paddingTop: 22, borderTop: "1px solid " + K.hair }}>
              <div style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim, marginBottom: 18 }}>The mechanic</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 14px 1fr 14px 1fr", gap: 0, alignItems: "start" }}>
                {[
                  { n: "01", t: "Signals captured", body: "Prices, campaigns, assortment, demand — 80+ retailers, daily." },
                  { n: "02", t: "Q Brain reads",    body: "Cross-source reasoning, ranked priority, sources cited." },
                  { n: "03", t: "Action briefed",   body: "One brief. Three actions queued. By 06:00." },
                ].map((s, i, arr) => (
                  <React.Fragment key={s.n}>
                    <div>
                      <div style={{ ...v72Mono, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: i === 1 ? K.signalInk : K.inkDim, marginBottom: 8 }}>{s.n}</div>
                      <div style={{ font: "500 14px/1.3 var(--font-sans)", letterSpacing: "-0.005em", color: K.ink, marginBottom: 6 }}>{s.t}</div>
                      <div style={{ font: "400 12px/1.45 var(--font-sans)", letterSpacing: "-0.003em", color: K.inkMute }}>{s.body}</div>
                    </div>
                    {i < arr.length - 1 && (
                      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", paddingTop: 4 }}>
                        <svg width="14" height="8" viewBox="0 0 14 8"><path d="M 0 4 L 11 4 M 8 1 L 13 4 L 8 7" stroke={K.inkDim} fill="none" strokeWidth="1"/></svg>
                      </div>
                    )}
                  </React.Fragment>
                ))}
              </div>
            </div>
          </div>

          {/* RIGHT — Intelligence Artifact */}
          <V72Brief/>
        </div>
      </div>
    </section>
  );
}

function V72Brief() {
  // 5 rows; rows 0,1 = 100%, 2/3/4 fade via mask gradient
  const rows = [
    { t: "04:18", tag: "PRICE",    pri: "high", who: "JYSK",     src: "jysk.se/sofas/eden",       line: "Mid-segment sofas — dropped 12%",        q: "Three of your watched SKUs now undercut." },
    { t: "05:02", tag: "CAMPAIGN", pri: "high", who: "Mio",      src: "mio.se/spring-living",     line: "Outdoor push launched · 14 days early",   q: "Match copy on patio + lighting before Friday." },
    { t: "05:41", tag: "DEMAND",   pri: "med",  who: "Search",   src: "nordic · demand index",    line: "Boucle armchair queries up 4.1× / 30d",   q: "Whitespot · SEK 4–6k tier." },
    { t: "06:08", tag: "STOCKOUT", pri: "low",  who: "Bolia",    src: "bolia.com/hagen",          line: "Hagen lounge oat · OOS 4d",                q: "Window for price + rank lift." },
    { t: "06:31", tag: "GAP",      pri: "low",  who: "Category", src: "internal · demand match",  line: "Outdoor lounge oak · SEK <6k",             q: "0 peer listings · open Studio." },
  ];
  const priColor = (p) => p === "high" ? K.neg : p === "med" ? K.warn : K.pos;
  const priLabel = (p) => p === "high" ? "HIGH" : p === "med" ? "MED" : "LOW";
  return (
    <div className="v72-stage v72-stage-chrome" style={{ background: K.card, border: "1px solid " + K.hair, boxShadow: "0 1px 0 rgba(26,25,22,0.04), 0 30px 80px -30px rgba(26,25,22,0.22)" }}>
      {/* App chrome */}
      <div style={{ padding: "12px 18px", borderBottom: "1px solid " + K.hair, display: "flex", alignItems: "center", gap: 10, background: K.paperWarm }}>
        <span style={{ width: 8, height: 8, background: K.ink }}/>
        <span style={{ font: "500 12px/1 var(--font-sans)", letterSpacing: "-0.003em" }}>Qaptic</span>
        <span style={{ width: 1, height: 12, background: K.hair2, marginLeft: 8 }}/>
        <span style={{ ...v72Mono, fontSize: 12, color: K.inkMute, letterSpacing: "0.01em" }}>app.qaptic.com / brief</span>
        <span style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 8, ...v72Mono, fontSize: 11, color: K.inkMute }}>
          <span style={{ width: 6, height: 6, background: K.pos, borderRadius: 3 }}/>
          Synced 06:42
        </span>
      </div>

      <div style={{ padding: "26px 32px 18px" }}>
        {/* Masthead */}
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", paddingBottom: 14, borderBottom: "2px solid " + K.ink }}>
          <div>
            <div style={{ ...v72Mono, fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase", color: K.inkDim, marginBottom: 8 }}>Monday brief · 19 May 2026</div>
            <div style={{ fontSize: 30, lineHeight: 1, letterSpacing: "-0.02em", ...v72Serif, color: K.ink }}>Morning Brief</div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div style={{ ...v72Mono, fontSize: 10, letterSpacing: "0.20em", textTransform: "uppercase", color: K.inkDim, marginBottom: 6 }}>Overnight signals</div>
            <div style={{ font: "500 13px/1 var(--font-sans)", color: K.ink, letterSpacing: "-0.005em" }}>47 captured · 2 high-priority</div>
          </div>
        </div>

        {/* Q Brain summary */}
        <div style={{ padding: "16px 16px 16px 14px", borderLeft: "3px solid " + K.signal, marginTop: 18, background: K.signalSoft }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
            <span style={{ width: 18, height: 18, background: K.signal, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", font: "600 10px/1 var(--font-sans)" }}>Q</span>
            <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.signalInk }}>Q Brain · summary</span>
            <span style={{ marginLeft: "auto", ...v72Mono, fontSize: 11, letterSpacing: "0.06em", color: K.signalInk }}>Two priorities queued</span>
          </div>
          <p style={{ font: "400 15px/1.5 var(--font-sans)", color: K.ink, letterSpacing: "-0.005em", margin: 0, textWrap: "pretty" }}>
            Sofa pressure rising across <span style={v72It}>JYSK</span> and <span style={v72It}>Mio</span>. One sourcing whitespot opens up under SEK&nbsp;6k. Review price position before tonight's meeting.
          </p>
        </div>
      </div>

      {/* Signal rows — asynchronous focus via mask gradient on the fading rows */}
      <div style={{ padding: "0 32px 14px" }}>
        <div>
          {rows.map((r, i) => {
            const focus = i < 2;
            return (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "10px 60px 80px 1fr 56px",
                gap: 14, alignItems: "baseline",
                padding: "16px 0",
                borderBottom: "1px solid " + K.hair,
                opacity: focus ? 1 : 1, // mask handles the fade
                WebkitMaskImage: focus ? "none" : `linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.3))`,
                maskImage:       focus ? "none" : `linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.3))`,
              }}>
                <span style={{ width: 6, height: 6, background: priColor(r.pri), marginTop: 7 }}/>
                <span style={{ ...v72Mono, fontSize: 12, color: K.inkDim, letterSpacing: "0.04em" }}>{r.t}</span>
                <span style={{ ...v72Mono, fontSize: 10, letterSpacing: "0.20em", textTransform: "uppercase", color: K.inkDim }}>{r.tag}</span>
                <div style={{ font: "400 14px/1.4 var(--font-sans)", letterSpacing: "-0.005em" }}>
                  <span style={{ fontWeight: 500 }}>{r.who}</span>
                  <span style={{ color: K.inkMute }}> — {r.line}</span>
                  <div style={{ ...v72Mono, fontSize: 11, color: K.inkDim, marginTop: 4, letterSpacing: "0.01em" }}>{r.src}</div>
                  {focus && (
                    <div style={{ display: "flex", alignItems: "flex-start", gap: 10, marginTop: 10 }}>
                      <span style={{ width: 16, height: 16, background: K.signal, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", font: "600 9px/1 var(--font-sans)", flexShrink: 0, marginTop: 2 }}>Q</span>
                      <span style={{ font: "400 13px/1.45 var(--font-sans)", letterSpacing: "-0.003em", color: K.signalInk, ...v72It }}>{r.q}</span>
                      <span style={{ marginLeft: "auto" }}/>
                      <V72Btn variant="hairline">Take action</V72Btn>
                    </div>
                  )}
                </div>
                <span style={{ ...v72Mono, fontSize: 10, letterSpacing: "0.08em", color: priColor(r.pri), textAlign: "right" }}>{priLabel(r.pri)}</span>
              </div>
            );
          })}
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "18px 0 6px" }}>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>3 actions queued</span>
          <span style={{ font: "500 13px/1 var(--font-sans)", color: K.ink, letterSpacing: "-0.005em" }}>Open intelligence room →</span>
        </div>
      </div>
    </div>
  );
}

// ── 03 LIVE MARKET EVENTS STRIP — ledger ──────────────────────────────
function V72Ledger() {
  const rows = [
    { t: "04:18", tag: "PRICE MOVE",   who: "JYSK",     line: "Mid-segment sofa prices cut by 12%.",                   q: "Watch margin pressure across competing SKUs.", tone: K.neg },
    { t: "05:02", tag: "NEW CAMPAIGN", who: "Mio",      line: "Outdoor furniture push launched 14 days early.",         q: "Match copy on patio + lighting before Friday.",  tone: K.warn },
    { t: "05:41", tag: "DEMAND SPIKE", who: "Nordic",   line: "Boucle armchair queries rising exponentially.",          q: "Whitespot tier SEK 4–6k. Brief Studio.",         tone: K.pos },
    { t: "06:08", tag: "STOCKOUT",     who: "Bolia",    line: "Hagen lounge · oat — out of stock for 4 days.",          q: "Window for price + rank lift.",                  tone: K.warn },
    { t: "06:31", tag: "NEW SKU",      who: "Trademax", line: "Added 14 oak dining chairs · anchor SEK 1,990.",         q: "Price anchor below your portfolio.",             tone: K.warn },
  ];
  return (
    <section style={{ background: K.paperWarm, padding: "120px 44px", borderTop: "1px solid " + K.hair }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", paddingBottom: 18, borderBottom: "1px solid " + K.hair, marginBottom: 56 }}>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>Section 01 · The market</span>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>Overnight · 19 May · indexed 06:42</span>
        </div>
        <h2 style={{ fontSize: 52, lineHeight: 1.04, letterSpacing: "-0.03em", fontWeight: 400, margin: 0, marginBottom: 22, ...v72Serif, textWrap: "balance", maxWidth: 760 }}>
          The market moved <span style={{ fontStyle: "italic" }}>while your team</span> was offline.
        </h2>
        <p style={{ font: "400 17px/1.55 var(--font-sans)", letterSpacing: "-0.005em", color: K.inkMute, maxWidth: 540, marginBottom: 36 }}>
          A typical Monday in furniture retail — five overnight signals, fragmented across sites your team would not have time to open.
        </p>

        <div style={{ background: K.card, border: "1px solid " + K.hair }}>
          <div style={{ display: "grid", gridTemplateColumns: "12px 80px 130px 1fr 360px 24px", gap: 16, padding: "14px 22px", borderBottom: "1px solid " + K.hair, ...v72Mono, fontSize: 10, letterSpacing: "0.20em", textTransform: "uppercase", color: K.inkDim, background: K.paperWarm }}>
            <span/><span>Time</span><span>Type</span><span>Event</span><span>Q Brain note</span><span/>
          </div>
          {rows.map((r, i) => (
            <V72LedgerRow key={i} r={r} last={i === rows.length - 1}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function V72LedgerRow({ r, last }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "12px 80px 130px 1fr 360px 24px", gap: 16, alignItems: "center", padding: "18px 22px", borderBottom: last ? "none" : "1px solid " + K.hair }}>
      <span style={{ display: "inline-flex", width: 8, height: 8, background: r.tone, borderRadius: 4, animation: "v7Pulse 1.8s ease-in-out infinite", boxShadow: `0 0 0 4px ${r.tone}1a` }}/>
      <span style={{ ...v72Mono, fontSize: 12, color: K.inkMute, letterSpacing: "0.04em" }}>{r.t}</span>
      <span style={{ ...v72Mono, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>{r.tag}</span>
      <div style={{ font: "400 15px/1.4 var(--font-sans)", letterSpacing: "-0.005em" }}>
        <span style={{ fontWeight: 500, color: K.ink }}>{r.who}</span>
        <span style={{ color: K.inkMute }}> — {r.line}</span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ width: 16, height: 16, background: K.signal, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", font: "600 9px/1 var(--font-sans)", flexShrink: 0 }}>Q</span>
        <span style={{ font: "400 13px/1.4 var(--font-sans)", letterSpacing: "-0.003em", color: K.signalInk, ...v72It }}>{r.q}</span>
      </div>
      <span style={{ ...v72Mono, fontSize: 11, color: K.inkDim }}>→</span>
    </div>
  );
}

// ── 04 OLD vs QAPTIC ──────────────────────────────────────────────────
function V72OldVsNew() {
  return (
    <section style={{ background: K.paper, padding: "130px 44px" }}>
      <div style={{ maxWidth: 1220, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", paddingBottom: 18, borderBottom: "1px solid " + K.hair, marginBottom: 48 }}>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>Section 02 · The break</span>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>Cognitive load · before / after</span>
        </div>
        <h2 style={{ fontSize: 52, lineHeight: 1.04, letterSpacing: "-0.03em", fontWeight: 400, margin: 0, marginBottom: 48, ...v72Serif, textWrap: "balance", maxWidth: 880 }}>
          Stop opening ten tabs <span style={{ fontStyle: "italic" }}>to understand one market.</span>
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 0, border: "1px solid " + K.hair, background: K.card }}>
          {/* OLD */}
          <div style={{ padding: "44px 40px", background: K.paperWarm, borderRight: "1px solid " + K.hair }}>
            <div style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: K.inkDim, marginBottom: 18 }}>The old way</div>
            <h3 style={{ fontSize: 24, lineHeight: 1.2, letterSpacing: "-0.015em", fontWeight: 500, margin: 0, marginBottom: 24, color: K.inkMute, ...v72Serif }}>
              Hours of manual checking. Signals still missed.
            </h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              {[
                "Retailer sites opened one by one",
                "Newsletter screenshots in chat threads",
                "Fragmented competitor spreadsheets",
                "Missed overnight price drops",
                "Slow internal reaction loops",
                "No single source of truth",
              ].map(t => (
                <div key={t} style={{ display: "flex", gap: 12, padding: "10px 0", borderBottom: "1px dashed " + K.hair2 }}>
                  <span style={{ ...v72Mono, fontSize: 12, color: K.inkDim, paddingTop: 3 }}>—</span>
                  <span style={{ font: "400 15px/1.45 var(--font-sans)", letterSpacing: "-0.005em", color: K.inkMute, textDecoration: "line-through", textDecorationColor: K.inkFaint }}>{t}</span>
                </div>
              ))}
            </div>
          </div>

          {/* NEW */}
          <div style={{ padding: "44px 40px", background: K.inkDeep, color: "#fff", borderLeft: "1px solid " + K.signal }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
              <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>The Qaptic way</span>
              <span style={{ width: 18, height: 18, background: K.signal, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", font: "600 10px/1 var(--font-sans)", marginLeft: 8 }}>Q</span>
            </div>
            <h3 style={{ fontSize: 28, lineHeight: 1.15, letterSpacing: "-0.02em", fontWeight: 500, margin: 0, marginBottom: 24, color: "#fff", ...v72Serif }}>
              One prioritized morning brief. <span style={{ fontStyle: "italic" }}>Already actionable.</span>
            </h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              {[
                "One brief at 06:00, every weekday",
                "Daily tracked changes across all retailers",
                "Q Brain interpretation of what matters",
                "Sources cited on every insight",
                "Shared source of truth across teams",
                "Ten-minute setup. No integration.",
              ].map(t => (
                <div key={t} style={{ display: "flex", gap: 12, padding: "10px 0", borderBottom: "1px dashed rgba(255,255,255,0.08)" }}>
                  <span style={{ color: K.signal, font: "600 12px/1.4 var(--font-sans)" }}>✓</span>
                  <span style={{ font: "400 15px/1.45 var(--font-sans)", letterSpacing: "-0.005em", color: "rgba(255,255,255,0.9)" }}>{t}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 28, paddingTop: 20, borderTop: "1px solid rgba(255,255,255,0.12)" }}>
              <V72Btn variant="invertedPrimary">See sample morning brief →</V72Btn>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── 05 PRODUCT PROOF SEQUENCE — sticky-scroll dashboard mutator ──────
function V72Loop() {
  const steps = [
    { n: "01", t: "Watch",       sub: "Market changes. Live price positioning. Campaign tracking.",
      q: "Q Brain ranks the night's signals.", effect: "From 12 tabs to one prioritized feed." },
    { n: "02", t: "Understand",  sub: "Trend synthesis. Assortment whitespots. Price clusters.",
      q: "Q Brain flags risk to margin.", effect: "Same morning. Not three days later." },
    { n: "03", t: "Create",      sub: "Visual product proposals derived from real market gaps.",
      q: "Q Brain drafts the concept brief.", effect: "Anchored to a sized opportunity." },
    { n: "04", t: "Act",         sub: "Sourcing briefs, RFQ templates, launch readiness.",
      q: "Q Brain matches gaps to suppliers.", effect: "From signal to PO in one workspace." },
  ];
  const [active, setActive] = useS72(0);
  const containerRef = React.useRef(null);
  const stepRefs = React.useRef([]);

  React.useEffect(() => {
    const onScroll = () => {
      if (!containerRef.current) return;
      const rect = containerRef.current.getBoundingClientRect();
      const viewportMid = window.innerHeight / 2;
      // Find which step's vertical midpoint is closest to viewport midpoint
      let bestIdx = 0; let bestDist = Infinity;
      stepRefs.current.forEach((el, i) => {
        if (!el) return;
        const r = el.getBoundingClientRect();
        const mid = r.top + r.height / 2;
        const dist = Math.abs(mid - viewportMid);
        if (dist < bestDist) { bestDist = dist; bestIdx = i; }
      });
      setActive(bestIdx);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const mocks = [
    <V72MockWatch key="w"/>,
    <V72MockUnderstand key="u"/>,
    <V72MockCreate key="c"/>,
    <V72MockAct key="a"/>,
  ];

  return (
    <section className="v72-loop-section" style={{ background: K.paper, padding: "150px 0 100px", position: "relative" }}>
      {/* Hairline anchor */}
      <div aria-hidden="true" style={{ position: "absolute", top: 80, bottom: 80, left: "50%", width: 1, background: K.hair, pointerEvents: "none" }}/>

      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 44px" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", paddingBottom: 18, borderBottom: "1px solid " + K.hair, marginBottom: 56 }}>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>Section 03 · The product</span>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>One continuous loop</span>
        </div>
        <h2 style={{ fontSize: 56, lineHeight: 1.02, letterSpacing: "-0.03em", fontWeight: 400, margin: 0, marginBottom: 18, ...v72Serif, textWrap: "balance" }}>
          Watch <span style={v72It}>→</span> Understand <span style={v72It}>→</span> Create <span style={v72It}>→</span> <span style={v72It}>Act.</span>
        </h2>
        <p style={{ font: "400 17px/1.55 var(--font-sans)", letterSpacing: "-0.005em", color: K.inkMute, maxWidth: 600 }}>
          The same intelligence carries from the morning brief to the supplier RFQ. Every step feeds the next — and the loop closes overnight.
        </p>
      </div>

      {/* Sticky-scroll dashboard mutator */}
      <div ref={containerRef} style={{ marginTop: 80, position: "relative", padding: "0 44px" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", columnGap: 80, alignItems: "start" }}>
          {/* LEFT column: step list, scrolls naturally */}
          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
            {steps.map((s, i) => (
              <div key={s.n} className="v72-loop-step" ref={(el) => (stepRefs.current[i] = el)} style={{
                minHeight: "70vh", display: "flex", flexDirection: "column", justifyContent: "center",
                padding: "60px 0",
                opacity: active === i ? 1 : 0.32,
                transition: "opacity 240ms cubic-bezier(0.25, 1, 0.5, 1)",
                borderTop: i === 0 ? "none" : "1px solid " + K.hair,
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
                  <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: K.inkDim }}>Step {s.n}</span>
                  {active === i && <span style={{ width: 6, height: 6, background: K.signal, animation: "v7Pulse 1.8s ease-in-out infinite" }}/>}
                </div>
                <h3 style={{ fontSize: 48, lineHeight: 1.05, letterSpacing: "-0.03em", fontWeight: 400, margin: 0, ...v72Serif, marginBottom: 18 }}>
                  {s.t}
                </h3>
                <p style={{ font: "400 18px/1.5 var(--font-sans)", letterSpacing: "-0.005em", color: K.inkMute, maxWidth: 460, margin: 0, marginBottom: 22, textWrap: "pretty" }}>{s.sub}</p>
                <div style={{ paddingTop: 16, borderTop: "1px solid " + K.hair, display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
                  <span style={{ width: 18, height: 18, background: K.signal, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", font: "600 10px/1 var(--font-sans)" }}>Q</span>
                  <span style={{ font: "400 14px/1.4 var(--font-sans)", letterSpacing: "-0.003em", color: K.signalInk, ...v72It }}>{s.q}</span>
                </div>
                <div style={{ font: "500 13px/1.4 var(--font-sans)", letterSpacing: "0.01em", color: K.ink }}>{s.effect}</div>
              </div>
            ))}
          </div>

          {/* RIGHT column: sticky mutating app window */}
          <div style={{ position: "sticky", top: 80, alignSelf: "start", paddingTop: 60 }}>
            <div style={{ position: "relative", minHeight: 520 }}>
              {mocks.map((m, i) => (
                <div key={i} style={{
                  position: i === 0 ? "relative" : "absolute",
                  top: 0, left: 0, right: 0,
                  opacity: active === i ? 1 : 0,
                  transform: active === i ? "translateY(0)" : "translateY(8px)",
                  transition: "opacity 300ms cubic-bezier(0.25, 1, 0.5, 1), transform 300ms cubic-bezier(0.25, 1, 0.5, 1)",
                  pointerEvents: active === i ? "auto" : "none",
                }}>{m}</div>
              ))}
              {/* Q Brain violet scan overlay during Understand */}
              <div aria-hidden="true" style={{
                position: "absolute", inset: 0, pointerEvents: "none",
                opacity: active === 1 ? 1 : 0,
                transition: "opacity 240ms cubic-bezier(0.25, 1, 0.5, 1)",
                background: "linear-gradient(180deg, rgba(168,85,247,0) 0%, rgba(168,85,247,0.10) 50%, rgba(168,85,247,0) 100%)",
                animation: active === 1 ? "v7Scan 2.6s ease-in-out infinite" : "none",
              }}/>
            </div>
            <div style={{ marginTop: 24, display: "flex", alignItems: "center", gap: 14, ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>
              <span>Now showing</span>
              <span style={{ color: K.ink, letterSpacing: "0.08em" }}>{steps[active].t}</span>
              <span style={{ marginLeft: "auto", display: "inline-flex", gap: 4 }}>
                {steps.map((_, i) => (
                  <span key={i} style={{ width: i === active ? 18 : 6, height: 2, background: i === active ? K.ink : K.hair, transition: "width 240ms cubic-bezier(0.25, 1, 0.5, 1), background 240ms cubic-bezier(0.25, 1, 0.5, 1)" }}/>
                ))}
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Loop closer */}
      <div style={{ maxWidth: 1320, margin: "80px auto 0", padding: "0 44px" }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 18 }}>
          <svg width="48" height="48" viewBox="0 0 48 48"><path d="M 24 6 C 38 6, 38 22, 24 22 C 10 22, 10 38, 24 38 M 18 35 L 24 38 L 21 44" stroke={K.signal} strokeWidth="1.2" fill="none"/></svg>
          <div style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim, textAlign: "center" }}>The loop closes</div>
          <div style={{ font: "400 22px/1.4 var(--font-sans)", letterSpacing: "-0.01em", color: K.ink, textAlign: "center", maxWidth: 560, ...v72Serif, fontStyle: "italic" }}>
            Tomorrow's brief is already capturing tonight's signals.
          </div>
          <div style={{ marginTop: 14, display: "inline-flex", gap: 14, alignItems: "center" }}>
            <V72Btn variant="primary">Book a product walkthrough →</V72Btn>
            <V72Btn variant="textlink">See sample brief</V72Btn>
          </div>
        </div>
      </div>
    </section>
  );
}

// (V72LoopCopy removed — replaced by inline copy in sticky-scroll layout)
function V72LoopCopy() { return null; }

// ── Mock components ────────────────────────────────────────────────────
function V72MockWatch() {
  const rows = [
    ["04:18", "PRICE",    "JYSK · sofas mid-segment", "−12%", K.neg],
    ["05:02", "CAMPAIGN", "Mio · Spring Living",       "NEW",  K.warn],
    ["05:41", "STOCKOUT", "Bolia · Hagen oat",         "4d",   K.warn],
    ["06:31", "DEMAND",   "Boucle armchair queries",   "+4.1×", K.pos],
  ];
  return (
    <div style={{ background: K.card, border: "1px solid " + K.hair }}>
      <div style={{ padding: "16px 22px", borderBottom: "1px solid " + K.hair, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>Changes · last night</span>
        <span style={{ ...v72Mono, fontSize: 11, color: K.inkMute }}>47 events · 8 retailers</span>
      </div>
      <div style={{ padding: "8px 22px" }}>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 90px 1fr 60px 10px", gap: 14, padding: "14px 0", borderBottom: i < rows.length - 1 ? "1px solid " + K.hair : "none", alignItems: "center" }}>
            <span style={{ ...v72Mono, fontSize: 12, color: K.inkDim }}>{r[0]}</span>
            <span style={{ ...v72Mono, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>{r[1]}</span>
            <span style={{ font: "400 14px/1.4 var(--font-sans)", color: K.ink }}>{r[2]}</span>
            <span style={{ ...v72Mono, fontSize: 12, color: r[4], textAlign: "right" }}>{r[3]}</span>
            <span style={{ width: 6, height: 6, background: r[4] }}/>
          </div>
        ))}
      </div>
    </div>
  );
}

function V72MockUnderstand() {
  const rows = [
    ["Mio",       92, "SEK 15,790"],
    ["EM Möbler", 89, "SEK 15,290"],
    ["Trademax",  86, "SEK 14,990"],
    ["Ikea",      70, "SEK 12,499"],
    ["JYSK",      64, "SEK 11,799"],
    ["You",       82, "SEK 14,490", true],
  ];
  return (
    <div style={{ background: K.card, border: "1px solid " + K.hair, padding: "20px 26px" }}>
      <div style={{ paddingBottom: 14, borderBottom: "1px solid " + K.hair, marginBottom: 16 }}>
        <div style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim, marginBottom: 6 }}>Price position · Eden 3-seater · oat</div>
        <div style={{ fontSize: 22, ...v72Serif, letterSpacing: "-0.015em" }}>Mid-segment under pressure</div>
      </div>
      {rows.map((r, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "100px 1fr 110px", gap: 16, alignItems: "center", padding: "10px 0" }}>
          <span style={{ font: r[3] ? "500 14px/1 var(--font-sans)" : "400 14px/1 var(--font-sans)", color: r[3] ? K.ink : K.inkMute }}>{r[0]}</span>
          <span style={{ height: 4, background: K.hair, position: "relative" }}>
            <span style={{ position: "absolute", top: 0, left: 0, width: r[1] + "%", height: "100%", background: r[3] ? K.signal : K.ink }}/>
          </span>
          <span style={{ font: "500 13px/1 var(--font-sans)", color: K.ink, textAlign: "right" }}>{r[2]}</span>
        </div>
      ))}
    </div>
  );
}

function V72MockCreate() {
  return (
    <div style={{ background: K.card, border: "1px solid " + K.hair, padding: "20px 26px" }}>
      <div style={{ paddingBottom: 14, borderBottom: "1px solid " + K.hair, marginBottom: 16 }}>
        <div style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim, marginBottom: 6 }}>Concept · drafted 04:48</div>
        <div style={{ fontSize: 22, ...v72Serif, letterSpacing: "-0.015em" }}>Linen daybed · oak base · sand</div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", rowGap: 12, columnGap: 16, font: "400 14px/1.45 var(--font-sans)" }}>
        {[
          ["Target retail",  "SEK 9,990"],
          ["Floor cost",     "SEK 3,400 – 3,800"],
          ["Margin",         "62%"],
          ["Suppliers",      "4 LT · 2 PL shortlisted"],
          ["From gap",       "Outdoor lounge · SEK <6k"],
        ].map(r => (
          <React.Fragment key={r[0]}>
            <span style={{ ...v72Mono, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>{r[0]}</span>
            <span style={{ color: K.ink, letterSpacing: "-0.003em" }}>{r[1]}</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function V72MockAct() {
  const rows = [
    { id: "RFQ-208", item: "Linen daybed · oak",     suppliers: 6, status: "3 responded",     tone: K.pos },
    { id: "RFQ-207", item: "Boucle armchair · sand", suppliers: 4, status: "1 responded",     tone: K.warn },
    { id: "RFQ-205", item: "Oak dining chair set",   suppliers: 8, status: "Awarded · LT-04", tone: K.pos },
    { id: "RFQ-203", item: "Outdoor sectional",      suppliers: 5, status: "Closed",          tone: K.inkDim },
  ];
  return (
    <div style={{ background: K.card, border: "1px solid " + K.hair, padding: "20px 26px" }}>
      <div style={{ paddingBottom: 14, borderBottom: "1px solid " + K.hair, marginBottom: 6 }}>
        <div style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim, marginBottom: 6 }}>Sourcing pipeline</div>
        <div style={{ fontSize: 22, ...v72Serif, letterSpacing: "-0.015em" }}>4 active RFQs · 23 responses</div>
      </div>
      {rows.map((r, i) => (
        <div key={r.id} style={{ display: "grid", gridTemplateColumns: "90px 1fr auto", gap: 14, padding: "13px 0", borderBottom: i < rows.length - 1 ? "1px solid " + K.hair : "none", alignItems: "center" }}>
          <span style={{ ...v72Mono, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>{r.id}</span>
          <span style={{ font: "400 14px/1.4 var(--font-sans)" }}>{r.item} <span style={{ color: K.inkDim }}>· {r.suppliers}</span></span>
          <span style={{ ...v72Mono, fontSize: 12, color: r.tone }}>{r.status}</span>
        </div>
      ))}
    </div>
  );
}

// ── 06 Q BRAIN — Institutional analyst ────────────────────────────────
function V72QBrainPromptEmulator() {
  const tabs = [
    { id: "sofa",      label: "Sofa pressure exposure",         lines: [
      { kind: "sys",  text: "q.brain :: parsing executive query" },
      { kind: "sys",  text: "sources :: jysk · mio · bolia · trademax · em" },
      { kind: "sub",  text: "Subject" },
      { kind: "head", text: "Mid-segment sofa pressure · category exposure" },
      { kind: "sub",  text: "Reasoning" },
      { kind: "body", text: "JYSK cut mid-segment sofas by 12% (04:18). Mio's outdoor push launched 14d ahead of last year (05:02). Boucle armchair demand up 4.1× over 30d." },
      { kind: "body", text: "Compounding pressure across three of your watched SKUs. Visible in weekly numbers by Friday." },
      { kind: "sub",  text: "Recommended action" },
      { kind: "rec",  text: "Review price position on EDN-301, EDN-302, EDN-401. Draft alt sourcing brief before tonight's pricing meeting." },
    ]},
    { id: "campaign",  label: "Mio launched early. Should we?", lines: [
      { kind: "sys",  text: "q.brain :: cross-referencing campaign calendars 2024–26" },
      { kind: "sub",  text: "Subject" },
      { kind: "head", text: "Mio outdoor launch · 14 days ahead of pattern" },
      { kind: "sub",  text: "Reasoning" },
      { kind: "body", text: "Last 2 years Mio launched outdoor in week 21. This year week 19. Weather index for week 21–23 forecast 2.4× normal traffic." },
      { kind: "body", text: "Mio currently owns share of voice on patio + outdoor lighting. You ship 6 days behind." },
      { kind: "sub",  text: "Recommended action" },
      { kind: "rec",  text: "Pull outdoor copy launch from week 21 to week 19. Match patio + lighting categories. Brief Studio for hero variants." },
    ]},
    { id: "whitespot", label: "Where's the open whitespot?",     lines: [
      { kind: "sys",  text: "q.brain :: scanning assortment vs. demand index" },
      { kind: "sub",  text: "Subject" },
      { kind: "head", text: "Boucle armchair · SEK 4–6k tier · 0 peer coverage" },
      { kind: "sub",  text: "Reasoning" },
      { kind: "body", text: "Boucle queries up 4.1× (30d). 0 watched retailers list under SEK 6k. Mio, JYSK, EM cluster above SEK 7,490." },
      { kind: "body", text: "Demand signal sustained for 38 of last 42 days. Not a spike — a tier shift." },
      { kind: "sub",  text: "Recommended action" },
      { kind: "rec",  text: "Brief Creation Studio for SEK 4,990 anchor. Shortlist LT-04 + PL-02 suppliers · 13–15 week lead time." },
    ]},
  ];
  const [activeId, setActiveId] = useS72("sofa");
  const [revealed, setRevealed] = useS72(0);
  const activeTab = tabs.find(t => t.id === activeId) || tabs[0];

  React.useEffect(() => {
    setRevealed(0);
    const timers = [];
    let idx = 0;
    const tick = () => {
      idx += 1;
      setRevealed(idx);
      if (idx < activeTab.lines.length) {
        const next = activeTab.lines[idx];
        const delay = next.kind === "sys" ? 90 : next.kind === "head" ? 220 : next.kind === "rec" ? 320 : 160;
        timers.push(window.setTimeout(tick, delay));
      }
    };
    timers.push(window.setTimeout(tick, 600));
    return () => timers.forEach(t => window.clearTimeout(t));
  }, [activeId]);

  return (
    <div style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.14)" }}>
      <div style={{ padding: "12px 18px", borderBottom: "1px solid rgba(255,255,255,0.12)", display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ width: 18, height: 18, background: K.signal, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", font: "600 10px/1 var(--font-sans)" }}>Q</span>
        <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)" }}>Q Brain prompt console</span>
        <span style={{ marginLeft: "auto", display: "inline-flex", gap: 6, alignItems: "center", ...v72Mono, fontSize: 11, letterSpacing: "0.04em", color: "rgba(255,255,255,0.55)" }}>
          <span style={{ width: 6, height: 6, background: K.pos, borderRadius: 3 }}/> READY
        </span>
      </div>
      <div style={{ display: "flex", borderBottom: "1px solid rgba(255,255,255,0.12)" }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setActiveId(t.id)} style={{
            border: 0, cursor: "pointer", flex: 1, padding: "14px 18px", textAlign: "left",
            background: activeId === t.id ? "rgba(168,85,247,0.10)" : "transparent",
            color: activeId === t.id ? "#fff" : "rgba(255,255,255,0.65)",
            borderRight: "1px solid rgba(255,255,255,0.10)",
            borderTop: activeId === t.id ? "1px solid " + K.signal : "1px solid transparent",
            ...v72Mono, fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase",
            transition: "background 240ms cubic-bezier(0.25, 1, 0.5, 1), color 240ms cubic-bezier(0.25, 1, 0.5, 1), border-color 240ms cubic-bezier(0.25, 1, 0.5, 1)",
          }}>{t.label}</button>
        ))}
      </div>
      <div style={{ padding: "22px 24px", minHeight: 400, ...v72Mono, fontSize: 13, lineHeight: 1.55, color: "rgba(255,255,255,0.92)" }}>
        <div style={{ ...v72Mono, fontSize: 12, color: "rgba(255,255,255,0.55)", marginBottom: 14 }}>
          $ q.brain &gt; <span style={{ color: "#fff" }}>{activeTab.label}</span>
        </div>
        {activeTab.lines.slice(0, revealed).map((l, li) => {
          if (l.kind === "sys")  return <div key={li} style={{ color: "rgba(255,255,255,0.42)", marginBottom: 6 }}>{"» " + l.text}</div>;
          if (l.kind === "sub")  return <div key={li} style={{ ...v72Mono, fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)", marginTop: 14, marginBottom: 6 }}>{l.text}</div>;
          if (l.kind === "head") return <div key={li} style={{ font: "500 19px/1.3 var(--font-sans)", letterSpacing: "-0.01em", color: "#fff", marginBottom: 8 }}>{l.text}</div>;
          if (l.kind === "rec")  return <div key={li} style={{ marginTop: 4, padding: "12px 14px", borderLeft: "2px solid " + K.signal, background: "rgba(168,85,247,0.08)", color: "#fff", font: "400 14px/1.5 var(--font-sans)", letterSpacing: "-0.003em" }}>{l.text}</div>;
          return <div key={li} style={{ color: "rgba(255,255,255,0.88)", font: "400 14px/1.55 var(--font-sans)", letterSpacing: "-0.003em", marginBottom: 6 }}>{l.text}</div>;
        })}
        {revealed < activeTab.lines.length && (
          <span style={{ display: "inline-block", width: 8, height: 14, background: K.signal, animation: "v7Blink 0.9s steps(2) infinite", verticalAlign: "middle", marginLeft: 4 }}/>
        )}
      </div>
    </div>
  );
}

function V72QBrain() {
  return (
    <section style={{ background: K.inkDeep, color: "#fff", padding: "150px 44px" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", paddingBottom: 18, borderBottom: "1px solid rgba(255,255,255,0.14)", marginBottom: 56 }}>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>Section 04 · The analyst layer</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8, ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>
            <span style={{ width: 16, height: 16, background: K.signal, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", font: "600 9px/1 var(--font-sans)" }}>Q</span>
            Q Brain
          </span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 80, alignItems: "start" }}>
          <div>
            <h2 style={{ fontSize: 56, lineHeight: 1.02, letterSpacing: "-0.03em", fontWeight: 400, margin: 0, color: "#fff", ...v72Serif, textWrap: "balance" }}>
              The dashboard shows the data. <span style={{ fontStyle: "italic" }}>Q Brain tells you what matters.</span>
            </h2>
            <p style={{ font: "400 18px/1.55 var(--font-sans)", letterSpacing: "-0.005em", color: "rgba(255,255,255,0.7)", marginTop: 26, maxWidth: 460, textWrap: "pretty" }}>
              Q Brain reads across price, assortment, campaigns and demand. It tells you what changed, why it matters, and what to do next — cited from data your team can audit.
            </p>
            <div style={{ marginTop: 40, display: "grid", gap: 20 }}>
              {[
                { t: "Detect",    body: "Finds the moves your team would otherwise miss." },
                { t: "Explain",   body: "Connects movements across categories and competitors." },
                { t: "Recommend", body: "Suggests what to monitor, adjust, source or launch next." },
              ].map(c => (
                <div key={c.t} style={{ paddingTop: 18, borderTop: "1px solid rgba(255,255,255,0.12)", display: "grid", gridTemplateColumns: "140px 1fr", gap: 20 }}>
                  <div style={{ font: "500 17px/1.2 var(--font-sans)", letterSpacing: "-0.005em", color: "#fff" }}>{c.t}</div>
                  <div style={{ font: "400 15px/1.5 var(--font-sans)", letterSpacing: "-0.003em", color: "rgba(255,255,255,0.7)" }}>{c.body}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 40, display: "inline-flex", gap: 12 }}>
              <V72Btn variant="invertedPrimary">See example morning brief</V72Btn>
              <V72Btn variant="textlink"><span style={{ color: "rgba(255,255,255,0.85)" }}>Book a product walkthrough →</span></V72Btn>
            </div>
          </div>

          {/* Executive Insight Block — interactive prompt emulator */}
          <V72QBrainPromptEmulator/>
        </div>
      </div>
    </section>
  );
}

// ── 07 USE CASES — asymmetric ─────────────────────────────────────────
function V72UseCases() {
  return (
    <section style={{ background: K.paper, padding: "150px 44px" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", paddingBottom: 18, borderBottom: "1px solid " + K.hair, marginBottom: 56 }}>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>Section 05 · Who uses it</span>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>Retailer-first</span>
        </div>
        <h2 style={{ fontSize: 52, lineHeight: 1.02, letterSpacing: "-0.03em", fontWeight: 400, margin: 0, marginBottom: 48, ...v72Serif, textWrap: "balance", maxWidth: 880 }}>
          Built for every team that needs to understand the market <span style={{ fontStyle: "italic" }}>before acting.</span>
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "1.8fr 1fr", gap: 22, alignItems: "stretch" }}>
          {/* Primary — Retailers */}
          <div style={{ background: K.inkDeep, color: "#fff", padding: "56px 56px 44px", display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 480 }}>
            <div>
              <div style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)", marginBottom: 22 }}>Primary · Retailers & category teams</div>
              <h3 style={{ fontSize: 48, lineHeight: 1.05, letterSpacing: "-0.03em", fontWeight: 400, color: "#fff", margin: 0, ...v72Serif, textWrap: "balance", maxWidth: 600 }}>
                For category, pricing<br/>and <span style={{ fontStyle: "italic" }}>commercial teams.</span>
              </h3>
              <p style={{ font: "400 17px/1.5 var(--font-sans)", letterSpacing: "-0.005em", color: "rgba(255,255,255,0.72)", marginTop: 28, maxWidth: 540, textWrap: "pretty" }}>
                Track competitors, campaigns, prices and assortment gaps in one morning brief. Built around the questions a Nordic furniture buyer actually asks at 06:00.
              </p>
            </div>
            <div style={{ paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.14)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 18 }}>
              <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>Watched · Mio · JYSK · Bolia · Trademax · EM</span>
              <V72Btn variant="invertedPrimary">Explore retailer workflow →</V72Btn>
            </div>
          </div>

          {/* Secondary three */}
          <div style={{ display: "grid", gridTemplateRows: "1fr 1fr 1fr", gap: 22 }}>
            {[
              { who: "Manufacturers", body: "See how retailers sell, price and promote your range.",  link: "Explore supplier workflow →" },
              { who: "Wholesalers",   body: "Monitor how every dropship partner carries your catalog.", link: "Explore distributor logic →" },
              { who: "Agents",        body: "Find whitespots and product opportunities first.",          link: "Explore trader workflow →" },
            ].map(s => (
              <div key={s.who} style={{ background: K.card, border: "1px solid " + K.hair, padding: "22px 26px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                <div>
                  <div style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: K.inkDim, marginBottom: 10 }}>{s.who}</div>
                  <div style={{ font: "400 16px/1.4 var(--font-sans)", letterSpacing: "-0.005em", color: K.ink, textWrap: "pretty" }}>{s.body}</div>
                </div>
                <div style={{ marginTop: 14, font: "500 12px/1.4 var(--font-sans)", letterSpacing: "0.02em", color: K.signalInk, opacity: 0.85 }}>{s.link}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── 08 TRUST / METHODOLOGY ────────────────────────────────────────────
function V72LogStream() {
  const logs = [
    "04:00:01.218  crawler.spawn  jysk.se      depth=3 jobs=412",
    "04:00:02.481  ix.normalize   eden-3s      kr 14990 -> 13190 delta=12.0%",
    "04:00:04.733  q.brain.read   price.cluster.mid-segment trigger=high",
    "04:00:05.901  crawler.ok     mio.se        depth=2 jobs=308",
    "04:00:07.142  ix.parse       newsletter.spring-living cats=12",
    "04:00:09.388  signal.emit    campaign.early-launch lead=14d",
    "04:00:11.654  q.brain.read   share-of-voice patio,lighting cov=0.42",
    "04:00:13.207  crawler.ok     bolia.com     depth=2 jobs=187",
    "04:00:15.499  ix.diff        hagen-lounge-oat status=OOS days=4",
    "04:00:17.840  crawler.ok     trademax.se   depth=3 jobs=521",
    "04:00:19.612  ix.create      sku.oak-dining-chair n=14 anchor=1990",
    "04:00:22.105  signal.emit    price-anchor.below.portfolio risk=med",
    "04:00:24.778  demand.index   query=boucle-armchair index=4.12x 30d",
    "04:00:27.330  q.brain.read   tier.SEK4-6k coverage=0 sustain=38/42d",
    "04:00:30.020  signal.emit    whitespot.opportunity tier=4-6k",
    "04:00:34.187  q.brain.write  brief.morning slot=03 actions=3",
    "04:00:38.962  delivery.queue email,slack subs=12 region=nordic",
    "06:42:00.000  sync.commit    brief.mon-19-may.v1 ok",
  ];
  return (
    <div aria-hidden="true" style={{
      position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none",
      maskImage: "linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%)",
      WebkitMaskImage: "linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%)",
    }}>
      {[0, 1, 2, 3].map(col => (
        <div key={col} style={{
          position: "absolute", top: 0, bottom: 0,
          left: (col * 25) + "%", width: "25%",
          ...v72Mono, fontSize: 11, lineHeight: 1.6, color: "rgba(26,25,22,0.015)",
          letterSpacing: 0, whiteSpace: "nowrap", overflow: "hidden", padding: "0 18px",
          animation: "v7LogDrift " + (28 + col * 6) + "s linear infinite",
          animationDelay: (-col * 4) + "s",
        }}>
          {[0, 1].map(rep => (
            <div key={rep}>{logs.map((l, i) => (<div key={rep + "-" + i}>{l}</div>))}</div>
          ))}
        </div>
      ))}
    </div>
  );
}

function V72Trust() {
  const principles = [
    { n: "i",   t: "Observable market data",        body: "Public retailer surfaces. PDPs, newsletters, campaigns, reviews. No protected or logged-in content." },
    { n: "ii",  t: "Configurable watchlists",       body: "You choose the retailers, categories and SKUs that matter. Your watchlist, your operating system." },
    { n: "iii", t: "Human-readable AI reasoning",   body: "Every Q Brain insight links to the source. No black-box claims. Explanations a team can audit." },
    { n: "iv",  t: "Automated data quality checks", body: "Daily integrity checks, cross-source normalization, manual review for high-impact signals.", highlight: true },
    { n: "v",   t: "Ten-minute setup",              body: "No integration, no engineering loop, no procurement project. Live by the next morning brief." },
    { n: "vi",  t: "Judgment, not replacement",     body: "Qaptic accelerates your team's decisions. It does not make them for you." },
  ];
  return (
    <section style={{ background: K.paperWarm, padding: "140px 44px", position: "relative", overflow: "hidden" }}>
      <V72LogStream/>
      <div style={{ position: "relative", maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", paddingBottom: 18, borderBottom: "1px solid " + K.hair, marginBottom: 56 }}>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>Section 06 · Methodology</span>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>Operating principles</span>
        </div>
        <h2 style={{ fontSize: 52, lineHeight: 1.04, letterSpacing: "-0.03em", fontWeight: 400, margin: 0, marginBottom: 56, ...v72Serif, textWrap: "balance", maxWidth: 880 }}>
          Built on observable market data, <span style={{ fontStyle: "italic" }}>not black boxes.</span>
        </h2>
        <div style={{ background: K.card, border: "1px solid " + K.hair }}>
          {principles.map((p, i) => (
            <div key={p.n} style={{
              display: "grid", gridTemplateColumns: "80px 240px 1fr",
              gap: 32, alignItems: "baseline",
              padding: "28px 32px",
              borderBottom: i < principles.length - 1 ? "1px solid " + K.hair : "none",
              background: p.highlight ? K.paperWarm : "transparent",
            }}>
              <span style={{ ...v72Serif, fontStyle: "italic", fontSize: 18, color: K.inkDim }}>{p.n}</span>
              <span style={{ font: "500 17px/1.3 var(--font-sans)", letterSpacing: "-0.005em", color: K.ink }}>{p.t}</span>
              <span style={{ font: "400 15px/1.5 var(--font-sans)", letterSpacing: "-0.003em", color: K.ink, textWrap: "pretty", maxWidth: 600 }}>{p.body}</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 36, display: "flex", flexWrap: "wrap", gap: 28, color: K.ink, ...v72Mono, fontSize: 12, letterSpacing: "0.04em" }}>
          <span>GDPR · EU compliant</span>
          <span>SOC 2 · Type 1</span>
          <span>ISO 27001 · Info security</span>
          <span>Zero-retention by default</span>
        </div>
      </div>
    </section>
  );
}

// ── 09 PRICING — ledger with toggle ───────────────────────────────────
function V72Pricing() {
  const [mode, setMode] = useS72("domestic");
  const tiers = [
    {
      name: "Starter", tagline: "One core competitor.",
      domestic: { scope: "1 retailer · 1 country",   teams: "Single team · 3 seats",  delivery: "Email + Slack daily" },
      multi:    { scope: "1 retailer · 1 region",    teams: "Single team · 3 seats",  delivery: "Email + Slack daily" },
      lines: ["Daily morning brief", "Q Brain · panels", "Source-cited insights"],
    },
    {
      name: "Growth", tagline: "Category teams, several retailers.",
      domestic: { scope: "Up to 6 retailers · 1 country",   teams: "Up to 3 teams · 12 seats", delivery: "Brief + audit log" },
      multi:    { scope: "Up to 6 retailers · 3 regions",   teams: "Up to 3 teams · 12 seats", delivery: "Brief + audit log" },
      lines: ["Everything in Starter", "Newsletters · Demand · Content", "Assortment whitespots", "Team workspace"],
      featured: true,
    },
    {
      name: "Scale", tagline: "Intelligence across brands, regions.",
      domestic: { scope: "Unlimited · 1 country",          teams: "Unlimited · SSO",          delivery: "Brief + API + audit" },
      multi:    { scope: "Unlimited · all regions",        teams: "Unlimited · SSO",          delivery: "Brief + API + audit" },
      lines: ["Everything in Growth", "Launch Navigator", "Studio + Sourcing & RFQ", "SSO, audit log, custom SLAs"],
    },
  ];
  return (
    <section style={{ background: K.paper, padding: "150px 44px" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", paddingBottom: 18, borderBottom: "1px solid " + K.hair, marginBottom: 48 }}>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>Section 07 · Engagement</span>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: K.inkDim }}>Pricing ledger</span>
        </div>
        <h2 style={{ fontSize: 52, lineHeight: 1.02, letterSpacing: "-0.03em", fontWeight: 400, margin: 0, marginBottom: 32, ...v72Serif, textWrap: "balance", maxWidth: 880 }}>
          Pricing based on the market <span style={{ fontStyle: "italic" }}>you want to watch.</span>
        </h2>

        {/* Toggle */}
        <div style={{ display: "inline-flex", marginBottom: 32, border: "1px solid " + K.hair, background: K.card }}>
          {[["domestic", "Domestic Watch"], ["multi", "Multi-Region Scale"]].map(([k, label]) => (
            <button key={k} onClick={() => setMode(k)} style={{
              border: 0, cursor: "pointer",
              background: mode === k ? K.ink : "transparent",
              color: mode === k ? "#fff" : K.inkMute,
              padding: "11px 22px",
              ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
              transition: "background 240ms cubic-bezier(0.25, 1, 0.5, 1), color 240ms cubic-bezier(0.25, 1, 0.5, 1)",
            }}>{label}</button>
          ))}
        </div>

        <div style={{ border: "1px solid " + K.hair, background: K.card }}>
          {/* Tier header row */}
          <div style={{ display: "grid", gridTemplateColumns: "200px repeat(3, 1fr)", borderBottom: "1px solid " + K.hair }}>
            <div style={{ padding: "22px 22px" }}/>
            {tiers.map((t, i) => (
              <div key={t.name} style={{
                padding: "26px 26px",
                background: t.featured ? K.inkDeep : "transparent",
                color: t.featured ? "#fff" : K.ink,
                borderLeft: i > 0 && !t.featured ? "1px solid " + K.hair : "none",
              }}>
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 10 }}>
                  <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.04em", color: t.featured ? "rgba(255,255,255,0.55)" : K.inkDim }}>{String(i + 1).padStart(2, "0")}</span>
                  {t.featured && <span style={{ ...v72Mono, fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: K.signal }}>Recommended</span>}
                </div>
                <div style={{ fontSize: 28, ...v72Serif, letterSpacing: "-0.02em", marginBottom: 6 }}>{t.name}</div>
                <div style={{ font: "400 13px/1.5 var(--font-sans)", letterSpacing: "-0.003em", color: t.featured ? "rgba(255,255,255,0.72)" : K.inkMute, textWrap: "pretty" }}>{t.tagline}</div>
              </div>
            ))}
          </div>

          {/* Toggleable rows */}
          {["scope", "teams", "delivery"].map((field, fi) => (
            <div key={field} style={{ display: "grid", gridTemplateColumns: "200px repeat(3, 1fr)", borderBottom: "1px solid " + K.hair }}>
              <div style={{ padding: "18px 22px", ...v72Mono, fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: K.inkDim }}>{["Coverage", "Teams", "Delivery"][fi]}</div>
              {tiers.map((t, i) => (
                <div key={t.name + field} style={{
                  padding: "18px 26px",
                  background: t.featured ? K.inkDeep : "transparent",
                  color: t.featured ? "rgba(255,255,255,0.92)" : K.ink,
                  borderLeft: i > 0 && !t.featured ? "1px solid " + K.hair : "none",
                  font: "400 14px/1.4 var(--font-sans)", letterSpacing: "-0.003em",
                  transition: "color 240ms cubic-bezier(0.25, 1, 0.5, 1)",
                }}>{t[mode][field]}</div>
              ))}
            </div>
          ))}

          {/* Features rows */}
          <div style={{ display: "grid", gridTemplateColumns: "200px repeat(3, 1fr)" }}>
            <div style={{ padding: "22px 22px", ...v72Mono, fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: K.inkDim }}>Included</div>
            {tiers.map((t, i) => (
              <div key={t.name + "feat"} style={{
                padding: "22px 26px",
                background: t.featured ? K.inkDeep : "transparent",
                color: t.featured ? "rgba(255,255,255,0.9)" : K.ink,
                borderLeft: i > 0 && !t.featured ? "1px solid " + K.hair : "none",
                display: "flex", flexDirection: "column", gap: 8,
              }}>
                {t.lines.map(l => (
                  <div key={l} style={{ font: "400 13px/1.5 var(--font-sans)", letterSpacing: "-0.003em", paddingLeft: 14, position: "relative" }}>
                    <span style={{ position: "absolute", left: 0, top: "0.55em", width: 6, height: 1, background: t.featured ? "rgba(255,255,255,0.5)" : K.inkDim }}/>
                    {l}
                  </div>
                ))}
              </div>
            ))}
          </div>

          {/* CTA row */}
          <div style={{ display: "grid", gridTemplateColumns: "200px repeat(3, 1fr)", borderTop: "1px solid " + K.hair }}>
            <div/>
            {tiers.map((t, i) => (
              <div key={t.name + "cta"} style={{
                padding: "22px 26px",
                background: t.featured ? K.inkDeep : "transparent",
                borderLeft: i > 0 && !t.featured ? "1px solid " + K.hair : "none",
              }}>
                {t.featured ? <V72Btn variant="invertedPrimary">Book a demo →</V72Btn> : <V72Btn variant="primary">Book a demo →</V72Btn>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── 10 FINAL CTA ──────────────────────────────────────────────────────
function V72FinalCTA() {
  return (
    <section style={{ background: K.inkDeep, color: "#fff", padding: "200px 44px" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", paddingBottom: 18, borderBottom: "1px solid rgba(255,255,255,0.14)", marginBottom: 80 }}>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>Closing</span>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>Tomorrow · 06:00</span>
        </div>
        <h2 style={{ fontSize: 96, lineHeight: 0.98, letterSpacing: "-0.04em", fontWeight: 400, margin: 0, color: "#fff", ...v72Serif, textWrap: "balance" }}>
          Don't start tomorrow <span style={{ fontStyle: "italic" }}>blind.</span>
        </h2>
        <p style={{ font: "400 22px/1.5 var(--font-sans)", letterSpacing: "-0.01em", color: "rgba(255,255,255,0.72)", margin: "36px 0 56px", maxWidth: 640, textWrap: "pretty" }}>
          Wake up to what changed, why it matters, and what your team should do next.
        </p>
        <div style={{ display: "inline-flex", flexDirection: "column", gap: 14 }}>
          <V72Btn variant="invertedPrimary" wider>Book a demo →</V72Btn>
          <span style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)", borderBottom: "1px solid rgba(255,255,255,0.25)", paddingBottom: 6, alignSelf: "flex-start" }}>See a sample brief</span>
        </div>
      </div>
    </section>
  );
}

// ── FOOTER ────────────────────────────────────────────────────────────
function V72Footer() {
  return (
    <footer style={{ background: K.inkDeep, color: "rgba(255,255,255,0.65)", padding: "60px 44px 36px", borderTop: "1px solid rgba(255,255,255,0.08)" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", display: "grid", gridTemplateColumns: "1.6fr repeat(4, 1fr)", gap: 40 }}>
        <div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 10, color: "#fff" }}>
            <span style={{ width: 8, height: 8, background: "#fff" }}/>
            <span style={{ font: "500 17px/1 var(--font-sans)", letterSpacing: "-0.005em" }}>Qaptic</span>
          </div>
          <p style={{ font: "400 13px/1.55 var(--font-sans)", color: "rgba(255,255,255,0.42)", marginTop: 16, maxWidth: 260 }}>
            The commercial intelligence layer for furniture retail. Stockholm.
          </p>
        </div>
        {[
          { head: "Product",   links: ["Morning Brief", "Price Edge", "Assortment", "Creation Studio", "Sourcing & RFQ", "Q Brain"] },
          { head: "Use cases", links: ["Retailers", "Manufacturers", "Wholesalers", "Agents"] },
          { head: "Resources", links: ["Sample brief", "Customers", "Documentation", "Status"] },
          { head: "Company",   links: ["About", "Careers", "Contact"] },
        ].map(col => (
          <div key={col.head}>
            <div style={{ ...v72Mono, fontSize: 11, letterSpacing: "0.20em", textTransform: "uppercase", color: "#fff", marginBottom: 14 }}>{col.head}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
              {col.links.map(l => <li key={l} style={{ font: "400 13px/1 var(--font-sans)", color: "rgba(255,255,255,0.65)" }}>{l}</li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1320, margin: "44px auto 0", paddingTop: 18, borderTop: "1px solid rgba(255,255,255,0.08)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", ...v72Mono, fontSize: 11, letterSpacing: "0.04em", color: "rgba(255,255,255,0.42)" }}>
        <span>© Qaptic AB · All rights reserved.</span>
        <span style={{ display: "flex", gap: 24 }}><span>Privacy</span><span>Terms</span><span>Status</span></span>
      </div>
    </footer>
  );
}

function V72Direction() {
  React.useEffect(() => {
    // Stage in: H1+CTA immediately, app chrome at +300, console handled by emulator at +600
    requestAnimationFrame(() => {
      document.querySelectorAll(".v72-stage").forEach((el) => el.classList.add("is-in"));
    });
  }, []);
  return (
    <div data-screen-label="v7.2 · Regulated Vanguard" style={{ background: K.paper }}>
      <style>{`
        .v72-stage { opacity: 0; transform: translateY(8px); transition: opacity 480ms cubic-bezier(0.25,1,0.5,1), transform 480ms cubic-bezier(0.25,1,0.5,1); }
        .v72-stage.is-in { opacity: 1; transform: translateY(0); }
        .v72-stage-h1.is-in     { transition-delay: 0ms; }
        .v72-stage-chrome       { transition-delay: 300ms; }
        .v72-stage-chrome.is-in { transition-delay: 300ms; }
        .v72-loop-section { scroll-snap-type: y proximity; }
        .v72-loop-step    { scroll-snap-align: center; scroll-snap-stop: normal; }
      `}</style>
      <V72Nav/>
      <V72Hero/>
      <V72Ledger/>
      <V72OldVsNew/>
      <V72Loop/>
      <V72QBrain/>
      <V72UseCases/>
      <V72Trust/>
      <V72Pricing/>
      <V72FinalCTA/>
      <V72Footer/>
    </div>
  );
}

window.V72Direction = V72Direction;
