/* AORYN — extra sections: Stats showcase + Process */

const { useState: uS4, useEffect: uE4, useRef: uR4 } = React;

// ============================================================================
// SHOWCASE — large symbol + manifesto stats band
// ============================================================================
function Showcase() {
  const ref = uR4(null);
  uE4(() => {
    const el = ref.current;
    if (!el) return;
    const onScroll = () => {
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const p = Math.max(-1, Math.min(1, (vh / 2 - (rect.top + rect.height / 2)) / vh));
      el.style.setProperty('--p', p);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const stats = [
    { n: '12+', l: 'Años de experiencia combinada' },
    { n: '40+', l: 'Marcas y proyectos acompañados' },
    { n: '24h', l: 'Tiempo de respuesta promedio' },
    { n: '0', l: 'Promesas mágicas' }
  ];

  return (
    <section ref={ref} className="showcase" id="about">
      <div className="showcase-bg-grid"></div>
      <div className="showcase-content">
        <div className="showcase-symbol-stage">
          <div
            className="showcase-symbol"
            style={{
              transform: 'translateY(calc(var(--p, 0) * -60px)) rotate(calc(var(--p, 0) * 8deg))'
            }}
          ></div>
          <div className="showcase-symbol-shadow"></div>
          <div className="showcase-orbit r1"></div>
          <div className="showcase-orbit r2"></div>
          <div className="showcase-orbit r3"></div>
        </div>
        <div className="showcase-text reveal">
          <div className="section-eyebrow">
            <span className="num">★ —</span>
            <span>Sobre AORYN</span>
          </div>
          <h2 className="section-h">
            Un estudio que <span className="text-gradient">construye despacio</span>,<br/>
            con intención y con calma.
          </h2>
          <p>
            Trabajamos con marcas que entienden que el branding no es decoración —
            es una conversación entre lo que haces, cómo lo cuentas y a quién le hablas.
            Acompañamos procesos completos: estrategia, diseño, producción audiovisual
            y sistemas digitales. Sin parches.
          </p>
        </div>
      </div>
      <div className="showcase-stats">
        {stats.map((s, i) => (
          <div key={i} className="stat reveal" style={{ '--reveal-delay': `${i * 100}ms` }}>
            <div className="n text-gradient">{s.n}</div>
            <div className="l">{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============================================================================
// PROCESS — numbered steps with progressive line
// ============================================================================
const PROCESS = [
  { n: '01', t: 'Escucha', d: 'Conversamos sobre tu negocio sin asumir nada. Detectamos lo que funciona y lo que estorba.' },
  { n: '02', t: 'Análisis', d: 'Auditoría operativa, visual y digital. Mapeamos puntos de fuga y oportunidades concretas.' },
  { n: '03', t: 'Estrategia', d: 'Plan secuencial con prioridades claras. Sin abrumar, paso a paso.' },
  { n: '04', t: 'Ejecución', d: 'Diseñamos, producimos y desplegamos. Iteramos en abierto, sin sorpresas finales.' },
  { n: '05', t: 'Acompañamiento', d: 'Seguimiento mensual opcional. Ajustes, mejoras y nuevas piezas según evolucione el negocio.' }
];

function Process() {
  const ref = uR4(null);
  uE4(() => {
    const el = ref.current;
    if (!el) return;
    const onScroll = () => {
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const start = vh * 0.75;
      const end = vh * 0.15;
      const p = Math.max(0, Math.min(1, (start - rect.top) / (start - end)));
      el.style.setProperty('--fill', p);
      // Activate each step as the fill passes it
      const steps = el.querySelectorAll('.process-step');
      const totalSteps = steps.length;
      steps.forEach((s, i) => {
        // Reveal step when scrolled to its position
        const sRect = s.getBoundingClientRect();
        if (sRect.top < vh * 0.85) s.classList.add('in');
        // Activate when fill passes it
        const threshold = (i + 0.35) / totalSteps;
        if (p >= threshold) s.classList.add('active');
        else s.classList.remove('active');
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="process" id="process">
      <div className="process-header">
        <div className="section-eyebrow reveal">
          <span className="num">Proceso —</span>
          <span>Cómo trabajamos</span>
        </div>
        <h2 className="section-h reveal" style={{ '--reveal-delay': '100ms' }}>
          De la primera llamada<br />
          al último ajuste.
        </h2>
      </div>
      <div ref={ref} className="process-track">
        <div className="process-line"></div>
        <div className="process-line-fill" style={{ height: 'calc(var(--fill, 0) * 100%)' }}>
          <div className="process-line-head"></div>
        </div>
        {PROCESS.map((p, i) => (
          <div key={p.n} className="process-step reveal" style={{ '--idx': i }}>
            <div className="dot">
              <div className="dot-inner"></div>
            </div>
            <div className="step-num">{p.n}</div>
            <div className="step-body">
              <h4>{p.t}</h4>
              <p>{p.d}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Showcase, Process });