// Philosophy + Team + Contact + Footer — driven by SITE

const Philosophy = () => (
  <section id="philosophy" className="section" data-screen-label="Philosophy">
    <div className="shell">
      <div className="reveal"><SectionHead idx="V" eyebrow="Philosophy"
        title="Four operating tenets the Lab refuses to negotiate." numeral="V" /></div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.15fr)', gap: 80,
      }} className="phi-grid">
        <div>
          <p className="serif" style={{
            margin: 0, fontSize: 'clamp(22px, 2.4vw, 30px)', lineHeight: 1.4,
            color: 'var(--ink-2)', fontWeight: 380, fontStyle: 'italic',
          }}>
            {SITE.philosophyHeadline}
          </p>
          <div className="mono" style={{ marginTop: 32, fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.16em' }}>
            {SITE.philosophyAttribution}
          </div>

          <div style={{
            marginTop: 32, padding: 20,
            border: '1px solid var(--hairline)',
            borderRadius: 10,
            background: 'var(--bg-elev)',
          }}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>About the Lab</div>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.65, color: 'var(--ink-2)' }}>
              {SITE.lab.aboutFooter}
            </p>
          </div>
        </div>
        <div style={{ borderTop: '1px solid var(--hairline)' }}>
          {SITE.tenets.map(t => (
            <div key={t.idx} style={{
              borderBottom: '1px solid var(--hairline)',
              padding: '24px 0',
              display: 'grid', gridTemplateColumns: '60px 1fr', gap: 24,
            }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.06em' }}>{t.idx}</span>
              <div>
                <div style={{ fontSize: 19, fontWeight: 500, letterSpacing: '-0.015em', color: 'var(--ink)' }}>{t.title}</div>
                <p style={{ margin: '8px 0 0', fontSize: 14.5, lineHeight: 1.6, color: 'var(--ink-2)' }}>{t.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const Team = () => {
  const [hover, setHover] = React.useState(null);
  return (
    <section id="team" className="section" data-screen-label="Team">
      <div className="shell">
        <div className="reveal"><SectionHead idx="VI" eyebrow="Team"
          title="A lean, research-first team. Founded in 2025." numeral="VI" /></div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0,
          borderTop: '1px solid var(--hairline)',
          borderLeft: '1px solid var(--hairline)',
        }} className="team-grid">
          {SITE.team.map((p, i) => (
            <div key={i}
              onMouseEnter={() => setHover(i)}
              onMouseLeave={() => setHover(null)}
              style={{
                borderRight: '1px solid var(--hairline)',
                borderBottom: '1px solid var(--hairline)',
                padding: '40px 32px',
                display: 'flex', flexDirection: 'column', gap: 22,
                background: hover === i ? 'color-mix(in oklab, var(--accent) 4%, transparent)' : 'transparent',
                transition: 'background 0.3s',
              }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
                <div style={{
                  width: 72, height: 72, borderRadius: '50%',
                  background: 'var(--bg-elev)',
                  border: '1px solid var(--accent)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 24, fontWeight: 500,
                  color: 'var(--accent)',
                }} className="serif">{p.initials}</div>
                <div>
                  <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--ink)' }}>{p.name}</div>
                  <div className="mono" style={{ marginTop: 4, fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em', textTransform: 'uppercase' }}
                    dangerouslySetInnerHTML={{ __html: p.role }} />
                </div>
              </div>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.65, color: 'var(--ink-2)' }}>{p.bio}</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {p.tags.map(t => (
                  <span key={t} className="mono" style={{
                    fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
                    border: '1px solid var(--hairline-strong)', padding: '4px 9px',
                    color: 'var(--ink-3)',
                  }}>{t}</span>
                ))}
              </div>
              <div style={{ display: 'flex', gap: 14, marginTop: 'auto', paddingTop: 6 }}>
                {p.ssrnUrl && <a href={p.ssrnUrl} target="_blank" rel="noopener noreferrer" className="link-arrow">SSRN <ArrowSm /></a>}
                {p.linkedinUrl && <a href={p.linkedinUrl} target="_blank" rel="noopener noreferrer" className="link-arrow">LinkedIn <ArrowSm /></a>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Contact = () => {
  const [form, setForm] = React.useState({ name: '', email: '', org: '', topic: 'collab', message: '' });
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <section id="contact" className="section" data-screen-label="Contact">
      <div className="shell">
        <div className="reveal"><SectionHead idx="VII" eyebrow="Contact"
          title="We answer correspondence. We do not answer noise." numeral="VII" /></div>
        <div className="glass" style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)',
          gap: 0, padding: 0, overflow: 'hidden',
        }} className="contact-grid">
          <div style={{ padding: 40, borderRight: '1px solid var(--hairline)' }}>
            <div className="eyebrow">Correspondence</div>
            <div style={{ marginTop: 16 }}>
              <a href={`mailto:${SITE.lab.email}`} style={{ fontSize: 18, color: 'var(--ink)' }}>{SITE.lab.email}</a>
              <div className="mono" style={{ marginTop: 4, fontSize: 11, color: 'var(--ink-3)' }}>RESPONSE · 5 BUSINESS DAYS</div>
            </div>

            <div style={{ marginTop: 36 }} className="hr-x" />
            <div style={{ marginTop: 24 }}>
              <div className="eyebrow">Disseminated via</div>
              <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <a href={SITE.links.ssrn} target="_blank" rel="noopener noreferrer" className="link-arrow">SSRN · Author archive <ArrowSm /></a>
                <a href={SITE.links.linkedin} target="_blank" rel="noopener noreferrer" className="link-arrow">LinkedIn · MMRL <ArrowSm /></a>
              </div>
            </div>

            <div style={{ marginTop: 36 }} className="hr-x" />
            <div style={{ marginTop: 24 }}>
              <div className="eyebrow">Operating mode</div>
              <div className="serif" style={{ marginTop: 12, fontSize: 15, lineHeight: 1.6, color: 'var(--ink-2)' }}>
                Independent · non-commercial · research-first.<br />
                Founded {SITE.lab.founded}.
              </div>
            </div>
          </div>

          <div style={{ padding: 40 }}>
            {sent ? (
              <div className="fade-up" style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div className="eyebrow">Received</div>
                <div className="serif" style={{ marginTop: 18, fontSize: 26, lineHeight: 1.3, color: 'var(--ink)', fontStyle: 'italic' }}>
                  Thank you. A researcher will reply within five business days.
                </div>
                <div style={{ marginTop: 24 }}>
                  <button onClick={() => { setSent(false); setForm({ name: '', email: '', org: '', topic: 'collab', message: '' }); }}
                    style={{ background: 'transparent', border: '1px solid var(--hairline-strong)', color: 'var(--ink)', padding: '10px 18px', borderRadius: 999, fontSize: 13, cursor: 'pointer' }}>
                    Send another
                  </button>
                </div>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
                <FormRow label="Name" value={form.name} onChange={(v) => setForm({ ...form, name: v })} />
                <FormRow label="Email" value={form.email} onChange={(v) => setForm({ ...form, email: v })} type="email" />
                <FormRow label="Organisation" value={form.org} onChange={(v) => setForm({ ...form, org: v })} />
                <div style={{ padding: '16px 0', borderBottom: '1px solid var(--hairline)' }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.16em', marginBottom: 10 }}>SUBJECT</div>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                    {[['collab', 'Collaboration'], ['research', 'Research inquiry'], ['data', 'Data / Code'], ['press', 'Press']].map(([id, label]) => (
                      <button key={id} type="button" onClick={() => setForm({ ...form, topic: id })}
                        style={{
                          background: form.topic === id ? 'var(--ink)' : 'transparent',
                          color: form.topic === id ? 'var(--bg)' : 'var(--ink-2)',
                          border: '1px solid ' + (form.topic === id ? 'var(--ink)' : 'var(--hairline-strong)'),
                          padding: '6px 12px', borderRadius: 999, fontSize: 12, cursor: 'pointer',
                        }}>{label}</button>
                    ))}
                  </div>
                </div>
                <div style={{ padding: '16px 0', borderBottom: '1px solid var(--hairline)' }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.16em', marginBottom: 10 }}>MESSAGE</div>
                  <textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })}
                    rows={4} placeholder="Briefly describe the nature of your inquiry."
                    style={{ width: '100%', resize: 'vertical', fontSize: 15, lineHeight: 1.55 }} />
                </div>
                <button type="submit" style={{
                  marginTop: 24, alignSelf: 'flex-start',
                  background: 'var(--ink)', color: 'var(--bg)',
                  border: 'none', padding: '14px 22px', borderRadius: 999,
                  fontSize: 13, display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
                }}>Send correspondence <ArrowSm /></button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

const FormRow = ({ label, value, onChange, type = 'text' }) => (
  <div style={{ padding: '16px 0', borderBottom: '1px solid var(--hairline)' }}>
    <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.16em', marginBottom: 6, textTransform: 'uppercase' }}>{label}</div>
    <input type={type} value={value} onChange={(e) => onChange(e.target.value)} style={{ width: '100%', fontSize: 16 }} />
  </div>
);

const Footer = () => (
  <footer style={{ padding: '120px 0 40px', borderTop: '1px solid var(--hairline)', marginTop: 100 }}>
    <div className="shell">
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 2fr) repeat(3, minmax(0, 1fr))', gap: 40 }} className="footer-grid">
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
            <Logomark />
            <div style={{ fontWeight: 600, letterSpacing: '-0.02em' }}>{SITE.lab.abbr}</div>
          </div>
          <div className="serif" style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.55, maxWidth: 380 }}>
            {SITE.lab.name} — an independent, non-commercial quantitative research initiative.
          </div>
        </div>
        {[
          ['Research', [['Domains', '#research'], ['Publications', '#publications'], ['Models', '#models'], ['Insights', '#insights']]],
          ['Lab', [['Philosophy', '#philosophy'], ['Team', '#team'], ['Founded ' + SITE.lab.founded, null]]],
          ['Contact', [['Email', `mailto:${SITE.lab.email}`], ['SSRN', SITE.links.ssrn], ['LinkedIn', SITE.links.linkedin]]],
        ].map(([title, items]) => (
          <div key={title}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>{title}</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {items.map(([label, href]) => (
                <li key={label}>
                  {href ? (
                    <a href={href} target={href && href.startsWith('http') ? '_blank' : undefined}
                       rel={href && href.startsWith('http') ? 'noopener noreferrer' : undefined}
                       style={{ fontSize: 14, color: 'var(--ink-2)' }}
                       onMouseEnter={(e) => e.currentTarget.style.color = 'var(--ink)'}
                       onMouseLeave={(e) => e.currentTarget.style.color = 'var(--ink-2)'}>{label}</a>
                  ) : (
                    <span style={{ fontSize: 14, color: 'var(--ink-3)' }}>{label}</span>
                  )}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 80, paddingTop: 24, borderTop: '1px solid var(--hairline)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 14 }}>
        <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>
          © {SITE.lab.abbr} · {SITE.lab.founded}–2026 · ALL FINDINGS PROVISIONAL
        </span>
        <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>
          INDEPENDENT · NON-COMMERCIAL
        </span>
      </div>
    </div>
  </footer>
);

window.Philosophy = Philosophy;
window.Team = Team;
window.Contact = Contact;
window.Footer = Footer;