/* global React, BitidPass, Link */

function TierLadder() {
  // Six achievement tiers per the master prompt. Names are achievement-based
  // (durable under misbehavior), not virtue or material names.
  const ROWS = [
    {
      tier: 'explorer',
      headline: 'Start with email and a device.',
      desc: 'Confirm an email and pair a trusted device. The Explorer card is a baseline credential good for sign-in, low-risk attestations, agent identity, and prepaid spending up to monthly limits.',
      reward: 'BASELINE · 1.0×',
    },
    {
      tier: 'expert',
      headline: 'Add a government ID.',
      desc: 'One-time document verification raises confidence. The Expert card unlocks higher prepaid limits and reusable KYC across any partner that accepts BitID — no re-uploading the same passport across ten apps.',
      reward: 'PAYMENTS · 1.5×',
    },
    {
      tier: 'elite',
      headline: 'Add a live biometric.',
      desc: 'Live face match plus the verified document gives finance-grade assurance. The Elite card moves you onto the World Elite product, with full credit lines and travel benefits on the Mastercard network.',
      reward: 'CREDIT · 2.0×',
    },
    {
      tier: 'legend',
      headline: 'Anchor on Bitcoin.',
      desc: "Your verification root publishes to Bitcoin's chain. Every proof is publicly auditable, the trail is permanent, and the cost of forgery becomes the cost of rewriting Bitcoin.",
      reward: 'ON-CHAIN AUDIT · 2.5×',
    },
    {
      tier: 'titan',
      headline: 'Continuous attestation.',
      desc: 'Re-verify periodically and link additional anchors — payroll, banking, government records. The Titan card carries the strongest attestation surface available without giving up custody.',
      reward: 'CONTINUOUS · 3.0×',
    },
    {
      tier: 'icon',
      headline: 'Hold your own keys.',
      desc: 'Move the credential off our servers entirely. Self-custody, no recovery service, no trust in any third party. The top of the ladder. Issued by invitation.',
      reward: 'SELF-CUSTODY · 4.0×',
    },
  ];

  return (
    <section className="tier-ladder" id="tier-ladder">
      <div className="container">
        <p className="eyebrow">The tier ladder · unlock progressively</p>
        <h2 className="tl-h">Verify more. Unlock more.<br />Earn the next card.</h2>
        <p className="tl-sub">
          Identity is a ladder, not a switch. Start with email and device. Add government ID. Anchor on Bitcoin. Hold your own keys. Each step unlocks the next card, more capabilities, and a higher position in the BitID rewards program.
        </p>

        <div className="tl-rungs">
          {ROWS.map((r, i) => (
            <div className="tl-rung" key={r.tier}>
              <div className="tl-card">
                <BitidPass tier={r.tier} size="md" />
              </div>
              <div className="tl-copy">
                <div className="tl-tier-label">
                  <span className="tl-step">{String(i + 1).padStart(2, '0')}</span>
                  <span className="tl-tier-name">{r.tier.toUpperCase()}</span>
                </div>
                <h3 className="tl-headline">{r.headline}</h3>
                <p className="tl-desc">{r.desc}</p>
              </div>
              <div className="tl-reward">
                <div className="tl-reward-label">Position multiplier</div>
                <div className="tl-reward-val">{r.reward}</div>
              </div>
            </div>
          ))}
        </div>

        <p className="tl-pace">Begin at any tier. Climb at your own pace.</p>
        <div className="tl-ctas">
          <Link href="/developers" className="btn btn--primary tl-btn-orange">Join the early access list →</Link>
          <Link href="/whitepaper" className="btn btn--ghost">Read about the program</Link>
        </div>
        <p className="tl-foot">The BitID program · details in the whitepaper · token economics Q3 2026</p>
      </div>
    </section>
  );
}

window.TierLadder = TierLadder;