/* sections-bottom.jsx — Naval gradient testimonial, Request for Startups (bento), Footer */

/* ===================== NAVAL — gradient quote card (with gap) ===================== */
const NAVAL_WORDS = "The best tech, from the most serious people.".split(" ");

function Naval() {
  const sectionRef = useRef(null);
  const p = useScrollProgress(sectionRef);
  const n = NAVAL_WORDS.length;
  return (
    <section id="naval" ref={sectionRef} style={{ position: "relative", height: "200vh" }}>
      <div style={{ position: "sticky", top: 0, height: "100vh", overflow: "hidden" }}>
        <figure style={{ position: "relative", margin: 0, overflow: "hidden",
          width: "100%", height: "100%", padding: "clamp(40px,5vw,90px)",
          display: "flex", flexDirection: "column", justifyContent: "space-between", border: "none",
          /* vivid orange that stands out — strk20.starknet.io family (#FF4300 / #c53400) */
          background:
            "radial-gradient(ellipse 80% 100% at 6% 2%, #ff4d12 0%, rgba(255,77,18,0) 55%)," +
            "radial-gradient(ellipse 85% 80% at 96% 98%, #ffae6b 0%, rgba(255,174,107,0) 55%)," +
            "linear-gradient(125deg, #d83b00 0%, #ff5614 52%, #ff7e34 100%)",
          boxShadow: "none" }}>

          {/* painterly grain */}
          <div aria-hidden="true" style={{ position: "absolute", inset: 0, opacity: 0.16, mixBlendMode: "overlay",
            backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")" }} />

          {/* strk20 logo as a faint watermark on the right */}
          <img src={LOGO_URL} alt="" aria-hidden="true" style={{ position: "absolute", right: "clamp(16px,4vw,90px)",
            top: "50%", transform: "translateY(-50%)", width: "clamp(150px,40vw,680px)", height: "auto",
            opacity: 0.12, pointerEvents: "none" }} />

          <div style={{ position: "relative" }}>
            <div className="eyebrow" style={{ marginBottom: "clamp(20px,5vh,56px)", color: "rgba(255,255,255,0.78)" }}>
              <span style={{ color: "#fff" }}>◢</span>&nbsp; NAVAL'S TESTIMONIAL ABOUT STARKWARE
            </div>
            <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 96, lineHeight: 0.8,
              color: "#fff", height: 56, overflow: "hidden" }}>“</div>
            <blockquote style={{ margin: "30px 0 0", maxWidth: 1180 }}>
              <p style={{ fontFamily: "var(--display)", fontWeight: 700, letterSpacing: "-0.02em",
                fontSize: "clamp(28px,3.4vw,52px)", lineHeight: 1.18 }}>
                {NAVAL_WORDS.map((w, i) => {
                  const lit = clampN(p * (n + 1.5) - i, 0, 1);
                  return (
                    <span key={i} style={{ color: `rgba(255,255,255,${0.2 + 0.8 * lit})`, transition: "color .18s ease-out" }}>
                      {w}{i < n - 1 ? " " : ""}
                    </span>
                  );
                })}
              </p>
            </blockquote>
          </div>

          <figcaption style={{ position: "relative", display: "flex", alignItems: "center", gap: 14, marginTop: 44 }}>
            <img src="uploads/naval.jpg" alt="Naval Ravikant"
              style={{ width: 46, height: 46, flexShrink: 0, border: "1px solid rgba(255,255,255,0.55)",
                borderRadius: "50%", overflow: "hidden", objectFit: "cover" }} />
            <div>
              <div style={{ fontFamily: "\"PP Neue Montreal\", var(--display)", fontWeight: 600, fontSize: 18,
                color: "#fff", letterSpacing: "-0.01em" }}>
                Naval Ravikant
              </div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase",
                color: "rgba(255,255,255,0.72)", marginTop: 4 }}>
                Founder, AngelList · Early investor in Twitter, Uber &amp; Notion
              </div>
            </div>
          </figcaption>
        </figure>
      </div>
    </section>
  );
}

