// ── Research Areas · Credibility · Mission · Featured · Principles ──────

function SectionHead({ num, eyebrow, title, sub, center }) {
  return (
    <div className={`reveal ${center ? 'text-center mx-auto' : ''} max-w-2xl`}>
      <div className={center ? 'inline-flex' : ''}><Eyebrow num={num}>{eyebrow}</Eyebrow></div>
      <h2 className="font-display font-semibold tracking-[-0.025em] leading-[1.06] text-[clamp(2.1rem,3.8vw,3.1rem)] mt-6" style={{ textWrap: 'balance' }}>
        {title}
      </h2>
      {sub && <p className="mt-6 text-[1.08rem] text-muted leading-relaxed">{sub}</p>}
    </div>
  );
}

const RESEARCH = [
  { I: 'IconInterpret', t: 'Interpretability & Explainability', d: 'We develop methods that make a model’s reasoning legible — tracing how a system reaches its conclusions, so its behavior can be examined rather than assumed.', tag: 'XAI' },
  { I: 'IconSafety', t: 'Alignment & Safety', d: 'We study how to keep advanced systems controllable and consistent with human intent as their capabilities grow — before deployment, not after.', tag: 'ALIGN' },
  { I: 'IconAgents', t: 'Autonomous Agents', d: 'We build agents that act under genuine uncertainty: calibrating their own confidence, seeking oversight when it matters, and failing safely.', tag: 'AGENT' },
  { I: 'IconMulti', t: 'Multimodal & Scientific ML', d: 'We design architectures that reason across language, vision, and scientific data, and apply them to open problems in the physical and life sciences.', tag: 'SCI-ML' },
  { I: 'IconExplain', t: 'Cognitive Foundations', d: 'We draw on cognitive science and neuroscience to ask what intelligence is — testing computational models against the evidence of natural minds.', tag: 'COGNI' },
  { I: 'IconCollab', t: 'Human–AI Collaboration', d: 'We study how people and machine systems reason together, designing interfaces where each extends the judgment of the other.', tag: 'HCI' },
];

