/* CAMILA-STYLE — clear answers, big headlines, friendly direction */
const { useEffect } = React;

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
      });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function Nav() {
  return (
    <nav className="cnav">
      <div className="cnav-inner">
        <a href="index.html" className="cnav-brand">
          LEDERSKAPSCOACH<span className="dot">·</span>ONLINE
          <span className="sub">Med Torun Nordskaug</span>
        </a>
        <div className="cnav-links">
          <a href="index.html" className="active">Hjem</a>
          <a href="om-torun.html">Om Torun</a>
          <a href="din-profil.html">Din profil</a>
          <a href="ressurser.html">Ressurser</a>
        </div>
        <a href="book-samtale.html" className="cnav-cta">Book strategi-samtale</a>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <section className="chero" data-screen-label="01 Hero">
      <img className="chero-bg" src="img/hero-portrait.jpg" alt="Torun Berge" />
      <div className="chero-veil" />
      <div className="chero-content reveal">
        <span className="chero-eyebrow">Lederskapscoach · For kvinner som bygger</span>
        <h1>
          Du har idéen.<br/>
          Nå skal du <em>bygge den.</em>
        </h1>
        <p className="chero-sub">
          For kvinner med erfaring, drive og en idé som ikke vil slutte å banke. Jeg hjelper
          deg fra «en dag skal jeg» til lansert business — uten å miste deg selv på veien.
        </p>
        <div className="chero-actions">
          <a href="book-samtale.html" className="btn-fill cream">Book strategi-samtale</a>
          <a href="din-profil.html" className="chero-link">Er du klar? Ta testen →</a>
        </div>
      </div>
    </section>
  );
}

function Strip() {
  return (
    <section className="cstrip">
      <div className="cstrip-label">Sett i</div>
      <div className="cstrip-row">
        <span>Aftenposten</span>
        <span className="dot">·</span>
        <span>DN</span>
        <span className="dot">·</span>
        <span>NHO</span>
        <span className="dot">·</span>
        <span>E24</span>
        <span className="dot">·</span>
        <span>Kapital</span>
        <span className="dot">·</span>
        <span>BI Executive</span>
      </div>
    </section>
  );
}

function Who() {
  return (
    <section className="cwho">
      <div className="cwho-img reveal">
        <img src="img/hero-torun-front.jpg" alt="Torun" />
      </div>
      <div className="cwho-text reveal">
        <span className="eyebrow">Er dette deg?</span>
        <h2>Du har erfaringen.<br/>Du har <em>idéen.</em><br/>Du mangler retningen.</h2>
        <p>
          Jeg jobber med kvinner som er ferdige med å være best i en jobb noen
          andre eier. Du vil bygge noe selv — en business, en merkevare, et liv
          som faktisk er ditt. Men du vil ikke gjøre det alene, og du vil ikke
          gjøre det dumt.
        </p>
        <ul className="cwho-list">
          <li>En idé du har båret på i månedsvis — uten å starte.</li>
          <li>En karriere du elsket, som ikke lenger holder mål.</li>
          <li>Et ønske om frihet — uten å sette alt på spill.</li>
          <li>En business som faktisk speiler hvem du er.</li>
        </ul>
      </div>
    </section>
  );
}

