/* ============ SCIENCE PAGE ============ */

function IconShield() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <path d="M12 2 L3 6 V12 C3 17 7 21 12 22 C17 21 21 17 21 12 V6 Z" />
    <path d="M8 12 L11 15 L16 9" />
  </svg>;
}
function IconDNA() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <path d="M6 3 C 18 7, 6 17, 18 21" />
    <path d="M18 3 C 6 7, 18 17, 6 21" />
    <path d="M8 7 H 16" />
    <path d="M8 12 H 16" />
    <path d="M8 17 H 16" />
  </svg>;
}
function IconBrain() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <path d="M9 4 C 6 4, 4 6, 4 9 C 4 11, 5 12, 5 14 C 5 16, 4 17, 4 19 C 5 21, 7 21, 9 20 V4" />
    <path d="M15 4 C 18 4, 20 6, 20 9 C 20 11, 19 12, 19 14 C 19 16, 20 17, 20 19 C 19 21, 17 21, 15 20 V4" />
    <path d="M9 8 H 15 M9 12 H 15 M9 16 H 15" />
  </svg>;
}
function IconChart() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <path d="M3 21 H 21" />
    <rect x="5" y="13" width="3" height="6" />
    <rect x="11" y="9" width="3" height="10" />
    <rect x="17" y="5" width="3" height="14" />
  </svg>;
}
function IconMicroscope() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <path d="M9 3 L12 3 L13 6 L10 7 Z" />
    <path d="M10 7 L13 14" />
    <circle cx="13" cy="16" r="4" />
    <path d="M4 21 H 20" />
    <path d="M8 21 V 19" />
  </svg>;
}
function IconLock() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <rect x="5" y="11" width="14" height="10" rx="1.5" />
    <path d="M8 11 V 7 a4 4 0 0 1 8 0 V 11" />
  </svg>;
}
function IconPuzzle() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <path d="M10 3 H 14 V 6 a1.5 1.5 0 0 0 3 0 V 5 H 20 V 11 H 19 a1.5 1.5 0 0 0 0 3 H 20 V 20 H 14 V 19 a1.5 1.5 0 0 0 -3 0 V 20 H 5 V 14 H 6 a1.5 1.5 0 0 0 0 -3 H 5 V 5 H 10 Z" />
  </svg>;
}
function IconEye() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <path d="M2 12 C 5 6, 10 4, 12 4 S 19 6, 22 12 C 19 18, 14 20, 12 20 S 5 18, 2 12 Z" />
    <circle cx="12" cy="12" r="3" />
  </svg>;
}

/* ---------- visuals ---------- */
function DNAViz() {
  const rows = [
  { gene: "BRCA1", color: "green", status: "Clear", width: 96 },
  { gene: "BRCA2", color: "green", status: "Clear", width: 94 },
  { gene: "CFTR", color: "green", status: "Clear", width: 90 },
  { gene: "HEXA", color: "amber", status: "Carrier", width: 60 },
  { gene: "SMN1", color: "green", status: "Clear", width: 88 },
  { gene: "FMR1", color: "green", status: "Clear", width: 92 },
  { gene: "GBA", color: "green", status: "Clear", width: 85 },
  { gene: "ASPA", color: "green", status: "Clear", width: 91 },
  { gene: "MEFV", color: "green", status: "Clear", width: 87 }];

  return (
    <div className="dna-rows">
      {rows.map((r, i) =>
      <div className="dna-row" key={i}>
          <span className="gene-name">{r.gene}</span>
          <div className="bar-track">
            <div className={`bar-fill ${r.color}`} style={{ width: `${r.width}%` }} />
          </div>
          <span className={`status ${r.status === "Clear" ? "clear" : "carrier"}`}>{r.status}</span>
        </div>
      )}
    </div>);

}

