/* build-page.jsx — /build page: hero, why-build grid, get-involved, video playlist.
   Reuses Nav/Footer/Reveal + global CSS vars. Every section covers the full viewport. */

const BUILD_RAIN = (() => {
  const chars = "0123456789ABCDEFabcdef$%&/\\xz+=<>";
  let s = 71237; const rnd = () => (s = (s * 16807) % 2147483647) / 2147483647;
  let out = ""; for (let i = 0; i < 1800; i++) { out += chars[(rnd() * chars.length) | 0]; if (i % 64 === 63) out += "\n"; }
  return out;
})();

function CodeRain({ opacity = 0.05 }) {
  return (
    <div aria-hidden="true" style={{ position: "absolute", inset: 0, fontFamily: "var(--mono)", fontSize: 12,
      lineHeight: 1.55, color: `rgba(255,255,255,${opacity})`, whiteSpace: "pre-wrap", wordBreak: "break-all",
      overflow: "hidden", pointerEvents: "none", padding: 16, userSelect: "none" }}>{BUILD_RAIN}</div>
  );
}

const BP_SECTION = { position: "relative", minHeight: "100vh", overflow: "hidden", display: "flex",
  flexDirection: "column", justifyContent: "center", padding: "clamp(80px,12vh,150px) 0",
  borderTop: "1px solid var(--line)" };
const BP_INNER = { width: "100%", maxWidth: 1680, margin: "0 auto", padding: "0 clamp(20px,5vw,72px)" };
const BP_EYE = { display: "flex", alignItems: "center", gap: 14, fontFamily: "var(--mono)", fontSize: 12,
  letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--green)" };
const BP_DASH = <span style={{ width: 28, height: 1, background: "var(--green)", display: "inline-block" }} />;
const BP_H = { fontFamily: "var(--display)", fontWeight: 800, textTransform: "uppercase", letterSpacing: "-0.025em",
  lineHeight: 1.0, margin: "18px 0 0" };

/* ---- Hero ---- */
function BuildHero() {
  return (
    <header id="build-top" style={{ ...BP_SECTION, alignItems: "center", textAlign: "center", borderTop: "none" }}>
      <video autoPlay muted loop playsInline style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
        objectFit: "cover", opacity: 0.45, mixBlendMode: "luminosity", zIndex: 0 }}>
        <source src="uploads/bg.mp4" type="video/mp4" />
      </video>
      <CodeRain opacity={0.06} />
      <div style={{ position: "absolute", inset: 0, zIndex: 1,
        background: "radial-gradient(ellipse 75% 60% at 50% 50%, rgba(255,67,0,0.18), transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(13,13,13,0.5) 25%, var(--bg) 82%)" }} />
      <div style={{ ...BP_INNER, position: "relative", zIndex: 2, display: "flex", flexDirection: "column", alignItems: "center" }}>
        <Reveal><div style={BP_EYE}>{BP_DASH} Build privacy</div></Reveal>
        <Reveal delay={0.06}>
          <h1 style={{ ...BP_H, fontSize: "clamp(34px,5.2vw,78px)", maxWidth: 1120, textAlign: "center", marginTop: 18,
            background: "linear-gradient(178deg,#fffdf1 0%,#f4ece8 55%,#ffcdb6 100%)", WebkitBackgroundClip: "text",
            backgroundClip: "text", WebkitTextFillColor: "transparent", color: "transparent" }}>
            Add privacy to your stack.
          </h1>
        </Reveal>
        <Reveal delay={0.14}>
          <p style={{ fontFamily: "var(--body)", fontSize: "clamp(14px,1.15vw,17px)", color: "var(--dim)", lineHeight: 1.65,
            maxWidth: 640, margin: "26px auto 0" }}>
            STRK20 brings shielded balances, private transfers, and private app flows to ERC-20 assets on Starknet. Build on existing liquidity and existing wallets, with a built-in compliance path.
          </p>
        </Reveal>
        <Reveal delay={0.2}>
          <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap", justifyContent: "center" }}>
            <a href="https://cal.com/adithyadinesh" target="_blank" rel="noreferrer" className="btn btn-orange">
              Start your application <span className="arrow">→</span>
            </a>
            <a href="/rfp" className="btn btn-ghost">Browse RFPs</a>
          </div>
        </Reveal>
      </div>
    </header>
  );
}

