/* Audience, Credibility, CTA */

const Audience = () => (
  <section style={{ borderTop: "1px solid var(--rule)", padding: "120px 0" }}>
    <div className="shell">
      <Marker section="04" label="WHO IT'S FOR" />
      <h2 className="h-section reveal" style={{ marginTop: 28, marginBottom: 80, maxWidth: 800 }}>
        Built for four kinds of builder.
      </h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", borderTop: "1px solid var(--rule)", borderLeft: "1px solid var(--rule)" }}>
        {[
          {
            who: "AI developers",
            tag: "deploying agents",
            body: "You ship agents that need to pay for the services they use. Vault gives you wallets, limits, and audit. Marketplace gives you services to spend on.",
            cta: ["Vault", "vault.html"],
          },
          {
            who: "API developers",
            tag: "monetizing endpoints",
            body: "You have a model, a feed, a computation. You want revenue without building Stripe, accounts, or rate limits. Marketplace lists you. Aegis defends you.",
            cta: ["Marketplace", "marketplace.html"],
          },
          {
            who: "Creators",
            tag: "writing, recording, filming",
            body: "You publish things people want to read, hear, or watch. Substack and Patreon take their cut. Muse takes 1%, and your readers pay only for what they actually read.",
            cta: ["Muse", "muse.html"],
          },
          {
            who: "Infra teams",
            tag: "protecting APIs",
            body: "You operate APIs at scale, and abuse is a daily problem. Rate limits help, then they don't. Aegis turns the cost of attack into something the attacker has to pay.",
            cta: ["Aegis", "aegis.html"],
          },
        ].map((c) => (
          <div key={c.who} style={{ borderRight: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)", padding: 40, position: "relative", minHeight: 280 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>{c.tag}</div>
            <h3 style={{ fontFamily: "var(--sans)", fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em", margin: "0 0 14px" }}>{c.who}</h3>
            <p style={{ color: "var(--fg-dim)", fontSize: 14.5, lineHeight: 1.6, maxWidth: 380, margin: "0 0 28px" }}>{c.body}</p>
            <a href={c.cta[1]} className="mono" style={{ fontSize: 11.5, letterSpacing: "0.08em", textTransform: "uppercase", borderBottom: "1px solid var(--fg)", paddingBottom: 2 }}>
              → {c.cta[0]}
            </a>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Credibility = () => (
  <section style={{ borderTop: "1px solid var(--rule)", padding: "120px 0", background: "#070708" }}>
    <div className="shell">
      <Marker section="05" label="VERIFIED" />
      <h2 className="h-section reveal" style={{ marginTop: 28, marginBottom: 24, maxWidth: 880 }}>
        x402 is real.<br />Here's the receipt.
      </h2>
      <p className="lede reveal" style={{ marginBottom: 80 }}>
        Coinbase shipped the reference implementation in early 2025. The spec is public, the libraries exist, the agents are already calling it.
      </p>

      {/* Stat strip */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)", marginBottom: 80 }}>
        {[
          ["412ms", "P50 settlement"],
          ["0.0001¢", "Per-tx gas"],
          ["1%", "Min. protocol fee"],
          ["6", "Chains supported"],
        ].map(([n, l], i) => (
          <div key={l} style={{ padding: "40px 32px", borderRight: i < 3 ? "1px solid var(--rule)" : "none" }}>
            <div className="stat-num">{n}</div>
            <div className="stat-label">{l}</div>
          </div>
        ))}
      </div>

      {/* Version timeline */}
      <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 60, marginBottom: 80 }}>
        <div className="eyebrow" style={{ paddingTop: 8 }}>Protocol versions</div>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--rule)" }}>
          {[
            ["v0.1", "Mar 2025", "Initial spec, single-chain (Base), USDC only"],
            ["v0.2", "Jun 2025", "Multi-chain settlement, EIP-712 signatures"],
            ["v0.3", "Oct 2025", "Streaming payments, per-byte pricing primitives"],
            ["v0.4", "Feb 2026", "Agent-native flows, signed delegations, allowlists"],
          ].map(([v, d, body]) => (
            <li key={v} style={{ borderBottom: "1px solid var(--rule)", padding: "20px 0", display: "grid", gridTemplateColumns: "80px 120px 1fr", gap: 20, alignItems: "baseline" }}>
              <span className="mono" style={{ color: "var(--fg)", fontSize: 13 }}>{v}</span>
              <span className="mono" style={{ color: "var(--fg-faint)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase" }}>{d}</span>
              <span style={{ color: "var(--fg-dim)", fontSize: 14.5 }}>{body}</span>
            </li>
          ))}
        </ul>
      </div>

      {/* Compatibility grid */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 40 }}>
        {[
          { title: "Chains", items: ["Base", "Arbitrum", "Optimism", "Polygon PoS", "zkSync Era", "Solana (beta)"] },
          { title: "Frameworks", items: ["Express", "Fastify", "FastAPI", "Hono", "Elysia", "Go net/http"] },
          { title: "Agent platforms", items: ["LangGraph", "AutoGen", "Crew AI", "Anthropic SDK agents", "OpenAI Agents", "Inngest"] },
        ].map((g) => (
          <div key={g.title}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>{g.title}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
              {g.items.map((it) => (
                <li key={it} style={{ borderTop: "1px solid var(--rule)", padding: "12px 0", fontFamily: "var(--mono)", fontSize: 12.5, color: "var(--fg-dim)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span>{it}</span>
                  <Status tone="ok">supported</Status>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const CTA = () => (
  <section id="waitlist" style={{ borderTop: "1px solid var(--rule)", padding: "140px 0" }}>
    <div className="shell">
      <Marker section="06" label="ACCESS" />
      <h2 className="h-section reveal" style={{ marginTop: 28, marginBottom: 80, maxWidth: 880 }}>
        Pick the door.
      </h2>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--rule)" }}>
        {[
          { name: "Marketplace", tag: "Waitlist", body: "Publish or consume x402 endpoints.", href: "marketplace.html" },
          { name: "Vault", tag: "Early access", body: "Wallet fleet for AI agents.", href: "vault.html" },
          { name: "Muse", tag: "Creator waitlist", body: "Per-piece publishing on x402.", href: "muse.html" },
          { name: "Aegis", tag: "Beta signup", body: "Economic API protection.", href: "aegis.html" },
        ].map((c, i) => (
          <a key={c.name} href={c.href} style={{ borderRight: i < 3 ? "1px solid var(--rule)" : "none", borderBottom: "1px solid var(--rule)", padding: 40, display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 320, transition: "background 0.2s" }} onMouseEnter={(e) => e.currentTarget.style.background = "rgba(232,228,217,0.03)"} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 28 }}>{c.tag}</div>
              <div style={{ fontFamily: "var(--sans)", fontSize: 32, fontWeight: 500, letterSpacing: "-0.02em", marginBottom: 14 }}>{c.name}</div>
              <div style={{ color: "var(--fg-dim)", fontSize: 14.5, lineHeight: 1.6 }}>{c.body}</div>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--fg)" }}>
              <span>Sign up</span>
              <span>→</span>
            </div>
          </a>
        ))}
      </div>

      <div style={{ marginTop: 80, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
        <p style={{ color: "var(--fg-dim)", fontSize: 14.5, maxWidth: 540, margin: 0 }}>
          Or get the SDK and build against the protocol directly. Marketplace listing is optional — Extodan is infrastructure, not a walled garden.
        </p>
        <div style={{ display: "flex", gap: 12 }}>
          <a href="#" className="btn">npm install @extodan/sdk</a>
          <a href="#" className="btn btn--primary">Read the spec <span className="arrow">→</span></a>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Audience, Credibility, CTA });