/* About, Thesis triptych (GDL vs LLM), Platform, Pipeline (AI vs Traditional), Case Studies, Business Model */

function useReveal() {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }, { threshold: 0.15 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [ref, seen];
}

function useTilt(max = 8) {
  const ref = React.useRef(null);
  const [style, setStyle] = React.useState({});
  const onMove = (e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width - 0.5;
    const y = (e.clientY - r.top) / r.height - 0.5;
    setStyle({ transform: `perspective(900px) rotateX(${-y*max}deg) rotateY(${x*max}deg) translateY(-4px)` });
  };
  const onLeave = () => setStyle({ transform: 'perspective(900px) rotateX(0) rotateY(0)' });
  return { ref, style, onMouseMove: onMove, onMouseLeave: onLeave };
}
window.useReveal = useReveal;
window.useTilt = useTilt;

function About() {
  const d = window.LB_DATA.about;
  const [ref, seen] = useReveal();
  return (
    <section id="about" style={{ background: '#fff', padding: '140px 0' }}>
      <div className="shell" ref={ref} style={{ opacity: seen ? 1 : 0, transform: seen ? 'none' : 'translateY(24px)', transition: 'opacity 700ms var(--ease-out), transform 700ms var(--ease-out)' }}>
        <div style={{ display:'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 100 }}>
            <div className="eyebrow">{d.eyebrow}</div>
            <h2 className="section-title" style={{ maxWidth: '14ch' }}>{d.title}</h2>
          </div>
          <div>
            <p style={{ fontFamily: 'Montserrat, var(--font-sans)', fontSize: 18, lineHeight: 1.6, color: 'var(--lb-navy)', margin: '0 0 32px', textWrap:'pretty' }}>{d.body}</p>
            <p style={{ fontFamily: 'Montserrat, var(--font-sans)', fontSize: 16, lineHeight: 1.7, color: 'var(--lb-navy-400)', margin: '0 0 48px', textWrap:'pretty' }}>
              The Krishnaswamy Lab pioneered well known and used technologies such as PHATE, MELD, and ImmunoStruct — tools that reshaped how biologists see single-cell and structural data. Latent Bio carries that lineage into drug development.
            </p>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap: 24, borderTop:'1px solid var(--lb-gray-200)', paddingTop: 32 }}>
              {d.pillars.map((p, i) => (
                <div key={p.v} style={{ opacity: seen ? 1 : 0, transform: seen ? 'none' : 'translateY(16px)', transition: `opacity 600ms ${200 + i*120}ms var(--ease-out), transform 600ms ${200 + i*120}ms var(--ease-out)` }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight: 800, fontSize: 42, color: 'var(--lb-navy)', letterSpacing: '-.02em' }}>{p.k}</div>
                  <div style={{ fontFamily:'var(--font-sans)', fontSize: 13, color: 'var(--lb-navy-400)', marginTop: 4, lineHeight: 1.4 }}>{p.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.About = About;

function Thesis({ accentVar }) {
  const items = window.LB_DATA.thesis;
  return (
    <section id="thesis" style={{ background: 'var(--lb-navy)', color: '#fff', padding: '140px 0', position:'relative', overflow:'hidden' }}>
      <div aria-hidden style={{ position:'absolute', inset:0,
        backgroundImage:'radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px)',
        backgroundSize:'40px 40px', opacity: 0.35,
        maskImage:'radial-gradient(circle at 50% 40%, black, transparent 70%)',
      }}/>
      <div className="shell" style={{ position:'relative' }}>
        <div style={{ maxWidth: 860, marginBottom: 64 }}>
          <div className="eyebrow" style={{ color: '#9BE4A9' }}>THE THESIS</div>
          <h2 style={{ fontFamily:'var(--font-display)', fontSize: 52, fontWeight: 700, color:'#fff', margin:'12px 0 0', letterSpacing:'-.015em', lineHeight: 1.05, textWrap:'balance' }}>
            Biology is geometric. The shape is where the answers live.
          </h2>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap: 0, border:'1px solid rgba(255,255,255,0.12)', borderRadius: 16, overflow:'hidden', background:'rgba(255,255,255,0.02)' }}>
          {items.map((t, i) => (
            <div key={t.num} style={{
              padding: '36px 32px 40px',
              borderRight: i < items.length - 1 ? '1px solid rgba(255,255,255,0.12)' : 'none',
              position:'relative',
            }}>
              <div style={{ fontFamily:'var(--font-display)', fontWeight: 800, fontSize: 72, color:'transparent', WebkitTextStroke: `1px ${accentVar}`, letterSpacing:'-.03em', lineHeight: 1 }}>{t.num}</div>
              <div style={{ fontFamily:'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing:'.14em', color:'#9BE4A9', margin:'18px 0 8px' }}>{t.eyebrow}</div>
              <h3 style={{ fontFamily:'var(--font-display)', fontSize: 26, fontWeight: 700, color:'#fff', margin:'0 0 14px', lineHeight: 1.2, letterSpacing:'-.01em' }}>{t.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.65, color:'rgba(255,255,255,0.78)', margin: 0 }}>{t.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Thesis = Thesis;

function Platform({ accentVar }) {
  const d = window.LB_DATA.platform;
  return (
    <section id="platform" style={{ background: 'var(--lb-surface-gray)', padding: '140px 0' }}>
      <div className="shell">
        <div style={{ maxWidth: 860, marginBottom: 56 }}>
          <div className="eyebrow" style={{ color: accentVar }}>{d.eyebrow}</div>
          <h2 className="section-title">{d.title}</h2>
          <p className="section-lead" style={{ fontFamily: 'Montserrat, var(--font-sans)' }}>{d.lead}</p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap: 20 }}>
          {d.pillars.map((p, i) => <PlatformCard key={p.title} idx={i} pillar={p} accentVar={accentVar}/>)}
        </div>
      </div>
    </section>
  );
}
function PlatformCard({ pillar: p, idx, accentVar }) {
  const tilt = useTilt(5);
  return (
    <article ref={tilt.ref} onMouseMove={tilt.onMouseMove} onMouseLeave={tilt.onMouseLeave} style={{
      background:'#fff', border:'1px solid var(--lb-gray-200)', borderRadius:14,
      padding:28, display:'flex', flexDirection:'column', minHeight:260,
      boxShadow:'var(--shadow-xs)', transition:'box-shadow 220ms, transform 220ms var(--ease-standard)',
      transformStyle:'preserve-3d', ...tilt.style,
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:14 }}>
        <span style={{ width:30, height:30, borderRadius:8, background: accentVar+'1A', color: accentVar, display:'grid', placeItems:'center', fontFamily:'var(--font-display)', fontWeight:800, fontSize:12 }}>{String(idx+1).padStart(2,'0')}</span>
        <div style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'.14em', color: accentVar }}>{p.tag}</div>
      </div>
      <h3 style={{ fontFamily:'var(--font-display)', fontSize:22, fontWeight:700, color:'var(--lb-navy)', margin:'0 0 10px', letterSpacing:'-.01em' }}>{p.title}</h3>
      <p style={{ fontSize:15, lineHeight:1.6, color:'var(--lb-navy-400)', margin:0 }}>{p.body}</p>
    </article>
  );
}
window.Platform = Platform;

function Pipeline({ accentVar }) {
  const d = window.LB_DATA.pipeline;
  return (
    <section id="pipeline" style={{ background:'#fff', padding:'140px 0' }}>
      <div className="shell">
        <div style={{ maxWidth: 860, marginBottom: 48 }}>
          <div className="eyebrow" style={{ color: accentVar }}>{d.eyebrow}</div>
          <h2 className="section-title">{d.title}</h2>
          <p className="section-lead">{d.lead}</p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', border:'1px solid var(--lb-gray-200)', borderRadius:14, overflow:'hidden' }}>
          {d.tracks.map((t, i) => (
            <div key={t.title} style={{
              padding:'28px 24px 32px',
              borderRight: i<d.tracks.length-1?'1px solid var(--lb-gray-200)':'none',
              position:'relative', background:'#fff',
            }}>
              <div style={{ position:'absolute', top:0, left:0, right:0, height:3, background: accentVar, transform:`scaleX(${(i+1)/d.tracks.length})`, transformOrigin:'left' }}/>
              <div style={{ display:'flex', justifyContent:'space-between', gap:10, marginBottom: 14 }}>
                <span style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'.12em', color: accentVar }}>AI · {t.phase}</span>
                <span style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:600, letterSpacing:'.1em', color:'var(--lb-gray-500)', textDecoration:'line-through' }}>{t.phaseTrad}</span>
              </div>
              <h3 style={{ fontFamily:'var(--font-display)', fontSize:18, fontWeight:700, color:'var(--lb-navy)', margin:'0 0 10px', lineHeight:1.25 }}>{t.title}</h3>
              <p style={{ fontSize:14, lineHeight:1.6, color:'var(--lb-navy-400)', margin:0 }}>{t.body}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 28, fontFamily:'var(--font-sans)', fontStyle:'italic', fontSize:14, color:'var(--lb-navy-400)' }}>{d.comparisonNote}</div>
      </div>
    </section>
  );
}
window.Pipeline = Pipeline;

function CaseStudies({ accentVar }) {
  const items = window.LB_DATA.caseStudies;
  const [active, setActive] = React.useState(0);
  return (
    <section id="case-studies" style={{ background:'var(--lb-navy)', color:'#fff', padding:'140px 0', position:'relative', overflow:'hidden' }}>
      <div aria-hidden style={{ position:'absolute', inset:0, background:'radial-gradient(700px 500px at 90% 20%, rgba(54,161,77,0.16), transparent 60%)' }}/>
      <div className="shell" style={{ position:'relative' }}>
        <div style={{ maxWidth: 860, marginBottom: 48 }}>
          <div className="eyebrow" style={{ color:'#9BE4A9' }}>CLINICAL CASE STUDIES</div>
          <h2 style={{ fontFamily:'var(--font-display)', fontSize:44, fontWeight:700, color:'#fff', margin:'12px 0 20px', letterSpacing:'-.01em', lineHeight:1.08, textWrap:'balance' }}>Peer-reviewed, clinic-adjacent, reproducible.</h2>
          <p style={{ fontSize:18, lineHeight:1.55, color:'rgba(255,255,255,0.75)', maxWidth:'68ch' }}>
            A sample of published work from the Krishnaswamy Lab that seeded Latent Bio’s platform — each resolving a clinical question that flat methods could not.
          </p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 2fr', gap: 32 }}>
          <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
            {items.map((c, i) => (
              <button key={c.title} onClick={() => setActive(i)} style={{
                textAlign:'left', padding:'20px 24px', background: active===i?'rgba(54,161,77,0.12)':'rgba(255,255,255,0.03)',
                border: active===i?`1px solid ${accentVar}`:'1px solid rgba(255,255,255,0.08)',
                borderRadius:12, cursor:'pointer', color:'#fff', transition:'all 220ms',
              }}>
                <div style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'.14em', color: active===i? '#9BE4A9' : 'var(--lb-silver)' }}>{c.tag}</div>
                <div style={{ fontFamily:'var(--font-display)', fontSize:16, fontWeight:700, color:'#fff', marginTop:4, lineHeight:1.3 }}>{c.title}</div>
              </button>
            ))}
          </div>
          <div style={{ background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.1)', borderRadius:16, padding:40, minHeight:360 }}>
            {items.map((c, i) => active===i && (
              <div key={c.title}>
                <div style={{ fontFamily:'var(--font-display)', fontSize:12, fontWeight:700, letterSpacing:'.14em', color:'#9BE4A9' }}>{c.tag}</div>
                <h3 style={{ fontFamily:'var(--font-display)', fontSize:30, fontWeight:700, color:'#fff', margin:'10px 0 6px', letterSpacing:'-.01em', lineHeight:1.2 }}>{c.title}</h3>
                <div style={{ fontFamily:'var(--font-sans)', fontSize:14, color:'var(--lb-silver)', marginBottom:18, fontStyle:'italic' }}>{c.meta}</div>
                <ul style={{ margin:0, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:14 }}>
                  {c.bullets.map((b, j) => (
                    <li key={j} style={{ display:'grid', gridTemplateColumns:'24px 1fr', gap:12, color:'rgba(255,255,255,0.9)', fontSize:15, lineHeight:1.55 }}>
                      <span style={{ color: accentVar, fontFamily:'var(--font-display)', fontWeight:800 }}>{String(j+1).padStart(2,'0')}</span>
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
                {c.url && (
                  <a href={c.url} target="_blank" rel="noopener noreferrer" style={{ display:'inline-flex', alignItems:'center', gap:8, marginTop: 24, padding:'10px 16px', border: `1px solid ${accentVar}`, borderRadius: 8, color:'#9BE4A9', fontFamily:'var(--font-display)', fontWeight:600, fontSize:13, textDecoration:'none' }}>
                    Read the paper — <span style={{ fontStyle:'italic', opacity:0.85 }}>{c.citation}</span> →
                  </a>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.CaseStudies = CaseStudies;

// Business model removed per request.

