/* global React, Link, PageHero, PageSchema, IntakeForm */

/* ============================================================
   /roadmap
   ============================================================ */

function RoadmapPage() {
  return (
    <main>
      <PageHero
        crumbs={[{ label: 'BitID', href: '/' }, { label: 'Roadmap' }]}
        title="Public roadmap. Real dates."
        lead="What's available now, what ships next, what comes after."
      />
      <section className="section">
        <div className="timeline">
          <div className="timeline-block">
            <h3>Q2 2026 · now</h3>
            <ul>
              <li className="is-available"><span className="marker"></span><span className="text">Whitepaper v4.3 published</span><span className="status">available</span></li>
              <li className="is-available"><span className="marker"></span><span className="text">Developer early access opens</span><span className="status">available</span></li>
              <li className="is-available"><span className="marker"></span><span className="text">Partner intake opens</span><span className="status">available</span></li>
            </ul>
          </div>
          <div className="timeline-block">
            <h3>Q3 2026</h3>
            <ul>
              <li><span className="marker"></span><span className="text">SDK public beta — JS, iOS, Android, Python, Go</span><span className="status">upcoming</span></li>
              <li><span className="marker"></span><span className="text">MCP server — Claude · Codex · ChatGPT · Cursor · Grok · any MCP host</span><span className="status">upcoming</span></li>
              <li><span className="marker"></span><span className="text">Sandbox open — testnet BitID, signet Bitcoin</span><span className="status">upcoming</span></li>
              <li><span className="marker"></span><span className="text">External cryptographic audit report published</span><span className="status">upcoming</span></li>
              <li><span className="marker"></span><span className="text">SOC 2 Type II report</span><span className="status">upcoming</span></li>
            </ul>
          </div>
          <div className="timeline-block">
            <h3>Q4 2026</h3>
            <ul>
              <li><span className="marker"></span><span className="text">Production mainnet</span><span className="status">upcoming</span></li>
              <li><span className="marker"></span><span className="text">First reference partner integrations live</span><span className="status">upcoming</span></li>
              <li><span className="marker"></span><span className="text">Public metrics page</span><span className="status">upcoming</span></li>
            </ul>
          </div>
        </div>
      </section>
      <PageSchema schema={{ "@context": "https://schema.org", "@type": "WebPage", "name": "BitID roadmap", "url": "https://bitid.org/roadmap" }} />
    </main>
  );
}

/* ============================================================
   Intake form pages
   ============================================================ */

function DevelopersPage() {
  return (
    <main>
      <PageHero
        crumbs={[{ label: 'BitID', href: '/' }, { label: 'Developers' }]}
        title="Join developer early access."
        lead="When the SDK ships in Q3, early-access developers get it first."
      />
      <section className="section">
        <IntakeForm
          title="Developer early access"
          lead="A short note about what you're building helps us prioritize."
          intent="developer"
          fields={[
            { name: 'name', label: 'Name' },
            { name: 'email', label: 'Email', type: 'email' },
            { name: 'company', label: 'Company' },
            { name: 'role', label: 'Role' },
            { name: 'use_case', label: 'Primary use case', type: 'textarea', placeholder: 'What identity check are you doing today, and where does it break?' },
          ]}
        />
      </section>
    </main>
  );
}

function PartnersPage() {
  return (
    <main>
      <PageHero
        crumbs={[{ label: 'BitID', href: '/' }, { label: 'Partners' }]}
        title="Request partner access."
        lead="Reference integrations launch with mainnet in Q4 2026. We pick a small number."
      />
      <section className="section">
        <IntakeForm
          title="Partner access"
          lead="Tell us your scale and use case in one sentence."
          intent="partner"
          fields={[
            { name: 'company', label: 'Company' },
            { name: 'role', label: 'Role' },
            { name: 'name', label: 'Name' },
            { name: 'email', label: 'Email', type: 'email' },
            { name: 'volume', label: 'Expected monthly verifications', placeholder: 'e.g. 250k' },
            { name: 'use_case', label: 'One-sentence use case', type: 'textarea' },
          ]}
        />
      </section>
    </main>
  );
}

