/* 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: "/kurs",        id: "kurs",      label: "Mini-kurs" },
    { href: "/freebies",    id: "freebies",  label: "Gratis" },
    { href: "/din-profil",  id: "profil",    label: "Refleksjon" },
    { href: "/ressurser",   id: "ressurser", label: "Ressurser" },
  ];
  return (
    <nav className="cnav">
      <div className="cnav-inner">
        <a href="/" className="cnav-brand">
          LEDERSKAPSCOACH<span className="dot">·</span>ONLINE
          <span className="sub">Med Torun Nordskaug</span>
        </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">Logg inn</a>
          <a href="/book-samtale" className={"cnav-cta" + (active === "samtale" ? " active" : "")}>
            Book en samtale
          </a>
        </div>
      </div>
    </nav>
  );
}

function CamilaFooter() {
  return (
    <footer className="cfoot">
      <div className="cfoot-inner">
        <div className="cfoot-brand">
          LEDERSKAPSCOACH<span className="dot">·</span>ONLINE
          <p>For kvinner som er ferdige med å vente på riktig tidspunkt.</p>
        </div>
        <div>
          <h4>Naviger</h4>
          <ul>
            <li><a href="index.html">Hjem</a></li>
            <li><a href="om-torun.html">Om Torun</a></li>
            <li><a href="din-profil.html">Din profil</a></li>
            <li><a href="ressurser.html">Ressurser</a></li>
          </ul>
        </div>
        <div>
          <h4>Møt</h4>
          <ul>
            <li><a href="book-samtale.html">Book en samtale</a></li>
            <li><a href="din-profil.html">Refleksjonsprofilen</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;