// Sobre / Quem Somos — terminal-style profile cards
function Sobre() {
  const team = [
    {
      name: 'Davi Eduardo',
      role: 'Fundador & Desenvolvedor',
      handle: '@davi.eduardo',
      bio: 'Formado em Sistemas de Informação, atuo no desenvolvimento de sistemas e apps. Foco em arquiteturas robustas, performance e segurança da informação.',
      stack: ['TypeScript', 'Node.js', 'React', 'Next.js', 'AWS', 'Docker', 'Postgres', 'Redis', 'Python'],
      color: '#5B47F5',
    },
    {
      name: 'Marco Lucas',
      role: 'Co-fundador & Especialista em Marketing & Automações',
      handle: '@marco.lucas',
      bio: 'Formado em Análise e Desenvolvimento de Sistemas (ADS) e certificado em Meta Ads e Google Ads. Conecto estratégia de marketing à tecnologia: campanhas que geram lead, funis automatizados e processos que rodam sozinhos com IA.',
      stack: ['Meta Ads', 'Google Ads', 'n8n', 'OpenAI', 'WhatsApp API', 'GA4'],
      color: '#00D27A',
    },
  ];

  return (
    <section className="section" id="sobre">
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <span className="eyebrow">QUEM SOMOS · time enxuto</span>
          <h2 className="h-section">Quem <span className="accent">somos?</span></h2>
          <p style={{ fontSize: 17, color: 'var(--muted)', marginTop: 18 }}>
            Dois desenvolvedores que falam com você direto — sem camadas de gerentes ou agência terceirizando o que importa.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }} className="team-grid">
          {team.map((p) => (
            <div key={p.name} style={{
              background: 'var(--paper)', border: '1px solid var(--line)',
              borderRadius: 20, padding: 0, overflow: 'hidden',
              display: 'flex', flexDirection: 'column',
            }}>
              {/* Header strip */}
              <div style={{
                padding: '14px 20px', borderBottom: '1px solid var(--line)',
                background: 'var(--bg-warm)', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>~/team/{p.handle.replace('@', '')}.md</span>
                <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: p.color }}></span>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', lineHeight: 1 }}>online</span>
                </span>
              </div>
              <div style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 16, flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                  <div style={{
                    width: 72, height: 72, borderRadius: 16,
                    background: `linear-gradient(135deg, ${p.color}, var(--ink))`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: '#fff', fontWeight: 700, fontSize: 28,
                    fontFamily: 'Space Grotesk, sans-serif',
                  }}>
                    {p.name.split(' ').map(n => n[0]).join('')}
                  </div>
                  <div>
                    <h3 className="display" style={{ fontSize: 24, fontWeight: 700, margin: 0, letterSpacing: '-0.02em' }}>{p.name}</h3>
                    <span style={{ color: p.color, fontWeight: 500, fontSize: 14 }}>{p.role}</span>
                    <div className="mono" style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{p.handle}</div>
                  </div>
                </div>

                <p style={{ color: 'var(--ink-2)', margin: 0, fontSize: 15, lineHeight: 1.6 }}>{p.bio}</p>

                <div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginBottom: 8 }}>// stack</div>
                  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                    {p.stack.map(t => (
                      <span key={t} className="mono" style={{
                        fontSize: 11, padding: '4px 10px',
                        background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--line)',
                      }}>{t}</span>
                    ))}
                  </div>
                </div>

                <div style={{ display: 'flex', gap: 8, marginTop: 'auto', paddingTop: 12, borderTop: '1px solid var(--line)' }}>
                  {['LinkedIn', 'GitHub', 'Email'].map(s => (
                    <a key={s} href="#" style={{
                      flex: 1, padding: '10px', borderRadius: 10,
                      background: 'var(--bg-warm)', border: '1px solid var(--line)',
                      textAlign: 'center', fontSize: 13, fontWeight: 500,
                      transition: 'all .15s',
                    }}
                      onMouseEnter={e => { e.currentTarget.style.background = 'var(--ink)'; e.currentTarget.style.color = '#fff'; }}
                      onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-warm)'; e.currentTarget.style.color = 'var(--ink)'; }}
                    >{s}</a>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 800px){ .team-grid{ grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

window.Sobre = Sobre;