// ── Team / Fellows · CTA · Footer ──────────────────────────────────────

const TEAM = [
  { n: 'Prof. Tze Hui Liew', r: 'Director · CIRA Labs', i: 'TL' },
  { n: 'Dr. Elena Voss', r: 'Director · Interpretability', i: 'EV' },
  { n: 'Dr. Marcus Chen', r: 'Principal Investigator · Alignment', i: 'MC' },
  { n: 'Dr. Priya Nair', r: 'Lead · Autonomous Agents', i: 'PN' },
  { n: 'Dr. Tobias Lind', r: 'Research Scientist · Multimodal ML', i: 'TL2' },
  { n: 'Dr. Sofia Almeida', r: 'Research Scientist · Cognitive Foundations', i: 'SA' },
  { n: 'Dr. Kenji Watanabe', r: 'Research Fellow · Safety', i: 'KW' },
  { n: 'Amara Okafor', r: 'Doctoral Fellow · Human–AI Interaction', i: 'AO' },
  { n: 'Prof. Daniel Reyes', r: 'Scientific Advisor · Neuroscience', i: 'DR' },
];

function TeamMemberCard({ m, i }) {
  const tiltRef = useTilt(6);
  return (
    <div ref={tiltRef} className="reveal glass card-hover rounded-2xl p-6 group text-center" style={{ transitionDelay: `${(i % 4) * 60}ms` }}>
      <div className="relative mx-auto w-20 h-20 mb-5">
        <div className="absolute inset-0 rounded-full opacity-70 group-hover:opacity-100 transition-opacity duration-500"
          style={{ background: 'conic-gradient(from 140deg, var(--accent-from), var(--accent-to), var(--accent-from))', padding: '2px' }}>
          <div className="w-full h-full rounded-full bg-graphite"></div>
        </div>
        <div className="absolute inset-[3px] rounded-full grid place-items-center font-display text-[1.3rem] text-soft"
          style={{ background: 'radial-gradient(circle at 30% 25%, rgba(91,134,255,0.22), rgba(14,17,25,1) 70%)' }}>
          {m.i}
        </div>
      </div>
      <h3 className="font-display text-[1.02rem] font-medium text-soft tracking-tight">{m.n}</h3>
      <p className="mt-1.5 text-[0.84rem] text-muted leading-snug">{m.r}</p>
    </div>
  );
}

function Team() {
  return (
    <section id="team" className="relative py-28 lg:py-36">
      <div className="max-w-shell mx-auto px-6 lg:px-8">
        <SectionHead num="05" eyebrow="Fellows & Faculty" title="The people behind the science"
          sub="CIRA brings together researchers, engineers, doctoral fellows, and visiting scholars from across disciplines — united by a commitment to careful, open, and consequential science." />
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-5 mt-14">
          {TEAM.map((m, i) => <TeamMemberCard key={m.n} m={m} i={i} />)}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  const magPrimary = useMagnetic(0.35);
  const magSecondary = useMagnetic(0.25);
  return (
    <section id="join" className="relative py-28 lg:py-36">
      <div className="max-w-shell mx-auto px-6 lg:px-8">
        <div className="reveal relative overflow-hidden rounded-[28px] px-8 py-16 lg:px-16 lg:py-24 text-center"
          style={{ background: 'linear-gradient(180deg, rgba(91,134,255,0.07), rgba(164,118,255,0.04))', border: '1px solid rgba(255,255,255,0.09)' }}>
          {/* glow + grid inside card */}
          <div className="absolute inset-0 grid-bg opacity-60 pointer-events-none"></div>
          <div className="absolute -top-24 left-1/2 -translate-x-1/2 w-[600px] h-[400px] rounded-full blur-[120px] pointer-events-none"
            style={{ background: 'radial-gradient(ellipse, rgba(91,134,255,0.28), rgba(164,118,255,0.12) 45%, transparent 70%)' }}></div>

          <div className="relative">
            <Eyebrow><span className="mx-auto">Partnership</span></Eyebrow>
            <h2 className="font-display font-semibold tracking-[-0.02em] leading-[1.08] text-[clamp(2rem,4vw,3.2rem)] mt-6 max-w-3xl mx-auto text-balance">
              Build the Science of Intelligence{' '}
              <span className="grad-text">With Us</span>
            </h2>
            <p className="mt-7 text-[clamp(1.05rem,1.4vw,1.2rem)] text-muted leading-relaxed max-w-2xl mx-auto">
              We partner with universities, research institutes, and research-minded teams across
              industry and the public sector. Through joint research, fellowships, and shared
              infrastructure, we welcome collaborators committed to rigorous and open inquiry.
            </p>
            <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
              <a ref={magPrimary} href="/contact" className="btn-primary rounded-full px-7 py-3.5 text-[15px] inline-flex items-center gap-2">
                Partner With Us <ArrowRight size={16} />
              </a>
              <a ref={magSecondary} href="/fellowship" className="btn-ghost rounded-full px-7 py-3.5 text-[15px]">Apply for a Fellowship</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function NewsletterForm() {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState('idle'); // idle | loading | success | error

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email) return;
    setStatus('loading');
    try {
      const res = await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error);
      setStatus('success');
    } catch {
      setStatus('error');
    }
  };

  if (status === 'success') {
    return <p className="text-[13px] text-ebl font-mono tracking-wide">You're on the list ✓</p>;
  }

  return (
    <>
      <form className="flex items-center glass rounded-full p-1.5 pl-4" onSubmit={handleSubmit}>
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)}
          placeholder="you@lab.org" required
          className="bg-transparent text-[14px] text-soft placeholder:text-faint outline-none flex-1 min-w-0" />
        <button type="submit" disabled={status === 'loading'}
          className="btn-primary rounded-full w-9 h-9 grid place-items-center shrink-0 disabled:opacity-60" aria-label="Subscribe">
          <ArrowRight size={16} />
        </button>
      </form>
      {status === 'error' && <p className="text-[12px] text-red-400 mt-2">Something went wrong. Try again.</p>}
    </>
  );
}

