// OncoVolt — main landing page (Variation C, polished)

// ─── Scroll reveal
function Reveal({ children, delay = 0, as = 'div' }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) if (e.isIntersecting) { setVisible(true); io.disconnect(); break; }
    }, { threshold: 0.1, rootMargin: '0px 0px -80px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} style={{
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(24px)',
      transition: `opacity 900ms ease ${delay}ms, transform 900ms cubic-bezier(.2,.7,.3,1) ${delay}ms`,
    }}>
      {children}
    </Tag>
  );
}

// ─── Hero
function HeroMain({ tweaks }) {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf; const start = performance.now();
    const tick = () => { setT((performance.now() - start) / 1000); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);
  const mv = -40 + Math.sin(t * 0.8) * 8;
  const phase = (Math.sin(t * 0.2) + 1) / 2;

  const TAGLINES = {
    becomes: ['Between what a cell ', 'is', ' and what it ', 'becomes', ',', 'there is ', 'electricity', '.'],
    language: ['A new language', 'for ', 'oncology', '.'],
    hear: ['Every cell', 'has a voice.', 'We are learning', 'to hear it.'],
  };

  return (
    <div style={{ position: 'relative', height: 920, overflow: 'hidden', background: 'radial-gradient(ellipse at center, #0F1A2E 0%, #05080F 70%)' }}>
      <OVMorphingCell intensity={tweaks.motifIntensity} accent={tweaks.accent} accent2="#7C5CFF" accent3={tweaks.warmAccent} showSatellites={tweaks.showSatellites} />

      {/* vignette */}
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, transparent 45%, rgba(5,8,15,0.9) 100%)', pointerEvents: 'none' }} />

      {/* subtle grain */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.5,
        backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")" }} />

      {/* specimen label floating above cell */}
      <div style={{ position: 'absolute', top: 'calc(50% - 240px)', left: '50%', transform: 'translateX(-50%)', textAlign: 'center', fontFamily: OV_BRAND.mono, fontSize: 10, letterSpacing: 2, color: OV_BRAND.textMute, textTransform: 'uppercase', zIndex: 1 }}>
        <div style={{ color: tweaks.accent, marginBottom: 6, letterSpacing: 2.6 }}>⊹ SPECIMEN 0841 · LIVE</div>
        <div>carcinoma · EMT phase {phase.toFixed(2)}</div>
      </div>

      {/* live readout right */}
      <div style={{
        position: 'absolute', top: 120, right: 44, fontFamily: OV_BRAND.mono, fontSize: 10,
        letterSpacing: 1.8, color: OV_BRAND.textDim, textAlign: 'right', lineHeight: 1.9, zIndex: 2,
      }}>
        <div>V<sub>mem</sub>&nbsp;&nbsp;{mv.toFixed(2)}&nbsp;mV</div>
        <div style={{ color: tweaks.accent }}>field active · 42.36°N</div>
        <div style={{ color: OV_BRAND.textMute, marginTop: 8 }}>boston · cambridge lab</div>
      </div>

      {/* corner tick marks */}
      {['tl', 'tr', 'bl', 'br'].map((k) => {
        const style = { position: 'absolute', width: 22, height: 22, pointerEvents: 'none', borderColor: `${tweaks.accent}88` };
        if (k.includes('t')) style.top = 96; else style.bottom = 24;
        if (k.includes('l')) style.left = 24; else style.right = 24;
        style.borderStyle = 'solid';
        style.borderWidth = `${k.includes('t') ? '1px' : '0'} ${k.includes('r') ? '1px' : '0'} ${k.includes('b') ? '1px' : '0'} ${k.includes('l') ? '1px' : '0'}`;
        return <div key={k} style={style} />;
      })}

      {/* hero content */}
      <div style={{ position: 'absolute', inset: 0, padding: '140px 44px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', zIndex: 2 }}>
        <div style={{ maxWidth: 920 }}>
          <Reveal>
            <OVEyebrow style={{ marginBottom: 32 }}>Stealth mode · Cambridge, MA</OVEyebrow>
          </Reveal>
          <Reveal delay={120}>
            {tweaks.tagline === 'becomes' && (
              <h1 style={heroH1}>
                Between what a cell <em style={{ fontStyle: 'italic', color: tweaks.accent, fontWeight: 300 }}>is</em><br/>
                and what it <em style={{ fontStyle: 'italic', color: tweaks.warmAccent, fontWeight: 300 }}>becomes</em>,<br/>
                there is <span style={{ color: tweaks.accent }}>electricity</span>.
              </h1>
            )}
            {tweaks.tagline === 'language' && (
              <h1 style={heroH1}>
                A new language<br/>for <em style={{ fontStyle: 'italic', color: tweaks.accent, fontWeight: 300 }}>oncology</em>.
              </h1>
            )}
            {tweaks.tagline === 'hear' && (
              <h1 style={heroH1}>
                Every cell has a voice.<br/>
                <span style={{ color: tweaks.accent }}>We are learning to hear it.</span>
              </h1>
            )}
            {tweaks.tagline === 'current' && (
              <h1 style={heroH1}>
                Cancer is, among<br/>other things, a<br/><em style={{ fontStyle: 'italic', color: tweaks.accent, fontWeight: 300 }}>current</em>.
              </h1>
            )}
          </Reveal>
        </div>

        <Reveal delay={260}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr auto', gap: 48, alignItems: 'end' }}>
            <p style={{ fontFamily: OV_BRAND.sans, fontSize: 17, lineHeight: 1.6, color: OV_BRAND.textDim, margin: 0, maxWidth: 460 }}>
              OncoVolt is building the <span style={{ color: OV_BRAND.text }}>operating system for precision cancer medicine</span> — patient-specific digital twins for every tumor biopsy. Quiet, precise, patient-first.
            </p>
            <div />
            <div style={{ display: 'flex', gap: 12 }}>
              <a href="#contact" style={btnPrimary(tweaks.accent)}>Open a dialogue →</a>
              <a href="#approach" style={btnGhost}>Read the thesis</a>
            </div>
          </div>
        </Reveal>
      </div>

      {/* scroll cue */}
      <div style={{ position: 'absolute', bottom: 28, left: '50%', transform: 'translateX(-50%)', fontFamily: OV_BRAND.mono, fontSize: 9, letterSpacing: 2, color: OV_BRAND.textMute, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, zIndex: 2 }}>
        <span>CONTINUE</span>
        <div style={{ width: 1, height: 40, background: `linear-gradient(to bottom, ${tweaks.accent}, transparent)` }} />
      </div>
    </div>
  );
}

