/* Hero.jsx — promise + dual CTA + Antigravity mouse field + Central AR scene */
const Hero = ({ onNav }) => {
  const wrapRef = React.useRef(null);
  const [tilt, setTilt] = React.useState({ x: 0, y: 0 });

  const onMove = (e) => {
    if (!wrapRef.current || window.innerWidth < 980) return;
    const r = wrapRef.current.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    setTilt({ x: px, y: py });
  };

  return (
    <section id="top" ref={wrapRef} onMouseMove={onMove} style={{
      position: 'relative', paddingTop: 56, paddingBottom: 110, overflow: 'hidden',
      background: `radial-gradient(900px 620px at 78% 6%, rgba(0,94,255,0.40), transparent 56%),
                   radial-gradient(740px 520px at 14% 78%, rgba(0,212,255,0.16), transparent 60%),
                   linear-gradient(180deg, #05070D 0%, #0B1020 100%)`,
    }}>
      <MouseField density={1} />

      <Container className="grid-hero" style={{ position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 48, alignItems: 'center' }}>
        <div>
          <Reveal>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 14px',
              background: 'rgba(0,212,255,0.07)', border: '1px solid rgba(0,212,255,0.28)',
              borderRadius: 999, marginBottom: 26,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: '#00D4FF', boxShadow: '0 0 10px #00D4FF' }} />
              <span style={{ fontFamily: 'var(--ar-font-body)', fontSize: 12, fontWeight: 600, letterSpacing: '0.12em', color: '#00D4FF', textTransform: 'uppercase' }}>IA CONECTADA À OPERAÇÃO DA SUA EMPRESA</span>
            </div>
          </Reveal>

          <Reveal delay={80}>
            <h1 style={{
              fontFamily: 'var(--ar-font-title)', fontWeight: 800,
              fontSize: 'clamp(38px, 5vw, 62px)', lineHeight: 1.05, letterSpacing: '-0.022em',
              color: 'var(--ar-text-main)', margin: 0, textWrap: 'balance',
            }}>
              IA conectada ao <GradText>atendimento, vendas e gestão</GradText> da sua empresa
            </h1>
          </Reveal>

          <Reveal delay={150}>
            <p style={{
              fontFamily: 'var(--ar-font-body)', fontSize: 'clamp(17px, 1.4vw, 20px)', lineHeight: 1.55,
              color: 'var(--ar-text-muted)', maxWidth: 560, margin: '22px 0 34px', textWrap: 'pretty',
            }}>
              Criamos agentes inteligentes, automações e sistemas integrados aos canais, dados e
              processos do seu negócio — do WhatsApp ao CRM, da agenda aos documentos.
            </p>
          </Reveal>

          <Reveal delay={220}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
              <Button size="lg" onClick={() => onNav('contato')}>
                Solicitar demonstração <i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i>
              </Button>
              <Button variant="secondary" size="lg" onClick={() => onNav('solucoes')}>Conhecer soluções</Button>
            </div>
          </Reveal>

          <Reveal delay={300}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 36, flexWrap: 'wrap' }}>
              <span style={{ fontFamily: 'var(--ar-font-body)', fontSize: 12.5, color: 'var(--ar-text-dim)', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <i data-lucide="plug-zap" style={{ width: 15, height: 15, color: 'var(--ar-cyan)' }}></i>
                Integração com os sistemas que você já usa
              </span>
            </div>
          </Reveal>
        </div>

        <Reveal delay={200} style={{ minWidth: 0 }}>
          <HeroEcosystem tilt={tilt} />
        </Reveal>
      </Container>
    </section>
  );
};

window.Hero = Hero;