// CHONK BIO — homepage
// Formation Bio aesthetic: cream paper, editorial display, generous whitespace,
// hi-def imagery. Chonk cutouts are the brand foil — juxtaposed against
// slick clinical interfaces (dashboards, trial monitors, molecule viewers).

/* Hi-def imagery — drug discovery & manufacturing. Unsplash. */
const IMG = {
  scientist:    "https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=2000&q=92&auto=format&fit=crop",
  vials:        "https://images.unsplash.com/photo-1582719471384-894fbb16e074?w=2000&q=92&auto=format&fit=crop",
  pipette:      "https://images.unsplash.com/photo-1530026405186-ed1f139313f8?w=2000&q=92&auto=format&fit=crop",
  pills:        "https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?w=2000&q=92&auto=format&fit=crop",
  molecule:     "https://images.unsplash.com/photo-1628595351029-c2bf17511435?w=2000&q=92&auto=format&fit=crop",
  manufacturing:"https://images.unsplash.com/photo-1631549916768-4119b2e5f926?w=2000&q=92&auto=format&fit=crop",
  microscope:   "https://images.unsplash.com/photo-1582719471137-c3967ffb1c42?w=2000&q=92&auto=format&fit=crop",
  dna:          "https://images.unsplash.com/photo-1559757175-0eb30cd8c063?w=2000&q=92&auto=format&fit=crop",
  capsules:     "https://images.unsplash.com/photo-1471864190281-a93a3070b6de?w=2000&q=92&auto=format&fit=crop",
  lab:          "https://images.unsplash.com/photo-1581093588401-fbb62a02f120?w=2000&q=92&auto=format&fit=crop",
  petCanine:    "https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=2000&q=92&auto=format&fit=crop",
  petFeline:    "https://images.unsplash.com/photo-1574158622682-e40e69881006?w=2000&q=92&auto=format&fit=crop"
};

/* ============================================================
   HERO — editorial display + chonk juxtaposed with clinical UI
   ============================================================ */