function InvestorsPage() {
  return (
    <main>
      <PageHero
        crumbs={[{ label: 'BitID', href: '/' }, { label: 'Investors' }]}
        title="Request the investor brief."
        lead="Infrastructure-tier funds. We respond personally."
      />
      <section className="section">
        <IntakeForm
          title="Investor brief"
          lead="One sentence on thesis fit gets you the brief faster."
          intent="investor"
          fields={[
            { name: 'name', label: 'Name' },
            { name: 'fund', label: 'Fund' },
            { name: 'role', label: 'Role' },
            { name: 'email', label: 'Email', type: 'email' },
            { name: 'thesis', label: 'One-sentence thesis fit', type: 'textarea' },
          ]}
        />
      </section>
    </main>
  );
}

/* ============================================================
   /press
   ============================================================ */

const PALETTE = [
  { name: 'bg/base', hex: '#0A0A0B', use: 'default background' },
  { name: 'bg/elevated', hex: '#141416', use: 'cards, panels' },
  { name: 'bg/inverse', hex: '#FAFAF7', use: 'whitepaper page' },
  { name: 'fg/primary', hex: '#FAFAF7', use: 'primary on dark' },
  { name: 'fg/muted', hex: '#A1A1AA', use: 'secondary copy' },
  { name: 'accent/anchor', hex: '#E8872C', use: 'Bitcoin moments' },
  { name: 'accent/signal', hex: '#CFFF50', use: 'verified indicators' },
  { name: 'border/subtle', hex: '#27272A', use: 'hairlines on dark' },
];

function PressPage() {
  return (
    <main>
      <PageHero
        crumbs={[{ label: 'BitID', href: '/' }, { label: 'Press' }]}
        title="Press kit."
        lead="One-liner, summary, founder bio, palette, and assets for media coverage."
      />
      <section className="section">
        <div className="container container--narrow">
          <article id="one-liner">
            <p className="eyebrow">One-liner</p>
            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 24, lineHeight: 1.4, color: 'var(--fg-primary-dark)', marginTop: 12 }}>
              BitID is the neutral identity layer for a machine-first world — one proof for humans, apps, and agents, anchored on Bitcoin.
            </p>
          </article>

          <hr className="divider" style={{ margin: '48px 0' }} />

          <article id="what-is-bitid">
            <p className="eyebrow">What is BitID</p>
            <h2 style={{ marginTop: 12, marginBottom: 16 }}>The summary.</h2>
            <p style={{ color: 'var(--fg-muted)' }}>BitID replaces the bundle of pay-per-check identity vendors — IDV, KYC, AML, sanctions, fraud, chargeback liability — with one always-on, zero-knowledge, Bitcoin-anchored primitive. Designed for humans, apps, and machine agents alike.</p>
            <p style={{ color: 'var(--fg-muted)' }}>Already used by 5 million Americans through Beem, the money app the BitID team also built. The whitepaper is public; developer early access is open; SDK and MCP server ship in Q3 2026.</p>
          </article>

          <hr className="divider" style={{ margin: '48px 0' }} />

          <article id="founder-bio">
            <p className="eyebrow">Founder</p>
            <h2 style={{ marginTop: 12, marginBottom: 16 }}>Akshay Krishnaiah.</h2>
            <p style={{ color: 'var(--fg-muted)' }}>
              Akshay invented wallet tokenization and identity tokenization at PayPal — work that now sits in the foundation of every modern wallet. He founded BitID with a team from Harvard, IIT, and UC after building Beem, a 5-million-user money app. <a href="https://patents.justia.com/search?q=akshay+Krishnaiah" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--fg-primary-dark)', borderBottom: '1px solid currentColor' }}>Patent history →</a>
            </p>
          </article>

          <hr className="divider" style={{ margin: '48px 0' }} />

          <article id="brand-assets">
            <p className="eyebrow">Brand assets</p>
            <h2 style={{ marginTop: 12, marginBottom: 16 }}>Logo and palette.</h2>
            <div className="shell-grid">
              <a href="/press/bitid-logo.svg" className="shell-card"><h3>Wordmark · SVG</h3><p>Black on transparent.</p></a>
              <a href="/press/bitid-logo-white.svg" className="shell-card"><h3>Wordmark · SVG (inverse)</h3><p>White on transparent.</p></a>
              <a href="/press/bitid-mark.svg" className="shell-card"><h3>Mark · SVG</h3><p>Square mark only.</p></a>
              <a href="/press/bitid-brand-guidelines.pdf" className="shell-card"><h3>Brand guidelines · PDF</h3><p>Type, color, voice rules.</p></a>
            </div>
          </article>

          <hr className="divider" style={{ margin: '48px 0' }} />

          <article id="palette">
            <p className="eyebrow">Palette</p>
            <h2 style={{ marginTop: 12, marginBottom: 16 }}>Color tokens.</h2>
            <div className="palette-grid">
              {PALETTE.map(p => (
                <div className="palette-swatch" key={p.name}>
                  <div className="chip-color" style={{ background: p.hex }}></div>
                  <div className="chip-meta">
                    <span className="name">{p.name}</span>
                    <span>{p.hex}</span>
                    <span style={{ opacity: 0.7 }}>{p.use}</span>
                  </div>
                </div>
              ))}
            </div>
          </article>

          <hr className="divider" style={{ margin: '48px 0' }} />

          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-muted)' }}>
            Press contact · <a href="mailto:press@bitid.org" style={{ color: 'var(--fg-primary-dark)' }}>press@bitid.org</a>
          </p>
        </div>
      </section>
      <PageSchema schema={{ "@context": "https://schema.org", "@type": "WebPage", "name": "BitID press kit", "url": "https://bitid.org/press" }} />
    </main>
  );
}