/* ===================== REQUEST FOR STARTUPS — bento ===================== */
const RFPS = [
  { id: "private-otc-settlement", kind: "orange", c: "#c53400", cat: "MARKETS",
    title: "Trustless, atomic, private OTC settlement for large block trades.",
    area: "1 / span 4", areaRow: "1 / span 2", big: true,
    pitch: "Two counterparties agree off-chain, then settle on-chain through the privacy pool: no intermediary holds funds, no counterparty risk, and neither party's identity is linked to the trade. 5 to 15 bps per side undercuts every desk in the market.",
    primitives: ["Privacy Pool", "Channels", "Multi-Asset Pool", "Open Notes", "Viewing Keys", "Pragma Oracle"] },
  { id: "private-payroll", kind: "dark", c: "#c53400", cat: "PAYMENTS",
    title: "Private payroll and treasury at company scale.",
    area: "5 / span 2", areaRow: "1",
    pitch: "A payroll protocol where per-recipient amounts stay private from each other and from the public, but the payer can prove aggregate spend to auditors and each recipient can prove income for tax filings. The compliance model traditional payroll uses, brought onchain without a centralized intermediary.",
    primitives: ["Privacy Pool", "Channels", "Encrypted Notes", "Session Keys", "Viewing Keys", "Discovery Service"] },
  { id: "cross-chain-privacy-hub", kind: "dark", c: "#c53400", cat: "INFRASTRUCTURE",
    title: "One-click privacy from any chain.",
    area: "5 / span 2", areaRow: "2",
    pitch: "Any user on Ethereum, Base, Arbitrum, or Solana gets one-click access to STRK20 privacy without learning Starknet, installing a new wallet, or holding STRK. Bridge in, hold private, withdraw to any chain with zero on-chain link.",
    primitives: ["Privacy Pool", "earn-contracts", "Paymaster (Avnu)", "StarkGate", "Viewing Keys", "Ekubo Swap Helper"] },
  { id: "anonymous-whistleblower", kind: "white", c: "#c53400", cat: "SOCIAL",
    title: "Anonymous whistleblower platform with proof-of-authorship.",
    area: "1 / span 3", areaRow: "3",
    pitch: "Anyone can submit anonymous reports to registered organizations with cryptographic guarantees that the reporter's identity cannot be discovered, then later prove authorship for rewards or legal protection without disclosing their identity. Math, not policy.",
    primitives: ["Privacy Pool", "Channels", "Encrypted Notes", "IPFS / Arweave", "Viewing Keys", "STARK Proof of Authorship"] },
  { id: "private-prediction-market", kind: "dark", c: "#c53400", cat: "MARKETS",
    title: "Prediction markets with visible odds and invisible bettors.",
    area: "4 / span 3", areaRow: "3",
    pitch: "Bet sizes and odds stay fully visible, so the information aggregation works. Bettor identities are completely hidden. Markets stay informationally efficient while the identity-based manipulation that plagues Polymarket disappears.",
    primitives: ["Privacy Pool", "Open Notes", "InvokeExternal", "Viewing Keys", "Pragma Oracle"] },
];

