/* global React, KitChrome */
const { useState } = React;
const { StatusStrip, Nav, Footer, Eyebrow, MasterEquationArtifact, CrossLinkStrip, Stat, StatGrid } = KitChrome;

function App() {
  const [tab, setTab] = useState("Overview");
  return (
    <div className="k-app k-bg-radial">
      <StatusStrip right={<>
        <span>coin.health</span><span>·</span>
        <span>HCR (HEALTHCOIN™) · the rewards coin</span><span>·</span>
        <span style={{ color: "var(--accent-guardian)" }}>● Public ledger</span>
      </>} />
      <Nav currentId="coin" brand="HEALTHCOIN™" sub="coin.health · the rewards coin"
           links={[
             { label: "Overview",     href: "index.html" },
             { label: "Tokenomics",   href: "tokenomics.html" },
             { label: "Mining",       href: "mining-rewards.html" },
             { label: "Sister coin",  href: "../coin-healthcare/index.html" },
             { label: "Audits",       href: "audit.html" },
           ]}
           tab="Overview" setTab={setTab}
           primary="Trade on hc.exchange" secondary="Read the whitepaper" />
      <main className="k-main" data-screen-label="HEALTHCOIN coin.health">
        <section className="k-hero" style={{ borderBottom: "1px solid var(--border-1-dark)" }}>
          <div>
            <Eyebrow axis="HC">HCR (HEALTHCOIN™) · 21B Hard Cap · Rewards coin</Eyebrow>
            <h1>The coin your<br/><em>body earns.</em></h1>
            <p>HCR is the rewards coin of the Conceptual Health&reg; ecosystem. <strong>No founder allocation.</strong> No insider tokens. The genesis allocation is held in seven trust-locked buckets &mdash; published, on-chain, none redeemable by individuals. Every HCR in circulation traces to a person whose Master Equation score lifted on a measured axis. Walk a mile, fill a script, finish a session &mdash; the coin mints, the chain stamps it, anyone can verify it. The receipts are public.</p>
            <p style={{ fontSize: 13, color: "var(--fg-3)", marginTop: 14, fontStyle: "italic" }}>
              Looking for HCC — the coin your <em>data</em> earns? <a href="../coin-healthcare/index.html" style={{ color: "var(--accent-halo)", textDecoration: "underline" }}>coin.healthcare →</a>
            </p>
            <div className="k-hero-actions">
              <button className="k-btn k-btn-primary">I'm a trader →</button>
              <button className="k-btn k-btn-ghost">Read the whitepaper</button>
            </div>
          </div>
          <StatGrid paths={["coin.supply", "coin.mintedToday", "coin.holders", "coin.price"]} />
        </section>

        <section className="k-section-head">
          <div><Eyebrow axis="HC">The covenant</Eyebrow><h2>Three rules. No exceptions.</h2></div>
        </section>
        <div className="k-grid-3">
          {[
            { n: "01", t: "Hard cap.", b: "21,000,000,000 HCR. Codified in the genesis contract. Per-event yield halves at 10K, 50K, 250K, and 1M enrolled patients (1 \u2192 0.5 \u2192 0.25 \u2192 0.125 \u2192 0.0625 HCR per axis-lift)." },
            { n: "02", t: "Proof-of-health mint.", b: "HCR mints only when a verified clinical action lifts a patient's score on one of the eight axes. Provenance is stamped on the CH Chain \u2014 readable by anyone, anytime." },
            { n: "03", t: "Genesis in trust, not in pockets.", b: "Zero founder allocation. The genesis allocation lives in seven trust-locked buckets \u2014 Foundation 20%, Ecosystem 30%, Community Mining 25%, Clinical Partners 10%, Dev Fund 5%, Airdrop 5%, Strategic 5% \u2014 all visible on-chain, none redeemable by individuals." },
          ].map((r, i) => (
            <div className="k-card" key={i}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", color: "var(--accent-halo)" }}>{r.n}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, marginTop: 8, letterSpacing: "-0.01em" }}>{r.t}</div>
              <div style={{ fontSize: 14, color: "var(--fg-2)", marginTop: 10, lineHeight: 1.6 }}>{r.b}</div>
            </div>
          ))}
        </div>

        <section className="k-section-head">
          <div><Eyebrow axis="HC">Supply</Eyebrow><h2>Where the 21B sits today.</h2></div>
        </section>
        <div className="k-stat-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
          <Stat path="coin.supply" />
          <Stat path="coin.burnedToDate" />
          <Stat path="coin.nextHalving" />
        </div>
        <div className="k-stat-asof" style={{ marginTop: 8 }}>
          <span className="k-stat-asof-dot" aria-hidden="true">●</span>
          <span>Reconciled {window.CHBrand.metrics.asOfLabel} · derived live from CH Chain block height</span>
          <span className="k-status-sep">·</span>
          <a href="../chain/index.html" className="k-stat-asof-link">View the chain →</a>
        </div>

        <section className="k-section-head">
          <div><Eyebrow axis="HC">Sister coin</Eyebrow><h2>Two coins. One covenant.</h2></div>
        </section>
        <div className="k-card" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, padding: 0, overflow: "hidden" }}>
          <div style={{ padding: 28, borderRight: "1px solid var(--border-1)" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", color: "var(--accent-guardian)", textTransform: "uppercase" }}>HCR · this site</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 600, letterSpacing: "-0.01em", marginTop: 8 }}>What your body earns.</div>
            <p style={{ fontSize: 14, color: "var(--fg-2)", marginTop: 12, lineHeight: 1.6 }}>
              Mints when verified clinical action lifts your Master Equation score. Open to every CH account holder. No opt-in beyond signing up.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 12, marginTop: 16, fontSize: 13 }}>
              <span style={{ color: "var(--fg-3)" }}>Cap</span><span>21B HCR</span>
              <span style={{ color: "var(--fg-3)" }}>Mint trigger</span><span>Axis lift</span>
              <span style={{ color: "var(--fg-3)" }}>Opt-in?</span><span>Just sign up</span>
            </div>
          </div>
          <div style={{ padding: 28, background: "var(--bg-2)" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", color: "var(--accent-halo)", textTransform: "uppercase" }}>HCC · coin.healthcare ↗</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 600, letterSpacing: "-0.01em", marginTop: 8 }}>What your data earns.</div>
            <p style={{ fontSize: 14, color: "var(--fg-2)", marginTop: 12, lineHeight: 1.6 }}>
              Mints when you opt in to research data-sharing — researchers buy de-identified records, you get paid in HCC. Used to settle clinic visits, scripts, rides, CME.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 12, marginTop: 16, fontSize: 13 }}>
              <span style={{ color: "var(--fg-3)" }}>Cap</span><span>21B HCC</span>
              <span style={{ color: "var(--fg-3)" }}>Mint trigger</span><span>Opt-in + clinical action; or data sale</span>
              <span style={{ color: "var(--fg-3)" }}>Opt-in?</span><span>Required</span>
            </div>
            <a href="../coin-healthcare/index.html" style={{ display: "inline-block", marginTop: 18, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--accent-halo)", textDecoration: "none", letterSpacing: "0.05em" }}>
              Open coin.healthcare →
            </a>
          </div>
        </div>

        <section className="k-section-head">
          <div><Eyebrow axis="HC">Genesis allocation</Eyebrow><h2>Where the 21B start. Trust-locked, on-chain.</h2></div>
        </section>
        <div className="k-card" style={{ padding: 0, overflow: "hidden" }}>
          <div style={{ display: "flex", height: 36, fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", color: "var(--bg-0)" }}>
            <div style={{ width: "20%", background: "var(--axis-po)",  display: "flex", alignItems: "center", justifyContent: "center" }}>FOUNDATION 20%</div>
            <div style={{ width: "30%", background: "var(--axis-pv)",  display: "flex", alignItems: "center", justifyContent: "center" }}>ECOSYSTEM 30%</div>
            <div style={{ width: "25%", background: "var(--axis-nm)",  display: "flex", alignItems: "center", justifyContent: "center" }}>COMMUNITY MINING 25%</div>
            <div style={{ width: "10%", background: "var(--axis-ta)",  display: "flex", alignItems: "center", justifyContent: "center" }}>CLINICAL 10%</div>
            <div style={{ width: "5%",  background: "var(--axis-er)",  display: "flex", alignItems: "center", justifyContent: "center", fontSize: 9 }}>DEV 5%</div>
            <div style={{ width: "5%",  background: "var(--axis-rs)",  display: "flex", alignItems: "center", justifyContent: "center", fontSize: 9 }}>AIRDROP 5%</div>
            <div style={{ width: "5%",  background: "var(--axis-sc)",  display: "flex", alignItems: "center", justifyContent: "center", fontSize: 9 }}>STRATEGIC 5%</div>
          </div>
          <div style={{ padding: 24, fontSize: 14, color: "var(--fg-2)", lineHeight: 1.7 }}>
            <p style={{ margin: 0 }}>
              Seven trust-locked buckets. <strong style={{ color: "var(--fg-1)" }}>None redeemable by individuals.</strong> The Foundation bucket funds the trust deed and patient-advocate budget. Ecosystem funds clinic onboarding, validator grants, and community-chain seeds. Community Mining is the patient mint pool that pays out as axis-lift events happen. Clinical Partners covers free-tier subsidies and parish-clinic backstop. Dev Fund pays open-source bounties. Airdrop is reserved for the first 1M enrolled patients (5,000 HCR each, vested over the patient-count halvings). Strategic is acquisition reserve.
            </p>
            <p style={{ margin: "14px 0 0", fontStyle: "italic", color: "var(--fg-3)" }}>
              Every wallet above is published on the chain explorer. Every movement requires multi-sig with a Trust Council member who is structurally independent of CH employment.
            </p>
          </div>
        </div>

        <section className="k-section-head">
          <div><Eyebrow axis="HC">Halving \u00b7 milestone-triggered</Eyebrow><h2>Per-event yield halves at every milestone.</h2></div>
        </section>
        <div className="k-grid-3">
          {[
            { era: "Era 0 \u00b7 Genesis", trigger: "0 \u2013 10K patients", yield: "1.0 HCR / event", state: "active" },
            { era: "Era 1",                trigger: "10K \u2013 50K patients", yield: "0.5 HCR / event", state: "next" },
            { era: "Era 2",                trigger: "50K \u2013 250K patients", yield: "0.25 HCR / event" },
            { era: "Era 3",                trigger: "250K \u2013 1M patients",  yield: "0.125 HCR / event" },
            { era: "Era 4",                trigger: "\u2265 1M patients",        yield: "0.0625 HCR / event" },
            { era: "Asymptote",            trigger: "approach to 21B cap",       yield: "supply curve flattens" },
          ].map((r, i) => (
            <div className="k-card" key={i} style={r.state === "active" ? { borderColor: "var(--accent-guardian)" } : {}}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", color: r.state === "active" ? "var(--accent-guardian)" : (r.state === "next" ? "var(--accent-halo)" : "var(--fg-3)"), textTransform: "uppercase" }}>
                {r.era} {r.state === "active" && "\u00b7 \u25CF live"} {r.state === "next" && "\u00b7 next"}
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600, marginTop: 8 }}>{r.trigger}</div>
              <div style={{ fontSize: 14, color: "var(--fg-2)", marginTop: 6 }}>{r.yield}</div>
            </div>
          ))}
        </div>

        <section className="k-section-head">
          <div><Eyebrow axis="HC">Bonus pools \u00b7 over the base mint</Eyebrow><h2>What stacks: family, referral, streaks.</h2></div>
        </section>
        <div className="k-grid-3">
          <div className="k-card">
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", color: "var(--accent-clinical)", textTransform: "uppercase" }}>Family Pool</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, marginTop: 8 }}>One household. One pool.</div>
            <p style={{ fontSize: 13, color: "var(--fg-2)", marginTop: 10, lineHeight: 1.7 }}>
              Up to 6 members per pool. Pool earns the higher of <em>sum-of-axes</em> or <em>weakest-link \u00d7 6</em> &mdash; so the family is rewarded for lifting the member who needs it most. Distribution is automatic at month-close, weighted by each member's axis-lift contribution.
            </p>
            <div style={{ marginTop: 14, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)" }}>
              + 1.20\u00d7 base mint when all 6 axes lift in the same month
            </div>
          </div>
          <div className="k-card">
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", color: "var(--accent-halo)", textTransform: "uppercase" }}>Referral</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, marginTop: 8 }}>Bring one. Earn from their first lift.</div>
            <p style={{ fontSize: 13, color: "var(--fg-2)", marginTop: 10, lineHeight: 1.7 }}>
              When a referred patient completes onboarding and posts their first axis-lift event, both wallets mint a one-time <strong style={{ color: "var(--fg-1)" }}>50 HCR</strong> bonus. Capped at 12 successful referrals per year. No multi-level. No payout for sign-ups alone &mdash; the referee must lift.
            </p>
            <div style={{ marginTop: 14, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)" }}>
              50 HCR \u00d7 2 wallets \u00b7 capped at 12 / yr \u00b7 lift-gated
            </div>
          </div>
          <div className="k-card">
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", color: "var(--accent-guardian)", textTransform: "uppercase" }}>Streak milestones</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, marginTop: 8 }}>Show up. Stack up.</div>
            <p style={{ fontSize: 13, color: "var(--fg-2)", marginTop: 10, lineHeight: 1.7 }}>
              Per-axis daily-action streaks unlock fixed bonuses at exact thresholds &mdash; not gradient curves. Miss a day, the counter freezes (it doesn't reset) so a return to discipline picks up where you left off.
            </p>
            <div style={{ marginTop: 14, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-2)", lineHeight: 1.8 }}>
              7 d &nbsp;\u2192 +5 HCR<br/>
              30 d &nbsp;\u2192 +25 HCR<br/>
              90 d &nbsp;\u2192 +100 HCR<br/>
              365 d \u2192 +1,000 HCR
            </div>
          </div>
        </div>

        <section className="k-section-head">
          <div><Eyebrow axis="HC">Audits</Eyebrow><h2>Open the books. Read the chain.</h2></div>
        </section>
        <div className="k-grid-3">
          {[
            { t: "Continuous on-chain audit",  b: "Every HCR mint is a public block. Block explorer is open, no login. The chain is the audit.", cta: "Open the explorer \u2192", href: "../chain/index.html" },
            { t: "Annual SOC 2 + ISO 27001",   b: "Operations, key custody, and access controls audited Type II. Continuous monitoring between attestations.", cta: "Compliance posture \u2192", href: "../_shared/trust-template.html?from=coin#compliance" },
            { t: "Genesis contract",            b: "The 21B hard cap, mint logic, halving milestones, and seven-bucket genesis allocation are codified in the genesis contract. Read it line by line.", cta: "Read the contract \u2192", href: "../_shared/trust-template.html?from=coin#token" },
          ].map((r, i) => (
            <div className="k-card" key={i}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600 }}>{r.t}</div>
              <div style={{ fontSize: 13, color: "var(--fg-2)", marginTop: 8, lineHeight: 1.6 }}>{r.b}</div>
              <a href={r.href} style={{ display: "inline-block", marginTop: 12, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--accent-clinical)", textDecoration: "none" }}>{r.cta}</a>
            </div>
          ))}
        </div>
      </main>
      <CrossLinkStrip currentId="coin" ids={["exchange", "chain", "corp"]} />
      <MasterEquationArtifact />
      <Footer name="HEALTHCOIN™ · coin.health" currentId="coin" />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);