/* Hemavive website kit — shell: icons, nav, hero, footer, app */

const { Button } = window.HemaviveDesignSystem_7fd68e;

/* ---- Inline icon set (Lucide-style, 24px stroke) ---- */
const I = {
  arrow: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>),
  factory: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M2 20h20"/><path d="M4 20V9l5 3V9l5 3V6l6 4v10"/><path d="M8 20v-4M14 20v-4"/></svg>),
  target: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.4"/></svg>),
  shield: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg>),
  crosshair: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9"/><path d="M22 12h-4M6 12H2M12 6V2M12 22v-4"/></svg>),
  check: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M20 6 9 17l-5-5"/></svg>),
  dna: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M7 3c0 4 10 5 10 9s-10 5-10 9"/><path d="M17 3c0 4-10 5-10 9s10 5 10 9"/><path d="M8.5 5h7M8.5 19h7M7.5 9h9M7.5 15h9"/></svg>),
  mail: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg>),
};
window.HV_ICONS = I;

function Brand({ onClick }) {
  return (
    <a className="brand" href="#top" onClick={onClick}>
      <img className="brand__mark" src="../../assets/logo/mark.png" alt="Hemavive" />
      <span className="brand__wm"><span className="h">Hema</span><span className="v">vive</span></span>
    </a>
  );
}

function Nav({ scrolled, go }) {
  const links = [
    ["Platform", "platform"], ["Programs", "programs"], ["Delivery", "delivery"],
    ["Market", "market"], ["Team", "team"],
  ];
  return (
    <nav className={"nav " + (scrolled ? "nav--scrolled" : "nav--top")}>
      <div className="nav__inner">
        <Brand onClick={(e) => { e.preventDefault(); go("top"); }} />
        <div className="nav__links">
          {links.map(([t, id]) => (
            <button key={id} className="nav__link" onClick={() => go(id)}>{t}</button>
          ))}
        </div>
        <div className="nav__spacer" />
        <div className="nav__cta">
          <Button size="sm" variant="primary" trailingIcon={<I.arrow />} onClick={() => go("contact")}>Request access</Button>
        </div>
      </div>
    </nav>
  );
}

function Hero({ go }) {
  return (
    <header className="hero" id="top">
      <div className="hero__bg" />
      <div className="hero__dots" />
      <img className="hero__mark" src="../../assets/logo/mark.png" alt="" aria-hidden="true" />
      <div className="hero__inner">
        <div className="hero__grid">
          <div>
            <span className="eyebrow"><span className="rule" />Pre-seed · HSC Engineering Platform</span>
            <h1>Curing disease at its <span className="em">source</span>.</h1>
            <p className="hero__sub">
              Hemavive unifies targeted gene delivery, precision editing, and immune reprogramming
              into a single hematopoietic stem-cell platform — engineering durable, one-time cures
              for genetic, autoimmune, and transplant disease.
            </p>
            <div className="hero__cta">
              <Button size="lg" variant="primary" trailingIcon={<I.arrow />} onClick={() => go("contact")}>Request data room</Button>
              <Button size="lg" variant="secondary" onClick={() => go("platform")} style={{ background: "rgba(255,255,255,0.06)", color: "#fff", borderColor: "rgba(255,255,255,0.22)" }}>Explore the platform</Button>
            </div>
            <div className="hero__pills">
              <span className="pill"><span className="dot" style={{ background: "var(--crimson-400)" }} />Gene Therapy</span>
              <span className="pill"><span className="dot" style={{ background: "var(--navy-300)" }} />Immune Reprogramming</span>
              <span className="pill"><span className="dot" style={{ background: "var(--teal-400)" }} />Transplant Tolerance</span>
            </div>
          </div>
        </div>
        <div className="statstrip">
          <div><div className="num">&gt;100,000</div><div className="cap">HSC transplants / year — today's standard of care</div></div>
          <div><div className="num"><em>$56B</em></div><div className="cap">Total addressable market across five segments</div></div>
          <div><div className="num">3</div><div className="cap">Therapeutic programs on one shared platform</div></div>
          <div><div className="num">1</div><div className="cap">Closed-loop engineering system (ECEP, patent filed)</div></div>
        </div>
      </div>
    </header>
  );
}

function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="wrap wrap--wide">
        <div className="footer__top">
          <div>
            <div className="footer__wm"><span className="h">Hema</span><span className="v">vive</span></div>
            <div className="footer__tag">Extracorporeal Cell Engineering</div>
          </div>
          <div className="footer__links">
            <div className="footer__col"><span className="h">Platform</span>
              <a onClick={() => go("programs")}>Programs</a><a onClick={() => go("delivery")}>Delivery &amp; IP</a><a onClick={() => go("market")}>Market</a>
            </div>
            <div className="footer__col"><span className="h">Company</span>
              <a onClick={() => go("team")}>Team</a><a onClick={() => go("contact")}>Contact</a><a href="mailto:Mohsen@Hemavive.com">Investor relations</a>
            </div>
            <div className="footer__col"><span className="h">Contact</span>
              <a href="mailto:Mohsen@Hemavive.com">Mohsen@Hemavive.com</a><span style={{ color: "var(--slate-500)", fontSize: "13.5px" }}>Delaware C-Corp</span>
            </div>
          </div>
        </div>
        <div className="footer__legal">
          <span>© 2026 Hemavive, Inc. All rights reserved.</span>
          <span className="conf">CONFIDENTIAL — FOR AUTHORIZED RECIPIENTS ONLY · DO NOT DISTRIBUTE</span>
        </div>
      </div>
    </footer>
  );
}

function SiteApp() {
  const [scrolled, setScrolled] = React.useState(false);
  const scRef = React.useRef(null);
  const go = (id) => {
    const el = document.getElementById(id);
    const root = scRef.current;
    if (el && root) root.scrollTo({ top: id === "top" ? 0 : el.offsetTop - 64, behavior: "smooth" });
  };
  const onScroll = (e) => setScrolled(e.target.scrollTop > 40);
  const { Problem, Platform, Delivery, Ecep, Market, Why, Team, Contact } = window.HV_SECTIONS;
  return (
    <div className="site" ref={scRef} onScroll={onScroll} style={{ height: "100vh", overflowY: "auto", overflowX: "hidden" }}>
      <Nav scrolled={scrolled} go={go} />
      <Hero go={go} />
      <Problem />
      <Platform />
      <Delivery />
      <Ecep />
      <Market />
      <Why />
      <Team />
      <Contact />
      <Footer go={go} />
    </div>
  );
}
window.SiteApp = SiteApp;