/* ============================================================
   /glossary
   ============================================================ */

const GLOSSARY = [
  ['zero-knowledge-proof-of-trust', 'Zero-knowledge proof of trust', 'A proof that asserts a property of an identity without revealing the underlying data.'],
  ['bitcoin-anchored-credential', 'Bitcoin-anchored credential', 'A credential whose validity is committed to Bitcoin\'s L1 via Merkle batching.'],
  ['delegated-agent-identity', 'Delegated agent identity', 'A scoped, revocable credential issued by a verified human to a machine agent.'],
  ['continuous-rescore', 'Continuous rescore', 'The practice of keeping an identity tier current through ongoing re-screening rather than a single point-in-time check.'],
  ['neutral-identity-layer', 'Neutral identity layer', 'Identity infrastructure that is portable across apps, networks, and platforms — not owned by any one of them.'],
  ['merkle-batch-anchor', 'Merkle-batch anchor', 'A Merkle root committing many BitID verifications to Bitcoin in a single ordinal inscription.'],
  ['compliance-tier', 'Compliance tier', 'A named level of regulatory depth (KYC, AML, EDD) attached to a BitID credential.'],
  ['revocation-key', 'Revocation key', 'The cryptographic key the human holds to terminate an agent\'s authority.'],
];

function GlossaryPage() {
  return (
    <main>
      <PageHero
        crumbs={[{ label: 'BitID', href: '/' }, { label: 'Glossary' }]}
        title="Glossary."
        lead="The vocabulary of a machine-first identity layer."
      />
      <section className="section">
        <div className="container container--narrow">
          <div className="shell-grid">
            {GLOSSARY.map(([slug, term, blurb]) => (
              <Link key={slug} href={`/glossary/${slug}`} className="shell-card">
                <h3>{term}</h3>
                <p>{blurb}</p>
                <p style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-muted)', marginTop: 12 }}>/glossary/{slug} →</p>
              </Link>
            ))}
          </div>
          <div className="placeholder-block">[Long-form content to be inserted from /BitID-Glossary-v1.md]</div>
        </div>
      </section>
      <PageSchema schema={{ "@context": "https://schema.org", "@type": "DefinedTermSet", "name": "BitID glossary", "url": "https://bitid.org/glossary" }} />
    </main>
  );
}