/* ---- Why build (6 cards) ---- */
const BP_WHY = [
  { n: "01", t: "Protocol-level privacy", d: "Built into the protocol, not bolted on at the app layer. Every shielded asset shares one unified privacy pool, so the anonymity set grows with total system usage." },
  { n: "02", t: "Anonymous DeFi on existing liquidity", d: "Anonymous swaps run on existing AMMs (Ekubo, AVNU). No unshield-swap-reshield, no fragmented liquidity. The AMM never sees the swap came from the privacy pool." },
  { n: "03", t: "Multi-call composability", d: "Unshield, swap across AMMs, flash-loan, repay, and reshield inside one private transaction. The first multi-call support inside a privacy system." },
  { n: "04", t: "No new wallets", d: "Existing Starknet wallets via native account abstraction: multisig, hardware, social recovery. One viewing key derived from the user's signing key." },
  { n: "05", t: "Compliance-first", d: "Per-user viewing keys, wallet-level screening (Elliptic / TRM / Chainalysis). Confidential by default, scoped lawful disclosure when required." },
  { n: "06", t: "Built on Cairo", d: "Both the smart contract and the proving language, what makes atomic, composable privacy possible. Fork it to Rust and the result would not be provable." },
];
function WhyBuild() {
  return (
    <section id="why-build" style={{ ...BP_SECTION,
      background: "radial-gradient(ellipse 55% 65% at 92% -6%, rgba(255,67,0,0.10), transparent 55%), var(--bg)" }}>
      <div style={BP_INNER}>
        <Reveal><div style={BP_EYE}>{BP_DASH} Why build on strk20</div></Reveal>
        <Reveal delay={0.05}><h2 style={{ ...BP_H, fontSize: "clamp(26px,3.4vw,52px)", maxWidth: 900 }}>Privacy as infrastructure, not an integration.</h2></Reveal>
        <Reveal delay={0.1}>
          <div className="why-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16, marginTop: "clamp(28px,4vh,52px)" }}>
            {BP_WHY.map((c) => (
              <div key={c.n} className="why-card" style={{ display: "flex", flexDirection: "column",
                minHeight: "clamp(240px,30vh,320px)", padding: "clamp(26px,2.4vw,40px)", borderRadius: 0,
                background: "linear-gradient(165deg, #181818 0%, #141414 48%, #100c0a 100%)",
                border: "1px solid var(--line)", transition: "transform .2s, background .2s, border-color .2s" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.1em", color: "var(--faint)" }}>{c.n}</span>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--green)" }}>[ ]</span>
                </div>
                <h3 style={{ fontFamily: "var(--body)", fontWeight: 600, fontSize: "clamp(19px,1.6vw,26px)", color: "#fff",
                  margin: "clamp(22px,2.4vw,34px) 0 0", letterSpacing: "-0.01em", lineHeight: 1.12 }}>{c.t}</h3>
                <p style={{ fontFamily: "var(--body)", fontSize: "clamp(14px,0.95vw,15px)", lineHeight: 1.62,
                  color: "var(--dim)", margin: "14px 0 0" }}>{c.d}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
      <style>{`
        .why-card:hover{transform:translateY(-3px);background:#181210;border-color:rgba(255,67,0,0.5);}
        @media(max-width:900px){.why-grid{grid-template-columns:1fr!important;}}
      `}</style>
    </section>
  );
}

/* ---- Get involved (3 cards) ---- */
const BP_WAYS = [
  { n: "01", t: "Proof of Privacy Incubator", d: "A structured cohort for idea or prototype-stage teams: mentorship, milestone-based support, and a demo day to ship and showcase.",
    cta: "Apply to the cohort", href: "https://proof.starknet.io", ext: true },
  { n: "02", t: "Request for Startups", d: "Defined problem statements for specific builds: private payroll, lending, identity, and more. Clear signals of what's worth building.",
    cta: "Browse open requests", href: "/rfp", ext: false },
  { n: "03", t: "SDK access", d: "Self-serve track for teams ready to ship. Get the SDK, docs, and protocol access to start building privately today.",
    cta: "Request SDK access", href: "https://cal.com/adithyadinesh", ext: true },
];
function GetInvolved() {
  return (
    <section id="get-involved" style={{ ...BP_SECTION,
      /* full-bleed orange (testimonial treatment) */
      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%)" }}>
      <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\")" }} />
      <div style={{ ...BP_INNER, position: "relative" }}>
        <Reveal><div style={{ ...BP_EYE, color: "rgba(255,255,255,0.9)" }}>
          <span style={{ width: 28, height: 1, background: "#fff", display: "inline-block" }} /> Get involved
        </div></Reveal>
        <Reveal delay={0.05}><h2 style={{ ...BP_H, fontSize: "clamp(26px,3.4vw,52px)", maxWidth: 760, color: "#fff" }}>Three ways in, one place to apply.</h2></Reveal>
        <Reveal delay={0.1}>
          <div className="ways-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "clamp(16px,1.4vw,22px)", marginTop: "clamp(28px,4vh,52px)" }}>
            {BP_WAYS.map((c) => (
              <a key={c.n} href={c.href} {...(c.ext ? { target: "_blank", rel: "noreferrer" } : {})}
                className="gi-card" style={{ display: "flex", flexDirection: "column", minHeight: "clamp(300px,40vh,400px)",
                  padding: "clamp(28px,2.3vw,40px)", borderRadius: 0,
                  background: "linear-gradient(165deg, #ffffff 0%, #fafafa 42%, #f1ece9 100%)",
                  border: "1px solid rgba(255,255,255,0.5)",
                  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.9), 0 30px 60px -30px rgba(86,22,0,0.55), 0 4px 14px -8px rgba(86,22,0,0.4)",
                  transition: "transform .24s ease, box-shadow .24s ease", textDecoration: "none" }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 13, letterSpacing: "0.08em", color: "var(--green)" }}>{c.n}</span>
                  <span className="gi-dot" style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--green)" }} />
                </div>
                <h3 style={{ fontFamily: "var(--body)", fontWeight: 600, fontSize: "clamp(22px,2vw,30px)", color: "#0d0d0d",
                  margin: "clamp(26px,3vw,40px) 0 0", letterSpacing: "-0.015em", lineHeight: 1.1 }}>{c.t}</h3>
                <p style={{ fontFamily: "var(--body)", fontSize: 15, lineHeight: 1.62, color: "rgba(13,13,13,0.6)", margin: "14px 0 0" }}>{c.d}</p>
                <div style={{ marginTop: "auto", paddingTop: "clamp(20px,2vw,28px)", display: "flex", alignItems: "center", gap: 9,
                  borderTop: "1px solid rgba(13,13,13,0.1)", fontFamily: "var(--mono)", fontSize: 12.5, letterSpacing: "0.04em",
                  textTransform: "uppercase", fontWeight: 600, color: "#0d0d0d" }}>
                  {c.cta} <span className="gi-arrow" style={{ color: "var(--green)", transition: "transform .24s ease", display: "inline-block" }}>→</span>
                </div>
              </a>
            ))}
          </div>
        </Reveal>
      </div>
      <style>{`
        .gi-card:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 44px 80px -28px rgba(86,22,0,0.62),0 8px 20px -8px rgba(86,22,0,0.45);}
        .gi-card:hover .gi-arrow{transform:translateX(5px);}
        @media(max-width:900px){.ways-grid{grid-template-columns:1fr!important;}.gi-card{min-height:0!important;}}
      `}</style>
    </section>
  );
}

