/* RESSURSER — Camila-stil artikel-grid + Selvledelsesguiden gated download */

const { useState } = React;

const ARTICLES = [
  {
    cat: "Essay", date: "Mars 2026", read: "8 min", featured: true,
    img: "/img/torun-skrivebord-refleksjon.jpg",
    title: "Når noe i deg vet før du selv vet det",
    desc: "Om de stille henvendelsene som kommer lenge før vi hører dem — og hva som skjer når vi gjør det.",
  },
  {
    cat: "Refleksjon", date: "Februar 2026", read: "6 min",
    img: "/img/torun-coaching-samtale.jpg",
    title: "Selvinnsikt før strategi",
    desc: "Hvorfor de fleste planer kollapser av en grunn vi ikke vil snakke om.",
  },
  {
    cat: "Samtale", date: "Februar 2026", read: "5 min",
    img: "/img/torun-skrivebord-refleksjon.jpg",
    title: "Du trenger ikke svaret. Du trenger rommet.",
    desc: "Om hvorfor klarhet sjelden kommer av å tenke mer — og oftere av å holde stillere.",
  },
  {
    cat: "Praksis", date: "Januar 2026", read: "4 min",
    img: "/img/speiling-par-kartlegging.jpg",
    title: "Tre spørsmål jeg stiller når noe ikke stemmer",
    desc: "En enkel praksis som ofte er tydeligere enn et helt strategidokument.",
  },
  {
    cat: "Essay", date: "Januar 2026", read: "7 min",
    img: "/img/kvinner-workshop-selvledelse.jpg",
    title: "Bygge inn i — istedenfor fra null",
    desc: "Det finnes mer enn én måte å bygge noe eget på. De fleste har bare hørt om én av dem.",
  },
  {
    cat: "Refleksjon", date: "Desember 2025", read: "5 min",
    img: "/img/par-speiling-livsfase.jpg",
    title: "Energi er den viktigste valutaen",
    desc: "Hvor mye du har, hvor den går, og hva som faktisk fyller den opp.",
  },
  {
    cat: "Praksis", date: "November 2025", read: "6 min",
    img: "/img/torun-laptop-mini-kurs.jpg",
    title: "Rytmen i et liv som faktisk passer deg",
    desc: "Et oppsett for uka som handler mindre om disiplin og mer om å høre etter.",
  },
];

function PageHeader() {
  return (
    <section className="cph">
      <img className="cph-bg" src="/img/torun-nordskaug-lederskapscoach-hero.jpg" alt=""
        style={{objectPosition:"center 40%"}} />
      <div className="cph-veil" />
      <div className="cph-inner">
        <div className="cph-crumbs">
          <a href="/">Hjem</a> <span>·</span> Ressurser
        </div>
        <h1 className="cph-title">
          Tekster<br/><em>til den som lytter.</em>
        </h1>
        <p className="cph-lede">
          Essays, refleksjoner og enkle praksiser. Ingen tips-lister.
          Ingenting som skal selges. Bare det som er verdt å si.
        </p>
      </div>
    </section>
  );
}