function Work() {
  const cards = [
    {
      n: "01", img: "img/reframe-presentation.jpg",
      title: "Business-mentoring",
      body: "6-måneders 1:1-program fra idé til lansering. Du får struktur, sparring og en mentor som vet hva som faktisk virker — og hva som bare ser fint ut på Instagram.",
      cta: "Se programmet"
    },
    {
      n: "02", img: "img/reframe-workshop.jpg",
      title: "Strategi-dag",
      body: "Én intensiv dag — vi tar idéen din fra hodet til en konkret plan. Du går hjem med en business-modell, prismodell og første kunde-strategi. Ikke en visjon, en plan.",
      cta: "Bestill dag"
    },
    {
      n: "03", img: "img/leadership-screen.jpg",
      title: "Masterclass & foredrag",
      body: "Live-kurs og foredrag for kvinner som vil bygge eget — med presisjon, ikke håp. For nettverk, kvinneorganisasjoner og ledergrupper.",
      cta: "Se temaer"
    }
  ];
  return (
    <section className="cwork">
      <div className="cwork-inner">
        <div className="cwork-head reveal">
          <span className="eyebrow">Slik kommer du i gang</span>
          <h2>Tre <em>veier</em> til ditt eget.</h2>
        </div>
        <div className="cwork-grid">
          {cards.map((c, i) => (
            <article className="cwork-card reveal" key={i}>
              <div className="cwork-card-img"><img src={c.img} alt="" /></div>
              <div className="cwork-card-body">
                <div className="cwork-card-num">{c.n}</div>
                <h3>{c.title}</h3>
                <p>{c.body}</p>
                <a href="om-torun.html" className="cwork-card-link">{c.cta} →</a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function ImagePull() {
  return (
    <section className="cpull">
      <img className="cpull-bg" src="img/filter-terrace.jpg" alt="" />
      <div className="cpull-overlay" />
      <blockquote className="cpull-quote reveal">
        <p>Du trenger ikke en ny idé.<br/>Du trenger å <em>starte den</em> du allerede har.</p>
        <cite>Torun Nordskaug</cite>
      </blockquote>
    </section>
  );
}

function Meet() {
  return (
    <section className="cmeet">
      <div className="cmeet-img reveal">
        <div className="cmeet-img-frame"></div>
        <img src="img/footer-portrait.jpg" alt="Torun" />
      </div>
      <div className="cmeet-text reveal">
        <span className="eyebrow">Møt Torun</span>
        <h2>25 år som leder.<br/>Tre selskap <em>bygd selv.</em></h2>
        <p>
          Jeg har vært toppleder i børsnotert selskap, jeg har gründet tre virksomheter,
          og jeg har gjort feilene du nå skal slippe å gjøre. Nå hjelper jeg kvinner som
          står der jeg sto for ti år siden — med en idé, mye erfaring, og en redsel for
          å begynne.
        </p>
        <p>
          Jeg er ikke business-coach på TikTok. Jeg er en kvinne som har bygget,
          tjent og tapt — og som vet hva det faktisk koster å starte for seg selv.
        </p>
        <a href="om-torun.html" className="btn-fill terra">Hele historien →</a>
      </div>
    </section>
  );
}

function Quotes() {
  const items = [
    {
      title: "Fra idé til <em>første kunde</em> på 90 dager.",
      body: "Jeg hadde båret på samme idé i to år. Med Torun hadde jeg en konkret plan etter første uke og betalende kunder etter tre måneder. Hun klipper bort tvilen.",
      by: "Marit · Gründer, Helse"
    },
    {
      title: "Hun sa <em>én setning</em> som forandret prismodellen min.",
      body: "Jeg hadde solgt meg for billig i ti år. Etter én strategi-dag doblet jeg prisen — og fikk flere kunder. Det var den dyreste dagen jeg har brukt på meg selv. Og den smarteste.",
      by: "Anne · Konsulent"
    }
  ];
  return (
    <section className="cquotes">
      <div className="cquotes-inner">
        <div className="cquotes-head reveal">
          <span className="eyebrow">Resultater fra kvinner som turte</span>
          <h2>De gikk fra <em>idé</em> til <em>inntekt.</em></h2>
        </div>
        <div className="cquotes-grid">
          {items.map((q, i) => (
            <figure className="cquote reveal" key={i}>
              <blockquote dangerouslySetInnerHTML={{__html: q.title}} />
              <p>{q.body}</p>
              <figcaption>{q.by}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function Guide() {
  return (
    <section className="cguide" id="guide">
      <div className="cguide-inner">
        <div className="cguide-img reveal"><img src="img/quiz-mic.jpg" alt="" /></div>
        <div className="cguide-text reveal">
          <span className="eyebrow">Gratis · 3 minutter</span>
          <h2>Er du <em>klar</em> for å bygge?</h2>
          <p>
            Sju spørsmål som viser hvor du står — og hva som faktisk hindrer deg fra
            å starte. Du får en personlig vurdering med konkrete neste steg. Ingen
            generisk PDF, ingen e-postserie. Bare svar.
          </p>
          <form className="cguide-form" onSubmit={(e) => { e.preventDefault(); window.location.href = "din-profil.html"; }}>
            <input type="email" placeholder="din@epost.no" required />
            <button type="submit">Ta testen</button>
          </form>
        </div>
      </div>
    </section>
  );
}

function Final() {
  return (
    <section className="cfinal">
      <div className="cfinal-bg"></div>
      <div className="cfinal-inner reveal">
        <span className="eyebrow">Den dagen du sluttet å vente</span>
        <h2>Start <em>nå.</em></h2>
        <p>30 minutter. Du forteller meg om idéen din. Jeg sier rett ut om den holder — og hva som skal til. Ingen pitch, ingen oppfølging hvis du ikke vil.</p>
        <a href="book-samtale.html" className="btn-fill cream">Book strategi-samtale</a>
      </div>
    </section>
  );
}

function Footer() {
  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>Start</h4>
          <ul>
            <li><a href="book-samtale.html">Strategi-samtale</a></li>
            <li><a href="#guide">Gratis test</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="#">Instagram</a></li>
            <li><a href="#">LinkedIn</a></li>
            <li><a href="#">Substack</a></li>
          </ul>
        </div>
      </div>
      <div className="cfoot-bottom">
        <span>© 2026 Lederskapscoach Online · Torun Nordskaug · Oslo</span>
        <span>Bygget for kvinner som bygger</span>
      </div>
    </footer>
  );
}

function CamilaApp() {
  useReveal();
  return (
    <>
      <Nav />
      <Hero />
      <Strip />
      <Who />
      <Work />
      <ImagePull />
      <Meet />
      <Quotes />
      <Guide />
      <Final />
      <Footer />
    </>
  );
}

window.CamilaApp = CamilaApp;