/* Leadership & Key Expertise — full biography page. */
const NSL = window.__FT_NS;
const { Button: BtnL } = NSL;
const DL = window.FT_DATA;

function LeadershipScreen({ go }) {
  const lead = DL.leadership[0];
  return (
    <div>
      <PageHero eyebrow="Leadership & Key Expertise" title={lead.name} lede={lead.role + ' · ' + lead.title} />

      <Section tone="page">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,360px) minmax(0,1fr)', gap: 64, alignItems: 'start' }} className="ft-2col">
          <Reveal>
            <img src={'./assets/photography/' + lead.photo} alt={lead.name}
              style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', objectPosition: '50% 20%', borderRadius: 'var(--radius-lg)', display: 'block' }} />
          </Reveal>
          <div>
            <Reveal delay={100}>
              <div style={{ background: 'var(--surface-ink)', borderRadius: 'var(--radius-lg)', padding: 32 }}>
                <p style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 'clamp(18px,1.5vw,22px)', lineHeight: 1.45, margin: 0 }}>{lead.short}</p>
              </div>
            </Reveal>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20, marginTop: 32, maxWidth: 720 }}>
              {lead.bio.map((t, i) => (
                <Reveal key={i} delay={160 + i * 80}><p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--text-secondary)', margin: 0 }}>{t}</p></Reveal>
              ))}
            </div>
          </div>
        </div>
      </Section>

      <Section tone="card">
        <SectionHead eyebrow="Key areas of expertise" title="Fifteen disciplines, one accountable lead" />
        <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: '14px 32px' }}>
          {lead.expertise.map((s, i) => (
            <Reveal key={s} delay={(i % 3) * 60} as="li">
              <div style={{ display: 'flex', gap: 14, fontSize: 16, lineHeight: 1.5, color: 'var(--text-secondary)', paddingBottom: 14, borderBottom: '1px solid var(--border-subtle)' }}>
                <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 900, fontSize: 12, color: 'var(--brand-yellow)', letterSpacing: '.06em', marginTop: 4, minWidth: 22 }}>{String(i + 1).padStart(2, '0')}</span>{s}
              </div>
            </Reveal>
          ))}
        </ul>
      </Section>

      <Section tone="brand" pad={96}>
        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 28 }}>
          <div>
            <h2 style={{ fontSize: 'clamp(24px,2.6vw,32px)', fontWeight: 700, letterSpacing: 'var(--tracking-tight)', margin: 0, color: 'var(--text-on-brand)' }}>Talk to us about your project</h2>
            <p style={{ fontSize: 17, color: 'rgb(0 0 0 / .78)', marginTop: 12 }}>Senior involvement from the first conversation.</p>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <BtnL variant="ink" size="lg" onClick={() => go('contact')}>Get in touch</BtnL>
            <BtnL variant="inverse" size="lg" iconAfter="arrow-right" onClick={() => go('about')}>Back to About Us</BtnL>
          </div>
        </div>
      </Section>
    </div>
  );
}

Object.assign(window, { LeadershipScreen });