/* Hemavive website kit — content sections (exported to window.HV_SECTIONS) */

const { Eyebrow, Tag, Badge, Stat, Card, Input, Select, Button } = window.HemaviveDesignSystem_7fd68e;
const HI = window.HV_ICONS;

function Problem() {
  const items = [
    { ico: HI.factory, t: "Manufacturing Complexity", d: "Ex vivo cell engineering is costly, time-intensive, and difficult to scale — severely limiting patient access to curative therapies." },
    { ico: HI.target, t: "Inefficient Delivery", d: "Existing vectors and nanoparticles lack the cell-type selectivity needed to target HSCs safely and efficiently in vivo." },
    { ico: HI.shield, t: "Toxic Conditioning", d: "Standard myeloablative conditioning carries significant morbidity and mortality, restricting eligibility to the fittest patients." },
    { ico: HI.crosshair, t: "Poor In Vivo Targeting", d: "Non-specific biodistribution reduces efficacy and creates off-target safety concerns across multiple tissues." },
  ];
  return (
    <section className="sec sec--paper" id="problem">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="rule" />The Unmet Need</span>
          <h2 className="sec-title">Millions lack access to durable, curative therapies.</h2>
          <p className="sec-sub">Patients with genetic diseases, autoimmune disorders, and organ failure are held back by four compounding limitations in today's HSC medicine.</p>
        </div>
        <div className="prob-grid">
          {items.map((it, i) => {
            const Ico = it.ico;
            return (
              <div className="prob" key={i}>
                <div className="prob__ico"><Ico /></div>
                <h3>{it.t}</h3>
                <p>{it.d}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Platform() {
  const progs = [
    { n: "01", cls: "", title: "HSC Gene Therapy", color: "crimson", d: "Targeted insertion of therapeutic genes into defined genomic loci of HSCs using site-specific engineering — HDR-mediated integration with AAV donor templates and CRISPR editing.", tags: ["SCD", "β-Thalassemia", "PID", "Metabolic"] },
    { n: "02", cls: "prog--2", title: "Immune Reprogramming", color: "navy", d: "Autologous HSCs engineered with immunoregulatory transgenes under lineage-restricted promoters to continuously generate tolerogenic immune populations.", tags: ["Multiple sclerosis", "IBD", "Scleroderma"] },
    { n: "03", cls: "prog--3", title: "Transplant Tolerance", color: "teal", d: "Recipient HSC engineering expresses donor alloantigens, establishing molecular chimerism for durable donor-specific tolerance — without lifelong immunosuppression.", tags: ["Kidney", "Islet", "Liver", "Heart"] },
  ];
  return (
    <section className="sec" id="platform">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="rule" />The Hemavive Platform</span>
          <h2 className="sec-title">Three programs. One shared foundation.</h2>
          <p className="sec-sub">Every program is built on a common HSC engineering and targeted-delivery platform — so a single set of breakthroughs compounds across genetic, autoimmune, and transplant disease.</p>
        </div>
        <div className="prog-grid" id="programs">
          {progs.map((p) => (
            <article className={"prog " + p.cls} key={p.n}>
              <span className="prog__idx">PROGRAM {p.n}</span>
              <h3>{p.title}</h3>
              <p>{p.d}</p>
              <div className="prog__tags">
                {p.tags.map((t) => <Tag key={t} color={p.color}>{t}</Tag>)}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Delivery() {
  const items = [
    { k: "Vector", t: "Functionalized AAV", d: "Engineered capsids with HSC-targeting ligands and nanobodies for selective in vivo gene delivery." },
    { k: "Nanoparticle", t: "Targeted LNPs", d: "Cell-selective surface modifications enabling targeted mRNA / gene delivery to hematopoietic stem cells." },
    { k: "Platform", t: "Nanobody Ligands", d: "Modular, plug-and-play cell-type targeting across all delivery modalities." },
    { k: "Patent filed", t: "ECEP Circuit", d: "Ex-vivo-like HSC editing within a closed extracorporeal circuit — scalable, bedside engineering." },
  ];
  return (
    <section className="sec sec--navy" id="delivery">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="rule" />Delivery Platform &amp; IP</span>
          <h2 className="sec-title">Proprietary targeting, engineered for HSCs.</h2>
          <p className="sec-sub">A modular delivery stack designed to selectively engage hematopoietic stem and immune cells — the foundation beneath every Hemavive program.</p>
        </div>
        <div className="deliv-grid">
          {items.map((it, i) => (
            <div className="deliv" key={i}>
              <div className="deliv__k">{it.k}</div>
              <h4>{it.t}</h4>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Ecep() {
  const steps = ["Blood Collection", "HSC Capture", "HSC Isolation", "Gene Engineering", "Glycoengineering", "Wash & Return"];
  return (
    <section className="sec" id="ecep">
      <div className="wrap">
        <div className="ecep">
          <div>
            <span className="eyebrow"><span className="rule" />Extracorporeal Cell Engineering</span>
            <h2 className="sec-title">A closed loop, from vein to vein.</h2>
            <p className="sec-sub">ECEP performs ex-vivo-like HSC editing inside a sterile, single-use extracorporeal circuit — collapsing manufacturing complexity and moving cell engineering to the bedside.</p>
            <div className="ecep__steps">
              {steps.map((s, i) => <span className="ecep__step" key={i}>{i + 1}. {s}</span>)}
            </div>
            <div className="roadmap">
              <div className="roadmap__node"><span className="t">Ex Vivo</span><span className="s">Current</span></div>
              <span className="roadmap__arr">→</span>
              <div className="roadmap__node"><span className="t">Extracorporeal</span><span className="s">Near-term</span></div>
              <span className="roadmap__arr">→</span>
              <div className="roadmap__node"><span className="t">In Vivo</span><span className="s">Long-term</span></div>
            </div>
            <div style={{ marginTop: "28px", display: "flex", gap: "10px", alignItems: "center" }}>
              <Badge tone="positive" dot>Provisional patent filed</Badge>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: "12px", color: "var(--text-faint)" }}>Closed-Loop · Sterile · Single-Use</span>
            </div>
          </div>
          <div className="ecep__media">
            <img src="../../assets/deck/image5.png" alt="Hemavive ECEP closed-loop process diagram" />
          </div>
        </div>
      </div>
    </section>
  );
}

function Market() {
  const segs = [
    ["Gene Therapy", "$13B", "~25%/yr"],
    ["Autoimmune Therapeutics", "$19B", "~8%/yr"],
    ["Cell Therapy Manufacturing", "$9B", "~20%/yr"],
    ["Solid Organ Transplantation", "$7B", "~6%/yr"],
    ["Precision Delivery", "$8B", "~18%/yr"],
  ];
  return (
    <section className="sec sec--paper" id="market">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="rule" />$50B+ Market Opportunity</span>
          <h2 className="sec-title">Five convergent, high-growth markets.</h2>
          <p className="sec-sub">A clear TAM → SAM → SOM path to value creation, anchored by a beachhead in sickle cell gene therapy and kidney / islet tolerance.</p>
        </div>
        <div className="market-grid">
          <div className="mcard"><div className="k">TAM</div><div className="v">$56B</div><div className="l">Total addressable market across gene therapy, autoimmune, cell manufacturing, transplant &amp; delivery.</div></div>
          <div className="mcard mcard--sam"><div className="k">SAM</div><div className="v">~$22B</div><div className="l">HSC gene therapy, MS &amp; IBD reprogramming, transplant tolerance, and HSC-targeted delivery.</div></div>
          <div className="mcard"><div className="k">SOM · 7–10 yr</div><div className="v">~$3B</div><div className="l">Beachhead in SCD gene therapy, MS/IBD reprogramming, and kidney/islet tolerance.</div></div>
        </div>
        <table className="tbl">
          <thead><tr><th>Market Segment</th><th className="num">Est. Size</th><th className="num">CAGR</th></tr></thead>
          <tbody>
            {segs.map((s) => <tr key={s[0]}><td className="seg">{s[0]}</td><td className="num">{s[1]}</td><td className="num">{s[2]}</td></tr>)}
          </tbody>
          <tfoot><tr><td>Total addressable</td><td className="num">$56B</td><td className="num">—</td></tr></tfoot>
        </table>
        <p style={{ fontFamily: "var(--font-mono)", fontSize: "11px", color: "var(--text-faint)", marginTop: "16px", lineHeight: 1.5 }}>
          Sources: estimates based on Grand View Research, Mordor Intelligence, and public industry reports. TAM/SAM/SOM are illustrative.
        </p>
      </div>
    </section>
  );
}

function Why() {
  const rows = [
    ["Delivery Selectivity", "Non-specific; significant off-target exposure", "Targeted; HSC / immune cell-selective delivery"],
    ["Manufacturing", "Complex, costly ex vivo processes", "Designed for scalable extracorporeal & in vivo"],
    ["Conditioning Toxicity", "Myeloablative; high morbidity & mortality", "Aims to reduce or eliminate toxic conditioning"],
    ["Disease Scope", "Typically single-disease per platform", "Common HSC platform across three disease areas"],
    ["Gene Integration", "Episomal; risk of silencing or loss over time", "Site-specific integration for stable correction"],
    ["Immune Tolerance", "Not addressed; requires lifelong drugs", "Molecular chimerism for donor-specific tolerance"],
  ];
  return (
    <section className="sec" id="why">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="rule" />Why Hemavive</span>
          <h2 className="sec-title">A platform built to fix what limits the field.</h2>
        </div>
        <table className="cmp">
          <thead><tr><th className="dim">Dimension</th><th>Current Approaches</th><th className="hv">Hemavive Platform</th></tr></thead>
          <tbody>
            {rows.map((r) => (
              <tr key={r[0]}>
                <td className="dim">{r[0]}</td>
                <td className="cur">{r[1]}</td>
                <td className="hv"><span className="chk">{HI.check()}<span>{r[2]}</span></span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

function Team() {
  const sab = ["Jorge Mansilla-Soto — Moffitt", "Suman Bose — Mayo Clinic", "Wayne Hancock — UPenn", "Louise Cohen — Mt. Sinai", "Audrey Parent — UCSF"];
  const biz = ["Jalil Hakimi, PhD — Pegasus", "Chancellor E. Donald, MD — Tulane", "Ohad Karnieli, PhD/MBA — Adva", "Haig Aghajanian, MD/PhD — Capstan"];
  const pipe = ["Remi Creusot — Columbia", "Craig Walsh — UC Irvine", "Christopher Dvorak — UCSF", "Mark Freedman — Ottawa"];
  const col = (title, arr) => (
    <div className="adv">
      <h4>{title}</h4>
      <ul>{arr.map((a) => { const [n, d] = a.split(" — "); return <li key={a}><span className="an">{n}</span><span className="ad">{d}</span></li>; })}</ul>
    </div>
  );
  return (
    <section className="sec sec--paper" id="team">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="rule" />Team &amp; Advisory Network</span>
          <h2 className="sec-title">World-class depth across the stack.</h2>
          <p className="sec-sub">Immunology, stem-cell biology, transplantation, gene therapy, and company building — assembled around a single scientific vision.</p>
        </div>
        <div className="founder">
          <div className="founder__ava">MK</div>
          <div>
            <h3 className="founder__name">Mohsen Khosravi-Maharlooei, MD, MSc</h3>
            <div className="founder__role">Founder &amp; CEO</div>
            <p className="founder__bio">Former Assistant Professor at Mayo Clinic and Columbia University (HSC &amp; transplant immunology); former Director of Translational Research at Targazyme. Hemavive's scientific foundation is built on two decades of HSC and tolerance research.</p>
          </div>
        </div>
        <div className="adv-cols">
          {col("Scientific Advisory Board", sab)}
          {col("Business & Strategic Advisory", biz)}
          {col("Pipeline & Clinical Advisors", pipe)}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [sent, setSent] = React.useState(false);
  return (
    <section className="sec sec--navy" id="contact">
      <div className="wrap">
        <div className="contact">
          <div>
            <span className="eyebrow"><span className="rule" />Current Status &amp; Funding</span>
            <h2 className="sec-title">Seeking seed financing.</h2>
            <p className="sec-sub">We're raising to establish our scientific foundation and advance toward IND-enabling development. Request access to the confidential data room.</p>
            <div style={{ display: "flex", flexDirection: "column", gap: "14px", marginTop: "28px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: "12px" }}><span style={{ color: "var(--teal-300)", display: "inline-flex" }}>{HI.check({ width: 18, height: 18 })}</span><span style={{ color: "var(--slate-200)", fontSize: "14.5px" }}>Delaware C-Corporation founded</span></div>
              <div style={{ display: "flex", alignItems: "center", gap: "12px" }}><span style={{ color: "var(--teal-300)", display: "inline-flex" }}>{HI.check({ width: 18, height: 18 })}</span><span style={{ color: "var(--slate-200)", fontSize: "14.5px" }}>Provisional patent filed on ECEP</span></div>
              <div style={{ display: "flex", alignItems: "center", gap: "12px" }}><span style={{ color: "var(--teal-300)", display: "inline-flex" }}>{HI.check({ width: 18, height: 18 })}</span><span style={{ color: "var(--slate-200)", fontSize: "14.5px" }}>Academic &amp; industry collaborators engaged</span></div>
            </div>
          </div>
          <div className="contact__form">
            {sent ? (
              <div className="sent">
                <div className="sent__ico">{HI.check({ width: 26, height: 26 })}</div>
                <h4>Request received.</h4>
                <p>Thank you — we'll be in touch at the address you provided.</p>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                <div className="frow">
                  <div><label>First name <span className="req">*</span></label><Input required placeholder="Jane" /></div>
                  <div><label>Last name <span className="req">*</span></label><Input required placeholder="Doe" /></div>
                </div>
                <div className="fone"><label>Work email <span className="req">*</span></label><Input required type="email" placeholder="you@fund.com" leadingIcon={HI.mail({ width: 17, height: 17 })} /></div>
                <div className="fone"><label>Organization</label><Input placeholder="Fund or institution" /></div>
                <div className="fone"><label>I am a…</label><Select options={["Investor", "Scientific advisor", "Strategic partner", "Press"]} /></div>
                <Button type="submit" variant="primary" size="lg" fullWidth trailingIcon={<HI.arrow />}>Request data room</Button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

window.HV_SECTIONS = { Problem, Platform, Delivery, Ecep, Market, Why, Team, Contact };