// Hero + Problem/Compare + Endotype Switcher
function Hero(){
  const heroRef = useRef(null);
  useSpotlight(heroRef);
  return (
    <section ref={heroRef} className="hero">
      <div className="hero-inner">
        <div>
          <h1 className="h1 hero-reveal-2">
            Mechanism-first drug discovery, <span className="accent">one molecular subtype at a time</span>.
          </h1>
          <p className="hero-lede hero-reveal-3">
            We decompose every known disease into its molecular subtypes — its endotypes — then
            rank every phase-one-safe drug against each one on integrated multi-omic evidence.
          </p>
          <div className="hero-ctas hero-reveal-4">
            <a className="btn btn-primary" href="#atlas">Explore the Atlas →</a>
            <a className="btn btn-ghost" href="mailto:info@vivamed.com?subject=Whitepaper%20request">Request whitepaper</a>
          </div>
          <div className="hero-stats hero-reveal-5">
            <div className="hero-stat"><div className="hero-stat-num">15,493</div><div className="hero-stat-lbl">Diseases</div></div>
            <div className="hero-stat"><div className="hero-stat-num">79,000+</div><div className="hero-stat-lbl">Endotypes</div></div>
            <div className="hero-stat"><div className="hero-stat-num">39M+</div><div className="hero-stat-lbl">Drug Predictions</div></div>
          </div>
        </div>
        <div className="hero-viz">
          <svg className="sev-svg" viewBox="0 0 560 478" preserveAspectRatio="xMidYMid meet"
               style={{width:"100%",height:"100%",display:"block",overflow:"visible"}} role="img"
               aria-label="Asthma and eczema each split into several molecular endotypes and share an IL-4/IL-13 Type 2 endotype, which dupilumab treats in both.">
            <defs>
              <filter id="sev-glow" x="-40%" y="-40%" width="180%" height="180%">
                <feGaussianBlur stdDeviation="5" result="b"/>
                <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
              </filter>
            </defs>
            <style>{`
              @keyframes sev-draw{to{stroke-dashoffset:0}}
              @keyframes sev-fade{from{opacity:0}to{opacity:1}}
              @keyframes sev-halo{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.18);opacity:0}}
              .sev-svg .sev-edge{stroke-dasharray:700;stroke-dashoffset:700;animation:sev-draw 1s cubic-bezier(.45,.6,.2,1) forwards}
              .sev-svg .sev-d1{animation-delay:.15s}.sev-svg .sev-d2{animation-delay:.28s}
              .sev-svg .sev-d3{animation-delay:.15s}.sev-svg .sev-d4{animation-delay:.28s}
              .sev-svg .sev-d5{animation-delay:.5s}.sev-svg .sev-d6{animation-delay:.5s}.sev-svg .sev-d7{animation-delay:.95s}
              .sev-svg .sev-nodes{animation:sev-fade .8s ease-out .35s both}
              .sev-svg .sev-halo{transform-box:fill-box;transform-origin:center;animation:sev-halo 2.6s ease-out 1.4s infinite}
              @media (prefers-reduced-motion:reduce){
                .sev-svg .sev-edge,.sev-svg .sev-nodes,.sev-svg .sev-halo{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
              }
            `}</style>

            {/* disease → own-endotype edges (faint) */}
            <g stroke="rgba(255,255,255,.16)" strokeWidth="1.4" fill="none">
              <path className="sev-edge sev-d1" d="M140,66 C112,108 88,118 74,144"/>
              <path className="sev-edge sev-d2" d="M140,66 C150,150 138,202 130,243"/>
              <path className="sev-edge sev-d3" d="M420,66 C448,108 472,118 486,144"/>
              <path className="sev-edge sev-d4" d="M420,66 C410,150 422,202 430,243"/>
            </g>
            {/* converging edges to the shared endotype + down to the drug (highlighted) */}
            <g stroke="#5AA0F0" strokeWidth="2.4" fill="none">
              <path className="sev-edge sev-d5" d="M140,66 C196,140 208,162 218,182"/>
              <path className="sev-edge sev-d6" d="M420,66 C364,140 352,162 342,182"/>
              <path className="sev-edge sev-d7" d="M280,240 L280,330"/>
            </g>

            <g className="sev-nodes">
              {/* IL-4/IL-13 also overlaps / drives these features — they aren't independent */}
              <g stroke="#5AA0F0" strokeWidth="1.2" strokeDasharray="2 5" fill="none" opacity=".5">
                <path d="M205,188 C150,168 110,156 86,150"/>
                <path d="M355,188 C420,168 458,156 476,150"/>
                <path d="M348,232 C395,244 410,247 422,250"/>
              </g>
              {/* disease pills */}
              <rect x="78" y="28" width="124" height="38" rx="11" fill="rgba(255,255,255,.06)" stroke="rgba(255,255,255,.22)"/>
              <text x="140" y="52" textAnchor="middle" fontFamily="Inter,system-ui" fontSize="16" fontWeight="700" fill="#fff">Asthma</text>
              <rect x="358" y="28" width="124" height="38" rx="11" fill="rgba(255,255,255,.06)" stroke="rgba(255,255,255,.22)"/>
              <text x="420" y="52" textAnchor="middle" fontFamily="Inter,system-ui" fontSize="16" fontWeight="700" fill="#fff">Eczema</text>

              {/* disease-specific endotype dots */}
              <g fontFamily="IBM Plex Mono, monospace" fontSize="11.5" fill="#9DB1C5">
                <circle cx="74" cy="148" r="6.5" fill="#16314c" stroke="#41658c" strokeWidth="1.4"/>
                <text x="74" y="174" textAnchor="middle">Eosinophilic</text>
                <text x="74" y="187" textAnchor="middle" fontSize="9" fill="#6f87a3">Type 2-high</text>
                <circle cx="130" cy="250" r="6.5" fill="#16314c" stroke="#41658c" strokeWidth="1.4"/>
                <text x="130" y="276" textAnchor="middle">Neutrophilic</text>
                <text x="130" y="289" textAnchor="middle" fontSize="9" fill="#6f87a3">Type 2-low</text>
                <circle cx="486" cy="148" r="6.5" fill="#16314c" stroke="#41658c" strokeWidth="1.4"/>
                <text x="486" y="174" textAnchor="middle">Skin-barrier</text>
                <circle cx="430" cy="250" r="6.5" fill="#16314c" stroke="#41658c" strokeWidth="1.4"/>
                <text x="430" y="276" textAnchor="middle">Staph-driven</text>
              </g>

              {/* shared endotype */}
              <text x="280" y="170" textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="9.5" letterSpacing="1.4" fill="#5AA0F0">SHARED ENDOTYPE</text>
              <rect className="sev-halo" x="198" y="182" width="164" height="56" rx="13" fill="none" stroke="#5AA0F0" strokeWidth="1.6"/>
              <rect x="198" y="182" width="164" height="56" rx="13" fill="rgba(90,160,240,.13)" stroke="#5AA0F0" strokeWidth="1.6" filter="url(#sev-glow)"/>
              <text x="280" y="208" textAnchor="middle" fontFamily="Inter,system-ui" fontSize="15" fontWeight="700" fill="#fff">IL-4 / IL-13</text>
              <text x="280" y="226" textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="11" fill="#9cc2f4">Type 2 inflammation</text>

              {/* drug */}
              <rect x="203" y="330" width="154" height="42" rx="11" fill="#fff"/>
              <text x="280" y="356" textAnchor="middle" fontFamily="Inter,system-ui" fontSize="15" fontWeight="700" fill="#0B1C2C">Dupilumab</text>
              <text x="280" y="398" textAnchor="middle" fontFamily="IBM Plex Mono, monospace" fontSize="11" fill="#9DB1C5">approved for asthma + eczema</text>
              <text x="280" y="438" textAnchor="middle" fontFamily="Inter,system-ui" fontSize="12.5" fill="#8097ae">Different diseases. Shared Type 2 biology. One pathway-targeted drug.</text>
            </g>
          </svg>
        </div>
      </div>
    </section>
  );
}

