// 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: (<>
      Learning isn't <span className="strike">just</span> knowing more.<br/>
      It's <em>becoming</em> the professional<br/>
      you want to be.
    </>),
    lede: "Here you can see the pilots from the Northius group. Designed so you end up practising — not to add one more qualification to your CV."
  },
  ejercer: {
    title: (<>
      We don't train you to <span className="strike">know more</span>.<br/>
      We train you to <em>practise</em>.
    </>),
    lede: "Two pilot programmes from the Northius group. The difference between studying and working in what you want — in twelve weeks or in your own time."
  },
  diploma: {
    title: (<>
      Training that doesn't end<br/>
      <span className="strike">in a diploma</span>.<br/>
      It ends in <em>a job</em>.
    </>),
    lede: "Two pilot programmes from the Northius group. Designed for professionals who want to practise — not for certificate collectors."
  }
};

/* ───────────── 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="Language">
            <a href="/">ES</a>
            <a className="is-on" href="/index-en.html" aria-current="page">EN</a>
            <a href="/index-pt.html">PT</a>
          </div>
          <a className="nav__webinars" href="/webinars.html">
            Free webinars
          </a>
          <a className="nav__access" href="https://campus.northius.net/login.html">
            Student login <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>Training focused on real employability.</span></div>
              <div><b>02</b><span>Designed and delivered by the group's expert brand.</span></div>
              <div><b>03</b><span>Limited places · Early Bird until full.</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────────── Marquee strip ───────────── */
function Strip() {
  const items = [
    "Northius 2.0", "Empowerment · DFO", "AI·HR · DFO Portugal", "AI·Fin · DFO Portugal", "Yacht Charter Broker · CT", "ES · EN · PT",
    "Limited pilots", "Autumn 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">About Northius</p>
          <h2 className="reveal">13 brands.<br/>Shared <em>trust.</em></h2>
          <p className="why__subhead reveal">
            northius.net is the group's new institutional site — where we premiere the pilots before they move into the main catalogue at northius.com.
          </p>
        </div>

        <div className="why__body">
          <p className="reveal">
            Northius is the Spanish education group behind brands with decades of history and active communities today. Under the same umbrella you'll find <strong>Deusto Formación</strong>, <strong>Campus Training</strong>, <strong>CEAC</strong> —teaching at a distance from Spain for more than 80 years—, <strong>Tokio School</strong>, <strong>Nubika</strong> and <strong>Deusto Salud</strong>, among others.
          </p>

          <dl className="why__facts reveal">
            <div>
              <dt>Students currently studying</dt>
              <dd>+65,000</dd>
            </div>
            <div>
              <dt>Countries with presence</dt>
              <dd>+15</dd>
            </div>
            <div>
              <dt>Physical campuses</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>since 1945</span>
          </div>
          <div className="why__ceac-body">
            <h3>80+ years. <em>And still the most modern in the group.</em></h3>
            <p>
              CEAC has been teaching at a distance since 1945 — when "online" wasn't even a word and homework was sent by post. Getting older here doesn't mean slowing down: it means decades of reinventing how people learn, ahead of everyone else.
            </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>Best specialised MBA in Spain. <em>Three years running.</em></h3>
            <p>
              The MBA in Sport Management from <strong>Unisport</strong> tops the PortalMBA ranking in <strong>2024, 2025 and 2026</strong>. And according to <em>SportBusiness 2023</em>, it's the best online sports management master's in Europe — and second in the world. With <strong>two in-person stages</strong> a year.
            </p>
            <a className="why__ceac-link" href="https://unisport.es/stage-tecnico-unisport/" target="_blank" rel="noopener">See how the last stage went →</a>
          </div>
        </div>
      </div>

      <div className="brands reveal">
        <p className="brands__label container">13 brands in the group</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>With Early Bird programme right now</span>
          <a className="brands__more" href="https://www.northius.com/marcas/">See all brands on 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 ends in</div>
      <div className="bcard__countdown-clock">
        <div className="bcard__countdown-cell">
          <span className="bcard__countdown-num">{pad(days)}</span>
          <span className="bcard__countdown-unit">days</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">Places <b>{taken}/{total}</b> filled · <span className="avail">only {total - taken} available</span></div>
      <div className="bcard__seats-bar">
        <div className="bcard__seats-fill" style={{ width: `${pct}%` }}></div>
      </div>
    </div>
  );
}