function BellViz() {
  // Gaussian-ish bell SVG with a marker
  const w = 400,h = 200;
  // build path
  const pts = [];
  for (let i = 0; i <= 60; i++) {
    const x = i / 60 * w;
    const t = (i - 30) / 8;
    const y = h - Math.exp(-(t * t) / 2) * (h - 20) - 10;
    pts.push(`${x},${y}`);
  }
  const markerX = 38 / 60 * w; // ~127 IQ
  const markerY = h - Math.exp(-(((38 - 30) / 8) ** 2) / 2) * (h - 20) - 10;
  return (
    <div className="bell-wrap">
      <div className="bell-head">
        <div>
          <div style={{ opacity: 0.7, marginBottom: 8 }}>Composite Score</div>
          <div className="val">127</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ opacity: 0.5 }}>97th percentile</div>
          <div style={{ opacity: 0.5, marginTop: 4 }}>Sample n = 142,800</div>
        </div>
      </div>
      <svg className="bell-svg" viewBox={`0 0 ${w} ${h + 20}`} preserveAspectRatio="none">
        <defs>
          <linearGradient id="bellfill" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#FFFFFF" stopOpacity="0.10" />
            <stop offset="100%" stopColor="#FFFFFF" stopOpacity="0" />
          </linearGradient>
        </defs>
        <polygon points={`0,${h} ${pts.join(" ")} ${w},${h}`} fill="url(#bellfill)" />
        <polyline points={pts.join(" ")} fill="none" stroke="#FFFFFF" strokeOpacity="0.5" strokeWidth="1.2" />
        {/* axis */}
        <line x1="0" y1={h} x2={w} y2={h} stroke="#FFFFFF" strokeOpacity="0.25" />
        {[70, 85, 100, 115, 130, 145].map((iq, i) => {
          const x = (iq - 55) / 90 * w;
          return (
            <g key={iq}>
              <line x1={x} y1={h} x2={x} y2={h + 4} stroke="#FFFFFF" strokeOpacity="0.3" />
              <text x={x} y={h + 16} fill="#FFFFFF" fillOpacity="0.4" fontSize="9" textAnchor="middle" fontFamily="JetBrains Mono">{iq}</text>
            </g>);

        })}
        {/* marker */}
        <line x1={markerX} y1={markerY - 4} x2={markerX} y2={h} stroke="#4ADE80" strokeWidth="1.4" strokeDasharray="2 2" />
        <circle cx={markerX} cy={markerY} r="4" fill="#4ADE80" />
      </svg>
    </div>);

}

function EmbryoViz() {
  // grid of "screenings" with status icons
  const items = [
  { l: "ID", s: "good" }, { l: "BG", s: "good" }, { l: "Psych", s: "good" }, { l: "MMPI", s: "good" },
  { l: "Bio", s: "good" }, { l: "Fam", s: "good" }, { l: "Edu", s: "good" }, { l: "Refs", s: "good" },
  { l: "Crim", s: "good" }, { l: "SSN", s: "good" }, { l: "Cred", s: "good" }, { l: "Sex", s: "good" },
  { l: "Lic", s: "good" }, { l: "DUI", s: "good" }, { l: "Civil", s: "good" }, { l: "OpenID", s: "good" }];

  return (
    <div className="embryo-grid">
      {items.map((it, i) =>
      <div key={i} className={`embryo-cell ${it.s}`}>
          <div className="dot-bg" />
          <span>{it.l}</span>
        </div>
      )}
    </div>);

}

/* ---------- page ---------- */
function AchievementViz() {
  const achievements = [
  { cat: "Founder", label: "Series B SaaS", value: "$340M exit", tone: "amber" },
  { cat: "Founder", label: "AI infra startup", value: "Acquired '24", tone: "amber" },
  { cat: "Science", label: "Nature · 47 cites", value: "PhD, Stanford", tone: "purple" },
  { cat: "Science", label: "3 named patents", value: "Materials Sci", tone: "purple" },
  { cat: "Medicine", label: "Surgical resident", value: "Mayo Clinic", tone: "green" },
  { cat: "Medicine", label: "MD/PhD · genetics", value: "Johns Hopkins", tone: "green" },
  { cat: "Athletics", label: "National team", value: "Olympic trials", tone: "blue" },
  { cat: "Athletics", label: "Marathon · 2:31", value: "Boston qualifier", tone: "blue" },
  { cat: "Arts", label: "Symphony commission", value: "Berlin Phil", tone: "pink" },
  { cat: "Arts", label: "Gallery solo show", value: "Chelsea, NYC", tone: "pink" }];

  return (
    <div className="achievement-list">
      {achievements.map((a, i) =>
      <div className="achievement-row" key={i}>
          <span className={`chip-ach tone-${a.tone}`}>{a.cat}</span>
          <div className="achievement-label">{a.label}</div>
          <div className="achievement-value">{a.value}</div>
        </div>
      )}
    </div>);

}

