/* Hero with live KPI dashboard + activity stream */

function Sparkline({ data, color }) {
  const w = 120, h = 28;
  const max = Math.max(...data), min = Math.min(...data);
  const points = data.map((v, i) => [
    (i / (data.length - 1)) * w,
    h - ((v - min) / (max - min || 1)) * h
  ]);
  const path = 'M ' + points.map(p => p.join(' ')).join(' L ');
  const area = path + ` L ${w} ${h} L 0 ${h} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id="spark-grad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color || '#4FD1E3'} stopOpacity="0.5"/>
          <stop offset="100%" stopColor={color || '#4FD1E3'} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d={area} className="area" />
      <path d={path} style={{ stroke: color || '#4FD1E3' }} />
    </svg>
  );
}

function useLiveKpi(base, range = 0.08) {
  const [v, setV] = React.useState(base);
  const [hist, setHist] = React.useState(() => Array.from({length: 20}, () => base * (1 + (Math.random()-0.5) * range * 0.5)));
  React.useEffect(() => {
    const i = setInterval(() => {
      const next = base * (1 + (Math.random() - 0.3) * range);
      setV(next);
      setHist(h => [...h.slice(1), next]);
    }, 1800);
    return () => clearInterval(i);
  }, [base, range]);
  return [v, hist];
}

function StreamEvent() {
  const templates = [
    { tag: 'ia', msg: 'Agente facturación · 142 facturas clasificadas' },
    { tag: 'ok', msg: 'Workflow CRM → ERP · sync completada' },
    { tag: 'sys', msg: 'Pipeline conciliación · 1.204 movimientos' },
    { tag: 'ia', msg: 'Agente soporte L1 · 38 tickets resueltos' },
    { tag: 'ok', msg: 'Integración Hubspot · 892 contactos actualizados' },
    { tag: 'ia', msg: 'Clasificador docs · 76 contratos indexados' },
    { tag: 'sys', msg: 'Monitor SLA · p95 62ms' },
    { tag: 'ok', msg: 'Onboarding cliente #481 · completado' },
    { tag: 'ia', msg: 'Forecast Q1 · modelo reentrenado · MAE 3.2%' },
    { tag: 'ok', msg: 'Nómina 147 empleados · procesada' },
    { tag: 'sys', msg: 'Backup diario · 340GB cifrados · OK' },
    { tag: 'ia', msg: 'Chatbot web · 52 leads calificados' },
  ];
  const timeFmt = React.useMemo(() => new Intl.DateTimeFormat('es-ES', {
    timeZone: 'Europe/Madrid', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
  }), []);
  const [list, setList] = React.useState(() => {
    const now = new Date();
    return Array.from({length: 5}, (_, i) => {
      const t = new Date(now.getTime() - i * 12000);
      return {
        id: Math.random(),
        time: timeFmt.format(t),
        ...templates[Math.floor(Math.random() * templates.length)]
      };
    });
  });
  React.useEffect(() => {
    const i = setInterval(() => {
      const ev = {
        id: Math.random(),
        time: timeFmt.format(new Date()),
        ...templates[Math.floor(Math.random() * templates.length)]
      };
      setList(l => [ev, ...l].slice(0, 6));
    }, 3200);
    return () => clearInterval(i);
  }, []);
  return (
    <div className="stream">
      <div className="stream-hd">
        <span>Actividad en vivo</span>
        <span className="live">Live</span>
      </div>
      <div className="stream-list">
        {list.map(it => (
          <div key={it.id} className="stream-item">
            <span className="time">{it.time}</span>
            <span className={'tag ' + it.tag}>{it.tag.toUpperCase()}</span>
            <span className="msg">{it.msg}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroKPI({ k, value, unit, delta, accent }) {
  const [v, hist] = useLiveKpi(value, 0.04);
  const formatted = unit === '€' ? Math.round(v).toLocaleString('es-ES') : (Math.round(v * 10) / 10).toLocaleString('es-ES');
  return (
    <div className="kpi">
      <div className="k">{k}</div>
      <div className={'v' + (accent ? ' accent' : '')}>
        {unit === '€' && <span className="unit" style={{marginRight: 4}}>€</span>}
        {formatted}
        {unit && unit !== '€' && <span className="unit">{unit}</span>}
      </div>
      {delta && <div className={'delta ' + (delta.startsWith('+') || delta.startsWith('↑') ? 'up' : 'down')}>{delta}</div>}
      <div className="sparkline"><Sparkline data={hist} /></div>
    </div>
  );
}

function Hero({ onCTA }) {
  const clock = typeof window !== 'undefined' && window.useClock ? window.useClock() : '';
  const quarter = `Q${Math.floor(new Date().getMonth() / 3) + 1}`;
  return (
    <section className="hero" id="top">
      <div className="hero-inner">
        <div className="hero-meta reveal">
          <div className="left">
            <span className="coord">STRATIUM / 00</span>
            <span>V2.1.4</span>
            <span className="hero-clock">
              <span className="dot-live"></span>
              MADRID {clock}
            </span>
          </div>
          <div className="right">
            <span>PLATAFORMA OPERATIVA</span>
            <span>·</span>
            <span>ELCHE · ES</span>
          </div>
        </div>

        <div className="hero-grid">
          <div>
            <span className="kicker reveal">Ingeniería operativa aplicada con IA</span>
            <h1 className="hero-title reveal reveal-delay-1">
              <span className="row">Operaciones</span>
              <span className="row">sin <em>fricción.</em></span>
              <span className="row">Escala<span className="marker"></span>sin</span>
              <span className="row"><em>caos.</em></span>
            </h1>
            <p className="hero-lede reveal reveal-delay-2">
              Diseñamos sistemas operativos para empresas B2B que ya no pueden crecer a base de <b>más gente</b>. Auditamos, automatizamos y desplegamos <b>agentes de IA propietarios</b> integrados en tu stack — en semanas, no trimestres.
            </p>
            <div className="hero-ctas reveal reveal-delay-3">
              <a
                className="btn btn--primary btn--corners"
                href="https://calendly.com/alfdonver02/sesion-de-diagnostico-operativo-stratium"
                target="_blank"
                rel="noreferrer"
              >
                Reservar diagnóstico (gratis)
                <svg viewBox="0 0 12 12" fill="none"><path d="M2 6h8M7 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5"/></svg>
              </a>
              <a href="#mapa" className="btn btn--ghost">Ver metodología</a>
              <span className="hint"><kbd>⌘</kbd><kbd>K</kbd>menú</span>
            </div>
          </div>

          <div className="hero-dash reveal reveal-delay-2">
            <div className="hero-dash-hd">
              <span className="title">OPS · Live dashboard</span>
              <span className="controls"><span className="dot"></span><span className="dot"></span><span className="dot"></span></span>
            </div>
            <div className="hero-dash-body">
              <div className="kpi-row">
                <HeroKPI k="Horas liberadas / mes" value={284} delta="+12%" accent />
                <HeroKPI k="Costes op." value={28.6} unit="%" delta="−3.2%" />
                <HeroKPI k="Tareas IA / día" value={642} delta="+84" />
              </div>
              <StreamEvent />
            </div>
          </div>
        </div>

        <div className="hero-proof reveal reveal-delay-4">
          <div className="proof-cell">
            <span className="k">Empresas transformadas</span>
            <span className="v"><em>32</em></span>
          </div>
          <div className="proof-cell">
            <span className="k">Horas liberadas / año</span>
            <span className="v">+48<span className="unit">K</span></span>
          </div>
          <div className="proof-cell">
            <span className="k">Ahorro medio anual</span>
            <span className="v">95<span className="unit">K€</span></span>
          </div>
          <div className="proof-cell">
            <span className="k">ROI medio · 12 meses</span>
            <span className="v"><em>3.6×</em></span>
          </div>
          <div className="proof-cell proof-sig">
            <span className="k">Plazas {quarter} restantes</span>
            <span className="v">04<span className="unit">/12</span></span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });