const heroStyles = {
  wrap: {
    position: 'relative',
    paddingTop: 168,
    paddingBottom: 100,
    overflow: 'hidden',
    borderBottom: '1px solid var(--border-subtle)',
  },
  bgGrid: {
    position: 'absolute', inset: 0, pointerEvents: 'none',
    backgroundImage:
      'linear-gradient(rgba(232,223,201,0.035) 1px, transparent 1px),' +
      'linear-gradient(90deg, rgba(232,223,201,0.035) 1px, transparent 1px)',
    backgroundSize: '64px 64px',
    maskImage: 'radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%)',
    WebkitMaskImage: 'radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%)',
  },
  bgGlow: {
    position: 'absolute', top: '18%', left: '50%',
    transform: 'translateX(-50%)',
    width: 1000, height: 760,
    background: 'radial-gradient(ellipse at center, rgba(201,169,110,0.10) 0%, transparent 70%)',
    pointerEvents: 'none',
  },
  bgRadialBottom: {
    position: 'absolute', bottom: -100, left: '50%',
    transform: 'translateX(-50%)',
    width: 1200, height: 400,
    background: 'radial-gradient(ellipse at center, rgba(201,169,110,0.05) 0%, transparent 65%)',
    pointerEvents: 'none',
  },
  topHairline: {
    position: 'absolute', top: 64, left: '50%', transform: 'translateX(-50%)',
    width: 320, height: 1,
    background: 'linear-gradient(90deg, transparent, rgba(201,169,110,0.55), transparent)',
  },
  inner: {
    position: 'relative', zIndex: 1,
    maxWidth: 980, margin: '0 auto', padding: '0 24px',
    textAlign: 'center',
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28,
  },
  pill: {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    background: 'rgba(201,169,110,0.08)',
    border: '1px solid rgba(201,169,110,0.25)',
    borderRadius: 99, padding: '6px 14px 6px 12px',
    fontFamily: 'var(--font-mono)', fontSize: 11,
    color: 'var(--brand-gold)', letterSpacing: '0.08em',
    overflow: 'hidden',
    maxWidth: 460,
  },
  marqueeViewport: {
    position: 'relative',
    overflow: 'hidden',
    width: 320,
    height: 16,
    maskImage: 'linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%)',
    WebkitMaskImage: 'linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%)',
  },
  marqueeTrack: {
    position: 'absolute', top: 0, left: 0,
    display: 'flex', alignItems: 'center', gap: 32,
    whiteSpace: 'nowrap',
    animation: 'bb-marquee 14s linear infinite',
    fontFamily: 'var(--font-mono)', fontSize: 11,
    color: 'var(--brand-gold)', letterSpacing: '0.14em',
    fontWeight: 700,
  },
  monoTag: {
    fontFamily: 'var(--font-mono)', fontSize: 11,
    color: 'var(--brand-gold)', letterSpacing: '0.16em',
    textTransform: 'uppercase',
  },
  headline: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(40px, 6.4vw, 76px)',
    fontWeight: 700,
    letterSpacing: '-0.04em',
    lineHeight: 1.02,
    color: 'var(--fg-1)',
    margin: 0,
    textWrap: 'balance',
  },
  goldHalf: { color: 'var(--brand-gold)' },
  sub: {
    fontSize: 19, lineHeight: 1.6,
    color: 'var(--fg-2)', maxWidth: 660, margin: 0,
  },
  ctaRow: { display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' },
  trustRow: {
    display: 'flex', gap: 28, justifyContent: 'center', flexWrap: 'wrap',
    marginTop: 8,
    fontSize: 12, color: 'var(--fg-3)',
    fontFamily: 'var(--font-mono)', letterSpacing: '0.08em',
    textTransform: 'uppercase',
  },
  trustItem: { display: 'inline-flex', alignItems: 'center', gap: 6 },
  statsStrip: {
    marginTop: 64,
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: 0,
    width: '100%',
    maxWidth: 920,
    border: '1px solid var(--border-default)',
    borderRadius: 'var(--radius-xl)',
    background: 'var(--bg-surface-2)',
    overflow: 'hidden',
    boxShadow: 'var(--shadow-md)',
  },
  stat: {
    padding: '28px 24px',
    borderRight: '1px solid var(--border-subtle)',
    position: 'relative',
  },
  statLast: { borderRight: 'none' },
  statAccent: {
    width: 20, height: 2,
    background: 'var(--brand-gold)',
    borderRadius: 99,
    marginBottom: 14,
    opacity: 0.7,
  },
  statNum: {
    fontFamily: 'var(--font-display)',
    fontSize: 34, fontWeight: 800,
    letterSpacing: '-0.04em', color: 'var(--fg-1)',
    lineHeight: 1,
  },
  statLabel: {
    fontSize: 11, color: 'var(--fg-3)', marginTop: 10,
    fontFamily: 'var(--font-mono)', letterSpacing: '0.10em',
    textTransform: 'uppercase',
  },
};

