/* DIN PROFIL — native Camila-version av mini-quizen.
   Frågor + resultat kopierat från lco-mini-quiz workern (originalet röras inte). */

const { useState, useEffect } = React;

const QUESTIONS = [
  {
    askLabel: "Spør deg om det indre",
    q: ["Hvis du er ", { em: "helt ærlig" }, " — hva kjenner du mest, under alt det andre?"],
    micro: "Det er der av en grunn.",
    options: [
      { t: "En uro. Stille — men den er der.",     k: "B" },
      { t: "En tomhet jeg ikke vil sette ord på.", k: "B" },
      { t: "Noe som vil ut. Som ikke får plass.",  k: "C" },
      { t: "En ro jeg ikke kjente før.",           k: "A" },
    ],
  },
  {
    askLabel: "Vil vite hva du ikke sier",
    q: ["Hva er det du ", { em: "ikke sier høyt" }, " om hverdagen din?"],
    micro: "Mot å se det betyr alt.",
    options: [
      { t: "At det fungerer — og likevel ikke er nok.",   k: "B" },
      { t: "At jeg er flink. Og at det koster.",          k: "C" },
      { t: "At jeg trives. Og at jeg har mer i meg.",     k: "D" },
      { t: "At jeg er klar. Men ingen vet det.",          k: "C" },
    ],
  },
  {
    askLabel: "Lytter etter bremsen",
    q: ["Ett lag dypere — ", { em: "hva holder deg igjen?" }],
    micro: "Her stopper de fleste.",
    options: [
      { t: "Jeg ser ikke hvordan det neste skal se ut.",  k: "B" },
      { t: "Jeg vet ikke hva som virkelig er mitt.",       k: "A" },
      { t: "For mange retninger — jeg blir stående.",      k: "B" },
      { t: "Jeg har ikke gitt meg selv tillatelse.",       k: "B" },
    ],
  },
  {
    askLabel: "Ser hvordan du møter åpninger",
    q: ["Når noe nytt åpner seg — ", { em: "hva skjer i deg først?" }],
    micro: "Du gjenkjenner deg selv.",
    options: [
      { t: "Nysgjerrighet — og en stille tvil.",          k: "A" },
      { t: "Jeg blir for hel. Det skremmer meg.",         k: "B" },
      { t: "Jeg analyserer til det ikke føles ekte mer.", k: "A" },
      { t: "Jeg vet med en gang. Og holder det inne.",    k: "D" },
    ],
  },
  {
    askLabel: "Vil høre lengselen din",
    q: ["Helt ærlig nå — ", { em: "hva er det du lengter etter?" }],
    micro: "Det har du visst lenge.",
    options: [
      { t: "Å forstå hvem jeg faktisk er.",              k: "A" },
      { t: "Å vite hva som er mitt — ikke andres.",      k: "B" },
      { t: "Å gjøre noe som setter spor.",               k: "C" },
      { t: "Rom og tid til å bygge noe som er mitt.",    k: "D" },
    ],
  },
];

const RESULTS = {
  A: {
    label: "Lytteren",
    headline: ["Du er ikke ", { em: "på leting." }, <br/>, "Du er i ", { em: "lytting." }],
    body: [
      "Noe i deg har begynt å høre — det du har overhørt for lenge. Det er ikke svakhet. Det er et signal.",
      "Du trenger ikke handle ennå. Du trenger å bli — og kjenne hva som faktisk er ditt.",
      "Klarhet kommer ikke før bevegelsen. Den kommer mens du står stille og lytter.",
    ],
    next: "Begynn med å sitte med det du har hørt — i ro, uten plan.",
  },
  B: {
    label: "Den i bevegelse",
    headline: ["Du er ikke ", { em: "usikker." }, <br/>, "Du er i ", { em: "bevegelse." }],
    body: [
      "Du har kommet for langt til å snu — men ikke langt nok til å vite hva som venter.",
      "Det du leter etter er ikke et svar. Det er klarhet.",
      "Og den er nærmere enn du tror — men den krever at du tør å se det du allerede vet.",
    ],
    next: "Sett ord på det du allerede vet — det blir tydeligere når du ser det.",
  },
  C: {
    label: "Den bestemte",
    headline: ["Du er ikke ", { em: "i tvil." }, <br/>, "Du har ", { em: "bestemt deg." }],
    body: [
      "Du har bare ikke sagt det høyt ennå. Det er ikke flere tegn du venter på.",
      "Det er en retning som tør å være din — ikke andres. Den finnes allerede i deg.",
      "Det du leter etter er tillatelse. Den kan du bare gi deg selv.",
    ],
    next: "Si det høyt — først til deg selv, så til én du stoler på.",
  },
  D: {
    label: "Den på terskelen",
    headline: ["Du står på ", { em: "terskelen." }],
    body: [
      "Du har sett det lenge nå. Du har bare ikke gitt deg selv plassen til å gjøre det.",
      "Det du trenger nå er ikke flere tanker — men struktur, retning og rom.",
      "Du leter ikke etter et svar. Du leter etter et sted å begynne.",
    ],
    next: "Bestem det første lille steget — og ta det innen 7 dager.",
  },
};

function renderInline(arr) {
  if (typeof arr === "string") return arr;
  return arr.map((part, i) => {
    if (part === null || part === undefined) return null;
    if (typeof part === "string") return <React.Fragment key={i}>{part}</React.Fragment>;
    if (React.isValidElement(part)) return React.cloneElement(part, { key: i });
    if (typeof part === "object" && part.em) return <em key={i}>{part.em}</em>;
    return null;
  });
}

