/* HOME PAGE — conversion flow (not a content collection).
   Each section pushes the visitor toward ONE action: quiz / freebie / samtale.
   No equal-weight sections. Strong hierarchy. */

const { useEffect } = React;

/* ============ 1. HERO — hook + action ============ */
function Hero() {
  return (
    <section className="chero">
      <img className="chero-bg" src="img/hero-new.jpg" alt="Torun Nordskaug" />
      <div className="chero-veil" />
      <div className="chero-content reveal">
        <span className="chero-eyebrow">For kvinner i en ny livsfase</span>
        <h1>
          Noe i deg vet<br/>
          det allerede.<br/>
          Du har bare ikke<br/>
          sagt det <em>høyt.</em>
        </h1>
        <p className="chero-sub">
          Fem spørsmål for kvinner som har levert lenge — og som vet at neste
          retning ikke skrives på autopilot.
        </p>
        <a href="/din-profil" className="btn-fill cream chero-cta-big">
          Begynn refleksjonen — 3 min →
        </a>
        <p className="chero-cta-sub">Resultat på skjermen · Ingen e-post påkrevd</p>
      </div>
    </section>
  );
}

/* ============ 2. DIRECT ACTION BLOCK ============ */
function DirectAction() {
  return (
    <section className="cdirect">
      <div className="cdirect-inner">
        <p className="cdirect-q">Kjenner du deg igjen?</p>
        <a href="/din-profil" className="cdirect-cta">Begynn her ↓</a>
      </div>
    </section>
  );
}

/* ============ 3. PROBLEM / RECOGNITION — short, sharp ============ */
function Recognition() {
  return (
    <section className="crecog">
      <div className="crecog-inner reveal">
        <h2>Du har det bra.<br/>Du leverer.<br/>Og likevel <em>stemmer det ikke.</em></h2>
        <ul className="crecog-list">
          <li>Du tar valg av vane — ikke fordi de passer deg.</li>
          <li>Du leter etter en retning som faktisk er din.</li>
          <li>Du har sluttet å si høyt det du vet.</li>
        </ul>
      </div>
    </section>
  );
}

/* ============ 4. QUIZ — the core offering ============ */
function QuizCore() {
  return (
    <section className="cquizcore">
      <div className="cquizcore-inner">
        <div className="cquizcore-text reveal">
          <span className="eyebrow" style={{color:"var(--rose)"}}>Refleksjons-profilen</span>
          <h2>Du trenger ikke flere svar.<br/>Du trenger å forstå<br/><em>hvordan du fungerer.</em></h2>
          <p>
            Fem spørsmål som ikke kan googles. De viser deg hvilken vei som
            faktisk passer den du er — ikke den du tror du burde være.
          </p>
          <ul className="cquizcore-meta">
            <li><strong>3 min</strong> · Resultat på skjermen straks</li>
            <li><strong>Ingen e-post</strong> · Ingenting du må melde deg av</li>
            <li><strong>4 profiltyper</strong> · Med konkret neste steg</li>
          </ul>
          <a href="/din-profil" className="btn-fill terra cquizcore-cta">
            Ta refleksjonen →
          </a>
        </div>
        <div className="cquizcore-img reveal">
          <img src="img/guide-new.jpg" alt="" loading="lazy" />
        </div>
      </div>
    </section>
  );
}

/* ============ 5. FREEBIE — low-threshold entry ============ */
function Freebie() {
  return (
    <section className="cfreebie-entry">
      <div className="cfreebie-entry-inner reveal">
        <span className="eyebrow">Hvis du ikke er klar enda</span>
        <h3>Hvis noe føles av —<br/>men du ikke vet hva.</h3>
        <p>
          Last ned arbeidsboken først. Skriv ut. Sitt med det. Ingen e-post,
          ingen forventning, ingen oppfølging.
        </p>
        <div className="cfreebie-entry-row">
          <a href="/freebies/refleksjonsark.pdf" className="btn-ghost" download>
            Last ned arbeidsboken (PDF)
          </a>
          <a href="/lp/refleksjonsark" className="cfreebie-entry-link">Les mer →</a>
        </div>
      </div>
    </section>
  );
}

/* ============ 6. CONSEQUENCE — pressure / urgency ============ */
function Consequence() {
  return (
    <section className="cconseq">
      <img className="cconseq-bg" src="img/consequence-new.jpg" alt="" loading="lazy" />
      <div className="cconseq-veil" />
      <div className="cconseq-inner reveal">
        <h2>
          Når du ikke forstår<br/>
          hvordan du <em>fungerer,</em><br/>
          velger du veier som<br/>
          ikke passer deg.
        </h2>
        <p>Og det er der mange blir stående fast.</p>
      </div>
    </section>
  );
}

/* ============ 7. TORUN POSITIONING — strong, not "I help" ============ */
function Torun() {
  return (
    <section className="ctorun">
      <div className="ctorun-img reveal">
        <img src="img/meet-new.jpg" alt="Torun Nordskaug" loading="lazy" />
      </div>
      <div className="ctorun-text reveal">
        <span className="eyebrow">Møt Torun Nordskaug</span>
        <h2>Jeg viser deg det<br/>du <em>ikke ser.</em></h2>
        <p>
          I 25 år har jeg sittet ved bord der mennesker prøver å finne ut
          av neste — som leder, rådgiver, menneske selv. Jeg jobber med
          kvinner som har levert lenge nok til å vite at klarhet ikke
          kommer av å tenke mer.
        </p>
        <a href="/om-torun" className="ctorun-link">Hele historien →</a>
      </div>
    </section>
  );
}

/* ============ 8. NOT FOR EVERYONE — sharp, increases value ============ */
function NotForEveryone() {
  return (
    <section className="cnot">
      <div className="cnot-inner reveal">
        <span className="eyebrow" style={{color:"var(--rose)"}}>Hvem dette ikke er for</span>
        <h2>Dette er ikke for deg som <em>vil ha raske svar.</em></h2>
        <ul className="cnot-list">
          <li>Som leter etter en plan i 5 punkter.</li>
          <li>Som vil bli bekreftet, ikke utfordret.</li>
          <li>Som ikke har plass til å sitte med vanskelige spørsmål.</li>
        </ul>
      </div>
    </section>
  );
}

/* ============ 9. FINAL CTA — clear choice ============ */
function Final() {
  return (
    <section className="cfinal">
      <div className="cfinal-bg"></div>
      <div className="cfinal-inner reveal">
        <span className="eyebrow" style={{color:"var(--rose)"}}>Når du er klar</span>
        <h2>To veier — du <em>velger.</em></h2>
        <div className="cfinal-choices">
          <a href="/din-profil" className="cfinal-choice">
            <span className="num">01</span>
            <h3>Utforsk først</h3>
            <p>Refleksjons-profilen — 3 minutter, resultat på skjermen.</p>
            <span className="go">Begynn refleksjonen →</span>
          </a>
          <a href="/book-samtale" className="cfinal-choice primary">
            <span className="num">02</span>
            <h3>Snakk med meg</h3>
            <p>30 minutter. Online. Uten salg. Du forteller meg hvor du står.</p>
            <span className="go">Book en samtale →</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function CamilaApp() {
  window.useCamilaReveal();
  return (
    <>
      <window.CamilaNav active="home" />
      <Hero />
      <DirectAction />
      <Recognition />
      <QuizCore />
      <Freebie />
      <Consequence />
      <Torun />
      <NotForEveryone />
      <Final />
      <window.CamilaFooter />
    </>
  );
}

window.CamilaApp = CamilaApp;