function GlossaryEntryPage({ slug }) {
  const entry = GLOSSARY.find(g => g[0] === slug);
  const term = entry ? entry[1] : slug;
  const blurb = entry ? entry[2] : '';
  return (
    <main>
      <PageHero
        crumbs={[
          { label: 'BitID', href: '/' },
          { label: 'Glossary', href: '/glossary' },
          { label: term }
        ]}
        title={term}
        lead={blurb}
      />
      <section className="section">
        <div className="container container--narrow">
          <div className="placeholder-block">[Long-form content to be inserted from /BitID-Glossary-v1.md — entry: {slug}]</div>
        </div>
      </section>
      <PageSchema schema={{
        "@context": "https://schema.org",
        "@type": "TechArticle",
        "headline": term,
        "description": blurb,
        "url": `https://bitid.org/glossary/${slug}`,
        "publisher": { "@type": "Organization", "name": "BitID" }
      }} />
    </main>
  );
}

/* ============================================================
   /vs/*
   ============================================================ */

function VsPayPerCheckPage() {
  return (
    <main>
      <PageHero
        crumbs={[{ label: 'BitID', href: '/' }, { label: 'Comparisons', href: '/' }, { label: 'Pay-per-check identity' }]}
        title="BitID vs pay-per-check identity."
        lead="One always-on credential, anchored on Bitcoin — versus a stack of vendors charging per call."
      />
      <section className="section">
        <div className="container container--narrow">
          <div className="placeholder-block">[Long-form content to be inserted from /BitID-Vs-Pages-v1.md — comparison: pay-per-check]</div>
        </div>
      </section>
      <PageSchema schema={{
        "@context": "https://schema.org", "@type": "FAQPage",
        "mainEntity": [{
          "@type": "Question",
          "name": "How does BitID differ from a pay-per-check identity stack?",
          "acceptedAnswer": { "@type": "Answer", "text": "BitID issues one always-on credential anchored on Bitcoin, replacing per-call charges across IDV, KYC, AML, fraud, and chargeback liability." }
        }]
      }} />
    </main>
  );
}

function VsClosedPage() {
  return (
    <main>
      <PageHero
        crumbs={[{ label: 'BitID', href: '/' }, { label: 'Comparisons', href: '/' }, { label: 'Closed identity' }]}
        title="BitID vs closed identity."
        lead="A neutral, portable credential — versus an identity primitive owned by a single platform."
      />
      <section className="section">
        <div className="container container--narrow">
          <div className="placeholder-block">[Long-form content to be inserted from /BitID-Vs-Pages-v1.md — comparison: closed]</div>
        </div>
      </section>
      <PageSchema schema={{
        "@context": "https://schema.org", "@type": "FAQPage",
        "mainEntity": [{
          "@type": "Question",
          "name": "How does BitID differ from a closed, platform-owned identity primitive?",
          "acceptedAnswer": { "@type": "Answer", "text": "BitID is neutral and portable across apps, networks, and platforms — not bound to a single super-app or platform owner." }
        }]
      }} />
    </main>
  );
}

/* ============================================================
   /legal
   ============================================================ */

function LegalIndexPage() {
  return (
    <main>
      <PageHero
        crumbs={[{ label: 'BitID', href: '/' }, { label: 'Legal' }]}
        title="Legal."
        lead="Terms of service, privacy posture, and acceptable-use policy."
      />
      <section className="section">
        <div className="container container--narrow">
          <div className="shell-grid">
            <Link href="/legal/terms" className="shell-card"><h3>Terms of Service</h3><p>Use of bitid.org and the BitID protocol.</p></Link>
            <Link href="/legal/privacy" className="shell-card"><h3>Privacy</h3><p>What we collect, what we don't, and how zero-knowledge changes the answer.</p></Link>
            <Link href="/legal/acceptable-use" className="shell-card"><h3>Acceptable Use</h3><p>What BitID may and may not be used for.</p></Link>
          </div>
        </div>
      </section>
    </main>
  );
}