function ResearchAreas() {
  return (
    <section id="research" className="relative py-32 lg:py-44">
      <div className="max-w-shell mx-auto px-6 lg:px-8">
        <SectionHead num="01" eyebrow="Research Programs" title="Six programs, one question" sub="We organize our work around the seams between fields — where the most consequential questions about intelligence tend to live, and where most institutions are weakest." />
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-px mt-16 rounded-[22px] overflow-hidden" style={{ background: 'rgba(255,255,255,0.07)' }}>
          {RESEARCH.map((r, i) => {
            const Icon = window[r.I];
            return (
              <div key={r.t} className="reveal card-hover accent-top relative group p-8 lg:p-9 overflow-hidden"
                style={{ background: '#0A0C12', transitionDelay: `${(i % 3) * 70}ms` }}>
                <div className="absolute -top-20 -right-20 w-48 h-48 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
                  style={{ background: 'radial-gradient(circle, rgba(91,134,255,0.26), transparent 70%)' }}></div>
                <div className="relative">
                  <div className="flex items-start justify-between mb-7">
                    <div className="w-12 h-12 rounded-xl grid place-items-center text-ebl group-hover:text-evi transition-colors duration-500"
                      style={{ background: 'rgba(91,134,255,0.08)', border: '1px solid rgba(91,134,255,0.18)' }}>
                      <Icon size={26} />
                    </div>
                    <span className="font-mono text-[11px] text-faint tracking-[0.12em]">{String(i + 1).padStart(2, '0')} · {r.tag}</span>
                  </div>
                  <h3 className="font-display text-[1.26rem] font-medium text-soft tracking-tight">{r.t}</h3>
                  <p className="mt-3.5 text-[0.96rem] text-muted leading-relaxed">{r.d}</p>
                  <div className="mt-6 flex items-center gap-2 text-[13px] text-faint group-hover:text-ebl transition-colors duration-300 link-arrow">
                    <span className="font-mono tracking-wide">EXPLORE PROGRAM</span><ArrowRight size={13} />
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Credibility() {
  const metrics = [
    ['8,400+', 'Citations', 'across published work'],
    ['120', 'Publications', 'peer-reviewed venues'],
    ['18', 'Partner institutions', 'on four continents'],
    ['9', 'Disciplines', 'under one roof'],
  ];
  return (
    <section className="relative py-12 lg:py-16">
      <div className="max-w-shell mx-auto px-6 lg:px-8">
        <div className="reveal glass rounded-[22px] overflow-hidden ticked relative">
          <div className="aurora" style={{ bottom: '-120px', left: '30%', width: 420, height: 280, background: 'radial-gradient(circle, rgba(91,134,255,0.16), transparent 70%)' }}></div>
          <div className="relative grid grid-cols-2 lg:grid-cols-4">
            {metrics.map(([v, l, s], i) => (
              <div key={l} className="p-7 lg:p-9 text-center sm:text-left"
                style={{ borderRight: i < 3 ? '1px solid rgba(255,255,255,0.06)' : 'none', borderBottom: i < 2 ? '1px solid rgba(255,255,255,0.06)' : 'none' }}>
                <div className="font-display text-[clamp(2rem,3vw,2.7rem)] grad-text leading-none tracking-tight"><CountUp value={v} /></div>
                <div className="font-display text-[1rem] text-soft mt-3">{l}</div>
                <div className="text-[12.5px] text-faint mt-1.5">{s}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Mission() {
  return (
    <section id="mission" className="relative py-32 lg:py-44 overflow-hidden">
      <div className="absolute inset-0 pointer-events-none">
        <div className="aurora" style={{ left: '50%', top: '50%', transform: 'translate(-50%,-50%)', width: 720, height: 420, background: 'radial-gradient(ellipse, rgba(164,118,255,0.16), transparent 70%)', animation: 'drift-b 22s ease-in-out infinite' }}></div>
      </div>
      <div className="relative max-w-4xl mx-auto px-6 lg:px-8 text-center">
        <div className="reveal inline-flex"><Eyebrow num="02">Our Mission</Eyebrow></div>
        <h2 className="reveal font-display font-semibold tracking-[-0.025em] leading-[1.08] text-[clamp(2.2rem,4.4vw,3.5rem)] mt-7" style={{ textWrap: 'balance' }}>
          A Shared Science of Intelligence —{' '}
          <span className="grad-text">Natural and Artificial</span>
        </h2>
        <p className="reveal mt-8 text-[clamp(1.12rem,1.5vw,1.34rem)] text-muted leading-relaxed max-w-3xl mx-auto" style={{ textWrap: 'pretty' }}>
          Our mission is to advance a rigorous, shared understanding of intelligence, and to
          build artificial systems that remain transparent, controllable, and aligned with
          human values. We work in the open: our results are reproducible, our methods are
          published, and our claims are held to the standards of peer review.
        </p>
        <div className="reveal mt-12 h-px w-full max-w-md mx-auto bg-gradient-to-r from-transparent via-ebl/40 to-transparent"></div>
      </div>
    </section>
  );
}

const FEATURED = [
  {
    tags: ['Interpretability', 'LLMs'],
    t: 'Mechanistic Interpretability of Large Language Models',
    a: 'A multi-year effort to reverse-engineer the internal computations of transformer models — identifying the circuits and representations behind specific behaviors, and releasing open tools for others to audit them.',
    meta: 'Preprint · 2026',
    ref: 'arXiv:2026.04812',
    lead: true,
  },
  {
    tags: ['Agents', 'Reliability'],
    t: 'Calibrated Agents Under Uncertainty',
    a: 'A framework for autonomous systems that estimate the reliability of their own decisions, defer to human oversight at the right moments, and recover gracefully when conditions shift.',
    meta: 'NeurIPS · 2025',
    ref: 'doi:10.0000/neurips.2025',
  },
  {
    tags: ['Multimodal', 'Reasoning'],
    t: 'Verifiable Multimodal Reasoning',
    a: 'Models that expose their intermediate reasoning across vision and language, producing auditable chains of evidence in place of opaque end-to-end predictions.',
    meta: 'ICML · 2025',
    ref: 'doi:10.0000/icml.2025',
  },
];

function PaperCard({ f, lead }) {
  const tiltRef = useTilt(5);
  return (
    <article ref={tiltRef} className={`reveal glass card-hover accent-top ticked rounded-2xl p-8 flex flex-col group relative overflow-hidden ${lead ? 'lg:row-span-2 lg:p-10' : ''}`}>
      {lead && (
        <div className="absolute -top-24 -right-16 w-64 h-64 rounded-full blur-3xl opacity-60 pointer-events-none"
          style={{ background: 'radial-gradient(circle, rgba(91,134,255,0.22), transparent 70%)' }}></div>
      )}
      <div className="relative flex flex-col flex-1">
        {lead && <div className="font-mono text-[11px] tracking-[0.2em] uppercase text-ebl mb-5">★ Featured paper</div>}
        <div className="flex flex-wrap gap-2 mb-5">
          {f.tags.map((tag) => (
            <span key={tag} className="font-mono text-[11px] tracking-wide text-ebl px-2.5 py-1 rounded-full"
              style={{ background: 'rgba(91,134,255,0.09)', border: '1px solid rgba(91,134,255,0.18)' }}>{tag}</span>
          ))}
        </div>
        <h3 className={`font-display font-medium text-soft leading-snug tracking-tight ${lead ? 'text-[1.7rem]' : 'text-[1.28rem]'}`}>{f.t}</h3>
        <p className={`mt-4 text-muted leading-relaxed flex-1 ${lead ? 'text-[1.04rem]' : 'text-[0.96rem]'}`}>{f.a}</p>
        <div className="mt-7 pt-5 flex items-center justify-between gap-3" style={{ borderTop: '1px solid rgba(255,255,255,0.07)' }}>
          <div className="min-w-0">
            <div className="font-mono text-[12px] text-faint">{f.meta}</div>
            <div className="font-mono text-[11px] text-faint/70 mt-1 truncate">{f.ref}</div>
          </div>
          <a href="#" className="link-arrow text-[13px] text-soft inline-flex items-center gap-1.5 group-hover:text-ebl transition-colors whitespace-nowrap shrink-0">
            Read Paper <ArrowRight size={14} />
          </a>
        </div>
      </div>
    </article>
  );
}

function Featured() {
  return (
    <section id="featured" className="relative py-32 lg:py-44">
      <div className="max-w-shell mx-auto px-6 lg:px-8">
        <div className="flex flex-wrap items-end justify-between gap-6">
          <SectionHead num="03" eyebrow="Featured Research" title="Selected work from the lab" sub="Peer-reviewed papers, preprints, and open releases from across our research programs." />
          <a href="#" className="reveal link-arrow text-[14px] text-muted hover:text-soft inline-flex items-center gap-2 pb-2">
            Browse the full publication record <ArrowRight size={15} />
          </a>
        </div>
        <div className="grid lg:grid-cols-2 gap-5 mt-16">
          <PaperCard f={FEATURED[0]} lead />
          <PaperCard f={FEATURED[1]} />
          <PaperCard f={FEATURED[2]} />
        </div>
      </div>
    </section>
  );
}

const PRINCIPLES = [
  { t: 'Transparency', d: 'Every result is reproducible, every claim is evidenced.' },
  { t: 'Scientific Rigor', d: 'We hold our work to the standards of peer-reviewed science.' },
  { t: 'Safety First', d: 'Capability never ships ahead of our ability to control it.' },
  { t: 'Human-Centered Design', d: 'Systems are built around the people who rely on them.' },
  { t: 'Open Knowledge', d: 'We publish openly to advance the entire field.' },
  { t: 'Long-Term Impact', d: 'We optimize for decades, not demos.' },
];

function Principles() {
  return (
    <section className="relative py-32 lg:py-44">
      <div className="max-w-shell mx-auto px-6 lg:px-8">
        <SectionHead num="04" eyebrow="Lab Principles" title="What we hold constant" center />
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 mt-16 reveal rounded-[22px] overflow-hidden" style={{ border: '1px solid rgba(255,255,255,0.07)' }}>
          {PRINCIPLES.map((p, i) => (
            <div key={p.t} className="group relative p-9 lg:p-10 transition-colors duration-400 hover:bg-white/[0.025]"
              style={{ borderRight: '1px solid rgba(255,255,255,0.07)', borderBottom: '1px solid rgba(255,255,255,0.07)' }}>
              <span className="font-mono text-[12px] text-faint">{String(i + 1).padStart(2, '0')}</span>
              <h3 className="font-display text-[1.32rem] font-medium text-soft mt-4 tracking-tight">
                <span className="inline-block w-1.5 h-1.5 rounded-full bg-ebl mr-2.5 align-middle group-hover:bg-evi transition-colors"></span>
                {p.t}
              </h3>
              <p className="mt-3 text-[0.96rem] text-muted leading-relaxed">{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SectionHead, ResearchAreas, Credibility, Mission, Featured, Principles });