// Hero — velocidad + IA, el diferenciador principal
const Hero = () => {
  const [ticks, setTicks] = React.useState(0);
  const startRef = React.useRef(Date.now());

  React.useEffect(() => {
    const id = setInterval(() => {
      setTicks((Date.now() - startRef.current) / 1000);
    }, 50);
    return () => clearInterval(id);
  }, []);

  // Simulated build log — cycles through realistic developer tasks
  const steps = [
    { t: 0.2, label: 'briefing', status: '✓', detail: 'requisitos capturados' },
    { t: 0.9, label: 'arquitectura', status: '✓', detail: 'estructura + db schema' },
    { t: 1.8, label: 'diseño ui', status: '✓', detail: 'sistema + componentes' },
    { t: 2.8, label: 'implementación', status: '◐', detail: 'copilot + astro' },
    { t: 4.0, label: 'qa + seo', status: '○', detail: 'lighthouse 99/100' },
    { t: 5.2, label: 'deploy', status: '○', detail: 'edge · cdn global' },
  ];

  return (
    <section className="hero" id="top">
      {/* Ambient glow */}
      <div className="hero__ambient" aria-hidden="true" />

      <div className="container hero__grid">
        <div className="hero__copy">
          <div className="eyebrow">
            <span>estudio de software · guadalajara, mx · remoto</span>
          </div>

          <h1 className="hero__title">
            <span className="hero__title-line">Software a medida,</span>
            <span className="hero__title-line">entregado en</span>
            <span className="hero__title-line">
              <span className="hero__title-em">
                <em>tiempo&nbsp;récord</em>
                <svg className="hero__underline" viewBox="0 0 400 12" preserveAspectRatio="none" aria-hidden="true">
                  <path d="M2 8 Q 100 2, 200 6 T 398 4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
                </svg>
              </span>
              <span className="hero__title-dot">.</span>
            </span>
          </h1>

          <p className="hero__lead">
            Web, e-commerce, SaaS, apps y automatizaciones.
            Usamos <strong>IA</strong> en cada paso del proceso —
            desde el brief hasta el deploy— para entregar producto
            real en días, no en meses.
          </p>

          <div className="hero__cta">
            <a href="mailto:contacto@loprogramamos.com?subject=Proyecto nuevo" className="btn btn-primary">
              contacto@loprogramamos.com
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
            <a href="#portfolio" className="btn btn-ghost">Ver trabajos</a>
          </div>

          <dl className="hero__stats">
            <div className="hero__stat">
              <dt>lighthouse promedio</dt>
              <dd><span className="hero__stat-num">98</span><span className="hero__stat-unit">/100</span></dd>
            </div>
            <div className="hero__stat">
              <dt>tiempo medio a mvp</dt>
              <dd><span className="hero__stat-num">2.3</span><span className="hero__stat-unit">sem</span></dd>
            </div>
            <div className="hero__stat">
              <dt>proyectos entregados</dt>
              <dd><span className="hero__stat-num">40</span><span className="hero__stat-unit">+</span></dd>
            </div>
          </dl>
        </div>

        {/* Terminal visual — live build log */}
        <div className="hero__terminal" aria-hidden="true">
          <div className="term__chrome">
            <span className="term__dot" style={{background: '#ff5f56'}}/>
            <span className="term__dot" style={{background: '#ffbd2e'}}/>
            <span className="term__dot" style={{background: '#27c93f'}}/>
            <span className="term__title">~/clients/nuevo-proyecto</span>
            <span className="term__timer mono">{ticks.toFixed(2)}s</span>
          </div>
          <div className="term__body">
            <div className="term__line">
              <span className="term__prompt">$</span>
              <span className="term__cmd">lp init --ai --fast</span>
            </div>
            <div className="term__line term__line--meta mono">
              → construyendo pipeline asistido por ia…
            </div>
            {steps.map((s, i) => {
              const active = ticks >= s.t;
              const current = active && ticks < (steps[i+1]?.t ?? 999);
              return (
                <div key={i} className={`term__step ${active ? 'is-active' : ''} ${current ? 'is-current' : ''}`}>
                  <span className={`term__status term__status--${s.status === '✓' ? 'ok' : s.status === '◐' ? 'wip' : 'pending'}`}>
                    {active ? (current ? '◐' : '✓') : '○'}
                  </span>
                  <span className="term__label">{s.label}</span>
                  <span className="term__detail mono">{s.detail}</span>
                </div>
              );
            })}
            {ticks > 6 && (
              <div className="term__line term__line--ok mono">
                ✓ listo en {ticks.toFixed(1)}s — producción ready
              </div>
            )}
            <div className="term__line term__line--cursor">
              <span className="term__prompt">$</span>
              <span className="term__caret">▊</span>
            </div>
          </div>
        </div>
      </div>

      {/* Infinite marquee — services + tech */}
      <div className="hero__marquee" aria-hidden="true">
        <div className="marquee__track">
          {Array.from({length: 3}).map((_, i) => (
            <div key={i} className="marquee__group">
              <span>WEB</span><span className="marquee__dot">·</span>
              <span>E-COMMERCE</span><span className="marquee__dot">·</span>
              <span>SAAS</span><span className="marquee__dot">·</span>
              <span>APPS MÓVILES</span><span className="marquee__dot">·</span>
              <span>AUTOMATIZACIÓN</span><span className="marquee__dot">·</span>
              <span>SEO & PERFORMANCE</span><span className="marquee__dot">·</span>
              <span>CONSULTORÍA</span><span className="marquee__dot">·</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;