// confident-modern.jsx — Northius.net Confident Modern direction

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroTreatment": "video",
  "cardLayout": "split",
  "coral": "balanced",
  "parallax": true,
  "marquee": false,
  "headline": "convertirte"
}/*EDITMODE-END*/;

const HEADLINES = {
  convertirte: {
    title: (<>
      Aprender no es <span className="strike">solo</span> saber más.<br/>
      Es <em>convertirte</em> en el profesional<br/>
      que quieres ser.
    </>),
    lede: "Aquí puedes ver los pilotos del grupo Northius. Diseñados para que termines ejerciendo — no para que sumes un título más a tu currículum."
  },
  ejercer: {
    title: (<>
      No formamos para <span className="strike">saber más</span>.<br/>
      Formamos para <em>ejercer</em>.
    </>),
    lede: "Dos programas piloto del grupo Northius. La diferencia entre estudiar y trabajar de lo que quieres — en doce semanas o en tu tiempo."
  },
  diploma: {
    title: (<>
      Formación que no termina<br/>
      <span className="strike">en un diploma</span>.<br/>
      Termina en <em>un trabajo</em>.
    </>),
    lede: "Dos programas piloto del grupo Northius. Pensados para profesionales que quieren ejercer — no para coleccionistas de certificados."
  }
};

/* ───────────── Logo (real Northius SVG file) ───────────── */
function NorthiusLogo({ height = 22, variant = "coral" }) {
  return (
    <img
      src="img/logo-northius.svg"
      alt="Northius"
      height={height}
      className={`n-logo n-logo--${variant}`}
      style={{ height: `${height}px`, width: "auto", display: "block" }}
    />
  );
}

/* ───────────── Nav ───────────── */
function Nav() {
  return (
    <header className="nav">
      <div className="nav__inner container">
        <a className="nav__logo" href="/" aria-label="Northius"><NorthiusLogo height={22} /></a>
        <div className="nav__right">
          <div className="nav__lang" role="group" aria-label="Idioma">
            <a className="is-on" href="/" aria-current="page">ES</a>
            <a href="/index-en.html">EN</a>
            <a href="/index-pt.html">PT</a>
          </div>
          <a className="nav__webinars" href="/webinars.html">
            Webinars gratuitos
          </a>
          <a className="nav__access" href="https://campus.northius.net/login.html">
            Acceso alumnos <span className="arr">→</span>
          </a>
        </div>
      </div>
    </header>
  );
}