function Hero() {
  const scrollToForm = (e) => {
    e?.preventDefault();
    document.getElementById('contato')?.scrollIntoView({ behavior: 'smooth' });
  };
  const scrollToHow = (e) => {
    e?.preventDefault();
    document.getElementById('processo')?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <section style={heroStyles.wrap} id="top">
      <div style={heroStyles.bgGrid}></div>
      <div style={heroStyles.bgGlow}></div>
      <div style={heroStyles.bgRadialBottom}></div>
      <div style={heroStyles.topHairline}></div>

      <div style={heroStyles.inner} className="bb-inner">
        <div style={heroStyles.pill}>
          <span className="bb-dot-pulse"></span>
          <div style={heroStyles.marqueeViewport}>
            <div style={heroStyles.marqueeTrack}>
              <span>ANTHROPIC</span><span style={{ opacity: 0.5 }}>✦</span>
              <span>CHATGPT</span><span style={{ opacity: 0.5 }}>✦</span>
              <span>GEMINI</span><span style={{ opacity: 0.5 }}>✦</span>
              <span>N8N</span><span style={{ opacity: 0.5 }}>✦</span>
              <span>POSTGRES</span><span style={{ opacity: 0.5 }}>✦</span>
              <span>POWER BI</span><span style={{ opacity: 0.5 }}>✦</span>
              <span>SUPABASE</span><span style={{ opacity: 0.5 }}>✦</span>
              <span>ANTHROPIC</span><span style={{ opacity: 0.5 }}>✦</span>
              <span>CHATGPT</span><span style={{ opacity: 0.5 }}>✦</span>
              <span>GEMINI</span><span style={{ opacity: 0.5 }}>✦</span>
              <span>N8N</span><span style={{ opacity: 0.5 }}>✦</span>
              <span>POSTGRES</span><span style={{ opacity: 0.5 }}>✦</span>
              <span>POWER BI</span><span style={{ opacity: 0.5 }}>✦</span>
              <span>SUPABASE</span><span style={{ opacity: 0.5 }}>✦</span>
            </div>
          </div>
        </div>

        <div style={heroStyles.monoTag}>// IA · AUTOMAÇÃO · AGENTES INTELIGENTES</div>

        <h1 style={heroStyles.headline}>
          Automatize processos com IA<br />
          <span style={heroStyles.goldHalf}>para empresas que querem escalar.</span>
        </h1>

        <p style={heroStyles.sub} className="hero-sub">
          Implantamos agentes de IA, automações e sistemas inteligentes que
          executam o trabalho repetitivo da sua operação — 24/7, em português,
          integrados ao seu stack.
        </p>

        <div style={heroStyles.ctaRow}>
          <button className="btn btn-lg btn-gold" onClick={scrollToForm}>
            Solicitar Diagnóstico <IconArrowRight size={16} />
          </button>
          <button className="btn btn-lg btn-ghost" onClick={scrollToHow}>
            <IconPlay size={13} /> Como funciona
          </button>
        </div>

        <div style={heroStyles.trustRow}>
          <span style={heroStyles.trustItem}><IconCheckCircle size={12} /> Diagnóstico gratuito</span>
          <span style={{ color: 'var(--fg-3)' }}>·</span>
          <span style={heroStyles.trustItem}><IconUsers size={12} /> Atendimento direto</span>
          <span style={{ color: 'var(--fg-3)' }}>·</span>
          <span style={heroStyles.trustItem}><IconShield size={12} /> Sem compromisso</span>
        </div>

        <div data-grid="stats" style={heroStyles.statsStrip}>
          <div style={heroStyles.stat}>
            <div style={heroStyles.statAccent}></div>
            <div style={heroStyles.statNum}>24/7</div>
            <div style={heroStyles.statLabel}>Agentes em operação</div>
          </div>
          <div style={heroStyles.stat}>
            <div style={heroStyles.statAccent}></div>
            <div style={heroStyles.statNum}>7<span style={{ color: 'var(--brand-gold)' }}>+</span></div>
            <div style={heroStyles.statLabel}>Ferramentas integradas</div>
          </div>
          <div style={heroStyles.stat}>
            <div style={{ ...heroStyles.statAccent, opacity: 1 }}></div>
            <div style={{ ...heroStyles.statNum, color: 'var(--brand-gold)' }}>100%</div>
            <div style={heroStyles.statLabel}>Soluções sob medida</div>
          </div>
          <div style={{ ...heroStyles.stat, ...heroStyles.statLast }}>
            <div style={heroStyles.statAccent}></div>
            <div style={heroStyles.statNum}>Grátis</div>
            <div style={heroStyles.statLabel}>Diagnóstico inicial</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });