// Hero — terminal + bold display, with live "code" chip
function Hero({ heroVariant = 'terminal' }) {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const i = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(i);
  }, []);

  return (
    <section id="top" style={{ position: 'relative', paddingTop: 40, paddingBottom: 60, overflow: 'hidden' }}>
      {/* Soft grid background */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage: 'linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px)',
        backgroundSize: '44px 44px',
        maskImage: 'radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%)',
        opacity: 0.5,
      }} />
      {/* Floating glow */}
      <div style={{
        position: 'absolute', top: '20%', left: '50%', transform: 'translateX(-50%)',
        width: 700, height: 400, borderRadius: '50%',
        background: 'radial-gradient(closest-side, rgba(91,71,245,0.18), transparent)',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        {/* Top meta line */}
        <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginBottom: 64, flexWrap: 'wrap', gap: 12 }}>
          <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>v.2026 · build {String(tick % 999).padStart(3, '0')}</span>
        </div>

        {/* Headline */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, alignItems: 'end' }} className="hero-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <span className="mono" style={{ fontSize: 13, color: 'var(--primary)' }}>{'<startup>'}</span>
              <span className="mono" style={{ fontSize: 13, color: 'var(--muted)' }}>// est. 2024</span>
            </div>
            <h1 className="display" style={{
              fontWeight: 700, fontSize: 'clamp(48px, 8vw, 124px)', lineHeight: 0.92,
              margin: 0, letterSpacing: '-0.04em',
            }}>
              Conectando<br />
              sua empresa<br />
              ao <span style={{ color: 'var(--primary)', fontStyle: 'italic', fontWeight: 600 }}>futuro</span>
              <span className="mono" style={{ color: 'var(--primary)', fontWeight: 400, fontSize: '0.6em', verticalAlign: 'baseline' }}>.</span>
            </h1>
          </div>

          <div>
            {/* Terminal block */}
            <div style={{
              background: 'var(--ink)', color: '#fff', borderRadius: 14,
              fontFamily: 'JetBrains Mono, monospace', fontSize: 13,
              boxShadow: '0 30px 60px -20px rgba(14,14,18,0.35)',
              border: '1px solid #2a2a35',
              overflow: 'hidden',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '10px 14px', borderBottom: '1px solid #2a2a35', background: '#16161d' }}>
                <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FF5F57' }}></span>
                <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FEBC2E' }}></span>
                <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#28C840' }}></span>
                <span style={{ marginLeft: 12, fontSize: 12, color: '#999' }}>~ devsocialmedia — zsh</span>
              </div>
              <div style={{ padding: '16px 18px', lineHeight: 1.7 }}>
                <div><span style={{ color: '#7d77a8' }}>$</span> <span style={{ color: '#9ad9ff' }}>npx</span> create-empresa@futuro</div>
                <div style={{ color: '#888', paddingLeft: 14 }}>✓ analisando objetivos de negócio</div>
                <div style={{ color: '#888', paddingLeft: 14 }}>✓ desenhando arquitetura</div>
                <div style={{ color: 'var(--accent)', paddingLeft: 14 }}>✓ entregando solução completa</div>
                <div style={{ marginTop: 6 }}><span style={{ color: '#7d77a8' }}>$</span> <span style={{ color: '#fff' }}>contato --whatsapp</span><span style={{ background: 'var(--primary)', display: 'inline-block', width: 8, height: 14, marginLeft: 4, verticalAlign: 'middle', animation: 'blink 1s steps(2) infinite' }}></span></div>
              </div>
            </div>
            <style>{`@keyframes blink{50%{opacity:0}}`}</style>
          </div>
        </div>

        {/* Sub + CTAs */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'center', marginTop: 60, paddingTop: 32, borderTop: '1px solid var(--line)' }} className="hero-foot">
          <p style={{ fontSize: 19, color: 'var(--ink-2)', maxWidth: 620, margin: 0, lineHeight: 1.5 }}>
            Apps, sites, ecommerce, automações e estratégia digital sob medida.
            Construímos produtos que ganham tempo, reduzem custos e <strong style={{ fontWeight: 600 }}>melhoram resultados</strong> de verdade.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="https://wa.me/5531982494098" target="_blank" rel="noopener" className="btn btn-green">
              Entre em contato <span>→</span>
            </a>
            <a href="#projetos" className="btn btn-ghost">
              Ver projetos
            </a>
          </div>
        </div>

        {/* Marquee of capabilities */}
        <div style={{ marginTop: 80, padding: '20px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', overflow: 'hidden', position: 'relative' }}>
          <div style={{ display: 'flex', gap: 48, animation: 'marquee 30s linear infinite', whiteSpace: 'nowrap', width: 'max-content' }}>
            {Array.from({ length: 2 }).flatMap((_, i) =>
              ['Desenvolvimento Web', 'Apps Mobile', 'E-commerce', 'Design / Videomaker', 'Automação com IA', 'Micro-SaaS', 'Marketing Digital', 'Estratégia', 'Branding']
                .map((item, j) => (
                  <span key={`${i}-${j}`} className="mono" style={{ fontSize: 14, color: 'var(--ink-2)', display: 'flex', alignItems: 'center', gap: 16 }}>
                    {item}
                    <span style={{ color: 'var(--primary)', fontSize: 8 }}>◆</span>
                  </span>
                ))
            )}
          </div>
          <style>{`@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}`}</style>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px){
          .hero-grid{ grid-template-columns: 1fr !important; }
          .hero-foot{ grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.Hero = Hero;