/* CAMILA SHARED — Nav + Footer used across every page.
   Loaded BEFORE page-specific JSX. Components attach to window so each page can render them. */

function CamilaNav({ active }) {
  const links = [
    { href: "/",               id: "home",        label: "Hjem" },
    { href: "/om-torun/",      id: "om",          label: "Om Torun" },
    { href: "/din-profil/",    id: "profil",      label: "Din profil" },
    { href: "/kartlegging/",   id: "kartlegging", label: "Kartlegging" },
    { href: "/ressurser/",     id: "ressurser",   label: "Ressurser" },
    { href: "/kurs/",          id: "kurs",        label: "Kurs" },
  ];
  const loginActive = active === "logg-inn" || active === "min-side";
  return (
    <nav className="cnav">
      <div className="cnav-inner">
        <a href="/" className="cnav-brand" aria-label="Lederskapscoach Online">
          <img src="/img/logo.png" alt="Lederskapscoach Online" className="cnav-logo" />
        </a>
        <div className="cnav-links">
          {links.map(l => (
            <a key={l.id} href={l.href} className={active === l.id ? "active" : ""}>{l.label}</a>
          ))}
        </div>
        <div className="cnav-end">
          <a href="/logg-inn/" className={"cnav-login" + (loginActive ? " active" : "")} data-auth-link>
            Logg inn
          </a>
          <a href="/book-samtale/" className={"cnav-cta" + (active === "samtale" ? " active" : "")}>
            Book samtale
          </a>
        </div>
      </div>
    </nav>
  );
}

function CamilaFooter() {
  return (
    <footer className="cfoot">
      <div className="cfoot-inner">
        <div className="cfoot-brand">
          <img src="/img/logo.png" alt="Lederskapscoach Online" className="cfoot-logo" />
          <p>For kvinner som er ferdige med å vente på riktig tidspunkt.</p>
        </div>
        <div>
          <h4>Naviger</h4>
          <ul>
            <li><a href="/">Hjem</a></li>
            <li><a href="/om-torun/">Om Torun</a></li>
            <li><a href="/kartlegging/">Kartleggingen</a></li>
            <li><a href="/kurs/">Mini-kurs</a></li>
            <li><a href="/freebies/ark/">Refleksjonsarket</a></li>
            <li><a href="/din-profil/">Refleksjonsprofilen</a></li>
            <li><a href="/ressurser/">Ressurser</a></li>
          </ul>
        </div>
        <div>
          <h4>Neste steg</h4>
          <ul>
            <li><a href="/event/">Diplomdagen</a></li>
            <li><a href="/book-samtale/">Book en samtale</a></li>
            <li><a href="mailto:hei@lederskapscoachonline.no">hei@lederskapscoachonline.no</a></li>
          </ul>
        </div>
        <div>
          <h4>Følg</h4>
          <ul>
            <li><a href="https://instagram.com/lederskapscoach.online" target="_blank" rel="noopener">Instagram</a></li>
            <li><a href="https://facebook.com/lederskapscoach.online" target="_blank" rel="noopener">Facebook</a></li>
          </ul>
        </div>
      </div>
      <div className="cfoot-bottom">
        <span>© 2026 Lederskapscoach Online · Torun Nordskaug · Oslo</span>
        <span>Et rom for å velge på nytt</span>
      </div>
    </footer>
  );
}

function useCamilaReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!els.length) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

window.CamilaNav = CamilaNav;
window.CamilaFooter = CamilaFooter;
window.useCamilaReveal = useCamilaReveal;