function Hero() {
  const [time, setTime] = React.useState(() => new Date());
  React.useEffect(() => {
    const i = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(i);
  }, []);

  const fmt = time.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });

  return (
    <header id="top" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* background grid */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        backgroundImage: `
          linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px)
        `,
        backgroundSize: '72px 72px',
        maskImage: 'radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 85%)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 85%)',
        pointerEvents: 'none',
      }} />
      {/* blue glow orb */}
      <div aria-hidden="true" style={{
        position: 'absolute',
        width: 900, height: 900,
        borderRadius: '50%',
        top: '-30%', left: '50%',
        transform: 'translateX(-50%)',
        background: 'radial-gradient(circle, rgba(30,123,255,0.28), rgba(30,123,255,0) 60%)',
        filter: 'blur(40px)',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative', paddingTop: 140, paddingBottom: 80 }}>

        {/* Meta row */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          marginBottom: 80, flexWrap: 'wrap', gap: 16,
        }}>
          <div className="eyebrow">
            <span className="dot"></span>
            LABORATÓRIO DE PRODUTOS · SÃO PAULO / BR
          </div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>
            [ {fmt} BRT ] · BUILD 2026.04
          </div>
        </div>

        {/* Display */}
        <h1 className="display" style={{ maxWidth: 1200 }}>
          Um <span className="serif-it">laboratório</span> de<br/>
          produtos{' '}
          <span style={{ position: 'relative', display: 'inline-block' }}>
            <span style={{ color: 'var(--accent)' }}>próprios</span>
            <span aria-hidden="true" style={{
              position: 'absolute', left: 0, right: 0, bottom: '-2px',
              height: 4, background: 'var(--accent)',
              opacity: 0.35, borderRadius: 2,
            }}></span>
          </span>{' '}
          que crescem com{' '}
          <span className="serif-it">automação</span>, dados e IA.
        </h1>

        {/* Sub + CTAs */}
        <div style={{
          marginTop: 48,
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)',
          gap: 48,
          alignItems: 'end',
        }} className="hero-grid">
          <p style={{
            fontSize: 'clamp(16px, 1.4vw, 19px)',
            color: 'var(--ink-2)',
            maxWidth: 520,
            lineHeight: 1.55,
            margin: 0,
          }}>
            Não prestamos serviço de software. A Zion Labz projeta, desenvolve e opera plataformas SaaS próprias — e agora compartilha a metodologia através da mentoria para quem quer construir produtos que escalam.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'flex-start' }}>
            <a
              href="https://wa.me/5511941040491?text=Ol%C3%A1%21%20Vim%20do%20site%20da%20Zion%20Labz%20e%20quero%20saber%20mais%20sobre%20a%20mentoria."
              target="_blank"
              rel="noreferrer"
              className="btn primary"
            >
              Trabalhe conosco
              <span className="arrow">→</span>
            </a>
            <a href="#ecosystem" className="btn">
              Ver o ecossistema
            </a>
          </div>
        </div>

        {/* Hero stat grid */}
        <div style={{
          marginTop: 96,
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0,
          borderTop: '1px solid var(--line)',
          borderBottom: '1px solid var(--line)',
        }} className="hero-stats">
          {[
            { k: '3', lbl: 'Produtos em operação', sub: 'Metrifiquei · Tevler · PregaAI' },
            { k: '100%', lbl: 'SaaS proprietário', sub: 'Código, infra e dados próprios' },
            { k: 'AI-native', lbl: 'Design de produto', sub: 'IA no core, não como feature' },
            { k: 'B2B', lbl: 'Foco de mercado', sub: 'Marketing · Vendas · Gestão' },
          ].map((s, i) => (
            <div key={i} style={{
              padding: '32px 24px',
              borderRight: i < 3 ? '1px solid var(--line)' : 'none',
              display: 'flex', flexDirection: 'column', gap: 6,
            }}>
              <div style={{
                fontSize: 'clamp(28px, 3vw, 44px)',
                fontWeight: 500,
                letterSpacing: '-0.03em',
                lineHeight: 1,
              }}>{s.k}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.1em', marginTop: 10 }}>
                {s.lbl}
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 2 }}>
                {s.sub}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Ticker */}
      <div className="ticker" aria-hidden="true">
        <div className="track">
          {Array.from({ length: 2 }).map((_, rep) => (
            <React.Fragment key={rep}>
              <span><span className="k">EFICIÊNCIA OPERACIONAL</span> <span className="v">+342%</span> <span className="up">▲</span></span>
              <span>◆</span>
              <span><span className="k">METRIFIQUEI</span> <span className="v">BI e atribuição para performance</span></span>
              <span>◆</span>
              <span><span className="k">TEVLER</span> <span className="v">hub de gestão para agências</span></span>
              <span>◆</span>
              <span><span className="k">PREGAAI</span> <span className="v">app Android · Bíblia + IA</span> <span className="up">▲</span></span>
              <span>◆</span>
              <span><span className="k">AUTOMAÇÃO ATIVA</span> <span className="v">24 / 7 / 365</span></span>
              <span>◆</span>
              <span><span className="k">UPTIME ECOSSISTEMA</span> <span className="v">99.98%</span></span>
              <span>◆</span>
              <span><span className="k">MODELOS EM PRODUÇÃO</span> <span className="v">14</span></span>
              <span>◆</span>
              <span><span className="k">RECEITA AUTOMATIZADA</span> <span className="v">↑ sem crescimento proporcional de headcount</span></span>
              <span>◆</span>
            </React.Fragment>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .hero-grid { grid-template-columns: 1fr !important; }
          .hero-stats { grid-template-columns: 1fr 1fr !important; }
          .hero-stats > div:nth-child(1), .hero-stats > div:nth-child(2) { border-bottom: 1px solid var(--line); }
          .hero-stats > div:nth-child(2) { border-right: none !important; }
          .hero-stats > div:nth-child(4) { border-right: none !important; }
        }
      `}</style>
    </header>
  );
}
window.Hero = Hero;