/* RESSURSER — Camila-stil artikel-grid */

const ARTICLES = [
  {
    cat: "Essay", date: "Mars 2026", read: "8 min", featured: true,
    img: "img/pull-new.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/who-new.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/work-3-new.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/work-2-new.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/work-1-new.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/consequence-new.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/guide-new.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">
      <div className="cph-inner">
        <div className="cph-crumbs">
          <a href="index.html">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 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="" /></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 />
      <ArticleGrid />
      <Newsletter />
      <window.CamilaFooter />
    </>
  );
}

window.RessurserApp = RessurserApp;