function Hero() {
  return (
    <section className="cursor-glow" style={{
      position: 'relative',
      paddingTop: 48, paddingBottom: 96,
      background: 'radial-gradient(1200px 600px at 90% 110%, rgba(59,86,143,.4), transparent 55%), var(--navy-900)',
      overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 72, alignItems: 'center' }}>
          <div>
            <span className="eyebrow" data-anim="fade-up">
              <Bars size={14} />
              Consultoria Especializada em Licitações
            </span>
            <h1 className="h1" data-anim="fade-up" data-anim-delay="1" style={{
              fontFamily: 'var(--font-sans)', fontWeight: 700,
              fontSize: 'clamp(40px, 5.4vw, 72px)', lineHeight: 1.1,
              letterSpacing: '-0.025em', color: 'var(--cream-50)',
              margin: '24px 0 32px', textWrap: 'balance',
            }}>
              O governo é o maior, comprador do Brasil.{' '}
              <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--magenta-400)' }}>
                Sua empresa ainda não está vendendo para ele?
              </span>
            </h1>
            <p data-anim="fade-up" data-anim-delay="2" style={{ fontSize: 19, lineHeight: 1.6, color: 'var(--cream-200)', maxWidth: 560, margin: '0 0 16px' }}>
              A ResultaHub estrutura, regulariza e posiciona empresas, <strong style={{ color: 'var(--cream-50)' }}>Venderem para órgão públicos</strong>:  do primeiro passo até o recebimento, dos valores.
            </p>
            <p data-anim="fade-up" data-anim-delay="3" style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--cream-200)', maxWidth: 560, margin: '0 0 36px', opacity: 0.85 }}>
              O mercado de compras públicas movimenta mais de <strong style={{ color: 'var(--magenta-400)' }}>R$1 trilhão por ano</strong>. Enquanto você avalia a viabilidade, seus concorrentes já firmam contratos.
            </p>
            <div data-anim="fade-up" data-anim-delay="4" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 20 }}>
              <a className="btn btn-primary magnetic" data-magnet="0.20" href="#formulario">Quero avaliar minha empresa</a>
              <a className="btn btn-secondary" href="https://wa.me/5511939197036">Falar com especialista</a>
            </div>
          </div>
          <div data-anim="slide-left" data-anim-delay="2">
            <SpecialistCard />
          </div>
        </div>
      </div>
    </section>
  );
}

function SpecialistCard() {
  return (
    <div className="tilt" data-tilt-max="5" style={{
      position: 'relative',
      borderRadius: 32,
      overflow: 'hidden',
      aspectRatio: '4 / 5',
      background: '#6B4232',
      border: '1px solid var(--border-on-dark-strong)',
      boxShadow: '0 30px 80px -20px rgba(0,0,0,.55)',
    }}>
      <img
        src="assets/tania.jpg"
        alt="Tânia Ungaro"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%' }}
      />
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: '38%',
        background: 'linear-gradient(180deg, transparent 0%, rgba(10,24,48,.78) 100%)',
        pointerEvents: 'none',
      }}></div>
      <div style={{
        position: 'absolute', left: 16, right: 16, bottom: 16,
        background: 'rgba(10,24,48,.55)',
        backdropFilter: 'blur(14px) saturate(1.2)',
        WebkitBackdropFilter: 'blur(14px) saturate(1.2)',
        border: '1px solid rgba(201,168,76,.30)',
        borderRadius: 16,
        padding: '14px 18px',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ flex: 1 }}>
          <div style={{ color: 'var(--cream-50)', fontWeight: 600, fontSize: 16, letterSpacing: '-0.01em' }}>Tânia Ungaro</div>
          <div style={{ color: 'var(--cream-200)', fontSize: 12, marginTop: 2 }}>Especialista em Licitações</div>
        </div>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '6px 10px', borderRadius: 999,
          background: 'rgba(46,154,107,.20)', color: '#5BD49B',
          fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: '#5BD49B' }}></span>
          Online
        </span>
      </div>
    </div>
  );
}
window.Hero = Hero;