function HeroOrbital() {
  return (
    <div className="hero-visual">
      <div className="orb" />
      <div className="hero-center">
        <div className="hero-logo-big"><span>N</span></div>
      </div>
      <div className="hero-card c1">
        <div className="hc-label">Automation</div>
        <div className="hc-val">Ahorras 180h / mes</div>
      </div>
      <div className="hero-card c2">
        <div className="hc-label">Deploy</div>
        <div className="hc-val">99.8% uptime</div>
      </div>
      <div className="hero-card c3">
        <div className="hc-label">Design</div>
        <div className="hc-val">Figma-first workflow</div>
      </div>
    </div>
  );
}

function HeroCode() {
  return (
    <div className="hero-visual">
      <div className="code-bar">
        <span className="dot r" /><span className="dot y" /><span className="dot g" />
        <span className="title">automation.workflow.ts</span>
      </div>
      <div className="code-body">
        <div className="code-ln"><span className="n">1</span><span className="c">// NovaForge automation</span></div>
        <div className="code-ln"><span className="n">2</span><span className="k">import</span> <span>{`{ n8n }`}</span> <span className="k">from</span> <span className="s">'@novaforge/flows'</span></div>
        <div className="code-ln"><span className="n">3</span></div>
        <div className="code-ln"><span className="n">4</span><span className="k">export const</span> <span className="f">leadToCRM</span> = n8n.<span className="f">workflow</span>(() =&gt; {'{'}</div>
        <div className="code-ln"><span className="n">5</span><span>&nbsp;&nbsp;.<span className="f">on</span>(<span className="s">'form.submit'</span>)</span></div>
        <div className="code-ln"><span className="n">6</span><span>&nbsp;&nbsp;.<span className="f">validate</span>(<span className="p">contact</span>)</span></div>
        <div className="code-ln"><span className="n">7</span><span>&nbsp;&nbsp;.<span className="f">enrich</span>(<span className="p">clearbit</span>)</span></div>
        <div className="code-ln"><span className="n">8</span><span>&nbsp;&nbsp;.<span className="f">to</span>(<span className="p">crm</span>, <span className="p">email</span>)</span></div>
        <div className="code-ln"><span className="n">9</span>{'}'})</div>
        <div className="code-ln"><span className="n">10</span></div>
        <div className="code-ln"><span className="n">11</span><span className="c">// → 2,341 runs · 180h saved</span></div>
      </div>
    </div>
  );
}

function HeroGrid() {
  return (
    <div className="hero-visual" style={{
      background: 'linear-gradient(135deg, #0d0f20, #080912)',
      border: '1px solid var(--border-2)',
      borderRadius: 22,
      padding: 28,
      overflow: 'hidden',
      position: 'relative'
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(rgba(124,140,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(124,140,255,0.08) 1px, transparent 1px)`,
        backgroundSize: '32px 32px',
        maskImage: 'radial-gradient(ellipse at center, black 40%, transparent 80%)'
      }} />
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 14, height: '100%' }}>
        {/* Row 1: metric cards */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          {[
            { l: 'Revenue', v: '€ 48.2k', d: '+12.4%' },
            { l: 'Active users', v: '2,341', d: '+8.1%' }
          ].map(m => (
            <div key={m.l} style={{ padding: 14, background: 'rgba(255,255,255,0.03)', border: '1px solid var(--border)', borderRadius: 12 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em', color: 'var(--text-mute)', textTransform: 'uppercase' }}>{m.l}</div>
              <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 4 }}>{m.v}</div>
              <div style={{ fontSize: 11, color: '#86efac' }}>↑ {m.d}</div>
            </div>
          ))}
        </div>
        {/* Chart */}
        <div style={{ flex: 1, padding: 16, background: 'rgba(255,255,255,0.03)', border: '1px solid var(--border)', borderRadius: 12, display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em', color: 'var(--text-mute)', textTransform: 'uppercase' }}>Automations · 30d</span>
            <span style={{ fontSize: 10, color: 'var(--accent-2)', fontFamily: 'var(--font-mono)' }}>● LIVE</span>
          </div>
          <svg viewBox="0 0 200 80" style={{ width: '100%', flex: 1 }}>
            <defs>
              <linearGradient id="chartG" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="#7c8cff" stopOpacity="0.6" />
                <stop offset="1" stopColor="#7c8cff" stopOpacity="0" />
              </linearGradient>
            </defs>
            <path d="M0 60 L20 50 L40 55 L60 40 L80 45 L100 30 L120 35 L140 20 L160 25 L180 10 L200 15 L200 80 L0 80 Z" fill="url(#chartG)" />
            <path d="M0 60 L20 50 L40 55 L60 40 L80 45 L100 30 L120 35 L140 20 L160 25 L180 10 L200 15" fill="none" stroke="#7c8cff" strokeWidth="1.5" />
          </svg>
        </div>
        {/* Footer mini */}
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {['form.submit', 'validate', 'enrich', 'crm', 'email', 'done'].map((s, i) => (
            <span key={s} style={{
              fontFamily: 'var(--font-mono)', fontSize: 10, padding: '4px 8px',
              background: i === 0 ? 'rgba(124,140,255,0.15)' : 'rgba(255,255,255,0.04)',
              border: '1px solid ' + (i === 0 ? 'rgba(124,140,255,0.3)' : 'var(--border)'),
              borderRadius: 6, color: i === 0 ? 'var(--accent-3)' : 'var(--text-dim)'
            }}>{s}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

function HeroSection({ variant = 'orbital' }) {
  const Visual = variant === 'code' ? HeroCode : variant === 'grid' ? HeroGrid : HeroOrbital;
  return (
    <section id="top" className={`hero hero-${variant === 'code' ? 'v3' : variant === 'grid' ? 'v2' : 'v1'}`}>
      <div className="container">
        <div className="hero-inner">
          <div className="reveal">
            <div className="eyebrow">
                <div className="eyebrow-avatars">
                  {[11, 26, 44, 53, 68].map(n => (
                    <img key={n} src={`https://i.pravatar.cc/56?img=${n}`} alt="" />
                  ))}
                </div>
                <span>★ 4.9 · 120+ reseñas</span>
              </div>
            <h1 className="h-display">
              Automatizaciones<br />
              que <span className="grad-text">ahorran dinero</span><br />
              a tu empresa.
            </h1>
            <p className="h-sub" style={{ fontSize: 19 }}>
              Diseñamos webs, apps y flujos n8n que convierten visitantes en clientes y horas de trabajo manual en decisiones estratégicas.
            </p>
            <div className="hero-actions">
              <a href="#contacto" className="btn btn-primary">
                Presupuestar proyecto
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14 M13 6l6 6-6 6" /></svg>
              </a>
              <a href="#servicios" className="btn btn-ghost">Ver servicios</a>
            </div>
            <div className="hero-stats">
              <div><div className="stat-num grad-text">120+</div><div className="stat-label">Proyectos realizados</div></div>
              <div><div className="stat-num grad-text">98%</div><div className="stat-label">Clientes satisfechos</div></div>
              <div><div className="stat-num grad-text">7+</div><div className="stat-label">Años de trayectoria</div></div>
            </div>
          </div>
          <div className="reveal d2">
            <Visual />
          </div>
        </div>
      </div>
    </section>
  );
}

window.HeroSection = HeroSection;