const Hero = () => (
  <section className="panel" style={{ paddingTop: 56, paddingBottom: 80, position: "relative" }}>
    <div className="wrap">
      <Eyebrow>A pet pharmaceutical company</Eyebrow>

      <h1 className="display" style={{ fontSize: "clamp(56px, 9vw, 140px)", marginTop: 28, marginBottom: 32, maxWidth: 1200 }}>
        Sniffing out the best drugs <span className="italic-accent">for the world's animals.</span>
      </h1>

      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "end" }}>
        <p style={{ fontSize: 22, lineHeight: 1.5, color: "var(--ink-2)", maxWidth: 700 }}>
          We license clinical-stage molecules pharma has left behind and finish them for
          the species who would benefit. Twentyfold cheaper than human pharma. Twelve-month
          pivotal. Four programs advancing, two in pivotal trials today.
        </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "flex-end" }}>
          <a href="our-model.html" className="btn btn-primary">Our model →</a>
          <a href="licensing-and-pipeline.html" className="btn btn-secondary">See the pipeline</a>
        </div>
      </div>
    </div>

    {/* The juxtaposition: a slick clinical-trial dashboard with Chonksy
        casually leaning into frame on the right. */}
    <div className="wrap" style={{ marginTop: 80 }}>
      <div style={{ position: "relative", borderRadius: 24, overflow: "visible" }}>
        <ClinicalDashboard />
        <ChonkCutout id="chonksy" h={460}
          style={{ position: "absolute", right: -24, bottom: -36, pointerEvents: "none", zIndex: 2 }} />
      </div>
    </div>

    {/* Stats strip */}
    <div className="wrap" style={{ marginTop: 96 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }}>
        {[
          ["~$80M",  "Per program",         "vs $1.5–2.6B in human pharma"],
          ["12 mo",  "Pivotal end-to-end",  "vs 6–9 years in human pharma"],
          ["208 → 04","Live funnel",         "scouted assets advancing"],
          ["~1B",    "Patients",            "companion animals, globally"]
        ].map(([big, mid, sub]) => (
          <div key={mid} style={{ background: "var(--paper)", padding: 28 }}>
            <Mono>{mid}</Mono>
            <div className="display" style={{ fontSize: 44, marginTop: 12, marginBottom: 8 }}>{big}</div>
            <div style={{ fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.45 }}>{sub}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ============================================================
   ClinicalDashboard — the slick UI the hero chonk leans against
   ============================================================ */
const ClinicalDashboard = () => (
  <div className="surface" style={{ borderRadius: 20, boxShadow: "var(--shadow-lg)" }}>
    <div className="surface-header">
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <span style={{ display: "inline-flex", gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: "oklch(0.85 0.15 28)" }} />
          <span style={{ width: 10, height: 10, borderRadius: 999, background: "oklch(0.90 0.16 90)" }} />
          <span style={{ width: 10, height: 10, borderRadius: 999, background: "oklch(0.85 0.18 145)" }} />
        </span>
        <span className="surface-title">chonk.bio / ops / studies / CHK-001</span>
      </div>
      <span className="status status-on">recording · 09:42:14 PT</span>
    </div>
    <div className="surface-body">
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 18 }}>
        {/* Enrollment */}
        <div className="card-flat" style={{ padding: 16 }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
            <Mono>Enrollment</Mono>
            <Mono style={{ color: "var(--signal-deep)" }}>+8 today</Mono>
          </div>
          <div className="display" style={{ fontSize: 36, fontFamily: "var(--font-sans)", fontWeight: 500 }}>
            412 <span style={{ color: "var(--ink-soft)", fontSize: 18 }}>/ 500</span>
          </div>
          <div className="bar-track" style={{ marginTop: 10 }}>
            <div className="bar-fill" style={{ width: "82%" }} />
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10, fontSize: 11, color: "var(--ink-soft)", fontFamily: "var(--font-mono)" }}>
            <span>Pivotal · CHK-001</span>
            <span>82% · on plan</span>
          </div>
        </div>
        {/* AE rate */}
        <div className="card-flat" style={{ padding: 16 }}>
          <Mono>Adverse events</Mono>
          <div className="display" style={{ fontSize: 36, marginTop: 6, fontFamily: "var(--font-sans)", fontWeight: 500 }}>3.4%</div>
          <div style={{ marginTop: 10 }}>
            <SparkECG width={210} height={42} />
          </div>
          <div style={{ fontSize: 11, color: "var(--ink-soft)", fontFamily: "var(--font-mono)" }}>
            below Cytopoint label · 30d rolling
          </div>
        </div>
        {/* Sites active */}
        <div className="card-flat" style={{ padding: 16 }}>
          <Mono>Active sites</Mono>
          <div className="display" style={{ fontSize: 36, marginTop: 6, fontFamily: "var(--font-sans)", fontWeight: 500 }}>38 / 38</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 4, marginTop: 12 }}>
            {Array.from({ length: 38 }).map((_, i) => (
              <span key={i} style={{ width: 8, height: 8, borderRadius: 2, background: i < 36 ? "var(--signal)" : "var(--warm)" }} />
            ))}
          </div>
          <div style={{ fontSize: 11, color: "var(--ink-soft)", marginTop: 8, fontFamily: "var(--font-mono)" }}>
            36 enrolling · 2 on hold
          </div>
        </div>
      </div>

      {/* Program list */}
      <div style={{ marginTop: 18 }}>
        <table className="tbl">
          <thead>
            <tr><th>Program</th><th>Indication</th><th>Stage</th><th>Lead</th><th style={{ width: 240 }}>Progress</th><th style={{ textAlign: "right" }}>Peak</th></tr>
          </thead>
          <tbody>
            {[
              ["CHK-001", "Canine atopic dermatitis", "Pivotal", "platypus", 82, "$480M"],
              ["CHK-002", "Feline OA pain",            "Pivotal", "walrus",   62, "$320M"],
              ["CHK-003", "Canine cognitive decline",  "TAS",     "walrus",   22, "$220M"],
              ["CHK-004", "Canine lymphoma",           "INAD",    "platypus", 8,  "$140M"]
            ].map(([code, ind, stage, lead, pct, peak], i) => (
              <tr key={code}>
                <td style={{ fontFamily: "var(--font-mono)", color: "var(--signal-deep)", fontSize: 12 }}>{code}</td>
                <td>{ind}</td>
                <td><span className="status status-on">{stage}</span></td>
                <td><ChonkAvatar id={lead} size={22} /></td>
                <td><div className="bar-track"><div className="bar-fill" style={{ width: `${pct}%` }} /></div></td>
                <td style={{ textAlign: "right", fontFamily: "var(--font-mono)", fontSize: 12 }}>{peak}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </div>
);

/* ============================================================
   What we do — explainer w/ chonk + cards
   ============================================================ */
const WhatWeDo = () => (
  <section className="panel-warm" style={{ padding: "120px 0", position: "relative" }}>
    <div className="wrap">
      <Eyebrow>What we do</Eyebrow>
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80, alignItems: "start", marginTop: 24 }}>
        <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 84px)", maxWidth: 880 }}>
          We don't invent molecules. <span className="italic-accent">We finish them.</span>
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--ink-2)", paddingTop: 12 }}>
          Pharma has dozens of clinical-stage assets in cold storage — Phase 2 programs killed for dose, formulation, or tolerability, never biology. We license the molecules, re-translate them for the species who would benefit, and run the pivotal in twelve months.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginTop: 80 }}>
        {[
          {
            n: "01", t: "Scout",   body: "208 shelved Phase 2 assets scored. 13 in active diligence. 12 in-licensor relationships across pharma, biotech, and academic spin-outs. Median up-front $3M, royalty plus milestones.",
            chonk: "seabrah"
          },
          {
            n: "02", t: "Develop", body: "Vertically integrated. 38 specialty veterinary sites. Biostatistics in-house. Pivotal closes in twelve months. The platform lets seven humans run a 412-dog study end-to-end.",
            chonk: "walrus"
          },
          {
            n: "03", t: "Realize", body: "Direct specialty distribution, or hand-off to a Big Five animal-health partner. Peak-sales target $400–700M per asset. A 5–9× return on $80M of program cost.",
            chonk: "blueotter"
          }
        ].map(c => (
          <article key={c.n} className="card" style={{ padding: 28, position: "relative", overflow: "hidden", minHeight: 360 }}>
            <Mono>Step {c.n}</Mono>
            <h3 className="display" style={{ fontSize: 34, marginTop: 12, marginBottom: 14 }}>{c.t}.</h3>
            <p style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.6, maxWidth: 280 }}>{c.body}</p>
            <ChonkCutout id={c.chonk} h={170} style={{ position: "absolute", right: -16, bottom: -10, opacity: 0.95 }} />
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ============================================================
   The math — twentyfold cheaper, w/ comparison surface
   ============================================================ */
const TheMath = () => (
  <section className="panel" style={{ padding: "120px 0" }}>
    <div className="wrap">
      <Eyebrow>The math</Eyebrow>
      <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 84px)", marginTop: 24, maxWidth: 1100 }}>
        A different math. <span className="italic-accent">A different kind of company.</span>
      </h2>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, marginTop: 64, alignItems: "start" }}>
        {/* comparison table — slick UI */}
        <div className="surface">
          <div className="surface-header">
            <span className="surface-title">programs.unit-economics.compare</span>
            <span className="status status-on">live · q2 '26</span>
          </div>
          <div className="surface-body">
            <table className="tbl">
              <thead><tr><th>Metric</th><th style={{ textAlign: "right" }}>Human pharma</th><th style={{ textAlign: "right" }}>Chonk Bio</th></tr></thead>
              <tbody>
                {[
                  ["Per-program cost",     "$1.5–2.6B", "~$80M"],
                  ["Time to approval",     "10–15 y",    "4–5 y"],
                  ["Pivotal trial length", "6–9 y",      "12 mo"],
                  ["Asset multiple at exit","2–3×",      "5–9×"],
                  ["Patient cohort size",  "2,000+",     "300–500"],
                  ["Regulatory pathway",   "FDA CDER",   "FDA CVM"]
                ].map(([k, h, c]) => (
                  <tr key={k}>
                    <td style={{ color: "var(--ink-2)" }}>{k}</td>
                    <td style={{ textAlign: "right", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-soft)" }}>{h}</td>
                    <td style={{ textAlign: "right", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--signal-deep)", fontWeight: 500 }}>{c}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* chonk next to it, explaining */}
        <div style={{ position: "relative", paddingLeft: 40 }}>
          <ChonkCutout id="blueotter" h={300} style={{ position: "absolute", left: -16, top: -12 }} />
          <div style={{ paddingLeft: 280 }}>
            <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 28, lineHeight: 1.3, color: "var(--ink)" }}>
              "A $80M shot at a $400–700M drug is a better company than a $2B shot at a $2B drug. We have four shots in flight, two already in pivotal."
            </p>
            <p style={{ marginTop: 16, fontSize: 14, color: "var(--ink-soft)" }}>
              — Blue Otter, CFO
            </p>

            <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              {[
                ["5–9×",  "Asset multiple at peak"],
                ["20×",   "Capital efficient vs CDER"],
                ["12 mo", "Pivotal closes"],
                ["~$80M", "Per program, all-in"]
              ].map(([big, label]) => (
                <div key={label} className="card-flat" style={{ padding: 16 }}>
                  <div className="display" style={{ fontSize: 28 }}>{big}</div>
                  <Mono>{label}</Mono>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ============================================================
   Thesis — 4-section editorial manifesto
   ============================================================ */
const THESIS = [
  { n: "I.",   title: "The animals deserve better.",
    body: "A billion companion animals live in our homes. Most will develop something a person could treat with a drug. Almost none will get it — not because the medicines do not exist, but because nobody is paying to finish them.",
    pull: "If your dog had what your grandfather has, your dog would get treated. We think that is an interesting kind of injustice.",
    chonk: "chonksy"
  },
  { n: "II.",  title: "Twentyfold cheaper. Three times faster.",
    body: "A drug in human pharma costs $1.5–2.6B and takes 10–15 years. In companion-animal pharma: $50–100M, 4–5 years. The biology is conserved. The trial cohorts are smaller. The FDA Center for Veterinary Medicine has, in the last five years, built the most innovation-friendly drug pathway in the world.",
    pull: "Twentyfold is not a margin. It is a different kind of company.",
    chonk: "walrus"
  },
  { n: "III.", title: "We don't invent. We finish.",
    body: "Pharma has dozens of clinical-stage assets in cold storage — Phase 2 programs killed for dose, formulation, or tolerability. Never biology. We license the molecules, re-translate them for the species who would benefit, and run the pivotal in twelve months.",
    pull: "Most of the drugs your dog needs have already been invented. Somebody just has to finish them.",
    chonk: "platypus"
  },
  { n: "IV.",  title: "Pre-scouted supply. Built-in demand.",
    body: "Our scout has scored 208 shelved Phase 2 assets across IL-31, anti-NGF, FGFR, mGluR5, TRPV1, and GLP-1 pathways. Twelve in-licensor relationships are active today. Four programs are advancing, two are in pivotal trials, and the pet-insurance market is growing 22% year over year.",
    pull: "The bottleneck in pet pharma is not supply. It is selection. We are very good at selection.",
    chonk: "navy"
  }
];

const Thesis = () => (
  <section id="thesis" className="panel" style={{ padding: "120px 0", borderTop: "1px solid var(--line)" }}>
    <div className="wrap-tight">
      <Eyebrow>The thesis</Eyebrow>
      <h2 className="display" style={{ fontSize: "clamp(48px, 7vw, 108px)", marginTop: 24, marginBottom: 32, maxWidth: 1000 }}>
        Why pet pharma. <span className="italic-accent">Why now. Why us.</span>
      </h2>
      <p style={{ fontFamily: "var(--font-serif)", fontSize: 22, lineHeight: 1.5, color: "var(--ink-soft)", maxWidth: 760, marginBottom: 96 }}>
        Four sections. Read in any order. If you have ninety seconds, the section title plus the pull quote is the whole pitch. The rest is for the room with the actual decision.
      </p>

      {THESIS.map((m, i) => (
        <article key={m.n} style={{ marginBottom: 96, display: "grid", gridTemplateColumns: "160px 1fr 220px", gap: 56, alignItems: "start" }}>
          <div>
            <div className="display" style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 88, color: "var(--signal-deep)", lineHeight: 1 }}>
              {m.n}
            </div>
            <Mono style={{ marginTop: 8, display: "block" }}>{String(i + 1).padStart(2, "0")} / 04</Mono>
          </div>
          <div>
            <h3 className="display" style={{ fontSize: 48, marginBottom: 24 }}>{m.title}</h3>
            <p style={{ fontFamily: "var(--font-serif)", fontSize: 19, lineHeight: 1.6, color: "var(--ink-2)", marginBottom: 24, maxWidth: 700 }}>
              {m.body}
            </p>
            <blockquote style={{ borderLeft: "2px solid var(--signal)", paddingLeft: 20, fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 24, lineHeight: 1.3, color: "var(--ink)", maxWidth: 680 }}>
              {m.pull}
            </blockquote>
          </div>
          <div style={{ display: "flex", justifyContent: "center", paddingTop: 12 }}>
            <ChonkCutout id={m.chonk} h={220} />
          </div>
        </article>
      ))}
    </div>
  </section>
);

/* ============================================================
   Programs preview — chonk + slick molecule + program meta
   ============================================================ */
const ProgramsPreview = () => (
  <section className="panel-warm" style={{ padding: "120px 0" }}>
    <div className="wrap">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 64 }}>
        <div>
          <Eyebrow>Featured program</Eyebrow>
          <h2 className="display" style={{ fontSize: "clamp(40px, 6vw, 88px)", marginTop: 20, maxWidth: 900 }}>
            CHK-001 · <span className="italic-accent">canine atopic dermatitis.</span>
          </h2>
        </div>
        <a href="licensing-and-pipeline.html" className="btn btn-secondary">See all 11 programs →</a>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 32, alignItems: "stretch" }}>
        {/* Left: hi-def lab photo + chonk overlay */}
        <div style={{ position: "relative", borderRadius: 20, overflow: "hidden", minHeight: 540, background: "var(--paper)" }}>
          <img src={IMG.scientist} alt="Lab"
               style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 40%, oklch(0.18 0.015 230 / 0.55))" }} />
          <div style={{ position: "absolute", left: 24, top: 24 }}>
            <Pill>● Pivotal · 412 / 500 enrolled</Pill>
          </div>
          <ChonkCutout id="platypus" h={260} style={{ position: "absolute", right: -20, bottom: -20 }} />
          <div style={{ position: "absolute", left: 24, bottom: 24, color: "var(--paper)" }}>
            <Mono style={{ color: "oklch(0.85 0.01 78)" }}>Lead · The Platypus · Discovery</Mono>
          </div>
        </div>

        {/* Right: slick molecule/program panel */}
        <div className="surface">
          <div className="surface-header">
            <span className="surface-title">assets / CHK-001 / mechanism</span>
            <span className="status status-on">on plan · Q4 '26 readout</span>
          </div>
          <div className="surface-body">
            <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 28, alignItems: "center", marginBottom: 24 }}>
              <MoleculeViz size={160} />
              <div>
                <Mono>Target</Mono>
                <div className="display" style={{ fontSize: 28, marginTop: 6, marginBottom: 14 }}>IL-31 / OSMR-β bivalent mAb</div>
                <p style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.6 }}>
                  Same axis as Cytopoint (Zoetis, &gt;$1B in 2024). Engineered for longer half-life and once-monthly subcutaneous delivery. Pivotal closes Q4 2026.
                </p>
              </div>
            </div>

            <hr className="hr" style={{ margin: "8px 0 18px" }} />

            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
              {[
                ["Modality",   "Biologic · subcutaneous"],
                ["Species",    "Canine"],
                ["Stage",      "Pivotal"],
                ["Enrollment", "412 / 500"],
                ["Sites",      "38 specialty US"],
                ["Peak (est)", "$480M"]
              ].map(([k, v]) => (
                <div key={k}>
                  <Mono>{k}</Mono>
                  <div style={{ fontSize: 15, color: "var(--ink)", marginTop: 4 }}>{v}</div>
                </div>
              ))}
            </div>

            <hr className="hr" style={{ margin: "18px 0" }} />

            <div>
              <Mono>PK/PD · canine cohort (n=24)</Mono>
              <LineChart width={520} height={140}
                series={[
                  { color: "var(--signal)",      data: [4, 18, 36, 58, 72, 66, 52, 40, 28, 20, 14, 10, 8, 6, 5] },
                  { color: "var(--ink-mute)", data: [2, 6, 14, 22, 28, 26, 22, 16, 12, 8, 6, 4, 3, 2, 2] }
                ]} />
              <div style={{ display: "flex", gap: 18, fontSize: 11, color: "var(--ink-soft)", fontFamily: "var(--font-mono)" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <span style={{ width: 10, height: 2, background: "var(--signal)" }} /> serum [CHK-001] · 5 mg/kg
                </span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <span style={{ width: 10, height: 2, background: "var(--ink-mute)" }} /> placebo
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ============================================================
   Team — 19 chonks grid with cream paper + cutout
   ============================================================ */
const TEAM_HIGHLIGHT = ["chonksy", "walrus", "navy", "seaver", "platypus", "chumpy", "sealion", "seakoala", "redotter", "pandakid", "orca", "seacow", "seapholk", "seabrah", "sharl", "otter", "seabear", "oldcow", "blueotter"];

const Team = () => (
  <section id="team" className="panel" style={{ padding: "120px 0", borderTop: "1px solid var(--line)" }}>
    <div className="wrap">
      <Eyebrow>The team</Eyebrow>
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end", marginBottom: 80 }}>
        <h2 className="display" style={{ fontSize: "clamp(44px, 6vw, 96px)", marginTop: 20 }}>
          The team. <span className="italic-accent">Built by people who refuse to wait.</span>
        </h2>
        <p style={{ fontFamily: "var(--font-serif)", fontSize: 19, lineHeight: 1.55, color: "var(--ink-soft)" }}>
          Seven operators with thirteen approved drug labels between them — two ex-Zoetis, one ex-Loyal, one ex-Recursion, two from a top-three tech company, and one veterinary KOL. Plus the nineteen mascots they run with. Each owns a function.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 14 }}>
        {TEAM_HIGHLIGHT.slice(0, 5).map(id => {
          const c = byId[id];
          return (
            <article key={id} className="card" style={{ padding: 0, overflow: "hidden", minHeight: 360, display: "flex", flexDirection: "column" }}>
              <div style={{ position: "relative", flex: 1, background: "linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%)", minHeight: 240, display: "flex", alignItems: "flex-end", justifyContent: "center" }}>
                <ChonkCutout id={id} h={210} style={{ marginBottom: -1 }} />
                <div style={{ position: "absolute", top: 12, left: 14 }}>
                  <Mono>exec · {id.toUpperCase()}</Mono>
                </div>
              </div>
              <div style={{ padding: "18px 18px 20px", borderTop: "1px solid var(--line)" }}>
                <h4 style={{ fontSize: 18, fontWeight: 500, letterSpacing: "-0.01em" }}>{c.name}</h4>
                <Mono style={{ color: "var(--signal-deep)", marginTop: 4, display: "block" }}>{c.title}</Mono>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-soft)", marginTop: 12, paddingTop: 10, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between" }}>
                  <span>{id}@chonk.bio</span>
                  <span style={{ color: "var(--signal)" }}>● online</span>
                </div>
              </div>
            </article>
          );
        })}
      </div>

      {/* The expanded roster row — smaller cards */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 12, marginTop: 14 }}>
        {TEAM_HIGHLIGHT.slice(5, 19).map(id => {
          const c = byId[id];
          if (!c) return null;
          return (
            <article key={id} className="card-flat" style={{ padding: 12, overflow: "hidden", display: "flex", flexDirection: "column" }}>
              <div style={{ height: 110, background: "linear-gradient(180deg, var(--bg-2), var(--bg))", borderRadius: 8, position: "relative", display: "flex", justifyContent: "center", alignItems: "flex-end", overflow: "hidden" }}>
                <ChonkCutout id={id} h={100} style={{ marginBottom: -2 }} />
              </div>
              <div style={{ marginTop: 10 }}>
                <div style={{ fontSize: 13, fontWeight: 500, letterSpacing: "-0.01em" }}>{c.name}</div>
                <Mono style={{ fontSize: 9.5 }}>{c.title}</Mono>
              </div>
            </article>
          );
        })}
      </div>

      <div style={{ marginTop: 56, display: "flex", justifyContent: "space-between", alignItems: "center", padding: "24px 28px", border: "1px dashed var(--line-2)", borderRadius: 14, background: "var(--bg-3)" }}>
        <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 19, color: "var(--ink-2)", maxWidth: 720 }}>
          The full team — including the seven humans with thirteen approved drug labels — is in the data room. Profiles available under NDA.
        </p>
        <Mono>profiles under NDA</Mono>
      </div>
    </div>
  </section>
);