function LegalSubPage({ slug, title }) {
  return (
    <main>
      <PageHero
        crumbs={[{ label: 'BitID', href: '/' }, { label: 'Legal', href: '/legal' }, { label: title }]}
        title={title}
        lead="Effective April 2026."
      />
      <section className="section">
        <div className="container container--narrow">
          <div className="placeholder-block">[Legal copy to be inserted — {slug}]</div>
        </div>
      </section>
    </main>
  );
}

/* ============================================================
   404
   ============================================================ */

function NotFoundPage() {
  return (
    <main>
      <PageHero
        crumbs={[{ label: 'BitID', href: '/' }, { label: '404' }]}
        title="404."
        lead="That page is not at this address."
      />
      <section className="section">
        <div className="container container--narrow">
          <Link href="/" className="btn btn--primary">Back to home</Link>
        </div>
      </section>
    </main>
  );
}

window.RoadmapPage = RoadmapPage;
window.DevelopersPage = DevelopersPage;
window.PartnersPage = PartnersPage;
window.InvestorsPage = InvestorsPage;
window.PressPage = PressPage;
window.GlossaryPage = GlossaryPage;
window.GlossaryEntryPage = GlossaryEntryPage;
window.VsPayPerCheckPage = VsPayPerCheckPage;
window.VsClosedPage = VsClosedPage;
window.LegalIndexPage = LegalIndexPage;
window.LegalSubPage = LegalSubPage;
window.NotFoundPage = NotFoundPage;

/* ============================================================
   AssetsChecklistPage — surfaces card-art delivery status.
   Mirrors docs/card-system-master-prompt.md §8.
   ============================================================ */