function Selvledelsesguiden() {
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState("idle"); // idle | loading | success | error
  const [error, setError] = useState("");

  async function submit(e) {
    e.preventDefault();
    if (!email || !email.includes("@")) {
      setError("Skriv inn en gyldig e-postadresse.");
      return;
    }
    setStatus("loading");
    setError("");
    try {
      const r = await fetch("https://lco-kurs-api.jobba-online-utb.workers.dev/leads", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: email.trim().toLowerCase(), source: "selvledelsesguiden" }),
      });
      if (r.ok || r.status === 409) {
        setStatus("success");
        try { localStorage.setItem("lco-guide-email", email.trim().toLowerCase()); } catch {}
      } else {
        const data = await r.json().catch(() => ({}));
        setError(data.error || "Noe gikk galt. Prøv igjen om en stund.");
        setStatus("error");
      }
    } catch (e) {
      setError("Nettverksfeil. Prøv igjen.");
      setStatus("error");
    }
  }

  return (
    <section className="cguide">
      <div className="cguide-inner reveal">
        <div className="cguide-text">
          <span className="eyebrow">Gratis guide · Selvledelse i praksis</span>
          <h2>
            Selvledelsesguiden.<br/>
            <em>Fem daglige øvelser</em><br/>
            for å høre deg selv.
          </h2>
          <p>
            Åtte sider med konkrete refleksjonsøvelser du kan gjøre på fem minutter
            om dagen. Ingen teori. Ingen morgenrutine du må mestre. Bare fem stille
            spørsmål som hjelper deg å høre det du allerede vet.
          </p>
          <ul className="cguide-meta">
            <li>PDF · 8 sider · skapad for utskrift</li>
            <li>5 daglige refleksjonsøvelser</li>
            <li>Bruk i ditt eget tempo — én øvelse om dagen, eller alle på en gang</li>
            <li>Ingen oppfølging · du melder deg av når du vil</li>
          </ul>

          {status !== "success" ? (
            <form className="cguide-form" onSubmit={submit}>
              <label htmlFor="guide-email" className="cguide-form-label">
                Skriv inn e-postadressen din — vi sender guiden med en gang.
              </label>
              <div className="cguide-form-row">
                <input
                  id="guide-email"
                  type="email"
                  required
                  placeholder="din@epost.no"
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  disabled={status === "loading"}
                />
                <button type="submit" disabled={status === "loading"}>
                  {status === "loading" ? "Sender…" : "Få guiden"}
                </button>
              </div>
              {error && <p className="cguide-form-err">{error}</p>}
              <p className="cguide-form-fine">
                Vi sender deg guiden og ett tekstbrev i måneden. Ingenting du ikke har sagt ja til.
                Du melder deg av med ett klikk.
              </p>
            </form>
          ) : (
            <div className="cguide-success" role="status">
              <p className="cguide-success-headline">Takk. Sjekk innboksen din.</p>
              <p>
                Vi har sendt Selvledelsesguiden til <strong>{email}</strong>. Hvis den ikke
                kommer innen et par minutter, sjekk søppelpost. Du kan også laste den
                ned direkte her:
              </p>
              <a href="/ressurser/selvledelsesguiden.pdf" className="btn-fill terra cguide-download" download>
                Last ned PDF →
              </a>
            </div>
          )}
        </div>
        <div className="cguide-cover">
          <div className="cguide-cover-card">
            <span className="cguide-cover-eyebrow">Selvledelsesguiden</span>
            <h3>Fem daglige øvelser<br/>for å høre deg selv</h3>
            <p className="cguide-cover-author">av Torun Nordskaug</p>
            <div className="cguide-cover-pages">
              <span></span><span></span><span></span><span></span><span></span>
            </div>
            <p className="cguide-cover-meta">PDF · 8 sider</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function ArticleGrid() {
  return (
    <section className="carts">
      <div className="carts-inner">
        <div className="carts-head reveal">
          <span className="eyebrow">Bibliotek · 07 tekster</span>
          <div className="carts-filter">
            <span className="active">Alle</span>
            <span>Essay</span>
            <span>Refleksjon</span>
            <span>Praksis</span>
            <span>Samtale</span>
          </div>
        </div>

        <div className="carts-grid">
          {ARTICLES.map((a, i) => (
            <a href="#" className={"cart" + (a.featured ? " featured" : "")} key={i}>
              <div className="cart-img"><img src={a.img} alt={a.title} loading="lazy" /></div>
              <div className="cart-body">
                <div className="cart-meta">
                  <span className="cart-cat">{a.cat}</span>
                  <span>·</span>
                  <span>{a.date}</span>
                  <span>·</span>
                  <span>{a.read}</span>
                </div>
                <h3>{a.title}</h3>
                <p>{a.desc}</p>
                <div className="cart-read">Les →</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Newsletter() {
  return (
    <section className="cnews">
      <div className="cnews-inner reveal">
        <span className="eyebrow">Nyhetsbrev</span>
        <h2>Tekster, sjelden og <em>presist.</em></h2>
        <p>Ett brev i måneden. Aldri salg. Bare det som er verdt å sende.</p>
        <form className="cnews-form" data-source="ressurser-newsletter">
          <input type="email" name="email" required placeholder="din@epost.no" />
          <button type="submit">Abonner</button>
        </form>
      </div>
    </section>
  );
}

function RessurserApp() {
  window.useCamilaReveal();
  return (
    <>
      <window.CamilaNav active="ressurser" />
      <PageHeader />
      <Selvledelsesguiden />
      <ArticleGrid />
      <Newsletter />
      <window.CamilaFooter />
    </>
  );
}

window.RessurserApp = RessurserApp;