// Validation section. (Taxonomy and Causal-genetics now live inside the
// PlatformTabs ticker in sections3.jsx as TaxonomyPanel / CausalGeneticsPanel.)
function Validation(){
  return (
    <section className="section">
      <div className="section-inner">
        <SectionHead
          eyebrow="Retrospective validation"
          title="BioAtlas recovers the right drug for the right subtype."
          lede="Tested against known FDA approvals, the ranking surfaces the approved therapy at the top — and on VivaBench, our leakage-audited public benchmark, it outscores prior published models by roughly 15×. The examples below are real approvals recovered."
        />
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(160px,1fr))",gap:16,margin:"0 0 40px"}}>
          {VALIDATION_METRICS.map(m=>(
            <div key={m.l} style={{padding:"22px 20px",background:"#fff",border:"1px solid #e3ebf4",borderRadius:14}}>
              <div style={{fontSize:32,fontWeight:800,letterSpacing:"-.02em",color:"#004AAD",lineHeight:1.02}}>{m.v}</div>
              <div style={{fontSize:13,fontWeight:600,color:"#0B1C2C",marginTop:8,lineHeight:1.35}}>{m.l}</div>
              <div style={{fontSize:11.5,color:"#6E8297",marginTop:5,fontFamily:"var(--mono)",lineHeight:1.4}}>{m.sub}</div>
            </div>
          ))}
        </div>
        <div className="validation">
          {VALIDATION.map((v,i)=>(
            <div key={v.disease} className="val-card tile-reveal" style={{"--i": i}}>
              <div className="val-card-head">
                <div className="val-disease">{v.disease}</div>
                <div className="val-mondo">{v.mondo}</div>
              </div>
              <div className="val-endo-lbl">Matched endotype</div>
              <div className="val-endo-name">{v.endo}</div>
              <div className="val-genes">
                {v.genes.map(g=><span key={g} className="gene-chip lg">{g}</span>)}
              </div>
              <div style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:".03em",color:"var(--muted)"}}>
                Mechanism family · <span style={{color:"var(--navy)"}}>{v.family}</span>
              </div>
              <div className="val-drugs">
                <div className="val-drug-lbl">Top-ranked candidates</div>
                {v.drugs.map((d,j)=>(
                  <div key={d} className="val-drug-row">
                    <span>{j+1}. {d}</span>
                  </div>
                ))}
              </div>
              <div className="val-footer">
                <span className="val-approved">FDA APPROVED</span>
                <span>recovered at the top of the ranking</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Validation });