function RFPCard({ r, i, onOpen }) {
  const [h, setH] = useState(false);
  const K = {
    orange: {
      bg: h
        ? "radial-gradient(ellipse 95% 120% at 10% 0%, #ff4300 0%, rgba(255,67,0,0) 58%), linear-gradient(128deg, #a02a00 0%, #ff5a1e 62%, #ffb07a 120%)"
        : "radial-gradient(ellipse 95% 120% at 10% 0%, #ff5a14 0%, rgba(255,90,20,0) 58%), linear-gradient(128deg, #c53400 0%, #ff5a1e 62%, #ffbd8a 120%)",
      text: "#fff", sub: "rgba(255,255,255,0.85)",
      tag: "rgba(255,255,255,0.85)", num: "rgba(255,255,255,0.5)", read: "#fff",
      border: "none", glow: "rgba(255,255,255,0.18)", shadow: "rgba(255,67,0,0.5)" },
    dark: { bg: h ? "#11151d" : "#0a0d12", text: "#fff", sub: "var(--dim)",
      tag: "var(--orange)", num: "var(--ghost)", read: h ? "var(--orange)" : "var(--faint)",
      border: "1px solid var(--line)", glow: "rgba(255,67,0,0.22)", shadow: "rgba(255,67,0,0.4)" },
    white: { bg: h ? "#fbfaf7" : "#f1efe9", text: "#14130f", sub: "#5a564d",
      tag: "var(--orange)", num: "#bcb6a8", read: "var(--orange)",
      border: "1px solid rgba(0,0,0,0.08)", glow: "rgba(255,67,0,0.18)", shadow: "rgba(0,0,0,0.4)" },
  }[r.kind || "dark"];
  return (
    <button onClick={() => onOpen(r)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      className="rfp-card"
      style={{ gridColumn: r.area, gridRow: r.areaRow, textAlign: "left", cursor: "pointer",
        background: K.bg, border: K.border, borderTop: `2px solid ${r.c}`,
        padding: r.big ? "32px 30px" : "24px 22px", borderRadius: 5,
        position: "relative", overflow: "hidden", color: K.text,
        transition: "background .25s, transform .25s, box-shadow .25s",
        transform: h ? "translateY(-3px)" : "none",
        boxShadow: h ? `0 26px 60px -30px ${K.shadow}` : "none",
        display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: r.big ? 0 : 150 }}>
      <div aria-hidden="true" style={{ position: "absolute", top: -50, right: -50, width: 170, height: 170,
        background: `radial-gradient(circle, ${K.glow}, transparent 70%)`, opacity: h ? 1 : 0.5,
        transition: "opacity .3s" }} />
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }}>
        <span className="mono-label" style={{ fontSize: 10, color: K.tag }}>[ {r.cat} ]</span>
        <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: K.num }}>
          {String(i + 1).padStart(2, "0")}
        </span>
      </div>
      <div style={{ position: "relative", marginTop: r.big ? 28 : 18 }}>
        <h3 style={{ fontFamily: "var(--display)", fontWeight: 600, letterSpacing: "-0.02em", color: K.text,
          fontSize: r.big ? "clamp(22px,2.2vw,32px)" : "clamp(16px,1.4vw,20px)", lineHeight: 1.1 }}>{r.title}</h3>
        <div style={{ marginTop: r.big ? 20 : 14, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em",
          color: K.read, transition: "color .25s", display: "flex", alignItems: "center", gap: 8 }}>
          READ MORE <span style={{ transform: h ? "translateX(4px)" : "none", transition: "transform .25s" }}>»</span>
        </div>
      </div>
    </button>
  );
}