function AssetsChecklistPage() {
  const TIERS = [
    { key: 'explorer', name: 'Explorer', color: '#FF6A00', label: 'Neon Sunset',     front: false, back: true,  iso: true,  realworld: true,  sprite36: false },
    { key: 'expert',   name: 'Expert',   color: '#FFF200', label: 'Electric Yellow', front: true,  back: true,  iso: true,  realworld: true,  sprite36: false },
    { key: 'elite',    name: 'Elite',    color: '#00FF9F', label: 'Laser Mint',      front: true,  back: true,  iso: true,  realworld: true,  sprite36: false },
    { key: 'legend',   name: 'Legend',   color: '#BFFF00', label: 'Acid Lime',       front: true,  back: true,  iso: true,  realworld: true,  sprite36: false },
    { key: 'titan',    name: 'Titan',    color: '#00E5FF', label: 'Cyber Cyan',      front: true,  back: true,  iso: true,  realworld: true,  sprite36: false },
    { key: 'icon',     name: 'Icon',     color: '#BD00FF', label: 'Hyper Purple',    front: false, back: false, iso: false, realworld: false, sprite36: false },
  ];

  const all = TIERS.flatMap(t => ['front', 'back', 'iso', 'realworld', 'sprite36'].map(k => t[k]));
  const done = all.filter(Boolean).length;
  const total = all.length;
  const pct = Math.round((done / total) * 100);
  const missingIcon = !TIERS.find(t => t.key === 'icon').front;
  const sprites = TIERS.filter(t => t.sprite36).length;

  const Pill = ({ ok }) => (
    <span className={`ach-pill ${ok ? 'is-done' : 'is-pending'}`}>
      <span className="dot" /> {ok ? 'Done' : 'Pending'}
    </span>
  );

  return (
    <main className="ach-page">
      <div className="container">
        <p className="eyebrow">Asset pipeline · Beem Mastercard + BitID card system</p>
        <h1 style={{ marginTop: 12, marginBottom: 16 }}>What's done. What's pending.</h1>
        <p className="lead" style={{ maxWidth: 760 }}>
          Every Beem card asset on this site comes from the master design prompt
          archived at <code style={{ fontFamily: 'var(--font-mono)', fontSize: '0.92em', opacity: 0.9 }}>docs/card-system-master-prompt.md</code>. This page is the live status of that prompt's deliverables — what's wired in, what's still pending external generation.
        </p>

        <div className="ach-summary">
          <div className="ach-stat"><div className="ach-stat-n">{done}/{total}</div><div className="ach-stat-l">Assets delivered</div></div>
          <div className="ach-stat"><div className="ach-stat-n">{pct}%</div><div className="ach-stat-l">Pipeline complete</div></div>
          <div className="ach-stat"><div className="ach-stat-n">{missingIcon ? '1' : '0'}</div><div className="ach-stat-l">Tiers fully missing</div></div>
          <div className="ach-stat"><div className="ach-stat-n">{sprites}/6</div><div className="ach-stat-l">36-frame turntables</div></div>
        </div>

        <div className="ach-grid">
          {TIERS.map(t => (
            <div className="ach-card" key={t.key}>
              <div className="ach-card-head">
                <div className="ach-tier">{t.name}</div>
                <span className="ach-swatch" style={{ background: t.color }} title={t.label} />
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--fg-muted)' }}>
                {t.label} · {t.color}
              </div>
              <div className="ach-rows">
                <div className="ach-row"><span className="l">Front PNG</span><Pill ok={t.front} /></div>
                <div className="ach-row"><span className="l">Back PNG</span><Pill ok={t.back} /></div>
                <div className="ach-row"><span className="l">Iso pair</span><Pill ok={t.iso} /></div>
                <div className="ach-row"><span className="l">Real-world flatlay</span><Pill ok={t.realworld} /></div>
                <div className="ach-row"><span className="l">36-frame turntable</span><Pill ok={t.sprite36} /></div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 56, padding: 24, border: '1px solid var(--border-subtle)', borderRadius: 14, background: 'rgba(255,106,0,0.06)' }}>
          <p className="eyebrow" style={{ color: '#FF6A00' }}>Critical gap</p>
          <h3 style={{ margin: '8px 0 12px', fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.01em' }}>
            Icon tier (Hyper Purple <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, opacity: 0.7 }}>#BD00FF</span>) has no art.
          </h3>
          <p style={{ margin: 0, color: 'var(--fg-muted)', maxWidth: 720, lineHeight: 1.6 }}>
            The previous purple iso reference was rejected (wrong design language). Front + back, iso pair, and real-world flatlay all need to be regenerated from scratch using the locked design rules in §4 of the master prompt. Until then, anywhere on this site that previously showed the Icon tier renders a clearly-labeled "asset pending" placeholder.
          </p>
        </div>

        <div style={{ marginTop: 48, padding: 24, border: '1px solid var(--border-subtle)', borderRadius: 14 }}>
          <p className="eyebrow">Ground rules (master prompt §0, locked)</p>
          <ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: 8, color: 'var(--fg-muted)', fontSize: 14, lineHeight: 1.6 }}>
            <li>· Match the existing Expert / Elite / Legend / Titan references exactly. Do not invent.</li>
            <li>· Tier names are <strong style={{ color: 'var(--fg-primary-dark)' }}>Explorer · Expert · Elite · Legend · Titan · Icon</strong>. Not materials. Not virtues.</li>
            <li>· No QR on the front. No iridescent / metallic finishes. No serif <em>ID</em>. Vertical orientation only.</li>
            <li>· Color is the cardholder's BitID Trust tier. Same physical card across prepaid and credit; only the front-bottom-left product label differs.</li>
            <li>· Earlier agent-rendered SVG cards are rejected and have been removed from the codebase.</li>
          </ul>
        </div>
      </div>
    </main>
  );
}

window.AssetsChecklistPage = AssetsChecklistPage;