/* HOME PAGE — funnel-struktur 2026-05-18.
   1. Hero ("Du har det bra. Og kjenner likevel at noe mangler.")
   2. Recognition (5 punkter — Kjenner du igjen noe av dette?)
   3. Method (Velg på nytt — placerad EFTER recognition så Karin känner igen sig först)
   4. ThreeWaysIn (Refleksjonsarket / Mini-refleksjon / Kartleggingen)
   5. Course101 (Selvledelse 101 mini-kurs kort presentation)
   6. NotForEveryone (4 punkter — Hvis du vil ha quick fix → finn noen andre)
   7. TorunQuote (kort + citat + Les hele historien)
   8. TwoPaths (Utforsk på egenhånd / Snakk med Torun) */

const { useEffect } = React;

/* ============ 1. HERO ============ */
function Hero() {
  return (
    <section className="chero">
      <img className="chero-bg" src="/img/torun-nordskaug-lederskapscoach-hero.jpg" alt="Torun Nordskaug — lederskapscoach" />
      <div className="chero-veil" />
      <div className="chero-content reveal">
        <span className="chero-eyebrow">For deg som har levert lenge</span>
        <h1>
          Du har det <em>bra.</em><br/>
          Og kjenner likevel at<br/>
          noe <em>mangler.</em>
        </h1>
        <p className="chero-sub">
          Kanskje er det en drøm du har lagt bort. Kanskje vet du ikke engang
          hva du savner — bare at hverdagen koster mer enn den burde.
        </p>
        <div className="chero-actions">
          <a
            href="/din-profil/"
            className="btn-primary chero-cta-big"
            data-event="hero_cta_begynn_her"
          >
            Begynn her →
          </a>
        </div>
        <p className="chero-cta-sub">Gratis · anonym · 5 spørsmål · ~3 minutter</p>
      </div>
    </section>
  );
}

/* ============ 2. RECOGNITION ============ */
function Recognition() {
  const lines = [
    "Du fungerer godt utenfra — men innenfra kjenner du deg tom eller utslitt.",
    "Du har en drøm om noe eget, men vet ikke om du tør — eller om det er for sent.",
    "Du vet ikke hva du vil. Bare at det du har, ikke er nok lenger.",
    "Du har levd for jobben, barna, forventningene — og spør deg hva som er ditt.",
    "Kroppen forandrer seg, dagene koster mer, og noe i deg begynner å snakke.",
  ];
  return (
    <section className="cmirror">
      <div className="cmirror-inner reveal">
        <span className="eyebrow">Du kjenner det igjen</span>
        <h2 className="cmirror-headline">
          Kjenner du igjen<br/>
          <em>noe av dette?</em>
        </h2>
        <ul className="cmirror-list">
          {lines.map((t, i) => <li key={i}>{t}</li>)}
        </ul>
        <p className="cmirror-close">
          Hvis du nikker — er du <em>ikke alene.</em> Og du er på rett sted.
        </p>
      </div>
    </section>
  );
}