const heroH1 = {
  fontFamily: OV_BRAND.serif,
  fontSize: 'clamp(48px, 6.8vw, 104px)',
  fontWeight: 300,
  letterSpacing: -2.5,
  lineHeight: 0.98,
  color: OV_BRAND.text,
  margin: 0,
  textWrap: 'balance',
};

const btnPrimary = (accent) => ({
  fontFamily: OV_BRAND.mono, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', fontWeight: 600,
  background: accent, color: '#05080F',
  border: 'none', padding: '15px 24px', borderRadius: 2, cursor: 'pointer', textDecoration: 'none',
  display: 'inline-block',
});
const btnGhost = {
  fontFamily: OV_BRAND.mono, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase',
  background: 'transparent', color: OV_BRAND.text,
  border: `1px solid ${OV_BRAND.lineStrong}`, padding: '15px 24px', borderRadius: 2, cursor: 'pointer', textDecoration: 'none',
  display: 'inline-block',
};

// ─── About / Vision / Mission
function About({ tweaks }) {
  return (
    <OVSection id="about" eyebrow="The company" index="i" style={{ padding: '140px 44px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, marginBottom: 96 }}>
        <Reveal>
          <div>
            <div style={{ fontFamily: OV_BRAND.mono, fontSize: 10, color: tweaks.accent, letterSpacing: 2, marginBottom: 22 }}>
              ABOUT ONCOVOLT
            </div>
            <h2 style={{
              fontFamily: OV_BRAND.serif, fontSize: 'clamp(36px, 4.4vw, 60px)', fontWeight: 300,
              letterSpacing: -1.6, lineHeight: 1.04, margin: 0, color: OV_BRAND.text, textWrap: 'balance',
            }}>
              The operating system<br/>for <em style={{ fontStyle: 'italic', color: tweaks.accent }}>precision cancer medicine</em>.
            </h2>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <p style={{
            fontFamily: OV_BRAND.sans, fontSize: 17, lineHeight: 1.7, color: OV_BRAND.textDim, margin: 0,
          }}>
            OncoVolt is building the operating system for precision cancer medicine. We turn every tumor biopsy into a <span style={{ color: OV_BRAND.text }}>patient-specific digital twin</span> that predicts how cancer will respond to therapy, when it will progress, and where it will spread — fusing spatial transcriptomics, genomic profiles, and real-world treatment outcomes into a four-tier prediction stack validated on over <span style={{ color: OV_BRAND.text }}>27,000 patient observations</span>. Stealth mode.
          </p>
        </Reveal>
      </div>

      <Reveal delay={220}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', border: `1px solid ${OV_BRAND.line}` }}>
          <div style={{ padding: '56px 48px', borderRight: `1px solid ${OV_BRAND.line}`, position: 'relative', overflow: 'hidden' }}>
            <div style={{
              position: 'absolute', top: 0, right: 0, fontFamily: OV_BRAND.serif,
              fontSize: 200, fontWeight: 300, color: `${tweaks.accent}10`, lineHeight: 1,
              letterSpacing: -8, pointerEvents: 'none',
            }}>V</div>
            <div style={{ position: 'relative' }}>
              <div style={{ fontFamily: OV_BRAND.mono, fontSize: 10, letterSpacing: 2, color: tweaks.accent, marginBottom: 22 }}>VISION</div>
              <p style={{
                fontFamily: OV_BRAND.serif, fontSize: 'clamp(22px, 2.1vw, 30px)', fontWeight: 300, lineHeight: 1.35, letterSpacing: -0.4,
                color: OV_BRAND.text, margin: 0, textWrap: 'pretty',
              }}>
                To make precision oncology <em style={{ fontStyle: 'italic', color: tweaks.accent }}>predictive</em>, not just reactive — by giving every clinician the power to simulate a patient's tumor before choosing how to treat it.
              </p>
            </div>
          </div>
          <div style={{ padding: '56px 48px', background: `rgba(255,176,103,0.02)`, position: 'relative', overflow: 'hidden' }}>
            <div style={{
              position: 'absolute', top: 0, right: 0, fontFamily: OV_BRAND.serif,
              fontSize: 200, fontWeight: 300, color: `${tweaks.warmAccent}10`, lineHeight: 1,
              letterSpacing: -8, pointerEvents: 'none',
            }}>M</div>
            <div style={{ position: 'relative' }}>
              <div style={{ fontFamily: OV_BRAND.mono, fontSize: 10, letterSpacing: 2, color: tweaks.warmAccent, marginBottom: 22 }}>MISSION</div>
              <p style={{
                fontFamily: OV_BRAND.sans, fontSize: 16, lineHeight: 1.7, color: OV_BRAND.textDim, margin: 0,
              }}>
                OncoVolt is building the operating system for precision cancer medicine: a <span style={{ color: OV_BRAND.text }}>four-tier digital twin platform</span> that integrates spatial-omics, mutation profiles, and real-world treatment outcomes to forecast EMT plasticity, rank therapies, predict progression-free survival, and chart the metastatic cascade — patient by patient, decision by decision.
              </p>
            </div>
          </div>
        </div>
      </Reveal>
    </OVSection>
  );
}

// ─── Problem section
function Problem({ tweaks }) {
  return (
    <OVSection eyebrow="The question" index="ii" style={{ padding: '140px 44px' }}>
      <Reveal>
        <div style={{ maxWidth: 1080 }}>
          <p style={{
            fontFamily: OV_BRAND.serif, fontSize: 'clamp(28px, 3.2vw, 44px)', fontWeight: 300, lineHeight: 1.3, letterSpacing: -0.6,
            color: OV_BRAND.text, margin: 0, textWrap: 'pretty',
          }}>
            Today, oncology is mostly <em style={{ color: OV_BRAND.textMute, fontStyle: 'italic' }}>reactive</em> — a therapy chosen from population statistics, then adjusted after the tumor has moved. OncoVolt is rebuilding that loop in <span style={{ color: tweaks.accent }}>silico</span>: a patient-specific digital twin that simulates how the tumor will respond, when it will progress, and — at the heart of it — the moment it learns to move.
          </p>
          <p style={{ fontFamily: OV_BRAND.sans, fontSize: 15, color: OV_BRAND.textMute, marginTop: 36, maxWidth: 680, lineHeight: 1.7 }}>
            That shift — from reactive to predictive — is small in framing. Its implications, for how we predict, prevent, and one day reverse metastasis, are not.
          </p>
        </div>
      </Reveal>

      <Reveal delay={120}>
        <div style={{ marginTop: 96, display: 'grid', gridTemplateColumns: '1fr 1fr', border: `1px solid ${OV_BRAND.line}` }}>
          {[
            { side: 'LEFT', label: 'E · Epithelial', sub: 'polarized · junctioned · settled', color: tweaks.accent, desc: 'The cell holds a stable resting voltage. It speaks to its neighbors through gap junctions. It stays where it belongs.' },
            { side: 'RIGHT', label: 'M · Mesenchymal', sub: 'depolarized · detached · mobile', color: tweaks.warmAccent, desc: 'The voltage drifts. Junctions close. The cell forgets its address, and begins to travel.' },
          ].map((s, i) => (
            <div key={s.side} style={{
              padding: '56px 48px',
              borderRight: i === 0 ? `1px solid ${OV_BRAND.line}` : 'none',
              background: i === 1 ? `rgba(255,176,103,0.02)` : 'transparent',
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', top: 0, right: 0, fontFamily: OV_BRAND.serif,
                fontSize: 200, fontWeight: 300, color: `${s.color}10`, lineHeight: 1,
                letterSpacing: -8, pointerEvents: 'none',
              }}>{i === 0 ? 'E' : 'M'}</div>
              <div style={{ position: 'relative' }}>
                <div style={{ fontFamily: OV_BRAND.mono, fontSize: 10, letterSpacing: 2, color: s.color, marginBottom: 20 }}>{s.side}</div>
                <div style={{ fontFamily: OV_BRAND.serif, fontSize: 40, fontWeight: 300, letterSpacing: -0.8, color: OV_BRAND.text, marginBottom: 6 }}>
                  {s.label}
                </div>
                <div style={{ fontFamily: OV_BRAND.mono, fontSize: 11, color: OV_BRAND.textMute, letterSpacing: 1.2, marginBottom: 32 }}>{s.sub}</div>
                <p style={{ fontFamily: OV_BRAND.sans, fontSize: 16, lineHeight: 1.7, color: OV_BRAND.textDim, margin: 0, maxWidth: 420 }}>
                  {s.desc}
                </p>
              </div>
            </div>
          ))}
        </div>
      </Reveal>

      {/* stats strip */}
      <Reveal delay={220}>
        <div style={{ marginTop: 80, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40 }}>
          {[
            { n: '~70%', l: 'of cancer deaths trace to metastasis — not the primary tumor.' },
            { n: '27k', l: 'patient observations validating a four-tier prediction stack.' },
            { n: '2026', l: 'the year this became a computable problem, quietly.' },
          ].map((s, i) => (
            <div key={i} style={{ borderTop: `1px solid ${OV_BRAND.lineStrong}`, paddingTop: 22 }}>
              <div style={{ fontFamily: OV_BRAND.serif, fontSize: 56, fontWeight: 300, letterSpacing: -1.6, color: tweaks.accent, lineHeight: 1 }}>{s.n}</div>
              <div style={{ fontFamily: OV_BRAND.sans, fontSize: 13, color: OV_BRAND.textDim, marginTop: 14, lineHeight: 1.5, maxWidth: 260 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </Reveal>
    </OVSection>
  );
}

// ─── Approach
function Approach({ tweaks }) {
  return (
    <OVSection id="approach" eyebrow="The practice" index="iii" style={{ padding: '140px 44px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
        <Reveal>
          <h2 style={{
            fontFamily: OV_BRAND.serif, fontSize: 'clamp(40px, 5vw, 72px)', fontWeight: 300, letterSpacing: -2,
            lineHeight: 1.0, margin: 0, color: OV_BRAND.text,
          }}>
            From biopsy<br/>to digital twin,<br/>
            <em style={{ color: tweaks.accent, fontStyle: 'italic' }}>to a decision tested before the dose</em>.
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 32, fontFamily: OV_BRAND.sans, fontSize: 17, lineHeight: 1.7, color: OV_BRAND.textDim }}>
            <p style={{ margin: 0 }}>
              A full-stack computational approach — spatial transcriptomics, genomic profiles, and real-world treatment outcomes, fused with the bioelectric physics of EMT. Physics where physics belongs; machine learning where the data demands it.
            </p>
            <p style={{ margin: 0 }}>
              We are not drug-discovery-through-models. We are <span style={{ color: OV_BRAND.text }}>the lens between a biopsy and the next treatment decision</span> — a simulation that ranks therapies, forecasts plasticity, and charts where the cancer will spread.
            </p>
          </div>
        </Reveal>
      </div>

      <Reveal delay={220}>
        <div style={{ marginTop: 100, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', border: `1px solid ${OV_BRAND.line}` }}>
          {[
            { k: '01', t: 'Observe', d: 'Each biopsy carries the tumor in detail — spatial transcriptomics, mutation profile, treatment history. We turn it into structured signal.', tag: 'biopsy · multi-omics' },
            { k: '02', t: 'Simulate', d: 'A four-tier digital twin: tissue, bioelectric field, plasticity dynamics, outcome forecast. Faithful enough to test decisions in silico.', tag: 'four-tier prediction stack' },
            { k: '03', t: 'Intervene', d: 'Rank therapies. Forecast progression-free survival. Chart where the cancer will spread next. Every decision tested before the dose.', tag: 'in silico decision support' },
          ].map((step, i) => (
            <div key={step.k} style={{
              padding: '44px 36px',
              borderRight: i < 2 ? `1px solid ${OV_BRAND.line}` : 'none',
              position: 'relative', minHeight: 320,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            }}>
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 36 }}>
                  <div style={{ fontFamily: OV_BRAND.mono, fontSize: 10, color: tweaks.accent, letterSpacing: 1.6 }}>STAGE {step.k}</div>
                  <div style={{ fontFamily: OV_BRAND.mono, fontSize: 9, color: OV_BRAND.textMute, letterSpacing: 1.2 }}>{i < 2 ? '→' : '■'}</div>
                </div>
                <h3 style={{ fontFamily: OV_BRAND.serif, fontSize: 36, fontWeight: 300, letterSpacing: -1, color: OV_BRAND.text, margin: '0 0 18px' }}>{step.t}</h3>
                <p style={{ fontFamily: OV_BRAND.sans, fontSize: 15, lineHeight: 1.65, color: OV_BRAND.textDim, margin: 0 }}>{step.d}</p>
              </div>
              <div style={{ fontFamily: OV_BRAND.mono, fontSize: 9, color: OV_BRAND.textMute, letterSpacing: 1.4, textTransform: 'uppercase', marginTop: 28 }}>
                {step.tag}
              </div>
            </div>
          ))}
        </div>
      </Reveal>
    </OVSection>
  );
}

// ─── Technology teaser — live simulator mock with three readout panels
function Tech({ tweaks }) {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const tick = () => { setT((performance.now() - start) / 1000); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <OVSection id="platform" eyebrow="The platform" index="iv" style={{ padding: '140px 44px' }}>
      <Reveal>
        <div style={{
          border: `1px solid ${OV_BRAND.line}`,
          background: `linear-gradient(180deg, rgba(0,229,255,0.015), transparent)`,
          padding: 40,
          position: 'relative',
        }}>
          {/* Mock terminal / simulator window */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: OV_BRAND.mono, fontSize: 11, color: OV_BRAND.textDim, letterSpacing: 1.4 }}>
              <span style={{ width: 8, height: 8, borderRadius: 4, background: tweaks.accent, boxShadow: `0 0 10px ${tweaks.accent}` }} />
              DIGITAL TWIN · SPECIMEN 0841 · TIERS i–iv ACTIVE
            </div>
            <div style={{ fontFamily: OV_BRAND.mono, fontSize: 11, color: OV_BRAND.textMute, letterSpacing: 1.4 }}>
              CONFIDENTIAL
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24 }}>
            {/* signal panel */}
            <div style={{ border: `1px solid ${OV_BRAND.line}`, padding: 18, aspectRatio: '1.1' }}>
              <div style={{ fontFamily: OV_BRAND.mono, fontSize: 10, color: OV_BRAND.textDim, letterSpacing: 1.2, marginBottom: 14 }}>MEMBRANE POTENTIAL</div>
              <svg width="100%" height="82%" viewBox="0 0 200 120" preserveAspectRatio="none">
                {[...Array(4)].map((_, i) => (
                  <line key={i} x1="0" y1={i * 30} x2="200" y2={i * 30} stroke={OV_BRAND.line} strokeWidth="0.5" />
                ))}
                <path d={`M 0 ${60 + Math.sin(t) * 10} ${[...Array(100)].map((_, i) => {
                  const x = i * 2;
                  const y = 60 + Math.sin(i * 0.2 + t * 2) * 20 + Math.sin(i * 0.07 + t) * 10;
                  return `L ${x} ${y}`;
                }).join(' ')}`} stroke={tweaks.accent} strokeWidth="1.2" fill="none" />
              </svg>
            </div>
            {/* cell grid */}
            <div style={{ border: `1px solid ${OV_BRAND.line}`, padding: 18, aspectRatio: '1.1' }}>
              <div style={{ fontFamily: OV_BRAND.mono, fontSize: 10, color: OV_BRAND.textDim, letterSpacing: 1.2, marginBottom: 14 }}>TISSUE FIELD · 24×16</div>
              <svg width="100%" height="82%" viewBox="0 0 240 160" preserveAspectRatio="xMidYMid meet">
                {[...Array(16)].map((_, y) => [...Array(24)].map((_, x) => {
                  const v = Math.sin(x * 0.4 + y * 0.3 + t * 0.8) * 0.5 + 0.5;
                  return (
                    <rect key={`${x}-${y}`} x={x * 10} y={y * 10} width="8" height="8"
                      fill={v > 0.7 ? tweaks.accent : v > 0.4 ? '#7C5CFF' : '#1a2340'}
                      opacity={0.3 + v * 0.5} />
                  );
                }))}
              </svg>
            </div>
            {/* metrics */}
            <div style={{ border: `1px solid ${OV_BRAND.line}`, padding: 18, aspectRatio: '1.1', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div style={{ fontFamily: OV_BRAND.mono, fontSize: 10, color: OV_BRAND.textDim, letterSpacing: 1.2 }}>EMT PLASTICITY · LIVE</div>
              <div>
                <div style={{ fontFamily: OV_BRAND.serif, fontSize: 64, fontWeight: 300, color: OV_BRAND.text, lineHeight: 1, letterSpacing: -2 }}>
                  0.{((Math.sin(t * 0.3) * 0.5 + 0.5) * 99 + 1).toFixed(0).padStart(2, '0')}
                </div>
                <div style={{ fontFamily: OV_BRAND.mono, fontSize: 10, color: tweaks.accent, letterSpacing: 1.4, marginTop: 4 }}>
                  ↗ converging · Δ {(Math.sin(t) * 0.003).toFixed(4)}
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, fontFamily: OV_BRAND.mono, fontSize: 9, color: OV_BRAND.textMute, letterSpacing: 0.8 }}>
                <div>CHANNELS <span style={{ color: OV_BRAND.text, display: 'block', fontSize: 13 }}>124</span></div>
                <div>JUNCTIONS <span style={{ color: OV_BRAND.text, display: 'block', fontSize: 13 }}>3.4k</span></div>
                <div>CELLS <span style={{ color: OV_BRAND.text, display: 'block', fontSize: 13 }}>18,392</span></div>
                <div>TIERS <span style={{ color: OV_BRAND.text, display: 'block', fontSize: 13 }}>i–iv</span></div>
              </div>
            </div>
          </div>

          <div style={{ marginTop: 40, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 40 }}>
            <p style={{
              fontFamily: OV_BRAND.sans, fontSize: 16, lineHeight: 1.6, color: OV_BRAND.textDim, margin: 0, maxWidth: 560,
            }}>
              A four-tier digital twin of the patient's tumor — fusing spatial-omics, genomic profiles, bioelectric dynamics, and real-world outcomes. The lens through which we rank therapies, forecast plasticity, and chart the metastatic cascade — decision by decision.
            </p>
            <span style={{ fontFamily: OV_BRAND.mono, fontSize: 10, color: OV_BRAND.textMute, letterSpacing: 1.4, whiteSpace: 'nowrap' }}>
              MORE DETAILS POST-FILING →
            </span>
          </div>
        </div>
      </Reveal>
    </OVSection>
  );
}

// ─── Contact
function Contact({ tweaks }) {
  return (
    <OVSection id="contact" eyebrow="The invitation" index="v" style={{ padding: '160px 44px 120px' }}>
      <Reveal>
        <div style={{ textAlign: 'center', maxWidth: 980, margin: '0 auto' }}>
          <h2 style={{
            fontFamily: OV_BRAND.serif, fontSize: 'clamp(56px, 8vw, 112px)', fontWeight: 300, letterSpacing: -3,
            lineHeight: 0.98, margin: 0, color: OV_BRAND.text, textWrap: 'balance',
          }}>
            Come find us<br/>
            <em style={{ color: tweaks.accent, fontStyle: 'italic' }}>in Cambridge.</em>
          </h2>
          <p style={{ fontFamily: OV_BRAND.sans, fontSize: 18, lineHeight: 1.6, color: OV_BRAND.textDim, marginTop: 40, maxWidth: 580, marginLeft: 'auto', marginRight: 'auto' }}>
            Quietly. Deliberately. With people who believe oncology should be predictive — and that every patient deserves a model of their own tumor.
          </p>
        </div>
      </Reveal>

      <Reveal delay={160}>
        <div style={{ marginTop: 80, maxWidth: 860, margin: '80px auto 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: `1px solid ${OV_BRAND.line}` }}>
          {[
            { l: 'General', v: 'contact@oncovolt.bio' },
            { l: 'Scientific', v: 'science@oncovolt.bio' },
            { l: 'Partnerships', v: 'partners@oncovolt.bio' },
            { l: 'Careers', v: '— hiring quietly —' },
          ].map((it, i) => (
            <a href={it.v.includes('@') ? `mailto:${it.v}` : '#'} key={it.l} style={{
              padding: '28px 32px',
              borderRight: i % 2 === 0 ? `1px solid ${OV_BRAND.line}` : 'none',
              borderBottom: i < 2 ? `1px solid ${OV_BRAND.line}` : 'none',
              textDecoration: 'none', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              transition: 'background .2s',
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(0,229,255,0.03)'}
            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              <span style={{ fontFamily: OV_BRAND.mono, fontSize: 11, letterSpacing: 1.6, color: OV_BRAND.textMute, textTransform: 'uppercase' }}>{it.l}</span>
              <span style={{ fontFamily: OV_BRAND.mono, fontSize: 14, color: OV_BRAND.text }}>{it.v}</span>
            </a>
          ))}
        </div>
      </Reveal>
    </OVSection>
  );
}

// ─── Email signup (writes to emails.txt via /api/signup)
function EmailSignup({ tweaks }) {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | sending | ok | err
  const [message, setMessage] = React.useState('');

  const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());

  const submit = async (e) => {
    e.preventDefault();
    if (!valid || status === 'sending') return;
    setStatus('sending');
    setMessage('');
    try {
      const res = await fetch('/api/signup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: email.trim() }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok) {
        setStatus('ok');
        setMessage('Thank you. We will be in touch.');
        setEmail('');
      } else {
        setStatus('err');
        setMessage(data.error || 'Something went wrong. Please try again.');
      }
    } catch (err) {
      setStatus('err');
      setMessage('Network error. Please try again.');
    }
  };

  return (
    <OVSection eyebrow="Stay close" index="vi" style={{ padding: '120px 44px 140px' }}>
      <Reveal>
        <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
          <h2 style={{
            fontFamily: OV_BRAND.serif, fontSize: 'clamp(36px, 4.4vw, 64px)', fontWeight: 300, letterSpacing: -1.6,
            lineHeight: 1.05, margin: 0, color: OV_BRAND.text, textWrap: 'balance',
          }}>
            Follow the work<br/>
            <em style={{ color: tweaks.accent, fontStyle: 'italic' }}>as it surfaces.</em>
          </h2>
          <p style={{
            fontFamily: OV_BRAND.sans, fontSize: 16, lineHeight: 1.7, color: OV_BRAND.textDim,
            marginTop: 28, maxWidth: 540, marginLeft: 'auto', marginRight: 'auto',
          }}>
            Leave an address. We will write — sparingly — when there is something worth saying.
          </p>
        </div>
      </Reveal>

      <Reveal delay={140}>
        <form onSubmit={submit} style={{
          marginTop: 56, maxWidth: 560, marginLeft: 'auto', marginRight: 'auto',
          display: 'flex', gap: 0, border: `1px solid ${OV_BRAND.lineStrong}`, borderRadius: 2,
          background: 'rgba(255,255,255,0.02)',
        }}>
          <input
            type="email"
            required
            value={email}
            onChange={(e) => { setEmail(e.target.value); if (status !== 'idle') setStatus('idle'); }}
            placeholder="you@laboratory.org"
            aria-label="Email address"
            style={{
              flex: 1, background: 'transparent', border: 'none', outline: 'none',
              color: OV_BRAND.text, fontFamily: OV_BRAND.mono, fontSize: 13, letterSpacing: 0.4,
              padding: '16px 20px',
            }}
          />
          <button
            type="submit"
            disabled={!valid || status === 'sending'}
            style={{
              fontFamily: OV_BRAND.mono, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', fontWeight: 600,
              background: valid && status !== 'sending' ? tweaks.accent : 'rgba(255,255,255,0.06)',
              color: valid && status !== 'sending' ? '#05080F' : OV_BRAND.textMute,
              border: 'none', padding: '0 24px', cursor: valid && status !== 'sending' ? 'pointer' : 'not-allowed',
              transition: 'background .15s, color .15s',
            }}
          >
            {status === 'sending' ? 'Sending…' : 'Subscribe →'}
          </button>
        </form>

        <div style={{
          marginTop: 18, textAlign: 'center', minHeight: 18,
          fontFamily: OV_BRAND.mono, fontSize: 11, letterSpacing: 1.4, textTransform: 'uppercase',
          color: status === 'ok' ? tweaks.accent : status === 'err' ? tweaks.warmAccent : OV_BRAND.textMute,
        }}>
          {message}
        </div>
      </Reveal>
    </OVSection>
  );
}

Object.assign(window, { HeroMain, About, Problem, Approach, Tech, Contact, EmailSignup, Reveal });