function Problem(){
  return (
    <section className="section surface">
      <div className="section-inner">
        <SectionHead
          eyebrow="The problem we solve"
          title="One disease. Six molecular causes. Six different drug lists."
          lede="Today, every patient with the same diagnosis gets the same drug options — even when their disease is driven by completely different biology. BioAtlas fixes that."
        />
        <div className="compare">
          <div className="compare-card old tile-reveal" style={{"--i": 0}}>
            <div className="compare-kind">Today's Approach · Label-Based</div>
            <h3>One label for everyone</h3>
            <div className="compare-diagnosis">"Postural Orthostatic Tachycardia Syndrome"</div>
            <p className="compare-body">One diagnosis. One label. Says the heart rate goes up when you stand, but nothing about <em>why</em>.</p>
            <ul className="compare-list">
              <li>Every POTS patient gets the same drug list</li>
              <li>No way to tell if the driver is autoimmune, genetic, or nerve damage</li>
              <li>Misses drugs that target the right biology but were never trialled for POTS</li>
            </ul>
          </div>
          <div className="compare-card new tile-reveal" style={{"--i": 1}}>
            <div className="compare-kind">BioAtlas Approach · Mechanism-Based</div>
            <h3>Endotype-stratified drug matching</h3>
            <div className="compare-diagnosis">ADRB1-Driven Adrenoceptor Hypersensitivity · 1 of 6 POTS endotypes</div>
            <p className="compare-body">Defined by causal genes, dysregulated pathways, and measurable biomarkers. Explains the <em>specific molecular driver</em>.</p>
            <ul className="compare-list">
              <li>Each POTS subtype gets its own drug ranking</li>
              <li>Autoimmune POTS → anti-CHRNA3 antibody drugs, not β-blockers</li>
              <li>Surfaces drugs from other diseases that share the broken pathway</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function EndotypeSwitcher(){
  const ENDOS = window.POTS_ENDOTYPES || [];
  const [active, setActive] = React.useState(0);
  const e = ENDOS[active] || {};
  const tidy = (s) => (s || "").replace(/\s+,\s+/g, " — ");
  return (
    <section className="section" id="atlas">
      <div className="section-inner">
        <SectionHead
          eyebrow="Live endotype explorer"
          title="One disease, decomposed into its molecular drivers."
          lede="POTS looks like one diagnosis. BioAtlas resolves it into six molecular endotypes — each a self-contained biological hypothesis with its own causal genes, pathways, biomarkers, and drug ranking. Click any subtype. Illustrative worked example."
        />

        <div className="es-tabs" role="tablist" aria-label="POTS endotypes">
          {ENDOS.map((x,i)=>(
            <button key={x.id} role="tab" aria-selected={i===active}
              className={`es-tab${i===active?" on":""}`} onClick={()=>setActive(i)}>
              <span className="es-tab-id">{x.id}</span>
              <span className="es-tab-tag">{x.tag}</span>
            </button>
          ))}
        </div>

        <div className="es-panel">
          <div className="es-main">
            <div className="es-head">
              <div>
                <div className="es-kicker">POTS · {e.tag} endotype · {active+1} of {ENDOS.length}</div>
                <h3 className="es-name">{e.name}</h3>
              </div>
              <div className="es-conf">
                <div className="es-conf-num">{Math.round((e.conf||0)*100)}%</div>
                <div className="es-conf-lbl">confidence</div>
              </div>
            </div>
            <p className="es-def">{e.definition}</p>

            <div className="es-grid">
              <div className="es-block">
                <div className="es-block-lbl">Causal genes</div>
                <div className="es-chips">{(e.genes||[]).map(g=><span key={g} className="es-gene">{g}</span>)}</div>
              </div>
              <div className="es-block">
                <div className="es-block-lbl">Dysregulated pathways</div>
                <div className="es-chips">{(e.pathways||[]).map(p=><span key={p} className="es-path">{p}</span>)}</div>
              </div>
            </div>

            <div className="es-block">
              <div className="es-block-lbl">Stratifying biomarkers</div>
              <div className="es-bios">
                {(e.biomarkers||[]).map(b=>(
                  <div key={b.name} className="es-bio">
                    <span className="es-bio-name">{b.name}</span>
                    <span className="es-bio-val">{b.val}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="es-rank">
            <div className="es-rank-head">
              <span>Ranked drug candidates</span>
              <span className="es-rank-sub">for this subtype</span>
            </div>
            {(e.drugs||[]).map(d=>(
              <div key={d.name} className={`es-drug${d.rank===1?" top":""}`}>
                <div className="es-drug-top">
                  <span className="es-drug-rank">#{d.rank}</span>
                  <span className="es-drug-name">{d.name}</span>
                  <span className="es-drug-score">{d.score.toFixed(3)}</span>
                </div>
                <div className="es-drug-bar"><span style={{width:`${d.bar}%`}}/></div>
                <div className="es-drug-mech">{tidy(d.mech)}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="hero-ctas" style={{justifyContent:"center",marginTop:36}}>
          <a className="btn btn-primary" href="/contact">Contact VivaMed for access to the BioAtlas →</a>
        </div>
      </div>

      <style>{`
        .es-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:44px 0 24px}
        .es-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
          padding:11px 16px;background:#fff;border:1px solid #e3ebf4;border-radius:11px;
          cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
          font-family:inherit;text-align:left}
        .es-tab:hover{transform:translateY(-2px);box-shadow:0 12px 28px -18px rgba(0,74,173,.4);border-color:#b9cde8}
        .es-tab.on{background:#004AAD;border-color:#004AAD;box-shadow:0 14px 30px -16px rgba(0,74,173,.55)}
        .es-tab-id{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;letter-spacing:.12em;color:#6E8297}
        .es-tab.on .es-tab-id{color:#9cc2f4}
        .es-tab-tag{font-size:14px;font-weight:700;color:#0B1C2C;letter-spacing:-.01em}
        .es-tab.on .es-tab-tag{color:#fff}

        .es-panel{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;align-items:start}
        @media (max-width:900px){.es-panel{grid-template-columns:1fr}}
        .es-main{background:#fff;border:1px solid #e3ebf4;border-radius:16px;padding:28px 26px}
        .es-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
        .es-kicker{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;letter-spacing:.12em;
          text-transform:uppercase;color:#3393F0;margin-bottom:8px}
        .es-name{font-size:21px;font-weight:800;letter-spacing:-.01em;color:#0B1C2C;margin:0;line-height:1.25}
        .es-conf{flex-shrink:0;text-align:right}
        .es-conf-num{font-size:26px;font-weight:800;color:#004AAD;line-height:1;letter-spacing:-.02em}
        .es-conf-lbl{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:10px;letter-spacing:.1em;
          text-transform:uppercase;color:#6E8297;margin-top:3px}
        .es-def{font-size:14px;line-height:1.6;color:#4A5F77;margin:16px 0 22px}
        .es-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
        @media (max-width:560px){.es-grid{grid-template-columns:1fr}}
        .es-block-lbl{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:10.5px;letter-spacing:.12em;
          text-transform:uppercase;color:#6E8297;margin-bottom:10px}
        .es-chips{display:flex;flex-wrap:wrap;gap:7px}
        .es-gene{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:12px;font-weight:600;
          padding:5px 10px;border-radius:7px;background:#eef4fc;color:#004AAD;border:1px solid #d9e6f7}
        .es-path{font-size:12px;padding:5px 10px;border-radius:7px;background:#f5f7fa;color:#4A5F77;border:1px solid #e3ebf4}
        .es-bios{display:flex;flex-direction:column;gap:0;border:1px solid #e9eff6;border-radius:10px;overflow:hidden}
        .es-bio{display:flex;justify-content:space-between;gap:14px;padding:10px 14px;font-size:13px;border-top:1px solid #eef3f8}
        .es-bio:first-child{border-top:none}
        .es-bio-name{color:#4A5F77}
        .es-bio-val{font-family:var(--mono,"IBM Plex Mono",monospace);font-weight:600;color:#0B1C2C;text-align:right}

        .es-rank{background:#0B1C2C;border-radius:16px;padding:22px 20px}
        .es-rank-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
        .es-rank-head>span:first-child{font-size:14px;font-weight:700;color:#fff}
        .es-rank-sub{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:10.5px;letter-spacing:.1em;
          text-transform:uppercase;color:#6E8297}
        .es-drug{padding:13px 0;border-top:1px solid rgba(255,255,255,.08)}
        .es-drug:first-of-type{border-top:none;padding-top:0}
        .es-drug-top{display:flex;align-items:baseline;gap:9px}
        .es-drug-rank{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;color:#6E8297;flex-shrink:0}
        .es-drug.top .es-drug-rank{color:#5AA0F0}
        .es-drug-name{font-size:14px;font-weight:600;color:#dce6f2;flex:1}
        .es-drug.top .es-drug-name{color:#fff;font-weight:700}
        .es-drug-score{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:12.5px;font-weight:600;color:#9DB1C5}
        .es-drug.top .es-drug-score{color:#5AA0F0}
        .es-drug-bar{height:4px;border-radius:3px;background:rgba(255,255,255,.08);margin:8px 0 7px;overflow:hidden}
        .es-drug-bar>span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#1A6BD6,#5AA0F0)}
        .es-drug:not(.top) .es-drug-bar>span{background:rgba(120,160,210,.5)}
        .es-drug-mech{font-size:12px;line-height:1.5;color:#8497ab}
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero, Problem, EndotypeSwitcher });