/* sections-top.jsx — Nav + Hero */
const { useState: useStateT, useEffect: useEffectT, useRef: useRefT } = React;

const LOGO_URL = "https://framerusercontent.com/images/KHsTqzcNJn981dsR0vwIJ6vDD0.png";

function Logo({ size = 20 }) {
  return (
    <img src={LOGO_URL} alt="strk20" style={{ height: size, width: "auto", display: "block" }} />
  );
}

function Nav() {
  const [open, setOpen] = useStateT(false);
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "16px var(--gut)", pointerEvents: "none",
    }}>
      <a href="https://strk20.starknet.io/" aria-label="strk20 home" style={{ display: "flex", alignItems: "center", pointerEvents: "auto" }}>
        <Logo size={22} />
      </a>

      {/* desktop links */}
      <div className="nav-desk" style={{ display: "flex", alignItems: "center", gap: "clamp(20px,2.6vw,44px)", pointerEvents: "auto",
        fontFamily: "var(--mono)", fontSize: 13, letterSpacing: "0.14em", textTransform: "uppercase" }}>
        <a href="https://www.starknet.io/dapps/" target="_blank" rel="noreferrer" className="footlink" style={{ color: "var(--text)" }}>Use</a>
        <a href="/build" className="footlink" style={{ color: "var(--text)" }}>Build</a>
        <a href="/rfp" className="footlink" style={{ color: "var(--text)" }}>RFPs</a>
        <a href="/shielded" className="pfp-pill" style={{ display: "inline-flex", alignItems: "center", gap: 7,
          color: "var(--text)", border: "1px solid rgba(255,67,0,0.55)", borderRadius: 999, padding: "5px 12px",
          background: "rgba(255,67,0,0.10)", letterSpacing: "0.1em", lineHeight: 1, fontSize: 12 }}>
          <span style={{ color: "var(--green)", fontSize: 10 }}>✦</span> Shield your PFP
        </a>
      </div>
      <div className="nav-desk" style={{ position: "relative", pointerEvents: "auto" }}>
        <a href="#" className="btn btn-orange" style={{ padding: "10px 20px", fontSize: 13 }}>
          Launch dashboard
        </a>
        <span style={{ position: "absolute", top: "100%", right: 2, marginTop: 5, fontFamily: "var(--mono)",
          fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--faint)", whiteSpace: "nowrap" }}>
          Coming soon
        </span>
      </div>

      {/* mobile hamburger */}
      <button className="nav-burger" aria-label="Menu" aria-expanded={open} onClick={() => setOpen((o) => !o)}
        style={{ pointerEvents: "auto", background: "rgba(12,12,16,0.55)", backdropFilter: "blur(8px)",
          border: "1px solid var(--line)", borderRadius: 7, width: 42, height: 42,
          alignItems: "center", justifyContent: "center", cursor: "pointer", padding: 0 }}>
        <span className={"burger" + (open ? " open" : "")}><i /><i /><i /></span>
      </button>

      {/* mobile drawer */}
      <div className={"nav-drawer" + (open ? " open" : "")} onClick={() => setOpen(false)}>
        <a href="https://www.starknet.io/dapps/" target="_blank" rel="noreferrer">Use</a>
        <a href="/build">Build</a>
        <a href="/rfp">RFPs</a>
        <a href="/shielded"><span style={{ color: "var(--green)" }}>✦</span>&nbsp; Shield your PFP</a>
        <a href="#" className="btn btn-orange" style={{ justifyContent: "center", marginTop: 6 }}>Launch dashboard</a>
        <span style={{ textAlign: "center", fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: "0.2em",
          textTransform: "uppercase", color: "var(--faint)", marginTop: 6 }}>Coming soon</span>
      </div>

      <style>{`
        .pfp-pill{transition:background .2s,border-color .2s,box-shadow .2s}
        .pfp-pill:hover{background:rgba(255,67,0,0.2);border-color:var(--green);box-shadow:0 0 22px -4px var(--green-glow)}
        .nav-burger{display:none}
        .burger{position:relative;display:inline-block;width:18px;height:12px}
        .burger i{position:absolute;left:0;width:100%;height:2px;background:var(--text);border-radius:2px;transition:transform .25s ease,opacity .2s ease,top .25s ease}
        .burger i:nth-child(1){top:0}.burger i:nth-child(2){top:5px}.burger i:nth-child(3){top:10px}
        .burger.open i:nth-child(1){top:5px;transform:rotate(45deg)}
        .burger.open i:nth-child(2){opacity:0}
        .burger.open i:nth-child(3){top:5px;transform:rotate(-45deg)}
        .nav-drawer{display:none}
        @media(max-width:760px){
          .nav-desk{display:none!important}
          .nav-burger{display:inline-flex!important}
          .nav-drawer{position:absolute;top:calc(100% + 8px);left:var(--gut);right:var(--gut);
            flex-direction:column;gap:2px;padding:10px;border:1px solid var(--line);border-radius:12px;
            background:rgba(9,9,11,0.94);backdrop-filter:blur(14px);pointer-events:auto;
            box-shadow:0 24px 50px -20px rgba(0,0,0,0.8);
            font-family:var(--mono);font-size:14px;letter-spacing:0.12em;text-transform:uppercase}
          .nav-drawer.open{display:flex}
          .nav-drawer>a{padding:14px 12px;color:var(--text);border-radius:7px}
          .nav-drawer>a:active{background:rgba(255,255,255,0.06)}
        }
      `}</style>
    </nav>
  );
}

