// AFF website — hero with navy gradient + crest watermark (staggered entrance)
function Hero({ onNav }) {
  const { Button, StatBlock, GoldRule } = window.AFFAdvogadosDesignSystem_cf5902;
  return (
    <section style={{ position: 'relative', background: 'var(--grad-navy)', overflow: 'hidden' }}>
      <img id="hero-watermark" src="assets/aff-shield.svg" alt="" aria-hidden="true" style={{
        position: 'absolute', right: '-4%', top: '50%', transform: 'translateY(-50%)',
        height: '135%', opacity: 0.07, filter: 'grayscale(1) brightness(3)', pointerEvents: 'none', willChange: 'transform',
      }} />
      <div style={{
        maxWidth: 'var(--container-xl)', margin: '0 auto', padding: '98px var(--page-gutter) 76px',
        position: 'relative',
      }}>
        <div style={{ maxWidth: 760 }}>
          <div className="hero-in" style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--gold-400)', marginBottom: 22 }}>
            Advogados Associados · Vitória / ES
          </div>
          <h1 className="hero-in" style={{
            fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(40px, 6vw, 68px)',
            lineHeight: 1.04, color: 'var(--text-on-navy)', margin: 0, letterSpacing: '-0.01em',
            animationDelay: '110ms',
          }}>
            Defesa técnica e<br/>estratégica para<br/><span style={{ fontStyle: 'italic', color: 'var(--gold-300)' }}>cada causa.</span>
          </h1>
          <p className="hero-in" style={{
            marginTop: 26, fontFamily: 'var(--font-body)', fontSize: 19, lineHeight: 1.65,
            color: 'var(--navy-200)', maxWidth: 560, animationDelay: '220ms',
          }}>
            O escritório Amâncio &amp; Favarato Freire une rigor técnico e
            sensibilidade humana na defesa dos direitos de seus clientes.
          </p>
          <div className="hero-in" style={{ marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap', animationDelay: '330ms' }}>
            <Button variant="accent" size="lg" onClick={()=>onNav('contato')}>Agende sua consulta</Button>
            <Button variant="inverse" size="lg" onClick={()=>onNav('areas')}>Áreas de atuação</Button>
          </div>
        </div>
        <div className="hero-in" style={{ marginTop: 64, maxWidth: 620, animationDelay: '440ms' }}>
          <div className="rule-grow" style={{ height: 1, background: 'var(--grad-gold-rule)' }} />
          <div style={{ marginTop: 26, display: 'flex', gap: 56 }}>
            <StatBlock value="15" suffix="+" label="Anos de atuação dos advogados" inverse />
          </div>
        </div>
      </div>
    </section>
  );
}