/* Formats cohort_start_at from backend to "8 Sep 2026" (EN) or "TBD" if 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 "TBD";
  const d = new Date(iso);
  if (isNaN(d.getTime())) return "TBD";
  return new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }).format(d);
}

/* Reads a number (price) from __COHORTS__ with fallback if missing or invalid */
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;
}
/* Formats an integer to euros with "," thousands separator (EN): 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">Active pilots · Early Bird</p>
            <h2 className="reveal">Before the catalogue.<br/>Before <em>its real price</em><sup className="programs__asterisk">*</sup></h2>
            <p className="programs__subhead reveal">
              When the pilot ends, these programmes move to the main catalogue at <b>northius.com</b> with their final price. Here — and only here — they're still in Early Bird. When the places fill up, they close.
            </p>
            <p className="programs__footnote reveal">
              <span className="programs__asterisk">*</span> Price <span className="ne">≠</span> Value. <b>Value</b> is what you take away. <b>Price</b> is what you pay for it. Here, today, you pay less for exactly the same thing.
            </p>
          </div>
          <div className="programs__count">04 — Pilot programmes</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 · Leadership</span>
            </div>
            <h3 className="bcard__title">
              Empowerment<span className="bcard__title-accent">.</span>
            </h3>
            <p className="bcard__lede">
              You were promoted for being the best at your job — but leading people is another craft. The method to lead teams, decide under pressure and communicate with authority. 100% online at your pace, with AI Tutor 24/7 and a dual university qualification.
            </p>
            <dl className="bcard__facts">
              <div><dt>Format</dt><dd>100% online · at your pace</dd></div>
              <div><dt>Course start</dt><dd>{formatCohortDate('dfo-empowerment')}</dd></div>
              <div><dt>Language</dt><dd>Portuguese, Spanish, English</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 · Only here</div>
                <div className="bcard__price-amount">{fmtEur(cohortNum('dfo-empowerment','price_early_bird',990))}</div>
                <span className="bcard__price-sub">After: {fmtEur(cohortNum('dfo-empowerment','price_full',1490))}</span>
              </div>
              <a className="bcard__cta" href="/empowerment-en.html">See the programme →</a>
            </div>
            <div className="bcard__bridge">When the pilot ends it moves to the northius.com catalogue</div>
            <a className="bcard__exit" href="https://northius.com">See Deusto Formación on 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">HR · Applied AI</span>
            </div>
            <h3 className="bcard__title">
              AI<span className="bcard__title-accent">·</span>HR
            </h3>
            <p className="bcard__lede">
              «AI already changed HR. Have you?» Master ChatGPT, Copilot and Gemini, automate recruiting and comply with the AI Act + GDPR before it's mandatory. For talent leaders and HR directors in Portugal.
            </p>
            <dl className="bcard__facts">
              <div><dt>Format</dt><dd>100% online · at your pace</dd></div>
              <div><dt>Course start</dt><dd>{formatCohortDate('dfo-ia-rrhh', '2026-09-08')}</dd></div>
              <div><dt>Language</dt><dd>Portuguese, Spanish, English</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 · Only here</div>
                <div className="bcard__price-amount">{fmtEur(cohortNum('dfo-ia-rrhh','price_early_bird',990))}</div>
                <span className="bcard__price-sub">After: {fmtEur(cohortNum('dfo-ia-rrhh','price_full',1490))}</span>
              </div>
              <a className="bcard__cta" href="/dfo-ia-rrhh-en.html">See the programme →</a>
            </div>
            <div className="bcard__bridge">When the pilot ends it moves to the northius.com catalogue</div>
            <a className="bcard__exit" href="https://northius.com">See Deusto Formação on 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">Finance · DORA · AI Act</span>
            </div>
            <h3 className="bcard__title">
              AI<span className="bcard__title-accent">·</span>Fin
            </h3>
            <p className="bcard__lede">
              «DORA is already here. The AI Act is on its way. And you, CFO?» Master Copilot for Finance, put financial agents into production and respond to DORA + AI Act + PSD3. For CFOs, controllers and finance directors in Portugal.
            </p>
            <dl className="bcard__facts">
              <div><dt>Format</dt><dd>100% online · at your pace</dd></div>
              <div><dt>Course start</dt><dd>{formatCohortDate('dfo-ia-finanzas', '2026-10-06')}</dd></div>
              <div><dt>Language</dt><dd>Portuguese, Spanish, English</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 · Only here</div>
                <div className="bcard__price-amount">{fmtEur(cohortNum('dfo-ia-finanzas','price_early_bird',1190))}</div>
                <span className="bcard__price-sub">After: {fmtEur(cohortNum('dfo-ia-finanzas','price_full',1690))}</span>
              </div>
              <a className="bcard__cta" href="/dfo-ia-finanzas-en.html">See the programme →</a>
            </div>
            <div className="bcard__bridge">When the pilot ends it moves to the northius.com catalogue</div>
            <a className="bcard__exit" href="https://northius.com">See Deusto Formação on 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">Trade · Nautical</span>
            </div>
            <h3 className="bcard__title">
              yacht charter broker master<span className="bcard__title-accent">.</span>
            </h3>
            <p className="bcard__lede">
              Broker the rental of vessels and earn a commission on every charter booking you close. A real profession in a sector that moves millions every season — at your pace, with AI Tutor 24/7 and weekly live sessions with the industry.
            </p>
            <dl className="bcard__facts">
              <div><dt>Format</dt><dd>Online · at your pace + live</dd></div>
              <div><dt>Course start</dt><dd>{formatCohortDate('ct-broker-nautico')}</dd></div>
              <div><dt>Language</dt><dd>Portuguese, Spanish, English</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">One-off payment · Only here</div>
                <div className="bcard__price-amount">{fmtEur(cohortNum('ct-broker-nautico','price_early_bird',699))}</div>
                <span className="bcard__price-sub">After: {fmtEur(cohortNum('ct-broker-nautico','price_full',2499))}</span>
              </div>
              <a className="bcard__cta" href="/broker-nautico-en.html">See the programme →</a>
            </div>
            <div className="bcard__bridge">When the pilot ends it moves to the northius.com catalogue</div>
            <a className="bcard__exit" href="https://northius.com">See Campus Training on northius.com →</a>
          </article>
        </div>
      </div>
    </section>
  );
}

/* ───────────── How it works ───────────── */
function How() {
  const steps = [
    { n: "01", t: "Choose your programme", b: "Empowerment, AI·HR, AI·Fin or Yacht Charter Broker. Each with its own brand, tutoring and format." },
    { n: "02", t: "You sign up for the pilot", b: "Limited places. Early Bird while available. Instant secure payment." },
    { n: "03", t: "The cohort starts", b: "Live sessions, on-demand content and a community of students starting together." },
    { n: "04", t: "Campus access", b: "Your progress, materials and certification live on campus.northius.net." }
  ];
  return (
    <section className="how">
      <div className="container">
        <div className="how__head">
          <div>
            <p className="how__eyebrow">How it works</p>
            <h2 className="reveal">From deciding <br/>to starting, <em>in four steps.</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">Where do you <em>start</em>?</h2>
        <div className="endcta__right">
          <a className="endcta__btn reveal" href="/empowerment-en.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-en.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">AI·HR</span>
            </div>
            <span className="arr">→</span>
          </a>
          <a className="endcta__btn reveal" href="/dfo-ia-finanzas-en.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">AI·Fin</span>
            </div>
            <span className="arr">→</span>
          </a>
          <a className="endcta__btn reveal" href="/broker-nautico-en.html">
            <div className="l">
              <span className="l-eyebrow">Campus Training · {fmtEur(cohortNum('ct-broker-nautico','price_early_bird',699))} one-off payment</span>
              <span className="l-name">Yacht Charter Broker</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">Free webinars</a>
          <a href="https://campus.northius.net/login.html">Student login</a>
          <a href="/aviso-legal.html">Legal notice</a>
          <a href="/politica-de-privacidad.html">Privacy</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 />);