/* ---- Playlists (Build + Users tabs) ---- */
const BP_PLAYLISTS = {
  Build: [
    { n: "01", t: "What is shielding?", video: "uploads/pl-shielding.mp4" },
    { n: "02", t: "Public vs private mode", video: "uploads/pl-modes.mp4" },
    { n: "03", t: "Anonymous swaps explained", video: "uploads/pl-swaps.mp4" },
    { n: "04", t: "Multi-call private transactions", video: "uploads/pl-multicall.mp4" },
  ],
  Users: [
    { n: "01", t: "How to get a Ready or Xverse wallet", soon: true },
    { n: "02", t: "How to bridge assets to Starknet", soon: true },
    { n: "03", t: "How to shield and unshield assets", soon: true },
    { n: "04", t: "How to make a private transfer", soon: true, disabled: true },
    { n: "05", t: "How to swap privately", soon: true, disabled: true },
    { n: "06", t: "How to earn yield privately", soon: true, disabled: true },
  ],
};
const BP_TABS = ["Build", "Users"];

function Playlists() {
  const [tab, setTab] = useState("Build");
  const [idx, setIdx] = useState(0);
  const [playing, setPlaying] = useState(false);
  const list = BP_PLAYLISTS[tab];
  const ep = list[idx] || list[0];
  const canPlay = !!ep.video && !ep.soon;
  const selectTab = (t) => { if (t !== tab) { setTab(t); setIdx(0); setPlaying(false); } };
  const selectEp = (i, e) => { if (!e.disabled) { setIdx(i); setPlaying(false); } };

  return (
    <section id="playlists" style={{ ...BP_SECTION }}>
      <div style={BP_INNER}>
        <Reveal><div style={BP_EYE}>{BP_DASH} Playlists</div></Reveal>
        <Reveal delay={0.05}><h2 style={{ ...BP_H, fontSize: "clamp(26px,3.4vw,52px)", maxWidth: 620 }}>Privacy, explained simply.</h2></Reveal>

        <Reveal delay={0.08}>
          <div style={{ display: "flex", gap: 8, marginTop: "clamp(20px,3vh,30px)" }}>
            {BP_TABS.map((t) => (
              <button key={t} onClick={() => selectTab(t)} style={{ fontFamily: "var(--mono)", fontSize: 12,
                letterSpacing: "0.12em", textTransform: "uppercase", padding: "9px 20px", cursor: "pointer", borderRadius: 0,
                background: tab === t ? "var(--green)" : "transparent", color: tab === t ? "#fff" : "var(--dim)",
                border: tab === t ? "1px solid var(--green)" : "1px solid var(--line)",
                transition: "background .2s, color .2s, border-color .2s" }}>{t}</button>
            ))}
          </div>
        </Reveal>

        <Reveal delay={0.12}>
          <div className="pl-grid" style={{ display: "grid", gridTemplateColumns: "1.35fr 1fr", gap: 24, marginTop: "clamp(18px,2.6vh,28px)", alignItems: "stretch" }}>
            {/* player / coming-soon panel */}
            <div style={{ position: "relative", border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden", aspectRatio: "16 / 10", background: "#0a0a0a" }}>
              {canPlay && playing ? (
                <video key={ep.video} src={ep.video} controls autoPlay playsInline
                  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "contain", background: "#000" }} />
              ) : canPlay ? (
                <button onClick={() => setPlaying(true)} style={{ position: "absolute", inset: 0, border: "none", background: "none", cursor: "pointer", width: "100%", height: "100%", padding: 0 }}>
                  <video key={ep.video + "-prev"} src={ep.video} muted loop autoPlay playsInline preload="metadata"
                    style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.55 }} />
                  <CodeRain opacity={0.04} />
                  <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(8,8,8,0.85) 0%, rgba(8,8,8,0.15) 55%, transparent 100%), radial-gradient(ellipse at 50% 45%, rgba(255,67,0,0.12), transparent 60%)" }} />
                  <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
                    <span className="pl-play" style={{ width: 76, height: 58, borderRadius: 8, border: "1px solid rgba(255,255,255,0.6)",
                      display: "grid", placeItems: "center", color: "#fff", fontSize: 16, background: "rgba(255,67,0,0.22)",
                      backdropFilter: "blur(4px)", transition: "transform .2s, background .2s" }}>▶</span>
                  </div>
                  <div style={{ position: "absolute", left: "clamp(20px,3vw,36px)", bottom: "clamp(20px,3vw,36px)", textAlign: "left" }}>
                    <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", color: "var(--green)" }}>[ EPISODE {ep.n} ]</div>
                    <div style={{ fontFamily: "var(--display)", fontWeight: 800, textTransform: "uppercase", fontSize: "clamp(20px,2vw,30px)", color: "#fff", marginTop: 8 }}>{ep.t}</div>
                  </div>
                </button>
              ) : (
                <div style={{ position: "absolute", inset: 0 }}>
                  <CodeRain opacity={0.05} />
                  <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse at 50% 45%, rgba(255,67,0,0.1), transparent 62%)" }} />
                  <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", padding: 24 }}>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.22em", color: "var(--green)", border: "1px solid rgba(255,67,0,0.5)", borderRadius: 999, padding: "5px 14px" }}>COMING SOON</span>
                    <div style={{ fontFamily: "var(--display)", fontWeight: 800, textTransform: "uppercase", fontSize: "clamp(19px,2.2vw,30px)", color: "#fff", marginTop: 18, maxWidth: 440, lineHeight: 1.12 }}>{ep.t}</div>
                    {ep.disabled ? <div style={{ fontFamily: "var(--body)", fontSize: 13.5, color: "var(--faint)", marginTop: 12, maxWidth: 360 }}>Not yet possible on Starknet.</div> : null}
                  </div>
                </div>
              )}
            </div>
            {/* episode list */}
            <div style={{ border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden", display: "flex", flexDirection: "column" }}>
              {list.map((e, i) => {
                const active = i === idx;
                return (
                  <button key={e.n} onClick={() => selectEp(i, e)} disabled={e.disabled} style={{ flex: 1, display: "flex", alignItems: "center", gap: 14,
                    textAlign: "left", padding: "clamp(12px,1.4vh,18px) clamp(16px,2vw,26px)", cursor: e.disabled ? "not-allowed" : "pointer",
                    opacity: e.disabled ? 0.42 : 1,
                    background: active ? "rgba(255,67,0,0.1)" : "transparent",
                    borderTop: i ? "1px solid var(--line)" : "none", borderLeft: active ? "2px solid var(--green)" : "2px solid transparent", borderRight: "none", borderBottom: "none" }}>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 13, color: active ? "var(--green)" : "var(--faint)" }}>{e.n}</span>
                    <span style={{ fontFamily: "var(--mono)", fontSize: "clamp(12px,0.95vw,14px)", color: active ? "var(--text)" : "var(--dim)", flex: 1, lineHeight: 1.3 }}>{e.t}</span>
                    {e.soon
                      ? <span style={{ fontFamily: "var(--mono)", fontSize: 8.5, letterSpacing: "0.14em", color: "var(--green)", border: "1px solid rgba(255,67,0,0.4)", borderRadius: 999, padding: "3px 7px", whiteSpace: "nowrap" }}>SOON</span>
                      : (active ? <span style={{ color: "var(--green)", fontSize: 11 }}>▶</span> : null)}
                  </button>
                );
              })}
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`
        .pl-grid button:hover .pl-play{transform:scale(1.08);background:rgba(255,67,0,0.4);}
        @media(max-width:860px){.pl-grid{grid-template-columns:1fr!important;}}
      `}</style>
    </section>
  );
}

