// 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 não é <span className="strike">só</span> saber mais.<br/>
      É <em>tornares-te</em> no profissional<br/>
      que queres ser.
    </>),
    lede: "Aqui podes ver os pilotos do grupo Northius. Pensados para que acabes a exercer — não para somares mais um título ao teu currículo."
  },
  ejercer: {
    title: (<>
      Não formamos para <span className="strike">saber mais</span>.<br/>
      Formamos para <em>exercer</em>.
    </>),
    lede: "Dois programas piloto do grupo Northius. A diferença entre estudar e trabalhar no que queres — em doze semanas ou ao teu ritmo."
  },
  diploma: {
    title: (<>
      Formação que não acaba<br/>
      <span className="strike">num diploma</span>.<br/>
      Acaba <em>num trabalho</em>.
    </>),
    lede: "Dois programas piloto do grupo Northius. Pensados para profissionais que querem exercer — não para colecionadores 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 href="/">ES</a>
            <a href="/index-en.html">EN</a>
            <a className="is-on" href="/index-pt.html" aria-current="page">PT</a>
          </div>
          <a className="nav__webinars" href="/webinars.html">
            Webinars gratuitos
          </a>
          <a className="nav__access" href="https://campus.northius.net/login.html">
            Acesso alunos <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>Formação orientada para empregabilidade real.</span></div>
              <div><b>02</b><span>Desenhada e entregue pela marca especialista do grupo.</span></div>
              <div><b>03</b><span>Vagas limitadas · Early Bird até esgotar.</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────────── Marquee strip ───────────── */
function Strip() {
  const items = [
    "Northius 2.0", "Empowerment · DFO", "IA·RH · DFO Portugal", "IA·Fin · DFO Portugal", "Máster Broker Náutico · CT", "ES · EN · PT",
    "Pilotos limitados", "Outono 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/>Confiança <em>partilhada.</em></h2>
          <p className="why__subhead reveal">
            northius.net é o novo site institucional do grupo — onde estreamos os pilotos antes de passarem ao catálogo geral em northius.com.
          </p>
        </div>

        <div className="why__body">
          <p className="reveal">
            A Northius é o grupo educativo espanhol por detrás de marcas com décadas de história e comunidades ativas hoje. Sob o mesmo guarda-chuva convivem <strong>Deusto Formación</strong>, <strong>Campus Training</strong>, <strong>CEAC</strong> —com mais de 80 anos a ensinar à distância a partir de Espanha—, <strong>Tokio School</strong>, <strong>Nubika</strong> e <strong>Deusto Salud</strong>, entre outras.
          </p>

          <dl className="why__facts reveal">
            <div>
              <dt>Alunos a estudar agora</dt>
              <dd>+65.000</dd>
            </div>
            <div>
              <dt>Países com presença</dt>
              <dd>+15</dd>
            </div>
            <div>
              <dt>Centros físicos</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 anos. <em>E ainda os mais modernos do grupo.</em></h3>
            <p>
              A CEAC ensina à distância desde 1945 — quando "online" ainda não era uma palavra e os trabalhos de casa iam pelo correio. Envelhecer aqui não significa ir devagar: significa reinventar há décadas como se aprende, antes de toda a gente.
            </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>Melhor MBA especializado de Espanha. <em>Três anos seguidos.</em></h3>
            <p>
              O MBA em Sport Management da <strong>Unisport</strong> lidera o ranking do PortalMBA em <strong>2024, 2025 e 2026</strong>. E segundo a <em>SportBusiness 2023</em>, é o melhor mestrado online de gestão desportiva da Europa — e segundo do mundo. Com <strong>dois stages presenciais</strong> por ano.
            </p>
            <a className="why__ceac-link" href="https://unisport.es/stage-tecnico-unisport/" target="_blank" rel="noopener">Ver como foi o último stage →</a>
          </div>
        </div>
      </div>

      <div className="brands reveal">
        <p className="brands__label container">13 marcas no 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>Com programa em Early Bird agora</span>
          <a className="brands__more" href="https://www.northius.com/marcas/">Ver todas as marcas em 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 em</div>
      <div className="bcard__countdown-clock">
        <div className="bcard__countdown-cell">
          <span className="bcard__countdown-num">{pad(days)}</span>
          <span className="bcard__countdown-unit">dias</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">Vagas <b>{taken}/{total}</b> preenchidas · <span className="avail">só {total - taken} disponíveis</span></div>
      <div className="bcard__seats-bar">
        <div className="bcard__seats-fill" style={{ width: `${pct}%` }}></div>
      </div>
    </div>
  );
}

/* Formata cohort_start_at do backend para "8 set 2026" (PT) ou "A definir" se 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 "A definir";
  const d = new Date(iso);
  if (isNaN(d.getTime())) return "A definir";
  return new Intl.DateTimeFormat('pt-PT', { day: 'numeric', month: 'short', year: 'numeric' }).format(d).replace(/\./g, '').replace(/de /g, '');
}

/* Lê um número (preço) de __COHORTS__ com fallback se faltar ou for invá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;
}
/* Formata um inteiro para euros com separador de milhares "." (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 ativos · Early Bird</p>
            <h2 className="reveal">Antes do catálogo.<br/>Antes do <em>seu preço real</em><sup className="programs__asterisk">*</sup></h2>
            <p className="programs__subhead reveal">
              Quando o piloto terminar, estes programas passam para o catálogo geral em <b>northius.com</b> com o seu preço definitivo. Aqui — e só aqui — ainda estão em Early Bird. Quando as vagas esgotarem, fecham.
            </p>
            <p className="programs__footnote reveal">
              <span className="programs__asterisk">*</span> Preço <span className="ne">≠</span> Valor. O <b>valor</b> é o que levas. O <b>preço</b>, o que pagas por ele. Aqui, hoje, pagas menos por exatamente o mesmo.
            </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 · Liderança</span>
            </div>
            <h3 className="bcard__title">
              Empowerment<span className="bcard__title-accent">.</span>
            </h3>
            <p className="bcard__lede">
              Foste promovido por seres o melhor no que fazes — mas liderar pessoas é outro ofício. O método para liderar equipas, decidir sob pressão e comunicar com autoridade. 100% online ao teu ritmo, com Tutor IA 24/7 e dupla titulação universitária.
            </p>
            <dl className="bcard__facts">
              <div><dt>Modalidade</dt><dd>100% online · ao teu ritmo</dd></div>
              <div><dt>Início do curso</dt><dd>{formatCohortDate('dfo-empowerment')}</dd></div>
              <div><dt>Idioma</dt><dd>Português, Espanhol, 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 · Só aqui</div>
                <div className="bcard__price-amount">{fmtEur(cohortNum('dfo-empowerment','price_early_bird',990))}</div>
                <span className="bcard__price-sub">Depois: {fmtEur(cohortNum('dfo-empowerment','price_full',1490))}</span>
              </div>
              <a className="bcard__cta" href="/empowerment-pt.html">Ver programa →</a>
            </div>
            <div className="bcard__bridge">Quando o piloto terminar passa para o catálogo de northius.com</div>
            <a className="bcard__exit" href="https://northius.com">Ver Deusto Formação em 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 Formação" />
              </div>
              <span className="bcard__tag">RH · IA aplicada</span>
            </div>
            <h3 className="bcard__title">
              IA<span className="bcard__title-accent">·</span>RH
            </h3>
            <p className="bcard__lede">
              «A IA já mudou o RH. E tu?» Domina o ChatGPT, o Copilot e o Gemini, automatiza a seleção e cumpre o AI Act + RGPD antes de seres obrigado. Para responsáveis de talento e direção de RH em Portugal.
            </p>
            <dl className="bcard__facts">
              <div><dt>Modalidade</dt><dd>100% online · ao teu ritmo</dd></div>
              <div><dt>Início do curso</dt><dd>{formatCohortDate('dfo-ia-rrhh', '2026-09-08')}</dd></div>
              <div><dt>Idioma</dt><dd>Português, Espanhol, 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 · Só aqui</div>
                <div className="bcard__price-amount">{fmtEur(cohortNum('dfo-ia-rrhh','price_early_bird',990))}</div>
                <span className="bcard__price-sub">Depois: {fmtEur(cohortNum('dfo-ia-rrhh','price_full',1490))}</span>
              </div>
              <a className="bcard__cta" href="/dfo-ia-rrhh.html">Saber mais →</a>
            </div>
            <div className="bcard__bridge">Quando o piloto terminar passa para o catálogo de northius.com</div>
            <a className="bcard__exit" href="https://northius.com">Ver Deusto Formação em 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 Formação" />
              </div>
              <span className="bcard__tag">Finanças · DORA · AI Act</span>
            </div>
            <h3 className="bcard__title">
              IA<span className="bcard__title-accent">·</span>Fin
            </h3>
            <p className="bcard__lede">
              «O DORA já chegou. O AI Act vem aí. E tu, CFO?» Domina o Copilot for Finance, põe agentes financeiros em produção e responde ao DORA + AI Act + PSD3. Para CFOs, controllers e direção financeira em Portugal.
            </p>
            <dl className="bcard__facts">
              <div><dt>Modalidade</dt><dd>100% online · ao teu ritmo</dd></div>
              <div><dt>Início do curso</dt><dd>{formatCohortDate('dfo-ia-finanzas', '2026-10-06')}</dd></div>
              <div><dt>Idioma</dt><dd>Português, Espanhol, 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 · Só aqui</div>
                <div className="bcard__price-amount">{fmtEur(cohortNum('dfo-ia-finanzas','price_early_bird',1190))}</div>
                <span className="bcard__price-sub">Depois: {fmtEur(cohortNum('dfo-ia-finanzas','price_full',1690))}</span>
              </div>
              <a className="bcard__cta" href="/dfo-ia-finanzas.html">Saber mais →</a>
            </div>
            <div className="bcard__bridge">Quando o piloto terminar passa para o catálogo de northius.com</div>
            <a className="bcard__exit" href="https://northius.com">Ver Deusto Formação em 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">Ofício · Náutica</span>
            </div>
            <h3 className="bcard__title">
              máster broker náutico<span className="bcard__title-accent">.</span>
            </h3>
            <p className="bcard__lede">
              Intermedeia o aluguer de embarcações e recebe uma comissão em cada reserva de charter que fechas. Uma profissão real num setor que move milhões em cada época — ao teu ritmo, com Tutor IA 24/7 e sessões semanais em direto com o setor.
            </p>
            <dl className="bcard__facts">
              <div><dt>Modalidade</dt><dd>Online · ao teu ritmo + em direto</dd></div>
              <div><dt>Início do curso</dt><dd>{formatCohortDate('ct-broker-nautico')}</dd></div>
              <div><dt>Idioma</dt><dd>Português, Espanhol, 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">Pagamento único · Só aqui</div>
                <div className="bcard__price-amount">{fmtEur(cohortNum('ct-broker-nautico','price_early_bird',699))}</div>
                <span className="bcard__price-sub">Depois: {fmtEur(cohortNum('ct-broker-nautico','price_full',2499))}</span>
              </div>
              <a className="bcard__cta" href="/broker-nautico-pt.html">Ver programa →</a>
            </div>
            <div className="bcard__bridge">Quando o piloto terminar passa para o catálogo de northius.com</div>
            <a className="bcard__exit" href="https://northius.com">Ver Campus Training em northius.com →</a>
          </article>
        </div>
      </div>
    </section>
  );
}

/* ───────────── How it works ───────────── */
function How() {
  const steps = [
    { n: "01", t: "Escolhes o programa", b: "Empowerment, IA·RH, IA·Fin ou Máster Broker Náutico. Cada um com a sua marca, tutoria e formato próprio." },
    { n: "02", t: "Inscreves-te no piloto", b: "Vagas limitadas. Early Bird enquanto houver disponibilidade. Pagamento seguro imediato." },
    { n: "03", t: "Arranca a turma", b: "Sessões em direto, conteúdo on-demand e comunidade de alunos a arrancar juntos." },
    { n: "04", t: "Acesso ao campus", b: "O teu progresso, materiais e certificação vivem em campus.northius.net." }
  ];
  return (
    <section className="how">
      <div className="container">
        <div className="how__head">
          <div>
            <p className="how__eyebrow">Como funciona</p>
            <h2 className="reveal">De decidir <br/>a começar, <em>em quatro passos.</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 onde <em>começas</em>?</h2>
        <div className="endcta__right">
          <a className="endcta__btn reveal" href="/empowerment-pt.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 Formação Portugal · {fmtEur(cohortNum('dfo-ia-rrhh','price_early_bird',990))} Early Bird</span>
              <span className="l-name">IA·RH</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 Formação Portugal · {fmtEur(cohortNum('dfo-ia-finanzas','price_early_bird',1190))} Early Bird</span>
              <span className="l-name">IA·Fin</span>
            </div>
            <span className="arr">→</span>
          </a>
          <a className="endcta__btn reveal" href="/broker-nautico-pt.html">
            <div className="l">
              <span className="l-eyebrow">Campus Training · {fmtEur(cohortNum('ct-broker-nautico','price_early_bird',699))} pagamento ú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="https://campus.northius.net/login.html">Acesso alunos</a>
          <a href="/aviso-legal.html">Aviso legal</a>
          <a href="/politica-de-privacidad.html">Privacidade</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;
  }, []);

  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 />);