/* Progressive funnel + final CTA */

function Funnel({ onCTA }) {
  const quarter = `Q${Math.floor(new Date().getMonth() / 3) + 1}`;
  return (
    <section className="funnel" id="funnel">
      <div className="funnel-inner">
        <div className="funnel-head reveal">
          <span className="funnel-chip">Capacidad {quarter} · 4 / 12 plazas</span>
          <h2 className="funnel-title">
            Tres pasos. <em>Cero</em> fricción.<br/>
            Del diagnóstico al <span className="big">ROI real.</span>
          </h2>
        </div>

        <div className="funnel-steps reveal">
          <button className="funnel-step" onClick={() => { document.querySelector('#diagnostico')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }}>
            <div className="step-n">PASO 01 · 60 segundos</div>
            <div className="duration">Sin coste · sin dato</div>
            <h4>Diagnóstico automatizado</h4>
            <p>Seis preguntas calibradas. Sale un <i>score</i> de fricción operativa y recomendaciones específicas. No pedimos email.</p>
            <div className="action">
              <span>Hacer diagnóstico</span>
              <svg viewBox="0 0 12 12" fill="none"><path d="M2 6h8M7 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5"/></svg>
            </div>
          </button>

          <div className="funnel-arrow">━━▶</div>

          <a
            className="funnel-step funnel-step--primary"
            href="https://calendly.com/alfdonver02/sesion-de-diagnostico-operativo-stratium"
            target="_blank"
            rel="noreferrer"
          >
            <div className="step-n">PASO 02 · 30 minutos</div>
            <div className="duration">Sin coste · sin compromiso</div>
            <h4>Sesión estratégica</h4>
            <p>Llamada 1-a-1 con un staff engineer. Revisamos tu contexto, flujos críticos y opciones reales de despliegue.</p>
            <div className="action">
              <span>Reservar en Calendly</span>
              <svg viewBox="0 0 12 12" fill="none"><path d="M2 6h8M7 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5"/></svg>
            </div>
          </a>

          <div className="funnel-arrow">━━▶</div>

          <a
            className="funnel-step"
            href="https://calendly.com/alfdonver02/sesion-de-diagnostico-operativo-stratium"
            target="_blank"
            rel="noreferrer"
          >
            <div className="step-n">PASO 03 · 5 días</div>
            <div className="duration">Fee fijo · sin sorpresas</div>
            <h4>Propuesta ejecutable</h4>
            <p>Scope, timeline, KPIs y fee cerrados por escrito. Si encaja, arrancamos. Si no, la propuesta es tuya para lo que quieras.</p>
            <div className="action">
              <span>Ver siguiente paso</span>
              <svg viewBox="0 0 12 12" fill="none"><path d="M2 6h8M7 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5"/></svg>
            </div>
          </a>
        </div>

        <div className="funnel-note reveal">
          <div>
            <b>⏵ LEAD TIME ACTUAL · 5 días</b> desde primera sesión hasta propuesta formal.
            Plazas restantes este trimestre: <b>4 de 12</b>.
          </div>
          <div style={{display:'flex', gap:10, alignItems:'center', flexWrap:'wrap'}}>
            <a href="mailto:contacto@stratium.es" className="btn btn--ghost">contacto@stratium.es</a>
            <a
              href="https://calendly.com/alfdonver02/sesion-de-diagnostico-operativo-stratium"
              target="_blank"
              rel="noreferrer"
              className="btn btn--primary btn--corners"
            >
              Reservar en Calendly
              <svg viewBox="0 0 12 12" fill="none"><path d="M2 6h8M7 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5"/></svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Funnel });