/* GDL vs LLM comparison ("What is geometric deep learning?") */

function GdlVsLlm({ accentVar }) {
  const d = window.LB_DATA.gdlVsLlm;
  return (
    <section id="gdl-vs-llm" style={{ background:'var(--lb-surface-gray)', padding:'140px 0', position:'relative', overflow:'hidden' }}>
      <div aria-hidden style={{ position:'absolute', inset:0, opacity: 0.05, backgroundImage:'radial-gradient(circle at 1px 1px, var(--lb-navy) 1px, transparent 0)', backgroundSize:'24px 24px' }}/>
      <div className="shell" style={{ position:'relative' }}>
        <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={{ margin: 0 }}>{d.lead}</p>
        </div>

        {/* Two big headers */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', border:'1px solid var(--lb-gray-200)', borderRadius: 20, overflow:'hidden', boxShadow:'var(--shadow-md)' }}>
          {/* LLM header */}
          <div style={{ background:'#fff', padding:'32px 36px' }}>
            <LlmGlyph/>
            <div style={{ marginTop: 16, fontFamily:'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing:'.18em', color:'var(--lb-navy-400)' }}>ONE APPROACH</div>
            <div style={{ fontFamily:'var(--font-display)', fontSize: 32, fontWeight: 700, color:'var(--lb-navy)', letterSpacing:'-.01em', marginTop: 4 }}>Large Language Models</div>
            <div style={{ fontSize: 14, color:'var(--lb-navy-400)', marginTop: 8, maxWidth:'42ch', lineHeight: 1.55 }}>Transformer architectures trained to predict tokens on massive corpora.</div>
          </div>
          {/* GDL header */}
          <div style={{ background:'var(--lb-navy)', padding:'32px 36px', color:'#fff', position:'relative', overflow:'hidden' }}>
            <div aria-hidden style={{ position:'absolute', inset:0, background: `radial-gradient(500px 300px at 80% 20%, ${accentVar}22, transparent 60%)` }}/>
            <div style={{ position:'relative' }}>
              <GdlGlyph accentVar={accentVar}/>
              <div style={{ marginTop: 16, fontFamily:'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing:'.18em', color:'#9BE4A9' }}>LATENT BIO</div>
              <div style={{ fontFamily:'var(--font-display)', fontSize: 32, fontWeight: 700, color:'#fff', letterSpacing:'-.01em', marginTop: 4 }}>Geometric Deep Learning</div>
              <div style={{ fontSize: 14, color:'rgba(255,255,255,0.75)', marginTop: 8, maxWidth:'42ch', lineHeight: 1.55 }}>Networks whose inductive biases respect the geometry data actually lives on.</div>
            </div>
          </div>

          {/* Rows */}
          {d.rows.map((r, i) => (
            <React.Fragment key={r.k}>
              <div style={{ background:'#fff', padding:'18px 36px', borderTop:'1px solid var(--lb-gray-200)', display:'grid', gridTemplateColumns: '180px 1fr', alignItems:'center', gap: 20 }}>
                <div style={{ fontFamily:'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing:'.14em', color:'var(--lb-navy-400)', textTransform:'uppercase' }}>{r.k}</div>
                <div style={{ fontFamily:'var(--font-display)', fontSize: 15, fontWeight: 500, color:'var(--lb-navy)', lineHeight: 1.45 }}>{r.llm}</div>
              </div>
              <div style={{ background:'var(--lb-navy)', padding:'18px 36px', borderTop:'1px solid rgba(255,255,255,0.1)', display:'grid', gridTemplateColumns:'16px 1fr', alignItems:'center', gap: 16, position:'relative' }}>
                <span aria-hidden style={{ width: 8, height: 8, borderRadius:'50%', background: accentVar, boxShadow:`0 0 12px ${accentVar}` }}/>
                <div style={{ fontFamily:'var(--font-display)', fontSize: 15, fontWeight: 600, color:'#fff', lineHeight: 1.45 }}>{r.gdl}</div>
              </div>
            </React.Fragment>
          ))}
        </div>

        <div style={{ marginTop: 32, textAlign:'center', fontFamily:'var(--font-sans)', fontSize: 14, color:'var(--lb-navy-400)', fontStyle:'italic' }}>
          Both matter. LLMs are the right tool for language. For biology, we build on its geometry.
        </div>
      </div>
    </section>
  );
}

function LlmGlyph() {
  // abstract 'token stream' — a row of squares
  return (
    <svg width="180" height="44" viewBox="0 0 180 44" aria-hidden>
      <defs>
        <linearGradient id="tok" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#CBD5E1"/>
          <stop offset="100%" stopColor="#002244"/>
        </linearGradient>
      </defs>
      {Array.from({length: 10}).map((_, i) => (
        <rect key={i} x={i*17} y={10} width={12} height={24} rx={2} fill="url(#tok)" opacity={0.45 + (i/10)*0.55}/>
      ))}
      <text x={0} y={8} fontFamily="ui-monospace, Menlo, monospace" fontSize="9" fill="#64748B" letterSpacing="0.1em">t₁ t₂ t₃ t₄ t₅ t₆ t₇ t₈ t₉ t₁₀</text>
    </svg>
  );
}

function GdlGlyph({ accentVar }) {
  // abstract 'manifold graph' — nodes on a curved sheet with edges
  const nodes = [
    [20, 30], [42, 20], [62, 28], [80, 18], [102, 26], [124, 16], [146, 24], [168, 14],
    [30, 42], [55, 38], [80, 40], [110, 38], [140, 36], [165, 34],
  ];
  const edges = [[0,1],[1,2],[2,3],[3,4],[4,5],[5,6],[6,7],[0,8],[1,9],[2,10],[4,11],[5,12],[7,13],[8,9],[9,10],[10,11],[11,12],[12,13]];
  return (
    <svg width="180" height="44" viewBox="0 0 180 44" aria-hidden>
      <path d="M 5 36 Q 50 16 90 28 T 175 22" stroke="rgba(255,255,255,0.2)" strokeWidth="1" fill="none"/>
      {edges.map(([a,b], i) => (
        <line key={i} x1={nodes[a][0]} y1={nodes[a][1]} x2={nodes[b][0]} y2={nodes[b][1]} stroke={accentVar} strokeWidth="0.8" opacity="0.6"/>
      ))}
      {nodes.map((n, i) => (
        <circle key={i} cx={n[0]} cy={n[1]} r={i%3===0 ? 2.5 : 1.8} fill={accentVar} opacity={0.7 + (i%3)*0.1}/>
      ))}
    </svg>
  );
}

window.GdlVsLlm = GdlVsLlm;