function Footer() {
  const cols = [
    ['Lab', [['Research', '#research'], ['Publications', '#featured'], ['Team', '#team'], ['Principles', '#']]],
    ['Engage', [['Careers', '#careers'], ['Blog', '/blog'], ['Contact', '/contact'], ['Partner', '/contact']]],
  ];
  return (
    <footer className="relative pt-20 pb-10" style={{ borderTop: '1px solid rgba(255,255,255,0.07)' }}>
      <div className="max-w-shell mx-auto px-6 lg:px-8">
        <div className="grid md:grid-cols-[1.4fr_1fr_1fr_1fr] gap-10 lg:gap-8">
          <div>
            <Wordmark />
            <p className="mt-5 text-[0.95rem] text-muted leading-relaxed max-w-xs">
              CIRA Labs — Center for Interdisciplinary Research &amp; Advancement. A research
              institute studying intelligence across disciplines, and building AI systems
              that are transparent, reliable, and aligned with human values.
            </p>
            <div className="flex items-center gap-3 mt-6">
              {[['IconLinkedIn', 'LinkedIn'], ['IconGitHub', 'GitHub'], ['IconX', 'X / Twitter']].map(([ic, label]) => {
                const Ic = window[ic];
                return (
                  <a key={label} href="#" aria-label={label}
                    className="w-10 h-10 rounded-full grid place-items-center text-muted hover:text-soft transition-all duration-300 hover:-translate-y-0.5"
                    style={{ border: '1px solid rgba(255,255,255,0.1)' }}>
                    <Ic />
                  </a>
                );
              })}
            </div>
          </div>
          {cols.map(([title, items]) => (
            <div key={title}>
              <h4 className="font-mono text-[12px] tracking-[0.2em] uppercase text-faint mb-5">{title}</h4>
              <ul className="space-y-3">
                {items.map(([label, href]) => (
                  <li key={label}>
                    <a href={href} className="text-[0.95rem] text-muted hover:text-soft transition-colors duration-300">{label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
          <div>
            <h4 className="font-mono text-[12px] tracking-[0.2em] uppercase text-faint mb-5">Stay in the loop</h4>
            <p className="text-[0.92rem] text-muted leading-relaxed mb-4">Research updates, no noise.</p>
            <NewsletterForm />
          </div>
        </div>
        <div className="mt-16 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4" style={{ borderTop: '1px solid rgba(255,255,255,0.06)' }}>
          <p className="text-[13px] text-faint">© 2026 CIRA Labs. Center for Interdisciplinary Research & Advancement.</p>
          <div className="flex items-center gap-6 text-[13px] text-faint">
            <a href="#" className="hover:text-muted transition-colors">Privacy</a>
            <a href="#" className="hover:text-muted transition-colors">Terms</a>
            <span className="font-mono text-[11px] tracking-wider flex items-center gap-2">
              <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 inline-block" style={{ boxShadow: '0 0 8px rgba(52,211,153,0.8)' }}></span>
              All systems operational
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Team, CTA, Footer });