/* global React, BeemPhotoIso, BeemPhotoCard, BeemPhotoTwoUp, BitidEnabledSection, TierLadder, SchemaCollapse, SchemaAgent, Link */

function HomePage() {
  return (
    <main>
      {/* 1. Hero */}
      <section className="hero">
        <div className="hero-grid-bg" aria-hidden="true"></div>
        <div className="hero-inner">
          <p className="eyebrow" style={{ marginBottom: 24 }}>BitID · Whitepaper v0.9 · April 2026</p>
          <h1>The identity layer<br />for a machine-first world.</h1>
          <p className="lead">
            One proof. For humans, for apps, for agents. Always current. Always private.
            Anchored on Bitcoin. Already used by 5 million Americans.
          </p>
          <div className="hero-ctas">
            <Link href="/whitepaper" className="btn btn--primary">Read the whitepaper</Link>
            <Link href="/partners" className="btn btn--ghost">Talk to the team</Link>
          </div>
          <p className="hero-creds">
            <span>5M+ verified users</span>
            <span className="sep">·</span>
            <span>Bitcoin-anchored architecture</span>
            <span className="sep">·</span>
            <span>Whitepaper v0.9</span>
            <span className="sep">·</span>
            <span>Public beta · Q3 2026</span>
          </p>
          <div className="hero-card-mount">
            <BeemPhotoIso tier="legend" width={720} />
          </div>
          <p className="card-family-caption">
            The Beem Card · <span style={{ color: '#BFFF00' }}>Legend tier</span>. <span className="hint">Color is the cardholder's BitID Trust tier.</span> A real Mastercard on the front, a verifiable BitID identity on the back.
          </p>
        </div>
      </section>

      {/* 2. Trust band */}
      <section className="trust-band" aria-label="Trust">
        <div className="trust-band-inner">
          <div className="trust-line">Built on Bitcoin.</div>
          <div className="trust-line">Used by 5 million Americans.</div>
          <div className="trust-line">Built for the agent era.</div>
        </div>
      </section>

      {/* 2.5 — Beem Card section */}
      <section className="beem-section" id="beem-card">
        <div className="container">
          <p className="eyebrow">The Beem Card · powered by BitID</p>
          <h2>Two cards. One identity.<br/>Real Mastercards.</h2>
          <p className="lead" style={{ fontSize: 22, color: 'var(--fg-muted)' }}>
            The Beem Card is a Mastercard on the front, a BitID-enabled identity on the back. Tap it at a payment terminal — it spends. Show its back-side QR — it proves you. Same chip. Same network. One primitive underneath.
          </p>
          <BeemPhotoTwoUp left="explorer" right="legend" />
          <p className="beem-card-hint">The card's color is the cardholder's BitID Trust tier · six tiers, same physical card</p>
          <div className="beem-features">
            <div className="feat"><div className="lbl">Tap to pay</div><div className="body">Standard contactless. Both products run on the Mastercard network.</div></div>
            <div className="feat"><div className="lbl">Show to prove</div><div className="body">QR on the back resolves to a fresh, scoped, expiring BitID proof.</div></div>
            <div className="feat"><div className="lbl">One object</div><div className="body">Same card, same chip, same person — payment and identity collapsed into one.</div></div>
          </div>
          <p className="beem-italic">We have been carrying two pieces of plastic — one to pay, one to prove. There is no good reason for that.</p>
          <p className="beem-foot">
            World Debit Prepaid available with the next Beem hardware revision · World Elite by invitation · Partners → <a href="mailto:partners@bitid.org">partners@bitid.org</a>
          </p>
        </div>
      </section>

      {/* 2.7 — BitID-enabled mark */}
      <BitidEnabledSection />

      {/* 3. Problem — two-column (FIX 2) */}
      <section className="section" id="the-problem">
        <div className="container">
          <p className="eyebrow">The problem</p>
          <h2 style={{ marginTop: 12, fontSize: 'clamp(40px, 7vw, 88px)', lineHeight: 1.02, letterSpacing: '-0.04em', maxWidth: 1100 }}>
            Identity is broken on both sides of every transaction.
          </h2>
          <div className="problem-2col">
            <div>
              <p className="eyebrow">For people</p>
              <h3>You re-prove who you are, every time.</h3>
              {[
                ['Re-uploading the same ID', 'a dozen sites a year'],
                ['Getting locked out of your own accounts', 'recovery in days'],
                ['Data sitting in a vendor breach', 'you never consented to'],
                ["Bots and deepfakes pretending to be you", "you cannot prove they're not"],
              ].map(([l, r]) => (
                <div className="problem-row" key={l}>
                  <span className="l">{l}</span>
                  <span className="r">{r}</span>
                </div>
              ))}
            </div>
            <div>
              <p className="eyebrow">For business</p>
              <h3>You pay for identity five times.</h3>
              {[
                ['IDV', 'pay per check'],
                ['KYC', 'pay per check'],
                ['AML / sanctions', 'pay per check'],
                ['Fraud', 'pay per check, plus losses'],
                ['Chargebacks', 'pay per dispute, plus margin'],
              ].map(([l, r]) => (
                <div className="problem-row" key={l}>
                  <span className="l">{l}</span>
                  <span className="r">{r}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="problem-resolve">
            <span className="lbl">BitID</span>
            <span className="body">One primitive · used once, reusable forever · privacy by construction · no per-check rent · built to reward, not extract</span>
          </div>
        </div>
      </section>

      {/* 4. Audience scenes */}
      <Scene
        eyebrow="For apps"
        title="One integration. Every check you used to pay for."
        body={<>When BitID's SDK ships in Q3, this becomes one drop-in primitive. Until then, <Link href="/developers" style={{ borderBottom: '1px solid currentColor' }}>join the early access list →</Link></>}
        visual={<SchemaCollapse />}
      />
      <Scene
        reverse
        eyebrow="For consumers"
        title="Verify once. Everywhere. Forever."
        body="Your identity, always current, never shared. Already protecting 5 million Beem users — opening to the world this year."
        visual={<BeemPhotoCard tier="titan" side="front" width={300} />}
      />
      <Scene
        eyebrow="For agents"
        title="Your agent needs an ID too."
        body="When humans authorize machines to act on their behalf, the machines need a credential — scoped, revocable, cryptographically provable. We are building the only identity primitive designed for them from day one."
        visual={<SchemaAgent />}
      />

      {/* Tier ladder (gamification rung) */}
      <TierLadder />

      {/* 5. Market moment */}
      <section className="section" id="market-moment">
        <div className="container container--narrow">
          <p className="eyebrow">The market moment</p>
          <h2 style={{ marginTop: 12 }}>A $265B surface. One primitive.</h2>
          <div className="market-table-wrap">
            <table className="market-table">
              <thead>
                <tr>
                  <th>Segment</th>
                  <th style={{ textAlign: 'right' }}>Projected 2030</th>
                </tr>
              </thead>
              <tbody>
                <tr><td>Pure identity verification</td><td>$29B – $34B</td></tr>
                <tr><td>KYC software</td><td>$13B – $16B</td></tr>
                <tr><td>Fraud prevention</td><td>$90B+</td></tr>
                <tr><td>Digital identity (full layer)</td><td>$133B</td></tr>
                <tr className="total"><td>Total addressable surface</td><td>~$265B</td></tr>
              </tbody>
            </table>
          </div>
          <p className="pull-caption" style={{ marginTop: 32 }}>— Market segment breakdown, projected 2030. See <Link href="/whitepaper" style={{ borderBottom: '1px solid currentColor' }}>the whitepaper</Link> for the full thesis.</p>
        </div>
      </section>

      {/* 6. Why now */}
      <section style={{ padding: '0 var(--pad-x)' }}>
        <div className="container">
          <div className="two-col">
            <div>
              <p className="eyebrow">Why now</p>
              <h3 style={{ margin: '12px 0 16px' }}>The agent era arrived.</h3>
              <p>Every category-leading app is racing to be agent-native. Agents need identity that humans, apps, and other machines can verify — without exposing anything they shouldn't. The legacy stack was not built for this. We are.</p>
            </div>
            <div>
              <p className="eyebrow">Why now</p>
              <h3 style={{ margin: '12px 0 16px' }}>Trust is collapsing.</h3>
              <p>First-party fraud, deepfakes, synthetic identity, drained chargebacks. The pay-per-check stack can't keep up because it stops at the first verification. BitID rescores continuously and anchors the result on Bitcoin — the most durable settlement layer that exists.</p>
            </div>
          </div>
        </div>
      </section>

      {/* 7. Founders */}
      <section className="section">
        <div className="container">
          <div className="founders">
            <p className="eyebrow">Founders</p>
            <h2 style={{ marginTop: 12 }}>Built by the team that invented identity tokenization.</h2>
            <p>
              BitID was founded by <a href="https://patents.justia.com/search?q=akshay+Krishnaiah" target="_blank" rel="noopener noreferrer"><strong>Akshay Krishnaiah</strong></a>, who invented wallet tokenization and identity tokenization at PayPal, with a team from <strong>Harvard, IIT, and UC</strong>. We built BitID to make Beem — our 5-million-user money app — machine-ready. Nothing in the market could give a machine a verifiable, compliant, privacy-preserving identity the way humans had. So we built it. What came out turned out to be the identity layer every company needs to survive the agent era. We are opening it up.
            </p>
            <div className="cred-chips">
              <span>Foundational tokenization patents</span>
              <span className="sep">·</span>
              <span>Beem · 5M users</span>
              <span className="sep">·</span>
              <span>Harvard · IIT · UC</span>
            </div>
            <div>
              <Link href="/about" className="inline-link">Read the full origin →</Link>
            </div>
          </div>
        </div>
      </section>

      {/* 8. Roadmap band */}
      <section className="section section--tight" style={{ borderTop: '1px solid var(--border-subtle)' }}>
        <div className="container container--narrow">
          <p className="eyebrow">Roadmap</p>
          <h2 style={{ marginTop: 12 }}>Public roadmap. Real dates.</h2>
          <div className="roadmap-chips">
            <div className="chip is-available">
              <span><span className="meta">Q2 2026</span> · <span className="title">Whitepaper v0.9 preprint</span></span>
              <span className="status">available</span>
            </div>
            <div className="chip is-available">
              <span><span className="meta">Q2 2026</span> · <span className="title">Developer early access opens</span></span>
              <span className="status">available</span>
            </div>
            <div className="chip">
              <span><span className="meta">Q3 2026</span> · <span className="title">SDK public beta · MCP server</span></span>
              <span className="status">upcoming</span>
            </div>
            <div className="chip">
              <span><span className="meta">Q3 2026</span> · <span className="title">Independent cryptographic audit</span></span>
              <span className="status">upcoming</span>
            </div>
          </div>
          <div style={{ marginTop: 24 }}>
            <Link href="/roadmap" className="inline-link">Full roadmap →</Link>
          </div>
        </div>
      </section>

      {/* 9. Final CTA band */}
      <section className="final-cta">
        <h2>The identity layer is being rewritten. Be early.</h2>
        <div className="final-cta-row">
          <Link href="/whitepaper" className="btn btn--primary">Read the whitepaper</Link>
          <Link href="/developers" className="btn btn--ghost">Join developer early access</Link>
          <Link href="/partners" className="btn btn--ghost">Talk to the team</Link>
        </div>
      </section>
    </main>
  );
}

function Scene({ eyebrow, title, body, visual, reverse }) {
  return (
    <section className="scene">
      <div className={`scene-grid ${reverse ? 'scene-grid--reverse' : ''}`}>
        <div className="scene-copy">
          <p className="eyebrow">{eyebrow}</p>
          <h2 style={{ marginTop: 12 }}>{title}</h2>
          <p className="lead" style={{ marginTop: 16 }}>{body}</p>
        </div>
        <div className="scene-visual" aria-hidden="false">{visual}</div>
      </div>
    </section>
  );
}

window.HomePage = HomePage;