/* Talks, News, Careers, Contact, Footer */

function Talks({ accentVar }) {
  const talks = window.LB_DATA.talks;
  return (
    <section id="talks" style={{ background: 'var(--lb-surface-gray)', padding: '100px 0' }}>
      <div className="shell">
        <div style={{ maxWidth: 860, marginBottom: 40 }}>
          <div className="eyebrow" style={{ color: accentVar }}>VIDEO TALKS</div>
          <h2 className="section-title">Guest lectures & technical deep-dives.</h2>
          <p className="section-lead">Selected talks from the team on geometric deep learning, manifold methods, and translation into life sciences.</p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 20 }}>
          {talks.map((t, i) => (
            <a key={t.title} href={t.url} target="_blank" rel="noopener noreferrer" style={{
              display:'flex', flexDirection:'column', textDecoration:'none',
              background:'#fff', border:'1px solid var(--lb-gray-200)', borderRadius: 14, overflow:'hidden',
              transition:'box-shadow 220ms, transform 220ms',
            }}
              onMouseEnter={e=> { e.currentTarget.style.boxShadow='var(--shadow-md)'; e.currentTarget.style.transform='translateY(-2px)'; }}
              onMouseLeave={e=> { e.currentTarget.style.boxShadow=''; e.currentTarget.style.transform=''; }}
            >
              <div style={{ position:'relative', aspectRatio:'16/9', overflow:'hidden', background:'var(--lb-navy)' }}>
                <img src={`https://i.ytimg.com/vi/${t.videoId}/hqdefault.jpg`} alt="" loading="lazy"
                  style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}
                  onError={e => { e.currentTarget.style.display='none'; }}
                />
                <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(0,34,68,0.1) 0%, rgba(0,34,68,0.55) 100%)' }}/>
                <div style={{ position:'absolute', inset:0, display:'grid', placeItems:'center' }}>
                  <div style={{ width: 56, height: 56, borderRadius:'50%', background:'rgba(0,0,0,0.55)', backdropFilter:'blur(6px)', display:'grid', placeItems:'center', border:'1px solid rgba(255,255,255,0.5)' }}>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff"><path d="M8 5v14l11-7z"/></svg>
                  </div>
                </div>
                <div style={{ position:'absolute', bottom:10, left:12, fontFamily:'var(--font-display)', fontSize: 10, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:'rgba(255,255,255,0.9)' }}>{t.year}</div>
              </div>
              <div style={{ padding:'20px 22px 22px', display:'flex', flexDirection:'column', gap: 6 }}>
                <div style={{ fontFamily:'var(--font-display)', fontSize: 11, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color: accentVar }}>{t.venue}</div>
                <div style={{ fontFamily:'var(--font-display)', fontSize: 16, fontWeight: 700, color:'var(--lb-navy)', lineHeight: 1.35 }}>{t.title}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Talks = Talks;

function News({ accentVar }) {
  const items = window.LB_DATA.news;
  return (
    <section id="news" style={{ background: '#fff', padding: '120px 0' }}>
      <div className="shell">
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', gap:40, marginBottom: 40 }}>
          <div style={{ maxWidth: 720 }}>
            <div className="eyebrow" style={{ color: accentVar }}>NEWS & PRESS</div>
            <h2 className="section-title">Latest from Latent Bio.</h2>
          </div>
          <a href="#" style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize: 14, color: accentVar, textDecoration:'none' }}>All updates →</a>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap: 20 }}>
          {items.map(n => (
            <article key={n.title} style={{
              background:'#fff', border:'1px solid var(--lb-gray-200)', borderRadius: 14,
              padding: 26, display:'flex', flexDirection:'column', gap: 10, minHeight: 220,
            }}>
              <div style={{ fontFamily:'var(--font-display)', fontSize: 11, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', color: 'var(--lb-navy-400)' }}>
                <span style={{ color: accentVar }}>{n.tag}</span> · {n.date}
              </div>
              <h3 style={{ fontFamily:'var(--font-display)', fontSize: 20, fontWeight: 700, color:'var(--lb-navy)', margin:'4px 0 6px', lineHeight: 1.3 }}>{n.title}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color:'var(--lb-navy-400)', margin: 0, flex: 1 }}>{n.body}</p>
              <a href="#" style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize: 13, color: accentVar, textDecoration:'none' }}>Read more →</a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.News = News;

function Careers({ accentVar }) {
  const d = window.LB_DATA.careers;
  return (
    <section id="careers" style={{ background: 'var(--lb-surface-gray)', padding: '100px 0' }}>
      <div className="shell">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.3fr', gap: 64, alignItems:'start' }}>
          <div style={{ position:'sticky', top: 100 }}>
            <div className="eyebrow" style={{ color: accentVar }}>{d.eyebrow}</div>
            <h2 className="section-title">{d.title}</h2>
            <a className="btn navy" href="#contact" style={{ marginTop: 8 }}>See all openings</a>
          </div>
          <div style={{ border:'1px solid var(--lb-gray-200)', borderRadius: 12, background:'#fff', overflow:'hidden' }}>
            {d.roles.map((r, i) => (
              <a key={r.role} href="#" style={{
                display:'grid', gridTemplateColumns:'130px 1fr auto', alignItems:'center', gap: 20,
                padding:'20px 24px', borderBottom: i < d.roles.length - 1 ? '1px solid var(--lb-gray-200)' : 'none',
                textDecoration:'none', color:'var(--lb-navy)', transition: 'background 160ms',
              }}
                onMouseEnter={e=> e.currentTarget.style.background='var(--lb-gray-50)'}
                onMouseLeave={e=> e.currentTarget.style.background=''}
              >
                <div style={{ fontFamily:'var(--font-display)', fontSize: 11, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', color: accentVar }}>{r.team}</div>
                <div>
                  <div style={{ fontFamily:'var(--font-display)', fontSize: 16, fontWeight: 700 }}>{r.role}</div>
                  <div style={{ fontFamily:'var(--font-sans)', fontSize: 13, color: 'var(--lb-navy-400)', marginTop: 2 }}>{r.location}</div>
                </div>
                <div style={{ fontFamily:'var(--font-display)', fontWeight: 600, color: accentVar }}>Apply →</div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Careers = Careers;

function Contact({ accentVar }) {
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const [errorMsg, setErrorMsg] = React.useState('');
  const [form, setForm] = React.useState({ name:'', email:'', org:'', interest:'Partnership', message:'', botcheck:'' });
  const upd = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const sent = status === 'sent';
  const submit = async e => {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');
    setErrorMsg('');
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          access_key: 'ef80ac89-72dc-4418-9653-acfac3e558ce',
          subject: `Latent Bio website — ${form.interest} inquiry from ${form.name || form.email || 'unknown'}`,
          from_name: form.name || 'Latent Bio website',
          replyto: form.email,
          name: form.name,
          email: form.email,
          organization: form.org,
          interest: form.interest,
          message: form.message,
          botcheck: form.botcheck,
        }),
      });
      const data = await res.json();
      if (data.success) setStatus('sent');
      else { setStatus('error'); setErrorMsg(data.message || 'Something went wrong. Please try again.'); }
    } catch (err) {
      setStatus('error');
      setErrorMsg('Network error. Please try again or email us directly.');
    }
  };
  return (
    <section id="contact" style={{ background: 'var(--lb-navy)', color:'#fff', padding: '120px 0', position:'relative', overflow:'hidden' }}>
      <div aria-hidden style={{ position:'absolute', inset:0, background:'radial-gradient(700px 500px at 85% 50%, rgba(54,161,77,0.18), transparent 60%)' }}/>
      <div className="shell" style={{ position:'relative' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.1fr', gap: 80, alignItems:'start' }}>
          <div>
            <div className="eyebrow" style={{ color:'#69BE28' }}>CONTACT</div>
            <h2 style={{ fontFamily:'var(--font-display)', fontSize: 48, fontWeight:700, color:'#fff', margin:'12px 0 20px', letterSpacing:'-.01em', lineHeight: 1.05 }}>Let's build a program together.</h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color:'rgba(255,255,255,0.8)', maxWidth: 520, margin: '0 0 32px' }}>
              For partnership, investment, or career inquiries, reach out directly. We respond to qualified outreach within one business week.
            </p>
            <div style={{ display:'flex', flexDirection:'column', gap: 10, fontFamily:'var(--font-sans)' }}>
              <div style={{ color:'var(--lb-silver)', fontSize: 14 }}>New Haven, CT · Remote-friendly</div>
            </div>
          </div>

          <form onSubmit={submit} style={{ background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.12)', borderRadius: 16, padding: 32 }}>
            {sent ? (
              <div style={{ padding: '40px 0', textAlign:'center' }}>
                <div style={{ fontFamily:'var(--font-display)', fontSize: 28, fontWeight: 700, color:'#fff' }}>Thanks — we'll be in touch.</div>
                <div style={{ fontFamily:'var(--font-sans)', fontSize: 15, color:'var(--lb-silver)', marginTop: 10 }}>Your note is on its way to the partnerships team.</div>
              </div>
            ) : (
              <>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 14 }}>
                  <Field label="Name" value={form.name} onChange={upd('name')} />
                  <Field label="Work email" value={form.email} onChange={upd('email')} type="email" />
                </div>
                <Field label="Organization" value={form.org} onChange={upd('org')} />
                <div style={{ marginBottom: 16 }}>
                  <label style={fieldLabelStyle}>Interest</label>
                  <div style={{ display:'flex', flexWrap:'wrap', gap: 8 }}>
                    {['Partnership','Investment','Press','Other'].map(v => (
                      <button type="button" key={v} onClick={() => setForm(f => ({ ...f, interest: v }))}
                        style={{
                          padding:'8px 14px', borderRadius: 999, fontFamily:'var(--font-display)', fontSize: 12, fontWeight:600, cursor:'pointer',
                          border: `1px solid ${form.interest === v ? accentVar : 'rgba(255,255,255,0.25)'}`,
                          background: form.interest === v ? accentVar : 'transparent',
                          color: form.interest === v ? '#fff' : 'rgba(255,255,255,0.85)',
                        }}>{v}</button>
                    ))}
                  </div>
                </div>
                <Field label="Message" value={form.message} onChange={upd('message')} textarea />
                {/* Honeypot — hidden from humans, catches bots */}
                <input type="checkbox" name="botcheck" checked={!!form.botcheck} onChange={e => setForm(f => ({ ...f, botcheck: e.target.checked }))} style={{ display:'none' }} tabIndex={-1} autoComplete="off" />
                <button type="submit" disabled={status === 'sending'} className="btn primary" style={{ background: accentVar, padding:'14px 22px', width:'100%', fontSize: 14, marginTop: 8, opacity: status === 'sending' ? 0.6 : 1, cursor: status === 'sending' ? 'wait' : 'pointer' }}>
                  {status === 'sending' ? 'Sending…' : 'Request Partnership'}
                </button>
                {status === 'error' && (
                  <div style={{ marginTop: 14, padding: '10px 14px', background:'rgba(200,75,58,0.15)', border:'1px solid rgba(200,75,58,0.4)', borderRadius: 8, color:'#FFB8B0', fontFamily:'var(--font-sans)', fontSize: 13 }}>
                    {errorMsg}
                  </div>
                )}
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}
const fieldLabelStyle = { display:'block', fontFamily:'var(--font-display)', fontSize: 11, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--lb-silver)', marginBottom: 6 };
function Field({ label, value, onChange, type, textarea }) {
  const common = {
    width:'100%', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.15)',
    borderRadius: 8, padding: '12px 14px', color:'#fff', fontFamily:'var(--font-sans)', fontSize: 15,
    outline:'none', transition:'border-color 160ms',
  };
  return (
    <div style={{ marginBottom: 16 }}>
      <label style={fieldLabelStyle}>{label}</label>
      {textarea
        ? <textarea value={value} onChange={onChange} rows={4} style={{ ...common, resize:'vertical' }}/>
        : <input type={type || 'text'} value={value} onChange={onChange} style={common}/>}
    </div>
  );
}
window.Contact = Contact;

function Footer() {
  return (
    <footer style={{ background:'#000914', color:'#fff', padding: '48px 0 32px' }}>
      <div className="shell" style={{ display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap: 20 }}>
        <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
          <img src="assets/latent_bio_logo_on_dark.png" alt="Latent Bio" style={{ height: 32 }}/>
          <div>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize: 14, letterSpacing:'.08em' }}>LATENT BIO</div>
            <div style={{ fontFamily:'var(--font-sans)', fontStyle:'italic', color:'var(--lb-silver)', fontSize: 12, marginTop: 2 }}>Geometric deep learning for life sciences.</div>
          </div>
        </div>
        <div style={{ fontFamily:'var(--font-mono)', fontSize: 12, color:'var(--lb-silver)' }}>
          © 2026 Latent Bio, Inc. &nbsp; · &nbsp; www.latentbio.ai
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;