/* ───────────── Hero ───────────── */
function Hero({ treatment, headline }) {
  return (
    <section className="hero" data-treatment={treatment}>
      <div className={`hero__media hero__media--${treatment}`} aria-hidden="true"></div>

      <div className="container">
        <div className="hero__inner">
          <div>
            <h1 className="hero__title">
              {HEADLINES[headline].title}
            </h1>
          </div>

          <div className="hero__right">
            <p className="hero__lede">
              {HEADLINES[headline].lede}
            </p>
            <div className="hero__bullets">
              <div><b>01</b><span>Formación orientada a empleabilidad real.</span></div>
              <div><b>02</b><span>Diseñada y entregada por la marca experta del grupo.</span></div>
              <div><b>03</b><span>Plazas limitadas · Early Bird hasta cubrirse.</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────────── Marquee strip ───────────── */
function Strip() {
  const items = [
    "Northius 2.0", "Empowerment · DFO", "IA·RRHH · DFO Portugal", "IA·Finanzas · DFO Portugal", "Máster Broker Náutico · CT", "ES · EN · PT",
    "Pilotos limitados", "Otoño 2026"
  ];
  return (
    <div className="strip" aria-hidden="true">
      <div className="strip__track">
        {[...items, ...items].map((t, i) => (
          <span key={i}><b>{t}</b><span className="sep">·</span></span>
        ))}
      </div>
    </div>
  );
}

/* ───────────── Why / About ───────────── */
function Why() {
  return (
    <section className="why">
      <div className="why__inner container">
        <div>
          <p className="why__eyebrow">Sobre Northius</p>
          <h2 className="reveal">13 marcas.<br/>Confianza <em>compartida.</em></h2>
          <p className="why__subhead reveal">
            northius.net es la nueva web institucional del grupo — donde estrenamos los pilotos antes de que pasen al catálogo general en northius.com.
          </p>
        </div>

        <div className="why__body">
          <p className="reveal">
            Northius es el grupo educativo español detrás de marcas con décadas de historia y comunidades activas hoy. Bajo el mismo paraguas conviven <strong>Deusto Formación</strong>, <strong>Campus Training</strong>, <strong>CEAC</strong> —con más de 80 años enseñando a distancia desde España—, <strong>Tokio School</strong>, <strong>Nubika</strong> y <strong>Deusto Salud</strong>, entre otras.
          </p>

          <dl className="why__facts reveal">
            <div>
              <dt>Alumnos estudiando ahora</dt>
              <dd>+65.000</dd>
            </div>
            <div>
              <dt>Países con presencia</dt>
              <dd>+15</dd>
            </div>
            <div>
              <dt>Sedes físicas</dt>
              <dd>+45</dd>
            </div>
          </dl>
        </div>
      </div>

      <div className="why__callouts container">
        <div className="why__ceac reveal">
          <div className="why__ceac-mark">
            <img src="img/logo-ceac-blue.svg" alt="CEAC" />
            <span>desde 1945</span>
          </div>
          <div className="why__ceac-body">
            <h3>+80 años. <em>Y todavía los más modernos del grupo.</em></h3>
            <p>
              CEAC enseña a distancia desde 1945 — cuando "online" aún no era una palabra y los deberes se enviaban por correo postal. Cumplir años aquí no significa ir despacio: significa llevar décadas reinventando cómo se aprende, antes que nadie.
            </p>
          </div>
        </div>

        <div className="why__ceac why__ceac--unisport reveal">
          <div className="why__ceac--unisport-mark why__ceac-mark why__ceac-mark--unisport">
            <img src="img/logo-unisport-color.svg" alt="Unisport Management School" />
          </div>
          <div className="why__ceac-body">
            <h3>Mejor MBA especializado de España. <em>Tres años seguidos.</em></h3>
            <p>
              El MBA en Sport Management de <strong>Unisport</strong> lidera el ranking de PortalMBA en <strong>2024, 2025 y 2026</strong>. Y según <em>SportBusiness 2023</em>, es el mejor máster online de gestión deportiva de Europa — y segundo del mundo. Con <strong>dos stages presenciales</strong> al año.
            </p>
            <a className="why__ceac-link" href="https://unisport.es/stage-tecnico-unisport/" target="_blank" rel="noopener">Ver cómo fue el último stage →</a>
          </div>
        </div>
      </div>

      <div className="brands reveal">
        <p className="brands__label container">13 marcas en el grupo</p>
        <div className="brands__carousel" aria-hidden="true">
          <div className="brands__track">
            {[...Array(2)].map((_, dup) => (
              <React.Fragment key={dup}>
                <div className="brands__logo brands__logo--gray"><img src="img/logo-ceac-gray.png" alt="CEAC" /></div>
                <div className="brands__logo brands__logo--color brands__logo--dfo"><img src="img/logo-dfo-color.webp" alt="Deusto Formación" /></div>
                <div className="brands__logo brands__logo--gray"><img src="img/logo-deustosalud.png" alt="Deusto Salud" /></div>
                <div className="brands__logo brands__logo--color brands__logo--ct"><img src="img/logo-campus-color.svg" alt="Campus Training" /></div>
                <div className="brands__logo brands__logo--gray"><img src="img/logo-tokio.png" alt="Tokio School" /></div>
                <div className="brands__logo brands__logo--gray"><img src="img/logo-nubika.png" alt="Nubika" /></div>
                <div className="brands__logo brands__logo--gray"><img src="img/logo-unisport.png" alt="Unisport Management School" /></div>
                <div className="brands__logo brands__logo--gray"><img src="img/logo-flou.png" alt="Flou" /></div>
                <div className="brands__logo brands__logo--gray"><img src="img/logo-cemp.png" alt="CEMP" /></div>
                <div className="brands__logo brands__logo--gray"><img src="img/logo-mint.png" alt="Mint" /></div>
                <div className="brands__logo brands__logo--gray"><img src="img/logo-35mm.png" alt="35mm" /></div>
              </React.Fragment>
            ))}
          </div>
        </div>
        <div className="container brands__legend">
          <span className="brands__legend-color"><span className="dot dot--coral"></span>Con programa en Early Bird ahora</span>
          <a className="brands__more" href="https://www.northius.com/marcas/">Ver todas las marcas en northius.com →</a>
        </div>
      </div>
    </section>
  );
}

/* ───────────── Countdown + Seats ───────────── */
function Countdown({ target }) {
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, new Date(target).getTime() - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor(diff / 3600000) % 24;
  const mins = Math.floor(diff / 60000) % 60;
  const secs = Math.floor(diff / 1000) % 60;
  const pad = n => String(n).padStart(2, "0");
  return (
    <div className="bcard__countdown">
      <div className="bcard__countdown-label">Early Bird termina en</div>
      <div className="bcard__countdown-clock">
        <div className="bcard__countdown-cell">
          <span className="bcard__countdown-num">{pad(days)}</span>
          <span className="bcard__countdown-unit">días</span>
        </div>
        <div className="bcard__countdown-cell">
          <span className="bcard__countdown-num">{pad(hours)}</span>
          <span className="bcard__countdown-unit">h</span>
        </div>
        <div className="bcard__countdown-cell">
          <span className="bcard__countdown-num">{pad(mins)}</span>
          <span className="bcard__countdown-unit">min</span>
        </div>
        <div className="bcard__countdown-cell">
          <span className="bcard__countdown-num">{pad(secs)}</span>
          <span className="bcard__countdown-unit">s</span>
        </div>
      </div>
    </div>
  );
}

function Seats({ taken, total }) {
  const pct = Math.round(taken / total * 100);
  return (
    <div className="bcard__seats">
      <div className="bcard__seats-label">Plazas <b>{taken}/{total}</b> cubiertas · <span className="avail">solo {total - taken} disponibles</span></div>
      <div className="bcard__seats-bar">
        <div className="bcard__seats-fill" style={{ width: `${pct}%` }}></div>
      </div>
    </div>
  );
}

/* Formatea cohort_start_at del backend a "8 sept 2026" (ES) o "Por definir" si null */
function formatCohortDate(slug, fallback) {
  const c = window.__COHORTS__ && window.__COHORTS__[slug];
  // Mostrar FIN de cohorte (de matrícula) = INICIO DE CURSO — lo que le importa al alumno
  // (petición Ricardo 2-jul). Fallback al inicio de matrícula si no hay deadline.
  const iso = (c && (c.early_bird_ends_at || c.cohort_start_at)) || fallback || null;
  if (!iso) return "Por definir";
  const d = new Date(iso);
  if (isNaN(d.getTime())) return "Por definir";
  return new Intl.DateTimeFormat('es-ES', { day: 'numeric', month: 'short', year: 'numeric' }).format(d).replace(/\./g, '');
}

/* Lee un número (precio) de __COHORTS__ con fallback si falta o no es válido */
function cohortNum(slug, field, fallback) {
  var c = window.__COHORTS__ && window.__COHORTS__[slug];
  var n = c ? Number(c[field]) : NaN;
  return (isFinite(n) && n > 0) ? n : fallback;
}
/* Formatea un entero a euros con separador de miles "." (ES/PT): 1490 → €1.490 */
function fmtEur(n) {
  return '€' + String(n).replace(/\B(?=(\d{3})+(?!\d))/g, '.');
}

/* ───────────── Programs ───────────── */
function Programs({ layout }) {
  return (
    <section className="programs" id="programas">
      <div className="container">
        <div className="programs__head">
          <div>
            <p className="programs__eyebrow">Pilotos activos · Early Bird</p>
            <h2 className="reveal">Antes del catálogo.<br/>Antes de <em>su precio real</em><sup className="programs__asterisk">*</sup></h2>
            <p className="programs__subhead reveal">
              Cuando el piloto termine, estos programas pasan al catálogo general de <b>northius.com</b> con su precio definitivo. Aquí — y solo aquí — todavía están en Early Bird. Cuando las plazas se llenen, se cierran.
            </p>
            <p className="programs__footnote reveal">
              <span className="programs__asterisk">*</span> Precio <span className="ne">≠</span> Valor. El <b>valor</b> es lo que te llevas. El <b>precio</b>, lo que pagas por él. Aquí, hoy, pagas menos por exactamente lo mismo.
            </p>
          </div>
          <div className="programs__count">04 — Programas piloto</div>
        </div>

        <div className="programs__grid" data-layout={layout}>
          {/* DFO */}
          <article className="bcard bcard--dfo reveal">
            <div className="bcard__bgblob" aria-hidden="true"></div>
            <div className="bcard__head">
              <div className="bcard__logo">
                <img src="img/logo-dfo-color.webp" alt="Deusto Formación" />
              </div>
              <span className="bcard__tag">Business · Liderazgo</span>
            </div>
            <h3 className="bcard__title">
              Empowerment<span className="bcard__title-accent">.</span>
            </h3>
            <p className="bcard__lede">
              Te ascendieron por ser el mejor en lo tuyo — pero dirigir personas es otro oficio. El método para liderar equipos, decidir bajo presión y comunicar con autoridad. 100% online a tu ritmo, con Tutor IA 24/7 y doble titulación universitaria.
            </p>
            <dl className="bcard__facts">
              <div><dt>Modalidad</dt><dd>100% online · a tu ritmo</dd></div>
              <div><dt>Inicio curso</dt><dd>{formatCohortDate('dfo-empowerment')}</dd></div>
              <div><dt>Idioma</dt><dd>Portugués, Español, Inglés</dd></div>
            </dl>
            <div className="bcard__urgency">
              <Countdown target={(window.__COHORTS__ && window.__COHORTS__['dfo-empowerment'] && window.__COHORTS__['dfo-empowerment'].early_bird_ends_at) || "2026-06-15T23:59:00"} />
              <Seats taken={(window.__COHORTS__ && window.__COHORTS__['dfo-empowerment'] && window.__COHORTS__['dfo-empowerment'].seats_taken) ?? 23} total={(window.__COHORTS__ && window.__COHORTS__['dfo-empowerment'] && window.__COHORTS__['dfo-empowerment'].seats_total) ?? 40} />
            </div>
            <div className="bcard__row">
              <div>
                <div className="bcard__price-label">Early Bird · Solo aquí</div>
                <div className="bcard__price-amount">{fmtEur(cohortNum('dfo-empowerment','price_early_bird',990))}</div>
                <span className="bcard__price-sub">Después: {fmtEur(cohortNum('dfo-empowerment','price_full',1490))}</span>
              </div>
              <a className="bcard__cta" href="/empowerment.html">Ver programa →</a>
            </div>
            <div className="bcard__bridge">Cuando termine el piloto pasa al catálogo de northius.com</div>
            <a className="bcard__exit" href="https://northius.com">Ver Deusto Formación en northius.com →</a>
          </article>

          {/* DFO — IA-RRHH (PT) */}
          <article className="bcard bcard--dfo reveal">
            <div className="bcard__bgblob" aria-hidden="true"></div>
            <div className="bcard__head">
              <div className="bcard__logo">
                <img src="img/logo-dfo-color.webp" alt="Deusto Formación" />
              </div>
              <span className="bcard__tag">RR.HH. · IA aplicada</span>
            </div>
            <h3 className="bcard__title">
              IA<span className="bcard__title-accent">·</span>RRHH
            </h3>
            <p className="bcard__lede">
              «La IA ya cambió RR.HH. ¿Y tú?» Domina ChatGPT, Copilot y Gemini, automatiza la selección y cumple el AI Act + RGPD antes de que te obligue. Para responsables de talento y dirección de RR.HH. en Portugal.
            </p>
            <dl className="bcard__facts">
              <div><dt>Modalidad</dt><dd>100% online · a tu ritmo</dd></div>
              <div><dt>Inicio curso</dt><dd>{formatCohortDate('dfo-ia-rrhh', '2026-09-08')}</dd></div>
              <div><dt>Idioma</dt><dd>Portugués, Español, Inglés</dd></div>
            </dl>
            <div className="bcard__urgency">
              <Countdown target={(window.__COHORTS__ && window.__COHORTS__['dfo-ia-rrhh'] && window.__COHORTS__['dfo-ia-rrhh'].early_bird_ends_at) || "2026-08-31T23:59:00"} />
              <Seats taken={(window.__COHORTS__ && window.__COHORTS__['dfo-ia-rrhh'] && window.__COHORTS__['dfo-ia-rrhh'].seats_taken) ?? 0} total={(window.__COHORTS__ && window.__COHORTS__['dfo-ia-rrhh'] && window.__COHORTS__['dfo-ia-rrhh'].seats_total) ?? 40} />
            </div>
            <div className="bcard__row">
              <div>
                <div className="bcard__price-label">Early Bird · Solo aquí</div>
                <div className="bcard__price-amount">{fmtEur(cohortNum('dfo-ia-rrhh','price_early_bird',990))}</div>
                <span className="bcard__price-sub">Después: {fmtEur(cohortNum('dfo-ia-rrhh','price_full',1490))}</span>
              </div>
              <a className="bcard__cta" href="/dfo-ia-rrhh.html">Saber más →</a>
            </div>
            <div className="bcard__bridge">Cuando termine el piloto pasa al catálogo de northius.com</div>
            <a className="bcard__exit" href="https://northius.com">Ver Deusto Formación en northius.com →</a>
          </article>

          {/* DFO — IA-Finanzas (PT) */}
          <article className="bcard bcard--dfo reveal">
            <div className="bcard__bgblob" aria-hidden="true"></div>
            <div className="bcard__head">
              <div className="bcard__logo">
                <img src="img/logo-dfo-color.webp" alt="Deusto Formación" />
              </div>
              <span className="bcard__tag">Finanzas · DORA · AI Act</span>
            </div>
            <h3 className="bcard__title">
              IA<span className="bcard__title-accent">·</span>Finanzas
            </h3>
            <p className="bcard__lede">
              «El DORA ya está aquí. El AI Act viene de camino. ¿Y tú, CFO?» Domina Copilot for Finance, pon agentes financieros en producción y responde a DORA + AI Act + PSD3. Para CFOs, controllers y dirección financiera en Portugal.
            </p>
            <dl className="bcard__facts">
              <div><dt>Modalidad</dt><dd>100% online · a tu ritmo</dd></div>
              <div><dt>Inicio curso</dt><dd>{formatCohortDate('dfo-ia-finanzas', '2026-10-06')}</dd></div>
              <div><dt>Idioma</dt><dd>Portugués, Español, Inglés</dd></div>
            </dl>
            <div className="bcard__urgency">
              <Countdown target={(window.__COHORTS__ && window.__COHORTS__['dfo-ia-finanzas'] && window.__COHORTS__['dfo-ia-finanzas'].early_bird_ends_at) || "2026-09-30T23:59:00"} />
              <Seats taken={(window.__COHORTS__ && window.__COHORTS__['dfo-ia-finanzas'] && window.__COHORTS__['dfo-ia-finanzas'].seats_taken) ?? 0} total={(window.__COHORTS__ && window.__COHORTS__['dfo-ia-finanzas'] && window.__COHORTS__['dfo-ia-finanzas'].seats_total) ?? 30} />
            </div>
            <div className="bcard__row">
              <div>
                <div className="bcard__price-label">Early Bird · Solo aquí</div>
                <div className="bcard__price-amount">{fmtEur(cohortNum('dfo-ia-finanzas','price_early_bird',1190))}</div>
                <span className="bcard__price-sub">Después: {fmtEur(cohortNum('dfo-ia-finanzas','price_full',1690))}</span>
              </div>
              <a className="bcard__cta" href="/dfo-ia-finanzas.html">Saber más →</a>
            </div>
            <div className="bcard__bridge">Cuando termine el piloto pasa al catálogo de northius.com</div>
            <a className="bcard__exit" href="https://northius.com">Ver Deusto Formación en northius.com →</a>
          </article>

          {/* CT */}
          <article className="bcard bcard--ct reveal">
            <div className="bcard__bgblob" aria-hidden="true"></div>
            <div className="bcard__head">
              <div className="bcard__logo">
                <img src="img/logo-campus-color.svg" alt="Campus Training" />
              </div>
              <span className="bcard__tag">Oficio · Náutica</span>
            </div>
            <h3 className="bcard__title">
              máster broker náutico<span className="bcard__title-accent">.</span>
            </h3>
            <p className="bcard__lede">
              Intermedia el alquiler de embarcaciones y cobra una comisión en cada reserva de charter que cierras. Una profesión real en un sector que mueve millones cada temporada — a tu ritmo, con Tutor IA 24/7 y sesiones semanales en vivo con el sector.
            </p>
            <dl className="bcard__facts">
              <div><dt>Modalidad</dt><dd>Online · a tu ritmo + en vivo</dd></div>
              <div><dt>Inicio curso</dt><dd>{formatCohortDate('ct-broker-nautico')}</dd></div>
              <div><dt>Idioma</dt><dd>Portugués, Español, Inglés</dd></div>
            </dl>
            <div className="bcard__urgency">
              <Countdown target={(window.__COHORTS__ && window.__COHORTS__['ct-broker-nautico'] && window.__COHORTS__['ct-broker-nautico'].early_bird_ends_at) || "2026-07-26T00:00:00+00:00"} />
              <Seats taken={(window.__COHORTS__ && window.__COHORTS__['ct-broker-nautico'] && window.__COHORTS__['ct-broker-nautico'].seats_taken) ?? 9} total={(window.__COHORTS__ && window.__COHORTS__['ct-broker-nautico'] && window.__COHORTS__['ct-broker-nautico'].seats_total) ?? 30} />
            </div>
            <div className="bcard__row">
              <div>
                <div className="bcard__price-label">Pago único · Solo aquí</div>
                <div className="bcard__price-amount">{fmtEur(cohortNum('ct-broker-nautico','price_early_bird',699))}</div>
                <span className="bcard__price-sub">Después: {fmtEur(cohortNum('ct-broker-nautico','price_full',2499))}</span>
              </div>
              <a className="bcard__cta" href="/broker-nautico.html">Ver programa →</a>
            </div>
            <div className="bcard__bridge">Cuando termine el piloto pasa al catálogo de northius.com</div>
            <a className="bcard__exit" href="https://northius.com">Ver Campus Training en northius.com →</a>
          </article>
        </div>
      </div>
    </section>
  );
}

/* ───────────── How it works ───────────── */
function How() {
  const steps = [
    { n: "01", t: "Eliges programa", b: "Empowerment, IA·RRHH, IA·Finanzas o Máster Broker Náutico. Cada uno con su marca, su tutoría y su formato propio." },
    { n: "02", t: "Te apuntas al piloto", b: "Plazas limitadas. Early Bird mientras hay disponibilidad. Pago seguro al instante." },
    { n: "03", t: "Comienza la cohorte", b: "Sesiones en directo, contenido on-demand y comunidad de alumnos arrancando juntos." },
    { n: "04", t: "Acceso al campus", b: "Tu progreso, materiales y certificación viven en campus.northius.net." }
  ];
  return (
    <section className="how">
      <div className="container">
        <div className="how__head">
          <div>
            <p className="how__eyebrow">Cómo funciona</p>
            <h2 className="reveal">De decidir <br/>a empezar, <em>en cuatro pasos.</em></h2>
          </div>
        </div>

        <div className="how__steps">
          {steps.map(s => (
            <div className="how__step reveal" key={s.n}>
              <div className="num">{s.n} <span /></div>
              <h3>{s.t}</h3>
              <p>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────────── Final CTA ───────────── */
function EndCta() {
  return (
    <section className="endcta">
      <div className="endcta__inner container">
        <h2 className="reveal">¿Por dónde <em>empiezas</em>?</h2>
        <div className="endcta__right">
          <a className="endcta__btn reveal" href="/empowerment.html">
            <div className="l">
              <span className="l-eyebrow">Deusto Formación · {fmtEur(cohortNum('dfo-empowerment','price_early_bird',990))} Early Bird</span>
              <span className="l-name">Empowerment</span>
            </div>
            <span className="arr">→</span>
          </a>
          <a className="endcta__btn reveal" href="/dfo-ia-rrhh.html">
            <div className="l">
              <span className="l-eyebrow">Deusto Formación Portugal · {fmtEur(cohortNum('dfo-ia-rrhh','price_early_bird',990))} Early Bird</span>
              <span className="l-name">IA·RRHH</span>
            </div>
            <span className="arr">→</span>
          </a>
          <a className="endcta__btn reveal" href="/dfo-ia-finanzas.html">
            <div className="l">
              <span className="l-eyebrow">Deusto Formación Portugal · {fmtEur(cohortNum('dfo-ia-finanzas','price_early_bird',1190))} Early Bird</span>
              <span className="l-name">IA·Finanzas</span>
            </div>
            <span className="arr">→</span>
          </a>
          <a className="endcta__btn reveal" href="/broker-nautico.html">
            <div className="l">
              <span className="l-eyebrow">Campus Training · {fmtEur(cohortNum('ct-broker-nautico','price_early_bird',699))} pago único</span>
              <span className="l-name">Máster Broker Náutico</span>
            </div>
            <span className="arr">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ───────────── Footer ───────────── */
function Foot() {
  return (
    <footer className="foot">
      <div className="container foot__row">
        <div className="foot__brand-logo"><NorthiusLogo height={22} variant="white" /></div>
        <nav className="foot__links">
          <a href="https://northius.com">northius.com</a>
          <a href="/webinars.html">Webinars gratuitos</a>
          <a href="/blog/">Blog</a>
          <a href="https://campus.northius.net/login.html">Acceso alumnos</a>
          <a href="/aviso-legal.html">Aviso legal</a>
          <a href="/politica-de-privacidad.html">Privacidad</a>
          <a href="/politica-de-cookies.html">Cookies</a>
        </nav>
      </div>
    </footer>
  );
}

/* ───────────── Reveal-on-scroll ───────────── */
function useReveal() {
  React.useEffect(() => {
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.18 });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ───────────── App ───────────── */
function App() {
  const t = TWEAK_DEFAULTS;
  const [, syncCohorts] = React.useReducer(x => x + 1, 0);
  useReveal();

  React.useEffect(() => {
    document.body.dataset.coral = t.coral;
  }, []);

  // Re-render cuando /api/public/cohorts resuelve, para que countdown, plazas
  // y fecha de cohorte usen datos VIVOS del admin (no los seeds hardcodeados).
  // Sin esto, el primer render congela los seeds y nunca reflejan la API.
  React.useEffect(() => {
    if (window.__COHORTS_READY__) syncCohorts();
    const h = () => syncCohorts();
    window.addEventListener('cohorts-ready', h);
    return () => window.removeEventListener('cohorts-ready', h);
  }, []);

  return (
    <>
      <Nav />
      <Hero treatment={t.heroTreatment} headline={t.headline} />
      {t.marquee && <Strip />}
      <Why />
      <Programs layout={t.cardLayout} />
      <How />
      <EndCta />
      <Foot />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);