/* 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 mobile = useMobile();

  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 className="hero-copy">
          <Reveal>
            <div className="hero-badge" 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: mobile ? 'none' : '0 0 10px #00D4FF' }} />
              <span style={{ fontFamily: 'var(--ar-font-body)', fontSize: 12, fontWeight: 600, letterSpacing: '0.12em', color: '#00D4FF', textTransform: 'uppercase' }}>AGÊNCIA DE IA &amp; AUTOMAÇÕES</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',
            }}>
              {mobile
                ? <>IA para <GradText>atendimento, vendas e gestão</GradText></>
                : <>IA aplicada ao <GradText>atendimento, vendas e gestão</GradText> — do primeiro contato ao resultado</>}
            </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',
            }}>
              {mobile
                ? 'Agentes, automações e sistemas integrados ao WhatsApp, CRM e processos da sua empresa.'
                : 'Criamos agentes inteligentes, automações e sistemas integrados aos canais e processos do seu negócio — do WhatsApp ao CRM.'}
            </p>
          </Reveal>

          <Reveal delay={220}>
            <div className="hero-cta" style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
              <Button size="md" onClick={() => onNav('contato')}>
                Solicitar demonstração <i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i>
              </Button>
              <Button variant="secondary" size="md" onClick={() => onNav('servicos')}>Conhecer serviços</Button>
            </div>
          </Reveal>

          <Reveal delay={300}>
            <div className="hero-trust" style={{ display: 'flex', alignItems: 'center', gap: 20, marginTop: 36, flexWrap: 'wrap' }}>
              {[
                { icon: 'zap', text: 'Implementação em semanas' },
                { icon: 'plug', text: 'Integra seus sistemas atuais' },
                { icon: 'headphones', text: 'Suporte contínuo incluído' },
              ].map(item => (
                <span key={item.text} style={{ fontFamily: 'var(--ar-font-body)', fontSize: 12.5, color: 'var(--ar-text-dim)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <i data-lucide={item.icon} style={{ width: 14, height: 14, color: 'var(--ar-cyan)' }}></i>
                  {item.text}
                </span>
              ))}
            </div>
          </Reveal>
        </div>

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

window.Hero = Hero;