function Hero() {
  const { canvasRef } = usePoolCanvas("hero");
  const [vid, setVid] = useStateT(false);
  return (
    <header id="top" style={{ position: "relative", minHeight: "100vh", display: "flex",
      flexDirection: "column", justifyContent: "center", alignItems: "center", overflow: "hidden" }}>
      {/* looping ambient video (june9-countdown bg.mp4) */}
      <video autoPlay muted loop playsInline
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
          objectFit: "cover", opacity: 0.5, mixBlendMode: "luminosity", zIndex: 0 }}>
        <source src="uploads/bg.mp4" type="video/mp4" />
      </video>
      {/* ambient funnel */}
      <canvas ref={canvasRef} style={{
        position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.8, zIndex: 1,
      }} />
      {/* strk20-style background gradient + video darkening */}
      <div style={{ position: "absolute", inset: 0, zIndex: 2,
        background: "radial-gradient(ellipse 70% 55% at 50% 60%, rgba(255,67,0,0.13), transparent 60%), radial-gradient(ellipse at 50% 48%, rgba(13,13,13,0.45) 20%, var(--bg) 78%)" }} />

      <div className="wrap" style={{ position: "relative", zIndex: 3, width: "100%",
        display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center" }}>
        <Reveal>
          <a href="#" onClick={(e) => { e.preventDefault(); setVid(true); }} className="hero-play"
            style={{ display: "inline-flex", alignItems: "center", gap: 9, cursor: "pointer",
            border: "1px solid var(--line)", borderRadius: 999, padding: "4px 5px 4px 13px",
            background: "rgba(12,12,16,0.5)", backdropFilter: "blur(6px)" }}>
            <span style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.18em",
              color: "var(--dim)", textTransform: "uppercase" }}>Watch the 25-second explainer</span>
            <span style={{ width: 22, height: 22, borderRadius: "50%", background: "var(--green)",
              color: "#fff", display: "grid", placeItems: "center", fontSize: 8 }}>▶</span>
          </a>
        </Reveal>

        <Reveal delay={0.08}>
          <h1 style={{ fontSize: "clamp(34px,5vw,72px)", marginTop: 22, letterSpacing: "-0.025em",
            lineHeight: 0.96, textTransform: "uppercase", fontWeight: 800,
            background: "linear-gradient(178deg, #fffdf1 0%, #f4ece8 50%, #ffcdb6 100%)",
            WebkitBackgroundClip: "text", backgroundClip: "text",
            WebkitTextFillColor: "transparent", color: "transparent" }}>
            Privacy that just works<br className="hero-br"/>for crypto.
          </h1>
        </Reveal>

        <Reveal delay={0.16}>
          <p style={{ marginTop: 22, fontSize: "clamp(14px,1.15vw,17px)", color: "var(--dim)",
            maxWidth: 480, lineHeight: 1.6, fontFamily: "var(--body)", fontWeight: 400 }}>
            Shield any tokens. Move them privately. Use them anywhere in DeFi. Compliant for regulators.
          </p>
        </Reveal>

        <Reveal delay={0.22}>
          <a href="#story" className="btn btn-orange" style={{ marginTop: 36 }}>
            Learn more <span className="arrow">↓</span>
          </a>
        </Reveal>
      </div>

      {/* ecosystem ticker — above the fold */}
      <div style={{ position: "absolute", bottom: 34, left: 0, right: 0, zIndex: 4 }}>
        <LogoTicker compact />
      </div>
      {vid && (
        <div onClick={() => setVid(false)} style={{ position: "fixed", inset: 0, zIndex: 100,
          background: "rgba(5,5,5,0.9)", backdropFilter: "blur(8px)", display: "flex",
          alignItems: "center", justifyContent: "center", padding: "clamp(16px,5vw,60px)" }}>
          <div onClick={(e) => e.stopPropagation()} style={{ position: "relative", width: "min(960px,100%)" }}>
            <button onClick={() => setVid(false)} style={{ position: "absolute", top: -40, right: 0,
              background: "none", border: "1px solid var(--line)", color: "var(--dim)",
              fontFamily: "var(--mono)", fontSize: 12, padding: "6px 12px", cursor: "pointer", borderRadius: 3 }}>
              ESC ✕
            </button>
            <video src="uploads/strk20-explainer.mp4" controls autoPlay playsInline
              style={{ width: "100%", borderRadius: 8, border: "1px solid var(--line)", background: "#000",
                display: "block", boxShadow: "0 40px 120px -40px rgba(255,67,0,0.4)" }} />
          </div>
        </div>
      )}
      <style>{`.hero-play{transition:border-color .2s,background .2s}.hero-play:hover{border-color:var(--green)}@media(max-width:760px){.hero-br{display:none}}`}</style>
    </header>
  );
}

Object.assign(window, { Nav, Hero, Logo, LOGO_URL });