/* global React */
function Team() {
  const wrap = { padding: '120px 0', borderTop: '1px solid var(--ink)' };
  const header = {
    display: 'grid', gridTemplateColumns: '5fr 7fr', gap: '64px',
    alignItems: 'end', paddingBottom: '64px',
  };
  const h2 = {
    fontSize: 'clamp(40px, 5.4vw, 72px)', fontWeight: 500,
    letterSpacing: '-0.03em', lineHeight: 1.02, color: 'var(--ink)', margin: 0,
    maxWidth: '18ch',
  };
  const lead = {
    fontSize: '19px', lineHeight: 1.55, color: 'var(--warm-700)', margin: 0,
    maxWidth: '46ch',
  };

  const people = [
    { initials: 'AB', name: 'Nome Sobrenome', role: 'Founder · Strategy' },
    { initials: 'CD', name: 'Nome Sobrenome', role: 'Engineering Lead' },
    { initials: 'EF', name: 'Nome Sobrenome', role: 'AI Research' },
    { initials: 'GH', name: 'Nome Sobrenome', role: 'Operations' },
    { initials: 'IJ', name: 'Nome Sobrenome', role: 'Client Lead' },
  ];

  const grid = {
    display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '0',
    borderTop: '1px solid var(--border)',
  };

  const card = {
    display: 'flex', flexDirection: 'column',
    borderRight: '1px solid var(--border)',
    padding: '32px 28px 28px',
    minHeight: '320px',
    transition: 'background 200ms var(--ease-out)',
  };
  const cardLast = { ...card, borderRight: 'none' };

  const monoFrame = {
    aspectRatio: '1 / 1', width: '100%',
    background: 'var(--cream-2)',
    border: '1px solid var(--border)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    marginBottom: '24px',
  };
  const monoText = {
    fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 5vw, 72px)',
    fontWeight: 500, letterSpacing: '-0.05em',
    color: 'var(--ink)',
  };
  const monoDot = { color: 'var(--graphite)' };

  const name = { fontSize: '17px', fontWeight: 500, color: 'var(--ink)', margin: '0 0 4px', letterSpacing: '-0.01em' };
  const role = {
    fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.14em',
    textTransform: 'uppercase', color: 'var(--warm-600)', margin: 0,
  };

  return (
    <section style={wrap} id="time">
      <div className="container">
        <header style={header}>
          <div>
            <div className="eyebrow"><span className="n">04</span>Quem somos</div>
            <h2 style={{ ...h2, marginTop: '16px' }}>Sua área de IA, sem precisar montar uma.</h2>
          </div>
          <p style={lead}>
            O time é nosso, mas opera como se fosse seu, com compromisso em cada fase e presença que segue quando o trabalho vira rotina.
          </p>
        </header>

        <div style={grid}>
          {people.map((p, i) => (
            <div key={i} style={i === people.length - 1 ? cardLast : card}>
              <div style={monoFrame}>
                <span style={monoText}>
                  {p.initials}<span style={monoDot}>.</span>
                </span>
              </div>
              <h3 style={name}>{p.name}</h3>
              <p style={role}>{p.role}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Team = Team;