function Hero() {
  return (
    <section style={{
      position: 'relative', minHeight: 820, margin: 16, borderRadius: 36, overflow: 'hidden',
      background:
        'radial-gradient(80% 70% at 92% 18%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%),' +
        'linear-gradient(115deg, #0A1330 0%, #1B2D70 30%, #2F4FA0 55%, #4F6FB5 75%, #ADD5EB 92%, #FFFFFF 100%)',
      display: 'grid', gridTemplateColumns: '1.15fr 1fr', alignItems: 'center',
      padding: '180px 80px 110px', gap: 72
    }}>
      <div style={{ position: 'relative', zIndex: 2 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '7px 14px 7px 10px', borderRadius: 999,
          background: 'rgba(255,255,255,0.14)', border: '1px solid rgba(255,255,255,0.28)',
          backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
          fontFamily: 'Inter', fontSize: 12, fontWeight: 500, color: '#fff', letterSpacing: '0.02em',
          marginBottom: 32
        }}>
          <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999, background: '#ADD5EB' }} />
          35 anos · PE · PA · PB
        </div>
        <h1 style={{
          fontFamily: 'Saira', fontWeight: 300, fontSize: 92, lineHeight: 1, letterSpacing: '-0.03em',
          color: '#fff', margin: 0, textShadow: '0 1px 24px rgba(10,19,48,0.25)'
        }}>
          Preocupe-se<br/>apenas em <em style={{ fontStyle: 'normal', fontWeight: 500 }}>morar.</em>
        </h1>
        <p style={{ fontFamily: 'Inter', fontSize: 18, lineHeight: 1.55, color: '#fff', opacity: 0.92, marginTop: 32, maxWidth: 480, fontWeight: 400 }}>
          A maior administradora de condomínios do Nordeste. Tecnologia, transparência e cuidado humano — em um só lugar.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 40, alignItems: 'center' }}>
          <a href="#" style={{
            background: '#fff', color: '#0A1330', padding: '16px 28px', borderRadius: 999,
            fontFamily: 'Inter', fontSize: 15, fontWeight: 600, textDecoration: 'none', letterSpacing: '0.01em',
            display: 'inline-flex', alignItems: 'center', gap: 8
          }}>
            Peça uma proposta
            <span style={{ display: 'inline-flex', width: 22, height: 22, borderRadius: 999, background: '#0A1330', color: '#fff', alignItems: 'center', justifyContent: 'center', fontSize: 12 }}>→</span>
          </a>
          <a href="#" style={{
            background: 'rgba(255,255,255,0.12)', backdropFilter: 'blur(10px)',
            border: '1px solid rgba(255,255,255,0.32)',
            color: '#fff', padding: '16px 28px', borderRadius: 999,
            fontFamily: 'Inter', fontSize: 15, fontWeight: 500, textDecoration: 'none'
          }}>Baixar o app</a>
        </div>
      </div>

      {/* People-through-the-III — three rounded strips, soft glass */}
      <div style={{
        position: 'relative', justifySelf: 'end', width: 480, height: 560,
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14, alignItems: 'stretch'
      }}>
        {[0, 1, 2].map((i) => (
          <div key={i} style={{
            position: 'relative', overflow: 'hidden', borderRadius: 80,
            background: `url('../../assets/portraits-iii.jpg') ${i * 50}% 50% / auto 100% no-repeat`,
            boxShadow: '0 20px 60px rgba(10,19,48,0.35)',
            animation: `semog-hero-rise 1.2s ${i * 0.12}s cubic-bezier(0.22, 0.61, 0.36, 1) both`
          }} />
        ))}
      </div>

      {/* floating glass stats card */}
      <div style={{
        position: 'absolute', left: 80, bottom: 48,
        display: 'flex', gap: 0,
        background: 'rgba(255,255,255,0.14)', border: '1px solid rgba(255,255,255,0.28)',
        backdropFilter: 'blur(18px)', WebkitBackdropFilter: 'blur(18px)',
        borderRadius: 24, padding: '18px 8px',
        color: '#fff'
      }}>
        {[
          ['+850', 'condomínios'],
          ['R$ 2,1 bi', 'administrados'],
          ['98,2 %', 'no azul']
        ].map(([n, l], i) => (
          <div key={i} style={{ padding: '0 24px', borderLeft: i ? '1px solid rgba(255,255,255,0.22)' : 'none' }}>
            <div style={{ fontFamily: 'Saira', fontSize: 26, fontWeight: 500, letterSpacing: '-0.01em' }}>{n}</div>
            <div style={{ fontFamily: 'Inter', fontSize: 12, opacity: 0.85, marginTop: 2 }}>{l}</div>
          </div>
        ))}
      </div>

      <style>{`
        @keyframes semog-hero-rise {
          from { transform: translateY(28px); opacity: 0; }
          to   { transform: translateY(0);    opacity: 1; }
        }
      `}</style>
    </section>
  );
}
window.SemogHero = Hero;