/* ============================================================
   CTA
   ============================================================ */
const CTA = () => (
  <section className="panel-warm" style={{ padding: "120px 0 80px" }}>
    <div className="wrap">
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "center" }}>
        <div>
          <Eyebrow>Get in touch</Eyebrow>
          <h2 className="display" style={{ fontSize: "clamp(40px, 6vw, 96px)", marginTop: 20, marginBottom: 24 }}>
            Tech-native pet pharma. <span className="italic-accent">Built for the species who would benefit.</span>
          </h2>
          <p style={{ fontSize: 18, color: "var(--ink-2)", lineHeight: 1.55, maxWidth: 620 }}>
            Tier-1 investors: we'll walk you through the funnel. Pharma BD: send us your shelved Phase 2 — protocol read in 72 hours. Scientists and engineers: we're hiring, and we mean it.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <a href="mailto:founders@chonk.bio" className="card" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "22px 24px", background: "var(--ink)", color: "var(--bg)", borderColor: "var(--ink)" }}>
            <span style={{ fontSize: 17, fontWeight: 500 }}>founders@chonk.bio</span>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.08em" }}>↗ INVESTORS</span>
          </a>
          <a href="mailto:bd@chonk.bio" className="card" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "22px 24px" }}>
            <span style={{ fontSize: 17 }}>bd@chonk.bio</span>
            <span className="mono" style={{ fontSize: 11, color: "var(--ink-soft)", letterSpacing: "0.08em" }}>↗ IN-LICENSE</span>
          </a>
          <a href="mailto:jobs@chonk.bio" className="card" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "22px 24px" }}>
            <span style={{ fontSize: 17 }}>jobs@chonk.bio</span>
            <span className="mono" style={{ fontSize: 11, color: "var(--ink-soft)", letterSpacing: "0.08em" }}>↗ HIRING · ENG · SCI · OPS</span>
          </a>
        </div>
      </div>
    </div>
  </section>
);

/* ============================================================
   App
   ============================================================ */
const App = () => (
  <main>
    <Nav current="" />
    <Hero />
    <WhatWeDo />
    <TheMath />
    <Thesis />
    <ProgramsPreview />
    <Team />
    <CTA />
    <Footer />
  </main>
);

ReactDOM.createRoot(document.getElementById("root")).render(<App />);