function PageHeader() {
  return (
    <section className="cph">
      <div className="cph-inner">
        <div className="cph-crumbs"><a href="/">Hjem</a> <span>·</span> Refleksjons-profilen</div>
        <span className="eyebrow" style={{color:"var(--terra)"}}>Gratis · 5 spørsmål · ~3 min</span>
        <h1 className="cph-title">Ikke en test.<br/><em>En speiling.</em></h1>
        <p className="cph-lede">
          Fem spørsmål for kvinner som har levert lenge — og som vet at noe må forstås
          før det forandres. Resultatet får du på skjermen. Ingen e-post påkrevd.
        </p>
      </div>
    </section>
  );
}

function Intro({ onStart }) {
  return (
    <section className="cprofil-intro">
      <div className="cprofil-intro-inner reveal">
        <span className="eyebrow">Slik fungerer det</span>
        <h2>Fem spørsmål.<br/>Ingen <em>riktige svar.</em></h2>
        <ul className="cprofil-intro-list">
          <li><span className="ix">01</span><span>Velg det svaret som kjennes mest sant — ikke det som høres best ut.</span></li>
          <li><span className="ix">02</span><span>Det er ingen rangering, ingen gradering. Bare en speiling.</span></li>
          <li><span className="ix">03</span><span>Resultatet vises på skjermen straks etter siste svar.</span></li>
        </ul>
        <button className="btn-fill terra" onClick={onStart}>Begynn refleksjonen →</button>
      </div>
    </section>
  );
}

function Question({ q, idx, total, onAnswer, onBack }) {
  const [selected, setSelected] = useState(null);
  return (
    <section className="cprofil-q">
      <div className="cprofil-q-inner reveal" key={idx}>
        <div className="cprofil-q-head">
          <span className="eyebrow">Torun · {q.askLabel}</span>
          <span className="cprofil-q-counter">{String(idx+1).padStart(2,"0")} / {String(total).padStart(2,"0")}</span>
        </div>
        <h2 className="cprofil-q-text">{renderInline(q.q)}</h2>
        <p className="cprofil-q-micro">{q.micro}</p>
        <ul className="cprofil-options">
          {q.options.map((o, j) => (
            <li key={j}>
              <button
                className={"cprofil-opt" + (selected === j ? " is-selected" : "")}
                onClick={() => { setSelected(j); setTimeout(() => onAnswer(o.k), 240); }}
              >
                <span className="key">{String.fromCharCode(65 + j)}</span>
                <span className="text">{o.t}</span>
              </button>
            </li>
          ))}
        </ul>
        <button className="btn-text" onClick={onBack} disabled={idx === 0}>← Tilbake</button>
      </div>
    </section>
  );
}

function Result({ winner, onRestart }) {
  const r = RESULTS[winner];
  return (
    <section className="cprofil-result">
      <div className="cprofil-result-inner reveal">
        <span className="eyebrow" style={{color:"var(--rose)"}}>Din profil — {r.label}</span>
        <h2 className="cprofil-result-headline">{renderInline(r.headline)}</h2>
        <div className="cprofil-result-body">
          {r.body.map((p, i) => <p key={i}>{p}</p>)}
        </div>
        <div className="cprofil-result-next">
          <span className="eyebrow">Et lite neste steg</span>
          <p>{r.next}</p>
        </div>
        <div className="cprofil-result-cta">
          <a href="/book-samtale" className="btn-fill terra">Book en samtale →</a>
          <a href="/kurs" className="btn-ghost">Eller begynn mini-kurset →</a>
        </div>
        <button className="btn-text" onClick={onRestart}>↻ Ta refleksjonen på nytt</button>
        <p className="cprofil-result-note">
          Resultatet er en indikasjon — ikke en konklusjon. Det egentlige bildet
          kommer i samtalen, ikke i en quiz.
        </p>
      </div>
    </section>
  );
}

function ProfilApp() {
  const [step, setStep] = useState(-1); // -1 = intro, 0..N-1 = questions, N = result
  const [answers, setAnswers] = useState([]);

  useEffect(() => {
    if (window.useCamilaReveal) window.useCamilaReveal();
    window.scrollTo({ top: 0, behavior: "smooth" });
  }, [step]);

  const total = QUESTIONS.length;

  function answer(k) {
    const next = [...answers, k];
    setAnswers(next);
    if (next.length >= total) {
      try { localStorage.setItem("lco-pers-v1:profileResult", JSON.stringify({ key: winnerOf(next), at: Date.now() })); } catch {}
      setStep(total);
    } else {
      setStep(step + 1);
    }
  }
  function back() {
    if (step > 0) {
      setAnswers(answers.slice(0, -1));
      setStep(step - 1);
    }
  }
  function restart() {
    setAnswers([]);
    setStep(-1);
  }

  function winnerOf(arr) {
    const counts = { A: 0, B: 0, C: 0, D: 0 };
    arr.forEach(k => { if (counts[k] != null) counts[k]++; });
    return Object.entries(counts).sort((a, b) => b[1] - a[1])[0][0];
  }

  return (
    <>
      <window.CamilaNav active="profil" />

      {step === -1 && (
        <>
          <PageHeader />
          <Intro onStart={() => setStep(0)} />
        </>
      )}

      {step >= 0 && step < total && (
        <Question q={QUESTIONS[step]} idx={step} total={total} onAnswer={answer} onBack={back} />
      )}

      {step === total && answers.length === total && (
        <Result winner={winnerOf(answers)} onRestart={restart} />
      )}

      <window.CamilaFooter />
    </>
  );
}

window.ProfilApp = ProfilApp;