/* ============ 3. METHOD — Velg på nytt ============ */
function SunMark() {
  return (
    <svg className="csun-mark" viewBox="0 0 48 24" aria-hidden="true">
      <path d="M4 22 L44 22" stroke="currentColor" strokeWidth="1" fill="none"/>
      <path d="M24 6 A 12 12 0 0 1 36 22" stroke="currentColor" strokeWidth="1.2" fill="none"/>
      <path d="M24 6 A 12 12 0 0 0 12 22" stroke="currentColor" strokeWidth="1.2" fill="none"/>
      <path d="M24 2 L24 5" stroke="currentColor" strokeWidth="1"/>
      <path d="M9 9 L11 11" stroke="currentColor" strokeWidth="1"/>
      <path d="M39 9 L37 11" stroke="currentColor" strokeWidth="1"/>
      <path d="M4 16 L7 16" stroke="currentColor" strokeWidth="1"/>
      <path d="M44 16 L41 16" stroke="currentColor" strokeWidth="1"/>
    </svg>
  );
}
function Method() {
  const steps = [
    {
      n: "01", name: "Lytte",
      body: "Høre hva du faktisk vet, men kanskje har sluttet å si høyt.",
      icon: (<svg viewBox="0 0 40 40" aria-hidden="true"><path d="M20 32c-6-4-12-9-12-16a6 6 0 0 1 12-3 6 6 0 0 1 12 3c0 7-6 12-12 16z" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinejoin="round"/></svg>),
      tint: "cmethod-tint-rose",
    },
    {
      n: "02", name: "Sortere",
      body: "Skille egne ønsker fra forventninger og gammel plikt.",
      icon: (<svg viewBox="0 0 40 40" aria-hidden="true"><path d="M20 8c-6 4-9 10-9 16 6 0 12-3 14-9M20 8c0 6 1 12 5 16" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinejoin="round"/></svg>),
      tint: "cmethod-tint-sage",
    },
    {
      n: "03", name: "Velge",
      body: "Formulere en retning som kjennes sann nok til å bære.",
      icon: (<svg viewBox="0 0 40 40" aria-hidden="true"><rect x="11" y="8" width="18" height="26" stroke="currentColor" strokeWidth="1.5" fill="none"/><circle cx="25" cy="21" r="1" fill="currentColor"/><path d="M11 22 L29 22" stroke="currentColor" strokeWidth="0.8" opacity="0.4"/></svg>),
      tint: "cmethod-tint-sand",
    },
    {
      n: "04", name: "Handle",
      body: "Ta små, konkrete steg uten å miste deg selv.",
      icon: (<svg viewBox="0 0 40 40" aria-hidden="true"><path d="M15 32c-2-4-2-9 2-13 3-3 3-7 0-11M20 32c-2-4-2-9 2-13 3-3 3-7 0-11M25 32c-2-4-2-9 2-13 3-3 3-7 0-11" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round"/></svg>),
      tint: "cmethod-tint-clay",
    },
    {
      n: "05", name: "Forankre",
      body: "Bygge rytme, støtte og selvledelse som varer.",
      icon: (<svg viewBox="0 0 40 40" aria-hidden="true"><circle cx="20" cy="22" r="6" stroke="currentColor" strokeWidth="1.5" fill="none"/><path d="M20 12 L20 9 M28 16 L30 14 M12 16 L10 14 M30 22 L33 22 M7 22 L10 22" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/><path d="M8 32 L32 32" stroke="currentColor" strokeWidth="1"/></svg>),
      tint: "cmethod-tint-ink",
    },
  ];
  return (
    <section className="cmethod">
      <div className="cmethod-inner">
        <div className="cmethod-head reveal">
          <SunMark />
          <span className="eyebrow">Velg på nytt-metoden</span>
          <h2>
            Fem rolige <em>steg</em> —<br/>
            fra refleksjon til <em>handling.</em>
          </h2>
          <p className="cmethod-lead">
            Du trenger ikke flere svar. Du trenger bedre spørsmål —<br className="hide-mobile"/>
            og en retning du kan kjenne stemmer fra innsiden.
          </p>
        </div>
        <ol className="cmethod-steps reveal">
          {steps.map((s) => (
            <li key={s.n} className="cmethod-step">
              <div className={"cmethod-icon " + s.tint}>{s.icon}</div>
              <span className="cmethod-num">Steg {s.n}</span>
              <h3>{s.name}</h3>
              <p>{s.body}</p>
            </li>
          ))}
        </ol>
        <p className="cmethod-foot">
          Ingen riktige svar. <em>Bare ærlighet.</em>
        </p>
      </div>
    </section>
  );
}

/* ============ 4. THREE WAYS IN ============ */
function ThreeWaysIn() {
  const items = [
    {
      label: "Jeg er ikke sikker på hva jeg vil",
      title: "Refleksjonsarket",
      meta: "PDF · 8 sider · Ingen e-post",
      body: "Fem stille spørsmål du kan sitte med en kveld. Skriv ut og bruk hjemme. Ingen oppfølging — bare det som er verdt å sitte med.",
      href: "/freebies/ark/",
      cta: "Last ned arket →",
      event: "3way_ark_click",
    },
    {
      label: "Jeg kjenner at noe ikke stemmer",
      title: "Mini-refleksjonen",
      meta: "5 spørsmål · Anonymt · Resultat på skjermen",
      body: "Fem spørsmål som speiler deg. Resultatet vises med en gang — ingen e-post, ingen oppfølging uten at du selv velger det.",
      href: "/din-profil/",
      cta: "Begynn refleksjonen →",
      event: "3way_profil_click",
    },
    {
      label: "Jeg vil bygge noe eget",
      title: "Kartleggingen",
      meta: "12 spørsmål · 5 profiler · PDF i innboksen",
      body: "Et speil — ikke en test. Kartleggingen viser hvor du står og gir deg ett konkret neste steg som passer din selvledelsesprofil.",
      href: "/kartlegging/",
      cta: "Ta kartleggingen →",
      event: "3way_kartlegging_click",
    },
  ];
  const accents = ["#c9a87a", "#2D3347", "#8B4A2F"];
  return (
    <section className="cthree">
      <div className="cthree-inner">
        <div className="cthree-head reveal">
          <span className="eyebrow">Tre stille innganger</span>
          <h2>
            Begynn der du er <em>akkurat nå.</em><br/>
            Ikke der du tror du <em>burde</em> være.
          </h2>
          <p>Velg det som kjennes mest sant — ikke det som ser mest "riktig" ut.</p>
        </div>
        <div className="cthree-cards reveal">
          {items.map((it, i) => (
            <a key={i} href={it.href} className="cthree-card" data-event={it.event}>
              <div className="cthree-card-accent" style={{background: accents[i]}}></div>
              <span className="eyebrow">"{it.label}"</span>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
              <div className="cthree-card-meta">
                <span>{it.meta}</span>
                <span className="cthree-card-go">{it.cta}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ 5. COURSE 101 — Selvledelse 101 mini-kurs ============ */
function Course101() {
  return (
    <section className="cspot">
      <div className="cspot-inner reveal">
        <div className="cspot-img">
          <img src="/img/mini-kurs-fem-moduler-fjell.jpg" alt="Selvledelse 101 mini-kurs — fem stille moduler" loading="lazy" />
        </div>
        <div className="cspot-text">
          <span className="eyebrow">Selvledelse 101 · Gratis mini-kurs</span>
          <h2>
            Fem stille moduler —<br/>
            for deg som vil <em>sette ord</em><br/>
            på det du allerede vet.
          </h2>
          <p>
            Fem korte spørsmål du kan sitte med i ditt eget tempo. Skriv dine
            egne svar underveis. Ingen video. Ingen møter. Du logger inn når
            du vil — refleksjonene dine ligger der du forlot dem.
          </p>
          <ul className="cspot-list">
            <li>5 moduler à 15–20 minutter</li>
            <li>Skriv inn dine egne svar — autospar</li>
            <li>Egen "Min side" med fremdrift</li>
            <li>Avslutning: din egen refleksjonsreise samlet</li>
          </ul>
          <a href="/kurs/" className="btn-primary cspot-cta" data-event="course101_click">
            Se mini-kurset →
          </a>
          <p className="cspot-fine">Gratis · ingen video · skapad for en stille kveld.</p>
        </div>
      </div>
    </section>
  );
}

/* ============ 6. NOT FOR EVERYONE ============ */
function NotForEveryone() {
  const lines = [
    { lead: "Hvis du vil ha quick fix",                    follow: "— finn noen andre." },
    { lead: "Hvis du vil ha rask transformasjon",          follow: "— finn noen andre." },
    { lead: "Hvis du vil at noen skal fortelle deg hva du skal gjøre", follow: "— finn noen andre." },
    { lead: "Hvis du vil ha klarhet",                      follow: "— er du på rett sted." },
  ];
  return (
    <section className="cnotfor">
      <div className="cnotfor-inner reveal">
        <span className="eyebrow">Dette er ikke for alle</span>
        <h2>
          Det jeg <em>ikke</em><br/>
          kommer til å gi deg.
        </h2>
        <ul className="cnotfor-list">
          {lines.map((l, i) => (
            <li key={i} className={i === lines.length - 1 ? "cnotfor-final" : ""}>
              <span className="cnotfor-lead">{l.lead}</span>
              <span className="cnotfor-follow">{l.follow}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* ============ 7. TORUN QUOTE ============ */
function TorunQuote() {
  return (
    <section className="ctorun">
      <div className="ctorun-img reveal">
        <img src="/img/torun-keynote-publikum.jpg" alt="Torun Nordskaug — lederskapscoach, Son" loading="lazy" />
      </div>
      <div className="ctorun-text reveal">
        <span className="eyebrow">Torun Nordskaug · Lederskapscoach</span>
        <blockquote className="ctorun-quote">
          "Jeg oppmuntrer deg ikke.<br/>
          <em>Jeg viser deg det du ikke ser selv.</em>"
        </blockquote>
        <p>
          25 år i lederskap og menneskelig utvikling. Jeg jobber ikke med å
          overbevise deg. Jeg jobber med å skape rommet der dine egne svar
          får komme tydelig frem.
        </p>
        <a
          href="/om-torun/"
          className="ctorun-link"
          data-event="torun_les_hele_click"
        >
          Les hele historien →
        </a>
      </div>
    </section>
  );
}

/* ============ 8. TWO PATHS — slutsektion ============ */
function TwoPaths() {
  return (
    <section className="cfinal">
      <div className="cfinal-bg"></div>
      <div className="cfinal-inner reveal">
        <span className="eyebrow" style={{color:"var(--rose)"}}>Du velger</span>
        <h2>To veier videre.<br/><em>Begge er like riktige.</em></h2>
        <div className="cfinal-choices">
          <a
            href="/din-profil/"
            className="cfinal-choice primary"
            data-event="twopaths_start_her_click"
          >
            <span className="num">01</span>
            <h3>Utforsk på egenhånd</h3>
            <p>Begynn med Mini-refleksjonen. Fem spørsmål. Resultat på skjermen. Anonymt.</p>
            <span className="go">Start her →</span>
          </a>
          <a
            href="/book-samtale/"
            className="cfinal-choice"
            data-event="twopaths_book_samtale_click"
          >
            <span className="num">02</span>
            <h3>Snakk med Torun</h3>
            <p>30 minutter. Online. Uten salg. Du forteller 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 />
      <Recognition />
      <Method />
      <ThreeWaysIn />
      <Course101 />
      <NotForEveryone />
      <TorunQuote />
      <TwoPaths />
      <window.CamilaFooter />
      <a
        href="/din-profil/"
        className="mobile-sticky-cta"
        data-event="sticky_begynn_her_click"
      >
        Begynn her →
      </a>
    </>
  );
}

window.CamilaApp = CamilaApp;