/* Nav + footer */
const Nav = ({ current = "home" }) => (
  <nav className="nav">
    <div className="shell">
      <div className="nav-inner">
        <a href="index.html" className="nav-logo">
          <Logo size={18} />
          <span>Extodan</span>
          <span className="mono" style={{ color: "var(--fg-faint)", fontSize: 11, letterSpacing: "0.08em", marginLeft: 6 }}>
            v0.4 · BETA
          </span>
        </a>
        <div className="nav-links">
          <a href="marketplace.html" style={{ color: current === "marketplace" ? "var(--fg)" : undefined }}>Marketplace</a>
          <a href="vault.html" style={{ color: current === "vault" ? "var(--fg)" : undefined }}>Vault</a>
          <a href="muse.html" style={{ color: current === "muse" ? "var(--fg)" : undefined }}>Muse</a>
          <a href="aegis.html" style={{ color: current === "aegis" ? "var(--fg)" : undefined }}>Aegis</a>
          <a href="#docs" style={{ color: "var(--fg-faint)" }}>Docs</a>
        </div>
        <a href="#waitlist" className="nav-cta">Join waitlist →</a>
      </div>
    </div>
  </nav>
);

const Footer = () => (
  <footer style={{ borderTop: "1px solid var(--rule)", marginTop: 0 }}>
    <div className="shell" style={{ padding: "80px 40px 40px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", gap: 40 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
            <Logo size={20} />
            <span style={{ fontSize: 18, fontWeight: 500, letterSpacing: "-0.02em" }}>Extodan</span>
          </div>
          <div style={{ color: "var(--fg-dim)", fontSize: 14, maxWidth: 280, lineHeight: 1.6 }}>
            The x402 infrastructure layer. Internet payments at the protocol level.
          </div>
          <div style={{ marginTop: 24 }}>
            <Status tone="ok">All systems nominal · Base mainnet</Status>
          </div>
        </div>
        {[
          {
            title: "Products",
            items: [
              ["Marketplace", "marketplace.html"],
              ["Vault", "vault.html"],
              ["Muse", "muse.html"],
              ["Aegis", "aegis.html"],
            ],
          },
          {
            title: "Developers",
            items: [["SDK", "#"], ["Reference", "#"], ["Specification", "#"], ["Status", "#"]],
          },
          {
            title: "Company",
            items: [["About", "about.html"], ["Careers", "careers.html"], ["Press", "press.html"], ["Contact", "contact.html"]],
          },
          {
            title: "Legal",
            items: [["Terms", "legal.html"], ["Privacy", "legal.html"], ["Security", "security.html"], ["DPA", "legal.html"]],
          },
        ].map((col) => (
          <div key={col.title}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>{col.title}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {col.items.map(([label, href]) => (
                <li key={label}><a href={href} style={{ color: "var(--fg-dim)", fontSize: 14 }}>{label}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 80, paddingTop: 24, borderTop: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-faint)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
        <span>© 2026 Extodan, Inc.</span>
        <span>The x402 infrastructure layer</span>
        <span>BUILT ON HTTP / SETTLED ON BASE</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Nav, Footer });