/* ---- Tell us what you're building (contact form → /rfp/api/contact) ---- */
function BuildContact() {
  const [message, setMessage] = useState("");
  const [name, setName] = useState("");
  const [contact, setContact] = useState("");
  const [status, setStatus] = useState("idle"); // idle | sending | sent | error
  const [err, setErr] = useState(null);
  const busy = status === "sending" || status === "sent";

  const fieldStyle = {
    width: "100%", background: "#111", border: "1px solid var(--line)", borderRadius: 0,
    padding: "12px 14px", fontFamily: "var(--body)", fontSize: 15, color: "var(--text)",
    outline: "none", transition: "border-color .18s",
  };
  const labelStyle = { fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.22em",
    textTransform: "uppercase", color: "var(--faint)" };

  async function onSubmit(e) {
    e.preventDefault();
    if (!message.trim() || !contact.trim() || busy) return;
    setStatus("sending"); setErr(null);
    try {
      const res = await fetch("/rfp/api/contact", {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message, name, contact, idea: "Build inquiry" }),
      });
      if (!res.ok) { const d = await res.json().catch(() => ({})); throw new Error(d.error || "Something went wrong."); }
      setStatus("sent");
    } catch (e2) { setStatus("error"); setErr(e2.message || "Something went wrong."); }
  }

  return (
    <section id="build-contact" style={{ ...BP_SECTION }}>
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, zIndex: 0,
        background: "radial-gradient(ellipse 55% 60% at 12% 110%, rgba(255,67,0,0.1), transparent 55%)" }} />
      <CodeRain opacity={0.04} />
      <div style={{ ...BP_INNER, position: "relative", zIndex: 1, maxWidth: 760 }}>
        <Reveal><div style={BP_EYE}>{BP_DASH} Tell us what you're building</div></Reveal>
        <Reveal delay={0.05}><h2 style={{ ...BP_H, fontSize: "clamp(26px,3.4vw,52px)", maxWidth: 620 }}>Have an idea? Send it our way.</h2></Reveal>
        <Reveal delay={0.1}>
          <p style={{ fontFamily: "var(--body)", fontSize: "clamp(14px,1.1vw,16px)", color: "var(--dim)",
            lineHeight: 1.65, maxWidth: 560, margin: "20px 0 0" }}>
            An early concept, a question, or a half-formed pitch. No commitment. It comes straight to our inbox and a human gets back to you.
          </p>
        </Reveal>
        <Reveal delay={0.14}>
          <div style={{ marginTop: "clamp(28px,4vh,44px)", border: "1px solid var(--line)",
            background: "linear-gradient(165deg, #161616 0%, #121212 50%, #0e0b0a 100%)", padding: "clamp(24px,3vw,40px)" }}>
            {status === "sent" ? (
              <div style={{ display: "flex", gap: 14, alignItems: "flex-start", border: "1px solid rgba(255,67,0,0.4)",
                background: "rgba(255,67,0,0.05)", padding: "18px 20px" }}>
                <span style={{ width: 7, height: 7, background: "var(--green)", marginTop: 6, flexShrink: 0 }} />
                <div>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase", color: "#fff" }}>Message sent</div>
                  <div style={{ fontFamily: "var(--body)", fontSize: 14, color: "var(--dim)", marginTop: 6 }}>Thanks for reaching out. We'll get back to you soon.</div>
                </div>
              </div>
            ) : (
              <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
                <label style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  <span style={labelStyle}>What are you building <span style={{ color: "var(--green)" }}>*</span></span>
                  <textarea required value={message} disabled={busy} rows={4}
                    onChange={(e) => setMessage(e.target.value)} placeholder="What's on your mind?"
                    onFocus={(e) => (e.target.style.borderColor = "var(--green)")}
                    onBlur={(e) => (e.target.style.borderColor = "var(--line)")}
                    style={{ ...fieldStyle, resize: "vertical" }} />
                </label>
                <div className="bc-row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                  <label style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                    <span style={labelStyle}>Name <span style={{ color: "var(--faint)", letterSpacing: 0 }}>(optional)</span></span>
                    <input type="text" value={name} disabled={busy} onChange={(e) => setName(e.target.value)} placeholder="Your name"
                      onFocus={(e) => (e.target.style.borderColor = "var(--green)")}
                      onBlur={(e) => (e.target.style.borderColor = "var(--line)")} style={fieldStyle} />
                  </label>
                  <label style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                    <span style={labelStyle}>Email / TG / X <span style={{ color: "var(--green)" }}>*</span></span>
                    <input type="text" required value={contact} disabled={busy} onChange={(e) => setContact(e.target.value)} placeholder="So we can reply"
                      onFocus={(e) => (e.target.style.borderColor = "var(--green)")}
                      onBlur={(e) => (e.target.style.borderColor = "var(--line)")} style={fieldStyle} />
                  </label>
                </div>
                <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16, marginTop: 4 }}>
                  <button type="submit" className="btn btn-orange"
                    disabled={busy || !message.trim() || !contact.trim()}
                    style={{ opacity: busy || !message.trim() || !contact.trim() ? 0.5 : 1, cursor: "pointer" }}>
                    {status === "sending" ? "Sending…" : "Send message"} <span className="arrow">→</span>
                  </button>
                  <a href="https://cal.com/adithyadinesh" target="_blank" rel="noreferrer" className="btn btn-ghost">
                    Book a call with us instead
                  </a>
                  {status === "error" && err && (
                    <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--green)" }}>{err}</span>
                  )}
                </div>
              </form>
            )}
          </div>
        </Reveal>
      </div>
      <style>{`@media(max-width:680px){.bc-row{grid-template-columns:1fr!important;}}`}</style>
    </section>
  );
}

function BuildPage() {
  return (
    <React.Fragment>
      <Nav />
      <BuildHero />
      <LogoTicker label="Build alongside the Starknet ecosystem" />
      <GetInvolved />
      <WhyBuild />
      <Playlists />
      <BuildContact />
      <Footer />
    </React.Fragment>
  );
}

window.BuildPage = BuildPage;
window.Playlists = Playlists;