function RFPModal({ r, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, []);
  if (!r) return null;
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 100,
      background: "rgba(3,6,14,0.84)", backdropFilter: "blur(8px)",
      display: "flex", justifyContent: "center", alignItems: "flex-start", overflowY: "auto",
      padding: "clamp(20px,6vh,80px) var(--gut)", animation: "fadein .25s ease" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: "min(1040px,100%)",
        background: "#070c18", border: "1px solid var(--line)", borderTop: `2px solid ${r.c}`,
        borderRadius: 6, animation: "popin .3s cubic-bezier(.2,.8,.2,1)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
          padding: "14px 26px", borderBottom: "1px solid var(--line)", fontFamily: "var(--mono)",
          fontSize: 11, letterSpacing: "0.16em", color: "var(--faint)" }}>
          <span>RFP // {r.id}</span>
          <button onClick={onClose} style={{ background: "none", border: "1px solid var(--line)",
            color: "var(--dim)", fontFamily: "var(--mono)", fontSize: 12, padding: "5px 11px",
            cursor: "pointer", borderRadius: 3 }}>ESC ✕</button>
        </div>
        <div className="rfp-body" style={{ display: "grid", gridTemplateColumns: "1fr 300px" }}>
          <div style={{ padding: "38px 38px 44px" }}>
            <span className="mono-label" style={{ fontSize: 11, color: r.c }}>[ {r.cat} ]</span>
            <h2 style={{ fontSize: "clamp(28px,3.6vw,44px)", marginTop: 16, maxWidth: 620,
              letterSpacing: "-0.02em" }}>{r.title}</h2>
            <div style={{ marginTop: 28 }}>
              <div className="mono-label" style={{ fontSize: 10, color: "var(--green)" }}>THE PITCH</div>
              <p style={{ marginTop: 10, fontSize: 15.5, lineHeight: 1.7, color: "var(--dim)",
                fontFamily: "var(--body)", maxWidth: 600 }}>{r.pitch}</p>
            </div>
            <div style={{ marginTop: 28 }}>
              <div className="mono-label" style={{ fontSize: 10, color: "var(--green)" }}>PRIMITIVES</div>
              <div style={{ marginTop: 12, display: "flex", flexWrap: "wrap", gap: 8 }}>
                {(r.primitives || []).map((pm) => (
                  <span key={pm} style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--dim)",
                    border: "1px solid var(--line)", borderRadius: 3, padding: "5px 10px" }}>{pm}</span>
                ))}
              </div>
            </div>
          </div>
          <div style={{ borderLeft: "1px solid var(--line)", padding: "38px 28px",
            background: "#141414", display: "flex", flexDirection: "column" }}>
            <div className="mono-label" style={{ fontSize: 10 }}>REQUEST FOR PROPOSAL</div>
            <p style={{ marginTop: 14, fontSize: 13.5, lineHeight: 1.65, color: "var(--dim)",
              fontFamily: "var(--mono)" }}>
              Building this? We'll fund and support you end to end. Protocol access, intros, and capital.
            </p>
            <a href="https://cal.com/adithyadinesh" target="_blank" rel="noreferrer"
              className="btn btn-orange" style={{ marginTop: 22, justifyContent: "center" }}>Book a call →</a>
            <a href="#" className="btn btn-ghost" style={{ marginTop: 10, justifyContent: "center" }}>Read full spec</a>
            <div style={{ marginTop: "auto", paddingTop: 28, fontFamily: "var(--mono)", fontSize: 11,
              color: "var(--ghost)", lineHeight: 1.8 }}>
              FILED · APR 2026<br/>STATUS · OPEN<br/>STAGE · PRE-SEED → SEED
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @keyframes fadein{from{opacity:0}to{opacity:1}}
        @keyframes popin{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
        @media (max-width:760px){.rfp-body{grid-template-columns:1fr!important;}
          .rfp-body>div:last-child{border-left:none!important;border-top:1px solid var(--line);}}
      `}</style>
    </div>
  );
}

function RFSCard({ n, badge, title, body, cta, href, ext, divider }) {
  return (
    <div style={{ position: "relative", padding: "clamp(32px,3vw,56px)", display: "flex", flexDirection: "column",
      minHeight: "clamp(360px,46vh,480px)", borderLeft: divider ? "1px solid var(--line)" : "none" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontFamily: "var(--mono)", fontSize: 13, color: "var(--faint)", letterSpacing: "0.05em" }}>{n}</span>
        {badge ? <span style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.16em", color: "var(--dim)",
          border: "1px solid var(--line)", borderRadius: 3, padding: "5px 11px" }}>{badge}</span> : null}
      </div>
      <h3 style={{ fontFamily: "var(--body)", fontWeight: 500, fontSize: "clamp(24px,2.3vw,34px)",
        letterSpacing: "-0.01em", lineHeight: 1.12, color: "var(--text)", margin: "26px 0 0" }}>{title}</h3>
      <p style={{ fontFamily: "var(--body)", fontSize: 15.5, lineHeight: 1.65, color: "var(--dim)",
        margin: "16px 0 0", maxWidth: 460 }}>{body}</p>
      <a href={href} {...(ext ? { target: "_blank", rel: "noreferrer" } : {})}
        className="btn btn-orange" style={{ marginTop: "auto", alignSelf: "flex-start" }}>
        {cta} <span className="arrow">→</span>
      </a>
    </div>
  );
}

function RequestForStartups() {
  return (
    <section id="rfs" style={{ position: "relative", minHeight: "100vh", overflow: "hidden",
      display: "flex", flexDirection: "column", justifyContent: "center",
      padding: "clamp(80px,12vh,150px) 0", borderTop: "1px solid var(--line)", background: "var(--bg)" }}>
      <div style={{ width: "100%", maxWidth: 1680, margin: "0 auto", padding: "0 clamp(20px,5vw,72px)" }}>
        <Reveal>
          <h2 style={{ fontSize: "clamp(22px,2.6vw,40px)", textTransform: "uppercase", fontWeight: 800,
            letterSpacing: "-0.02em", lineHeight: 1.0, margin: 0 }}>
            <span style={{ color: "var(--green)" }}>◢</span>&nbsp;&nbsp;Build with us
          </h2>
        </Reveal>

        <Reveal delay={0.06}>
          <div className="rfs-two" style={{ display: "grid", gridTemplateColumns: "1fr 1fr",
            border: "1px solid var(--line)", borderRadius: 12, overflow: "hidden",
            marginTop: "clamp(28px,4vh,56px)" }}>
            <RFSCard
              n="01"
              title="Proof of Privacy Incubator"
              body="A structured cohort for idea- or prototype-stage teams: mentorship, milestone-based support, and a demo day to ship and showcase."
              cta="Book a call" href="https://cal.com/adithyadinesh" ext />
            <RFSCard
              n="02"
              title="RFPs"
              body="Defined problem statements for specific builds: private payroll, lending, identity, and more. Clear signals of what's worth building."
              cta="Browse RFPs" href="/rfp" divider />
          </div>
        </Reveal>
      </div>

      <style>{`@media (max-width:760px){ .rfs-two{grid-template-columns:1fr!important;} .rfs-two>div+div{border-left:none!important;border-top:1px solid var(--line);} }`}</style>
    </section>
  );
}

/* ===================== FOOTER ===================== */
function Footer() {
  const cols = [
    ["PROTOCOL", [
      ["Documentation", "https://docs.starknet.io/"],
      ["Bridge", "https://starkgate.starknet.io/"],
      ["DeFi on Starknet", "https://www.starknet.io/starknet-defi/"],
      ["Network status", "https://status.starknet.io/"],
    ]],
    ["BUILD", [
      ["Request for startups", "#rfs"],
      ["Developers hub", "https://www.starknet.io/developers/"],
      ["Grants", "https://www.starknet.io/grants/"],
      ["Book a call", "https://cal.com/adithyadinesh"],
    ]],
    ["COMPANY", [
      ["About StarkWare", "https://starkware.co/about-us/"],
      ["Careers", "https://starkware.co/careers/"],
      ["Blog", "https://www.starknet.io/blog/"],
      ["Media kit", "https://www.starknet.io/media-kit/"],
    ]],
  ];
  return (
    <footer style={{ position: "relative", borderTop: "1px solid var(--line)", overflow: "hidden" }}>
      <div className="wrap" style={{ paddingTop: 70, position: "relative", zIndex: 2 }}>
        <div className="foot-top" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
          gap: 40, paddingBottom: 60 }}>
          <div>
            <Logo size={20} />
            <p style={{ marginTop: 16, color: "var(--dim)", fontFamily: "var(--body)", fontSize: 14,
              lineHeight: 1.7, maxWidth: 280 }}>
              Shield any token. Move it privately. Use it anywhere in DeFi. Compliant for regulators,
              quantum-resistant by design.
            </p>
          </div>
          {cols.map(([h, items]) => (
            <div key={h}>
              <div className="mono-label" style={{ fontSize: 10 }}>{h}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 18 }}>
                {items.map(([label, href]) => {
                  const ext = href.startsWith("http");
                  return (
                    <a key={label} href={href} {...(ext ? { target: "_blank", rel: "noreferrer" } : {})}
                      className="footlink" style={{ fontFamily: "var(--mono)",
                      fontSize: 13.5, color: "var(--dim)", transition: "color .2s" }}>{label}</a>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
          flexWrap: "wrap", gap: 12, padding: "20px 0", borderTop: "1px solid var(--line)",
          fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--faint)", letterSpacing: "0.08em" }}>
          <span>STARKWARE INDUSTRIES LTD. · COPYRIGHT 2026 · ALL RIGHTS RESERVED</span>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="https://www.starknet.io/legal-disclaimers/" target="_blank" rel="noreferrer" className="footlink" style={{ color: "var(--faint)" }}>PRIVACY</a>
            <a href="https://www.starknet.io/legal-disclaimers/#terms-of-use" target="_blank" rel="noreferrer" className="footlink" style={{ color: "var(--faint)" }}>TERMS</a>
            <span style={{ color: "var(--green)" }}>● ALL SYSTEMS OPERATIONAL</span>
          </div>
        </div>
      </div>

      <div style={{ position: "relative", textAlign: "center", marginTop: 10, userSelect: "none",
        overflow: "hidden", paddingBottom: 40 }}>
        <img src={LOGO_URL} alt="strk20" style={{ position: "relative", zIndex: 2,
          width: "min(860px, 84vw)", height: "auto", marginInline: "auto", display: "block",
          filter: "drop-shadow(0 0 40px rgba(255,67,0,0.45))" }} />
        <div style={{ position: "absolute", bottom: -120, left: "50%", transform: "translateX(-50%)",
          width: "80%", height: 240,
          background: "radial-gradient(ellipse at center bottom, rgba(255,67,0,0.42), rgba(255,67,0,0.08) 42%, transparent 72%)",
          zIndex: 1, filter: "blur(8px)" }} />
      </div>

      <style>{`
        .footlink:hover{color:var(--green)!important;}
        @media (max-width:820px){.foot-top{grid-template-columns:1fr 1fr!important;}}
      `}</style>
    </footer>
  );
}

/* ===================== HOW IT WORKS — privacy not secrecy ===================== */
const HIW_FEATURES = [
  { n: "01", t: "No integration, no deployment",
    d: "Works for all ERC-20s on Starknet. Token teams don't need to do anything. Privacy is available the moment an asset exists." },
  { n: "02", t: "Shield / unshield",
    d: "Turn privacy on or off through your wallet. The hero action: move a balance into a shielded state, or back to public, anytime." },
  { n: "03", t: "Privacy pool with liquidity",
    d: "One shared pool. Anonymous swaps run against existing AMM liquidity. No cold start, no fragmented markets." },
];

// uniform subtle orange glow rising from the base of each box (cohesive, not muddy)
const HIW_BOX_BG = "radial-gradient(ellipse 120% 140% at 50% 140%, rgba(255,67,0,0.12), transparent 60%), #131313";

// faint deterministic "code rain" backdrop for the disclosure card
const CODE_RAIN = (() => {
  const chars = "0123456789ABCDEFabcdef$%&/\\xz";
  let s = 12345; const rnd = () => (s = (s * 16807) % 2147483647) / 2147483647;
  let out = "";
  for (let i = 0; i < 2400; i++) { out += chars[(rnd() * chars.length) | 0]; if (i % 78 === 77) out += "\n"; }
  return out;
})();

function PrivacyNotSecrecy() {
  return (
    <section id="how" style={{ position: "relative", padding: "clamp(80px,12vh,160px) 0",
      borderTop: "1px solid var(--line)", overflow: "hidden",
      /* clean dark base with one subtle orange bloom (strk20 palette) */
      background:
        "radial-gradient(ellipse 60% 70% at 88% -8%, rgba(255,67,0,0.10), transparent 55%)," +
        "#0d0d0d" }}>
      <div className="wrap">
        <Reveal>
          <div className="eyebrow"><span className="tick">◢</span>&nbsp; HOW IT WORKS</div>
        </Reveal>
        <Reveal delay={0.05}>
          <h2 style={{ fontFamily: "var(--display)", fontWeight: 800, textTransform: "uppercase",
            letterSpacing: "-0.025em", lineHeight: 1.0, fontSize: "clamp(24px,3vw,44px)", margin: "16px 0 0" }}>
            Privacy, not secrecy.
          </h2>
        </Reveal>

        <Reveal delay={0.1}>
          <div style={{ position: "relative", marginTop: "clamp(32px,5vh,56px)", border: "1px solid var(--line)",
            borderRadius: 10, overflow: "hidden", padding: "clamp(28px,4vw,56px)",
            background: "radial-gradient(ellipse 70% 130% at 90% 0%, rgba(255,67,0,0.10), transparent 52%), #131313" }}>
            <div aria-hidden="true" style={{ position: "absolute", inset: 0, fontFamily: "var(--mono)", fontSize: 12,
              lineHeight: 1.5, color: "rgba(255,255,255,0.045)", whiteSpace: "pre-wrap", wordBreak: "break-all",
              overflow: "hidden", pointerEvents: "none", padding: 14, userSelect: "none" }}>{CODE_RAIN}</div>
            <div style={{ position: "relative" }}>
              <div className="mono-label" style={{ color: "var(--green)", fontSize: 11 }}>[ ✦ ] THE MOST IMPORTANT PART</div>
              <p style={{ fontFamily: "var(--display)", fontWeight: 500, fontSize: "clamp(19px,2vw,30px)",
                letterSpacing: "-0.01em", lineHeight: 1.2, margin: "16px 0 0", maxWidth: 900 }}>
                <span style={{ color: "var(--text)" }}>Confidential by default, </span>
                <span style={{ color: "var(--green)" }}>disclosable when required.</span>
              </p>
              <div style={{ marginTop: 32, display: "flex", gap: "clamp(20px,4vw,64px)", flexWrap: "wrap",
                fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--dim)" }}>
                <span><span style={{ color: "var(--green)" }}>[ ]</span>&nbsp; Per-user viewing keys</span>
                <span><span style={{ color: "var(--green)" }}>[ ]</span>&nbsp; Wallet-level screening</span>
                <span><span style={{ color: "var(--green)" }}>[ ]</span>&nbsp; Scoped lawful disclosure</span>
              </div>
            </div>
          </div>
        </Reveal>

        <Reveal delay={0.14}>
          <div className="hiw-cols" style={{ marginTop: "clamp(28px,4vh,48px)", display: "grid",
            gridTemplateColumns: "repeat(3,1fr)", border: "1px solid var(--line)" }}>
            {HIW_FEATURES.map((f, i) => (
              <div key={f.n} style={{ position: "relative", overflow: "hidden",
                padding: "clamp(28px,2.6vw,48px)", borderLeft: i ? "1px solid var(--line)" : "none",
                borderTop: "2px solid var(--green)", background: HIW_BOX_BG }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--green)" }}>{f.n}</div>
                <h3 style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: "clamp(14px,1.1vw,17px)",
                  margin: "14px 0 0", letterSpacing: "0.01em" }}>{f.t}</h3>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
      <style>{`@media(max-width:880px){.hiw-cols{grid-template-columns:1fr!important;}.hiw-cols>div{border-left:none!important;}.hiw-cols>div+div{border-top:1px solid var(--line);}}`}</style>
    </section>
  );
}

/* ===================== LIVE — privacy pool stats ===================== */
const LIVE_STATS = [
  ["$248.6M", "Total value shielded"],
  ["12,480", "Pool activity (24h)"],
  ["8,392", "Unique wallets shielded"],
  ["$54.1M", "Private swap volume"],
];

// periodically scrambles its digits then resolves, with a monochrome glitch flicker
function GlitchNumber({ value, delay = 0 }) {
  const [display, setDisplay] = useState(value);
  const [glitching, setGlitching] = useState(false);
  useEffect(() => {
    const GLYPHS = "0123456789#%&$/";
    const fixed = (c) => "$,. MKB".includes(c);
    let raf, timeout, alive = true;
    const run = () => {
      if (!alive) return;
      setGlitching(true);
      const chars = value.split("");
      const start = performance.now(), dur = 520;
      const tick = (now) => {
        if (!alive) return;
        const t = Math.min((now - start) / dur, 1);
        const resolved = Math.floor(t * chars.length);
        setDisplay(chars.map((c, i) => (fixed(c) || i < resolved) ? c : GLYPHS[(Math.random() * GLYPHS.length) | 0]).join(""));
        if (t < 1) raf = requestAnimationFrame(tick);
        else { setDisplay(value); setGlitching(false); timeout = setTimeout(run, 3500 + Math.random() * 2800); }
      };
      raf = requestAnimationFrame(tick);
    };
    timeout = setTimeout(run, delay + 1000);
    return () => { alive = false; cancelAnimationFrame(raf); clearTimeout(timeout); };
  }, [value]);
  return <span className={glitching ? "glitch-on" : ""} style={{ display: "inline-block" }}>{display}</span>;
}

function LiveStats() {
  return (
    <section id="live" style={{ position: "relative", padding: "clamp(80px,12vh,160px) 0",
      borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <Reveal>
          <div style={{ display: "flex", alignItems: "center", gap: 14, fontFamily: "var(--mono)", fontSize: 12,
            letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--green)", marginBottom: 22 }}>
            <span style={{ width: 28, height: 1, background: "var(--green)" }} />
            The privacy pool · Live
          </div>
        </Reveal>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 40, flexWrap: "wrap" }}>
          <Reveal delay={0.05}>
            <h2 style={{ fontFamily: "var(--display)", fontWeight: 800, textTransform: "uppercase",
              letterSpacing: "-0.025em", lineHeight: 1.0, fontSize: "clamp(26px,3.4vw,50px)", maxWidth: 720, margin: 0 }}>
              Total value shielded and pool activity, in real time.
            </h2>
          </Reveal>
          <Reveal delay={0.1}>
            <a href="#" className="footlink" style={{ fontFamily: "var(--mono)", fontSize: 13, letterSpacing: "0.12em",
              textTransform: "uppercase", color: "var(--text)", border: "1px solid var(--line)", padding: "16px 26px",
              display: "inline-flex", alignItems: "center", gap: 10, whiteSpace: "nowrap", transition: "border-color .2s" }}>
              View the full dashboard <span>↗</span>
            </a>
          </Reveal>
        </div>

        <Reveal delay={0.12}>
          <div className="live-stats" style={{ marginTop: "clamp(40px,6vh,72px)", display: "grid",
            gridTemplateColumns: "repeat(4,1fr)", border: "1px solid var(--line)" }}>
            {LIVE_STATS.map(([v, l], i) => (
              <div key={l} style={{ padding: "clamp(24px,2.4vw,40px)", borderLeft: i ? "1px solid var(--line)" : "none" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--mono)", fontSize: 11,
                  letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--dim)" }}>
                  <span className="live-dot" /> Live
                </div>
                <div style={{ marginTop: 24, fontFamily: "var(--display)", fontWeight: 800, lineHeight: 1,
                  fontSize: "clamp(24px,2.1vw,34px)", color: "var(--text)", whiteSpace: "nowrap" }}>
                  <GlitchNumber value={v} delay={i * 500} />
                </div>
                <div style={{ marginTop: 16, fontFamily: "var(--mono)", fontSize: 11.5, letterSpacing: "0.06em",
                  textTransform: "uppercase", color: "var(--faint)", lineHeight: 1.4 }}>{l}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
      <style>{`
        .live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green-glow);animation:livepulse 1.6s infinite;}
        @keyframes livepulse{0%,100%{opacity:1}50%{opacity:.3}}
        @media(max-width:880px){.live-stats{grid-template-columns:1fr 1fr!important;}.live-stats>div:nth-child(3){border-left:none!important;}.live-stats>div:nth-child(n+3){border-top:1px solid var(--line);}}
        @media(max-width:520px){.live-stats{grid-template-columns:1fr!important;}.live-stats>div{border-left:none!important;}.live-stats>div+div{border-top:1px solid var(--line);}}
      `}</style>
    </section>
  );
}

Object.assign(window, { Naval, RequestForStartups, Footer, PrivacyNotSecrecy, LiveStats });