function Science() {
  return (
    <div data-screen-label="03 Science">
      <section className="sci-hero">
        <div className="eyebrow">The Science</div>
        <h1>How to define <em>exceptional</em>.</h1>
        <p>Every D1 donor passes a four-tier evaluation: genetic, cognitive, medical, and psychological. Less than 0.03% of applicants are accepted.</p>
      </section>

      <div className="sci-divider" />

      <section className="sci-row">
        <div>
          <div className="sci-num">
            <span className="badge">01</span>
            <span>Genetic Screening</span>
            <span className="sep">·</span>
            <span className="cat">Heritable risk</span>
          </div>
          <h2 className="sci-headline">514 conditions, sequenced and <em>cleared</em>.</h2>
          <p className="sci-body">
            Donors undergo expanded carrier screening across 514 recessive and X-linked disorders, plus whole-exome sequencing for dominant disease risk. Carrier status is matched against the intended parent's panel before reservation.
          </p>
          <div className="feature-grid">
            <div className="feature-card">
              <IconDNA />
              <div className="feature-title">Expanded carrier panel</div>
              <p className="feature-text">514 conditions including CF, SMA, Tay-Sachs, sickle-cell, fragile X.</p>
            </div>
            <div className="feature-card">
              <IconShield />
              <div className="feature-title">Whole-exome sequencing</div>
              <p className="feature-text">~22,000 protein-coding genes screened for dominant variants.</p>
            </div>
            <div className="feature-card">
              <IconMicroscope />
              <div className="feature-title">Karyotype + chromosomal</div>
              <p className="feature-text">G-band karyotyping confirms 46,XY with no structural anomalies.</p>
            </div>
          </div>
        </div>
        <div className="sci-visual">
          <DNAViz />
        </div>
      </section>

      <div className="sci-divider" />

      <section className="sci-row reverse">
        <div>
          <div className="sci-num">
            <span className="badge">02</span>
            <span>Cognitive Assessment</span>
            <span className="sep">·</span>
            <span className="cat">Standardized IQ</span>
          </div>
          <h2 className="sci-headline">A proctored, full-battery <em>IQ</em>.</h2>
          <p className="sci-body">
            Donors complete the WAIS-IV under proctored conditions — verbal comprehension, perceptual reasoning, working memory, and processing speed. We report the composite plus subtest breakdowns. We do not coach, and we do not retest.
          </p>
          <div className="feature-grid">
            <div className="feature-card">
              <IconBrain />
              <div className="feature-title">WAIS-IV proctored</div>
              <p className="feature-text">120-minute supervised administration by a licensed psychometrist.</p>
            </div>
            <div className="feature-card">
              <IconChart />
              <div className="feature-title">Four index scores</div>
              <p className="feature-text">VCI, PRI, WMI, PSI — full subtest profile included in donor report.</p>
            </div>
            <div className="feature-card">
              <IconPuzzle />
              <div className="feature-title">Floor: 99th percentile</div>
              <p className="feature-text">Donors below ~130 composite are not advanced to the panel.</p>
            </div>
          </div>
        </div>
        <div className="sci-visual">
          <BellViz />
        </div>
      </section>

      <div className="sci-divider" />

      <section className="sci-row">
        <div>
          <div className="sci-num">
            <span className="badge">03</span>
            <span>Character &amp; Identity</span>
            <span className="sep">·</span>
            <span className="cat">Verified humans</span>
          </div>
          <h2 className="sci-headline">Every donor, <em>verified</em> and known.</h2>
          <p className="sci-body">
            We don't anonymize donors into ID numbers. Every donor on D1 is identity-verified, background-checked, and psychologically evaluated — and opts in to be reachable by their resulting child at age 18.
          </p>
          <div className="feature-grid">
            <div className="feature-card">
              <IconShield />
              <div className="feature-title">Background check</div>
              <p className="feature-text">County, state, and federal records. Refreshed annually while active.</p>
            </div>
            <div className="feature-card">
              <IconLock />
              <div className="feature-title">Identity verification</div>
              <p className="feature-text">Government ID, biometric match, and notarized open-ID agreement on file.</p>
            </div>
            <div className="feature-card">
              <IconEye />
              <div className="feature-title">Psychological evaluation</div>
              <p className="feature-text">MMPI-3 plus structured clinician interview. Stable, prosocial profile required.</p>
            </div>
          </div>
        </div>
        <div className="sci-visual">
          <EmbryoViz />
        </div>
      </section>

      <div className="sci-divider" />

      <section className="sci-row reverse">
        <div>
          <div className="sci-num">
            <span className="badge">04</span>
            <span>Selection</span>
            <span className="sep">·</span>
            <span className="cat">The accomplished few</span>
          </div>
          <h2 className="sci-headline">Donors who've already <em>made their mark</em>.</h2>
          <p className="sci-body">
            D1 donors are not students looking for cash. They are founders with exits, scientists with citations, athletes with medals, and physicians whose patients live longer. We invite — we do not post listings. Every donor on this platform has already done something the world remembers.
          </p>
          <div className="feature-grid">
            <div className="feature-card">
              <IconBrain />
              <div className="feature-title">Founders &amp; operators</div>
              <p className="feature-text">Company exits, IPO'd ventures, leadership roles at companies you've heard of.</p>
            </div>
            <div className="feature-card">
              <IconMicroscope />
              <div className="feature-title">Scientists &amp; inventors</div>
              <p className="feature-text">PhDs from top labs, named patents, Nature / Science / NEJM citations.</p>
            </div>
            <div className="feature-card">
              <IconChart />
              <div className="feature-title">Athletes &amp; artists</div>
              <p className="feature-text">National-team athletes, conservatory composers, gallery-shown artists.</p>
            </div>
          </div>
        </div>
        <div className="sci-visual">
          <AchievementViz />
        </div>
      </section>

      <div className="sci-divider" style={{ display: "none" }} />

      <section className="research-section" style={{ display: "none" }}>
        <div className="research-head">
          <div className="sci-num">
            <span className="badge">05</span>
            <span>Our Research</span>
            <span className="sep">·</span>
            <span className="cat">Peer-reviewed</span>
          </div>
          <h2 className="sci-headline" style={{ marginTop: 14, maxWidth: 800 }}>
            What the science <em>actually</em> says.
          </h2>
          <p className="sci-body" style={{ maxWidth: 720, margin: "16px 0 0" }}>
            We publish what the research shows — not what's comforting to hear. Below is the foundation we point women to when they ask why donor selection matters. Every claim links to peer-reviewed work.
          </p>
        </div>

        <div className="research-callout">
          <div className="research-callout-label">The one-liner</div>
          <blockquote>
            "A meta-analysis of 2,748 twin studies covering 14.5 million twins found that genes account for roughly half of all human trait variation — and for many traits parents care about most, it's significantly higher."
          </blockquote>
          <a className="research-cite-link" href="https://www.nature.com/articles/ng.3285" target="_blank" rel="noopener noreferrer">
            Polderman et al. · Nature Genetics, 2015 ↗
          </a>
        </div>

        <div className="research-table-wrap">
          <table className="donor-table research-table">
            <thead>
              <tr>
                <th>Trait</th>
                <th>Heritability</th>
                <th>Evidence</th>
                <th>Key study</th>
              </tr>
            </thead>
            <tbody>
              {[
              { trait: "Eye / hair color", h: "95–98%", ev: 5, study: "Visible Trait Genetics Consortium", link: "https://www.cell.com/ajhg/fulltext/S0002-9297(14)00516-2" },
              { trait: "Height", h: "~80%", ev: 5, study: "Yengo et al., Nature, 2022", link: "https://www.nature.com/articles/s41586-022-05275-y" },
              { trait: "Intelligence (adult)", h: "50–80%", ev: 5, study: "Plomin & Deary, Mol. Psychiatry, 2015", link: "https://www.nature.com/articles/mp201475" },
              { trait: "Autism spectrum", h: "~80%", ev: 5, study: "Sandin et al., JAMA, 2017", link: "https://jamanetwork.com/journals/jama/fullarticle/2654804" },
              { trait: "Type 1 diabetes", h: "~88%", ev: 5, study: "Hyttinen et al., Diabetes, 2003", link: "https://diabetesjournals.org/diabetes/article/52/4/1052/27001" },
              { trait: "ADHD", h: "~74%", ev: 5, study: "Faraone & Larsson, Mol. Psych., 2019", link: "https://www.nature.com/articles/s41380-018-0070-0" },
              { trait: "Personality (Big Five)", h: "40–60%", ev: 4, study: "Vukasović & Bratko, Psych. Bulletin, 2015", link: "https://psycnet.apa.org/record/2015-21379-001" },
              { trait: "Depression", h: "37–48%", ev: 4, study: "Sullivan et al., Am. J. Psych., 2000", link: "https://ajp.psychiatryonline.org/doi/10.1176/appi.ajp.157.10.1552" },
              { trait: "Heart disease", h: "40–60%", ev: 4, study: "Zdravkovic et al., J. Internal Med., 2002", link: "https://onlinelibrary.wiley.com/doi/10.1046/j.1365-2796.2002.01029.x" },
              { trait: "Alcohol use disorder", h: "50–60%", ev: 4, study: "Verhulst et al., Psych. Medicine, 2015", link: "https://www.cambridge.org/core/journals/psychological-medicine/article/abs/heritability-of-alcohol-use-disorder/" },
              { trait: "Subjective well-being", h: "33–50%", ev: 3, study: "Bartels, Behavior Genetics, 2015", link: "https://link.springer.com/article/10.1007/s10519-015-9713-y" },
              { trait: "Longevity", h: "25–30%", ev: 3, study: "Ruby et al., Genetics, 2018", link: "https://academic.oup.com/genetics/article/210/3/1109/5931017" }].
              map((r, i) =>
              <tr key={i} className="row">
                  <td>{r.trait}</td>
                  <td><span className="chip-iq">{r.h}</span></td>
                  <td><span className="stars" title={`${r.ev} of 5`}>{"★".repeat(r.ev)}<span className="dim">{"★".repeat(5 - r.ev)}</span></span></td>
                  <td>
                    <a href={r.link} target="_blank" rel="noopener noreferrer" className="research-link">
                      {r.study} <span style={{ opacity: 0.5 }}>↗</span>
                    </a>
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>

        <div className="research-grid">
          <div className="research-card">
            <div className="research-card-num">2,748</div>
            <div className="research-card-label">Twin studies analyzed</div>
            <div className="research-card-meta">Polderman et al. mega-meta · 14.5M twin pairs · 17,804 traits</div>
            <a className="research-link small" href="https://www.nature.com/articles/ng.3285" target="_blank" rel="noopener noreferrer">Nature Genetics, 2015 ↗</a>
          </div>
          <div className="research-card">
            <div className="research-card-num">500K</div>
            <div className="research-card-label">UK Biobank participants</div>
            <div className="research-card-meta">Genetic + lifestyle + health records. Powers most modern GWAS.</div>
            <a className="research-link small" href="https://www.ukbiobank.ac.uk/" target="_blank" rel="noopener noreferrer">ukbiobank.ac.uk ↗</a>
          </div>
          <div className="research-card">
            <div className="research-card-num">1.1M</div>
            <div className="research-card-label">Educational attainment GWAS</div>
            <div className="research-card-meta">Polygenic score now explains ~12% of variance in years of schooling.</div>
            <a className="research-link small" href="https://www.nature.com/articles/s41588-018-0147-3" target="_blank" rel="noopener noreferrer">Lee et al., Nat. Gen., 2018 ↗</a>
          </div>
          <div className="research-card">
            <div className="research-card-num">6,000+</div>
            <div className="research-card-label">GWAS Catalog studies</div>
            <div className="research-card-meta">Linking specific variants to traits — the public scaffold underneath modern donor screening.</div>
            <a className="research-link small" href="https://www.ebi.ac.uk/gwas/" target="_blank" rel="noopener noreferrer">ebi.ac.uk/gwas ↗</a>
          </div>
        </div>

        <p className="research-footnote">
          Heritability ≠ destiny. These are population-level estimates; individual outcomes always involve environment, chance, and choice. We share the data so you can decide with your eyes open.
        </p>
      </section>
    </div>);

}

window.Science = Science;