/* 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;
  // watermark logo lights up once the quote has fully lit
  const litLogo = clampN(p * (n + 1.5) - n, 0, 1);
  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 (#c53400 / #c53400) */
          background:
            "radial-gradient(ellipse 80% 100% at 6% 2%, #c53400 0%, rgba(255,77,18,0) 55%)," +
            "radial-gradient(ellipse 85% 80% at 96% 98%, #d6531c 0%, rgba(255,174,107,0) 55%)," +
            "linear-gradient(125deg, #a02a00 0%, #c53400 52%, #d6531c 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 + 0.5 * litLogo,
            filter: `drop-shadow(0 0 ${36 * litLogo}px rgba(255,255,255,${0.32 * litLogo}))`,
            transition: "opacity .3s ease-out, filter .3s ease-out", 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.34 + 0.66 * 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%, #c53400 0%, rgba(197, 52, 0,0) 58%), linear-gradient(128deg, #a02a00 0%, #c53400 62%, #d6531c 120%)"
        : "radial-gradient(ellipse 95% 120% at 10% 0%, #c53400 0%, rgba(255,90,20,0) 58%), linear-gradient(128deg, #c53400 0%, #c53400 62%, #d6531c 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(197, 52, 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(197, 52, 0,0.22)", shadow: "rgba(197, 52, 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(197, 52, 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="Proof is a focused accelerator for high-potential teams building with STRK20: eight weeks of mentorship, milestone-based support, investor preparation, and a demo day designed to turn early privacy ideas into credible company-building evidence."
              cta="Book a call" href="https://calendar.app.google/QQ1CggaMGNiZduHw7" 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", [
      ["STRK20 by Example", "https://strk20-by-example.org/"],
      ["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>
            <a href="/shielded" className="pfp-foot" style={{ display: "inline-flex", alignItems: "center", gap: 7, marginTop: 18,
              color: "var(--text)", border: "1px solid rgba(197, 52, 0,0.55)", borderRadius: 999, padding: "8px 15px",
              background: "rgba(197, 52, 0,0.10)", fontFamily: "var(--mono)", letterSpacing: "0.1em", lineHeight: 1,
              fontSize: 12, textTransform: "uppercase" }}>
              <span style={{ color: "var(--green)", fontSize: 10 }}>✦</span> Shield your PFP
            </a>
          </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>

        {/* legal disclaimer — fine print */}
        <div style={{ borderTop: "1px solid var(--line)", paddingTop: 30, paddingBottom: 4 }}>
          <div className="mono-label" style={{ fontSize: 9.5, color: "var(--faint)", marginBottom: 16 }}>Disclaimer</div>
          <div className="foot-disc" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(22px,3vw,52px)" }}>
            <p style={{ fontFamily: "var(--body)", fontSize: 11.5, lineHeight: 1.8, color: "var(--faint)", margin: 0 }}>
              The information on this page is provided for general informational purposes only and does not constitute legal, financial, investment, or any other form of professional advice. Any decisions made based on this content are made at your own risk. No liability is accepted for any loss or damage arising from reliance on the information provided. To the extent any product is built and offered to the public it will be the builders&rsquo; sole responsibility to ensure compliance with applicable laws in the jurisdictions it is offered. Any comparisons featured are solely for illustrative purposes and should not be relied upon as a basis for decision-making.
            </p>
            <p style={{ fontFamily: "var(--body)", fontSize: 11.5, lineHeight: 1.8, color: "var(--faint)", margin: 0 }}>
              The content on this page has been produced by a community member &mdash; Starkware Industries Limited &mdash; and does not represent the views or positions of the Starknet Foundation. The Starknet Foundation does not endorse any of the content, opinions, or recommendations expressed herein. Nothing on this page constitutes an offer or commitment by the Starknet Foundation to fund, support, or otherwise engage with any projects or initiatives that may be derived from or inspired by the ideas presented.
            </p>
          </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="/terms.html" 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(460px, 40vw)", height: "auto", marginInline: "auto", display: "block",
          filter: "drop-shadow(0 0 32px rgba(197, 52, 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(197, 52, 0,0.42), rgba(197, 52, 0,0.08) 42%, transparent 72%)",
          zIndex: 1, filter: "blur(8px)" }} />
      </div>

      <style>{`
        .footlink:hover{color:var(--green)!important;}
        .pfp-foot{transition:background .2s,border-color .2s,box-shadow .2s}
        .pfp-foot:hover{background:rgba(197,52,0,0.2);border-color:var(--green);box-shadow:0 0 22px -4px var(--green-glow)}
        @media (max-width:820px){.foot-top{grid-template-columns:1fr 1fr!important;}.foot-disc{grid-template-columns: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(197, 52, 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(197, 52, 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 className="hiw-cols" style={{ marginTop: "clamp(32px,5vh,56px)", display: "grid",
            gridTemplateColumns: "repeat(3,1fr)", gap: 16 }}>
            {HIW_FEATURES.map((f) => (
              <div key={f.n} style={{ position: "relative", overflow: "hidden", display: "flex", flexDirection: "column",
                minHeight: "clamp(190px,24vh,250px)", padding: "clamp(26px,2.4vw,38px)",
                background: "linear-gradient(165deg, #181818 0%, #141414 48%, #100c0a 100%)",
                border: "1px solid var(--line)", borderTop: "2px solid var(--green)" }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.1em", color: "var(--green)" }}>{f.n}</span>
                <h3 style={{ fontFamily: "var(--body)", fontWeight: 600, fontSize: "clamp(17px,1.4vw,21px)", color: "#fff",
                  margin: "clamp(18px,2vw,26px) 0 0", letterSpacing: "-0.01em", lineHeight: 1.15 }}>{f.t}</h3>
                <p style={{ fontFamily: "var(--body)", fontSize: "clamp(13.5px,0.95vw,15px)", lineHeight: 1.6,
                  color: "var(--dim)", margin: "12px 0 0" }}>{f.d}</p>
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal delay={0.14}>
          <div style={{ position: "relative", marginTop: 16, overflow: "hidden", padding: "clamp(34px,4vw,60px)",
            border: "1px solid var(--line)", borderTop: "2px solid var(--green)",
            background: "radial-gradient(ellipse 90% 170% at 96% -12%, rgba(197, 52, 0,0.16), transparent 55%), linear-gradient(160deg,#191919 0%,#141414 50%,#0f0c0b 100%)" }}>
            <div className="hiw-disc" style={{ position: "relative", display: "grid", gridTemplateColumns: "1.1fr 1fr",
              gap: "clamp(28px,4.5vw,72px)", alignItems: "center" }}>
              <p style={{ fontFamily: "var(--body)", fontWeight: 600, fontSize: "clamp(23px,2.7vw,36px)",
                letterSpacing: "-0.015em", lineHeight: 1.12, margin: 0 }}>
                <span style={{ color: "var(--text)" }}>Confidential by default, </span>
                <span style={{ color: "var(--green)" }}>disclosable when required.</span>
              </p>
              <p style={{ fontFamily: "var(--body)", fontSize: "clamp(15px,1.15vw,17px)", color: "var(--dim)",
                lineHeight: 1.72, margin: 0 }}>
                Users can reveal specific information when needed, using scoped disclosure such as per-user viewing keys, wallet-level screening, or lawful disclosure paths.
              </p>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`
        @media(max-width:880px){.hiw-cols{grid-template-columns:1fr!important;}}
        @media(max-width:760px){.hiw-disc{grid-template-columns:1fr!important;gap:18px!important;}.hiw-disc>p:last-child{border-left:none!important;padding-left:0!important;}}
      `}</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>
  );
}

/* ===================== WALLET CTA — start using privacy today ===================== */
const WALLET_CARDS = [
  {
    name: "Ready",
    category: "Starknet native",
    logo: "/dashboard-assets/logos/ready.png",
    blurb: "The crypto alternative to your bank. Swap your favourite tokens, earn DeFi rewards, and shield assets on Starknet. 2M+ downloads.",
    href: "https://www.ready.co/ready-x",
    platforms: [
      { label: "Chrome", href: "https://chromewebstore.google.com/detail/argent-x/dlcobpjiigpikoobohmabehhmhfoodbb" },
      { label: "Firefox", href: "https://addons.mozilla.org/firefox/addon/argent-x/" },
      { label: "iOS", href: "https://apps.apple.com/app/argent-x-starknet-wallet/id1358741926" },
      { label: "Android", href: "https://play.google.com/store/apps/details?id=im.argent.contractwalletclient" },
    ],
  },
  {
    name: "Xverse",
    category: "Bitcoin · multi-chain",
    logo: "/dashboard-assets/logos/xverse.jpg",
    blurb: "Your sovereign onchain bank and Bitcoin wallet. Buy BTC, earn yield, pay with stablecoins, and move it privately on Starknet.",
    href: "https://www.xverse.app/download",
    platforms: [
      { label: "Chrome", href: "https://chromewebstore.google.com/detail/xverse-wallet/idnnbdplmphpflfnlkomgpfbpcgelopg" },
      { label: "Firefox", href: "https://addons.mozilla.org/firefox/addon/xverse-wallet/" },
      { label: "iOS", href: "https://apps.apple.com/app/xverse-bitcoin-web3-wallet/id1552272513" },
      { label: "Android", href: "https://play.google.com/store/apps/details?id=com.secretkeylabs.xverse" },
    ],
  },
];

function WalletCTA() {
  return (
    <section style={{ position: "relative", borderTop: "1px solid var(--line)",
      minHeight: "100vh", display: "flex", flexDirection: "column", justifyContent: "center",
      padding: "clamp(72px,11vh,140px) 0", overflow: "hidden" }}>
      {/* ambient brand glow */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, zIndex: 0,
        background: "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(197,52,0,0.10), transparent 60%)" }} />
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <Reveal><div style={{ display: "flex", alignItems: "center", gap: 14, justifyContent: "center",
          fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase",
          color: "var(--green)" }}>
          <span style={{ width: 28, height: 1, background: "var(--green)", display: "inline-block" }} />
          Get a wallet
          <span style={{ width: 28, height: 1, background: "var(--green)", display: "inline-block" }} />
        </div></Reveal>
        <Reveal delay={0.05}>
          <h2 style={{ fontFamily: "var(--display)", fontWeight: 800, textTransform: "uppercase",
            letterSpacing: "-0.025em", lineHeight: 1.0, textAlign: "center", marginTop: 18,
            fontSize: "clamp(28px,3.6vw,52px)" }}>
            Use it privately today.
          </h2>
        </Reveal>
        <Reveal delay={0.1}>
          <p style={{ textAlign: "center", marginTop: 18, marginInline: "auto", maxWidth: 540,
            fontFamily: "var(--body)", fontSize: "clamp(14px,1.1vw,17px)", lineHeight: 1.6, color: "var(--dim)" }}>
            Grab a Starknet wallet and start shielding your assets in minutes.
          </p>
        </Reveal>

        <Reveal delay={0.14}>
          <div className="wallet-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr",
            gap: "clamp(16px,2vw,24px)", marginTop: "clamp(34px,5vh,52px)", maxWidth: 880, marginInline: "auto" }}>
            {WALLET_CARDS.map((w) => (
              <div key={w.name} className="wallet-card"
                style={{ position: "relative", display: "flex", flexDirection: "column", gap: 18,
                  border: "1px solid var(--line)", borderRadius: 18, padding: "clamp(22px,2.6vw,32px)",
                  background: "rgba(255,255,255,0.015)",
                  transition: "border-color .22s, background .22s, box-shadow .22s" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                  <span style={{ width: 56, height: 56, borderRadius: 13, overflow: "hidden", flexShrink: 0,
                    border: "1px solid var(--line)", background: "#111", display: "grid", placeItems: "center" }}>
                    <img src={w.logo} alt={w.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                  </span>
                  <span style={{ display: "flex", flexDirection: "column", gap: 5, minWidth: 0 }}>
                    <span style={{ fontFamily: "var(--display)", fontWeight: 800, textTransform: "uppercase",
                      letterSpacing: "-0.01em", fontSize: "clamp(22px,2vw,28px)", color: "var(--text)", lineHeight: 1 }}>{w.name}</span>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em",
                      textTransform: "uppercase", color: "var(--green)" }}>{w.category}</span>
                  </span>
                </div>
                <p style={{ fontFamily: "var(--body)", fontSize: 14.5, lineHeight: 1.6, color: "var(--dim)", margin: 0, flex: 1 }}>{w.blurb}</p>
                <div className="wallet-plats" style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {w.platforms.map((p) => (
                    <a key={p.label} href={p.href} target="_blank" rel="noreferrer" className="wc-plat"
                      onClick={() => { try { window.track?.("get_wallet_platform", w.name + ":" + p.label); } catch (e) {} }}
                      style={{ display: "inline-flex", alignItems: "center", minHeight: 36, padding: "0 14px",
                        borderRadius: 999, border: "1px solid var(--line)", background: "rgba(255,255,255,0.02)",
                        fontFamily: "var(--mono)", fontSize: 11.5, letterSpacing: "0.08em", textTransform: "uppercase",
                        color: "var(--dim)", textDecoration: "none", transition: "border-color .18s, color .18s, background .18s" }}>
                      {p.label}
                    </a>
                  ))}
                </div>
                <a href={w.href} target="_blank" rel="noreferrer" className="btn btn-orange wc-cta"
                  onClick={() => { try { window.track?.("get_wallet", w.name); } catch (e) {} }}
                  style={{ justifyContent: "center", minHeight: 46, marginTop: 2 }}>
                  Get {w.name} <span className="wc-arrow" style={{ display: "inline-block", marginLeft: 8, transition: "transform .2s" }}>→</span>
                </a>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
      <style>{`
        .wallet-card:hover{border-color:rgba(197,52,0,0.45);background:rgba(197,52,0,0.04);box-shadow:0 24px 60px -40px var(--green-glow);}
        .wc-plat:hover{border-color:var(--green);color:var(--text);background:rgba(197,52,0,0.07);}
        .wc-cta:hover .wc-arrow{transform:translateX(4px);}
        @media(max-width:720px){
          .wallet-grid{grid-template-columns:1fr!important;max-width:440px!important;}
          .wallet-card{padding:22px!important;}
        }
      `}</style>
    </section>
  );
}

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