// Hero — navy section with serif headline and CTA, monogram watermark.
// layout: 'dividido' (default split grid) | 'editorial' (centered manifesto + horizontal contact strip)
function Hero({ onNav, layout = 'dividido' }) {
  const { Button, Eyebrow, Badge } = window.AmorimECostaDesignSystem_658eb5;
  const contactItems = [['user', 'Atendimento direto com advogado'], ['shield-check', 'Sigilo e ética profissional'], ['map-pin', 'Atuação em todo o estado de MS']];

  if (layout === 'editorial') {
    return (
      <section id="topo" style={{ position: 'relative', background: 'var(--navy-900)', overflow: 'hidden' }}>
        <img src="assets/logo-monogram-inverse.png" alt="" aria-hidden="true" style={{
          position: 'absolute', left: '50%', top: '-60px', transform: 'translateX(-50%)',
          height: '520px', opacity: 0.04,
        }} />
        <div style={{
          maxWidth: '900px', margin: '0 auto', padding: 'var(--space-11) var(--space-6) var(--space-9)',
          position: 'relative', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center',
        }}>
          <Eyebrow color="inverse">Advocacia previdenciária · Mato Grosso do Sul</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600, color: 'var(--white)',
            fontSize: 'clamp(2.8rem, 5.4vw, 4.2rem)', lineHeight: 1.05, letterSpacing: 'var(--tracking-tight)',
            margin: 'var(--space-5) 0 var(--space-5)', textWrap: 'balance', maxWidth: '22ch',
          }}>
            Segurança jurídica para cada etapa do seu benefício.
          </h1>
          <p style={{
            fontFamily: 'var(--font-sans)', fontSize: 'var(--text-md)', lineHeight: 1.6,
            color: 'var(--navy-200)', maxWidth: '52ch', margin: '0 0 var(--space-7)',
          }}>
            Aposentadorias, auxílios por incapacidade, BPC/LOAS e revisões. Acompanhamos
            seu processo do requerimento administrativo à atuação judicial — com linguagem clara
            e atenção ao prazo.
          </p>
          <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center', marginBottom: 'var(--space-10)' }}>
            <Button variant="primary" size="lg" onClick={() => onNav('contato')}>Agende sua consulta</Button>
            <Button variant="ghost" size="lg" onClick={() => onNav('areas')}
              style={{ color: 'var(--white)' }}
              iconRight={<i data-lucide="arrow-right" style={{ width: 17, height: 17 }}></i>}>
              Áreas de atuação
            </Button>
          </div>
        </div>

        {/* horizontal contact strip */}
        <div style={{
          position: 'relative', background: 'var(--surface-card)', borderTop: '3px solid var(--brown-500)',
        }}>
          <div style={{
            maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--space-6) var(--space-6)',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-6)', flexWrap: 'wrap',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
              <Badge variant="brown" dot>Consulta inicial sem compromisso</Badge>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)', flexWrap: 'wrap' }}>
              {contactItems.map(([ic, tx]) => (
                <div key={ic} style={{ display: 'flex', alignItems: 'center', gap: '9px' }}>
                  <i data-lucide={ic} style={{ width: 16, height: 16, color: 'var(--navy-700)' }}></i>
                  <span style={{ fontSize: '13.5px', color: 'var(--text-body)' }}>{tx}</span>
                </div>
              ))}
            </div>
            <Button variant="primary" onClick={() => onNav('contato')}>Falar com o escritório</Button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="topo" style={{ position: 'relative', background: 'var(--navy-900)', overflow: 'hidden' }}>
      {/* monogram watermark */}
      <img src="assets/logo-monogram-inverse.png" alt="" aria-hidden="true" style={{
        position: 'absolute', right: '-40px', top: '50%', transform: 'translateY(-50%)',
        height: '480px', opacity: 0.05,
      }} />
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: 'var(--space-11) var(--space-6)', position: 'relative',
        display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 'var(--space-9)', alignItems: 'center',
      }}>
        <div>
          <Eyebrow color="inverse">Advocacia previdenciária · Mato Grosso do Sul</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600, color: 'var(--white)',
            fontSize: 'clamp(2.5rem, 4vw, 3.1rem)', lineHeight: 1.07, letterSpacing: 'var(--tracking-tight)',
            margin: 'var(--space-5) 0 var(--space-4)', textWrap: 'balance',
          }}>
            Segurança jurídica<br />para cada etapa do<br />seu benefício.
          </h1>
          <p style={{
            fontFamily: 'var(--font-sans)', fontSize: 'var(--text-md)', lineHeight: 1.6,
            color: 'var(--navy-200)', maxWidth: '46ch', margin: '0 0 var(--space-7)',
          }}>
            Aposentadorias, auxílios por incapacidade, BPC/LOAS e revisões. Acompanhamos
            seu processo do requerimento administrativo à atuação judicial — com linguagem clara
            e atenção ao prazo.
          </p>
          <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center' }}>
            <Button variant="primary" size="lg" onClick={() => onNav('contato')}>Agende sua consulta</Button>
            <Button variant="ghost" size="lg" onClick={() => onNav('areas')}
              style={{ color: 'var(--white)' }}
              iconRight={<i data-lucide="arrow-right" style={{ width: 17, height: 17 }}></i>}>
              Áreas de atuação
            </Button>
          </div>
        </div>

        {/* contact mini-card */}
        <div style={{
          background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)',
          boxShadow: 'var(--shadow-xl)', padding: 'var(--space-6)',
          borderTop: '3px solid var(--brown-500)',
        }}>
          <Badge variant="brown" dot>Consulta inicial sem compromisso</Badge>
          <h3 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-lg)',
            color: 'var(--text-strong)', margin: 'var(--space-4) 0 var(--space-2)',
          }}>Vamos analisar o seu caso</h3>
          <p style={{ fontSize: '14px', color: 'var(--text-muted)', lineHeight: 1.5, margin: '0 0 var(--space-5)' }}>
            Conte sua situação. Retornamos em até 1 dia útil pelo canal de sua preferência.
          </p>
          {contactItems.map(([ic, tx]) => (
            <div key={ic} style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
              <span style={{
                width: 30, height: 30, borderRadius: 'var(--radius-sm)', background: 'var(--navy-50)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none',
              }}><i data-lucide={ic} style={{ width: 16, height: 16, color: 'var(--navy-700)' }}></i></span>
              <span style={{ fontSize: '13.5px', color: 'var(--text-body)' }}>{tx}</span>
            </div>
          ))}
          <Button variant="primary" fullWidth style={{ marginTop: 'var(--space-3)' }} onClick={() => onNav('contato')}>
            Falar com o escritório
          </Button>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;