// ---- Editorial content sections -------------------------------------

function WhatMakesIt() {
  const pillars = [
    { icon: "feather", t: "Dein ganz persönliches Buch",
      d: "Name, Geburtstermin und Geburtsort fließen ins ganze Buch ein. Kein Standardprodukt, sondern eines, das von der ersten Seite an deins ist." },
    { icon: "book", t: "Termin-Planer, Vorbereitungsguide und Journal in einem",
      d: "Ein an deinen Termin angepasster Wochenplaner für jede SSW, ein kompletter Vorbereitungsguide für Geburt und Wochenbett, und Raum für alles, was diese Zeit mit dir macht." },
    { icon: "bookmark", t: "Ein Buch, das bleibt",
      d: "Hochwertig in Deutschland produziert. Etwas, das du auch in vielen Jahren noch gern in die Hand nimmst und aufschlägst." },
  ];
  return (
    <section style={{ background: "var(--espresso)", color: "var(--cream)" }}>
      <div className="j-wrap" style={{ paddingBlock: "clamp(72px,9vw,128px)" }}>
        <SectionHead light center kicker="Was Journella ausmacht"
          title="Kein Tagebuch von der Stange"
          sub="Drei Dinge unterscheiden Journella von einem gewöhnlichen Schwangerschaftstagebuch." />
        <div className="j-pillars j-pillars-dark">
          {pillars.map((p, i) => (
            <Reveal key={i} delay={i * .08}>
              <div className="j-pillar">
                <span className="j-pillar-ico"><Icon name={p.icon} size={26} stroke={1.4} /></span>
                <h3>{p.t}</h3>
                <p>{p.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Chapters() {
  return (
    <section id="inside" className="j-wrap" style={{ paddingBlock: "clamp(72px,9vw,128px)", scrollMarginTop: 80 }}>
      <SectionHead center kicker="Aufbau des Buches"
        title="Ein kompletter Begleiter durch die Schwangerschaft"
        sub="Vom ersten Test über die Geburtsvorbereitung bis zum Rückblick. Journella ist Wochenplaner und Vorbereitungsguide zugleich, zurechtgeschnitten auf dich und deine Schwangerschaft." />
      <div className="j-chapters">
        {CHAPTERS.map((c, i) => (
          <Reveal key={c.n} delay={(i % 2) * .08}>
            <article className="j-chapter">
              <image-slot id={"chapter-" + c.n} class="j-chapter-photo" shape="rounded" radius="2"
                placeholder={"Teil " + c.n + " · Beispielseite"}></image-slot>
              <div className="j-chapter-body">
                <div className="j-chapter-head">
                  <span className="j-chapter-n">{c.n}</span>
                  <div>
                    <h3>{c.title}</h3>
                    <span className="j-chapter-lead">{c.lead}</span>
                  </div>
                </div>
                <p>{c.text}</p>
                <ul>{c.items.map((it, j) => <li key={j}><Icon name="check" size={15} stroke={2} /> {it}</li>)}</ul>
              </div>
            </article>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function WeekByWeek() {
  return (
    <section style={{ background: "var(--espresso)", color: "var(--cream)" }}>
      <div className="j-wrap" style={{ paddingBlock: "clamp(72px,9vw,128px)" }}>
        <div className="j-week-intro">
          <SectionHead light kicker="Das Herzstück"
            title="Ein Wochenplaner für jede Schwangerschaftswoche" />
          <p style={{ color: "rgba(255,247,229,.78)", lineHeight: 1.7, fontSize: 17, maxWidth: 460 }}>
            Eine Doppelseite für jede SSW von 5 bis 41. Plane die nächsten Wochen voraus und halte fest,
            was heute war. So hast du Achtsamkeitsjournal und Kalender in einem, zugeschnitten auf deine Schwangerschaft.
          </p>
        </div>
        <div className="j-spread">
          <div className="j-spread-page">
            <div className="j-spread-tag">Links · die Fakten</div>
            <ul>{WEEK_LEFT.map((r, i) => (
              <li key={i}><Icon name={r.icon} size={18} stroke={1.5} /> {r.t}</li>
            ))}</ul>
          </div>
          <div className="j-spread-page j-spread-right">
            <div className="j-spread-tag">Rechts · Raum für dich</div>
            <ul>{WEEK_RIGHT.map((r, i) => (
              <li key={i}><Icon name={r.icon} size={18} stroke={1.5} /> {r.t}</li>
            ))}</ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function BookFacts() {
  return (
    <section style={{ background: "var(--cream-2)", borderBlock: "1px solid var(--line)" }}>
      <div className="j-wrap j-facts-grid" style={{ paddingBlock: "clamp(64px,8vw,110px)" }}>
        <div className="j-facts-visual">
          <image-slot id="facts-photo" class="j-facts-photo" shape="rounded" radius="3"
            placeholder="Produktfoto ablegen"></image-slot>
        </div>
        <div>
          <SectionHead kicker="Format und Anmutung" title="Was im Buch steckt" />
          <dl className="j-facts">
            {BOOK_FACTS.map((f, i) => (
              <div className="j-fact" key={i}>
                <dt>{f.k}</dt>
                <dd>{f.v}</dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </section>
  );
}

function Blog({ go, openArticle }) {
  const group = BLOG[0];
  return (
    <section id="blog" className="j-wrap" style={{ paddingBlock: "clamp(72px,9vw,128px)", scrollMarginTop: 80 }}>
      <SectionHead center kicker="Magazin"
        title="Aus dem Journal"
        sub="Texte rund um Schwangerschaft, Vorbereitung und alles, was du festhalten und behalten möchtest." />
      <div className="j-blog-grid" style={{ marginTop: 40 }}>
        {group.posts.map((p, i) => (
          <Reveal key={i} delay={(i % 4) * .05}>
            <article className="j-blog-card" onClick={() => openArticle({ ...p, cat: group.cat })}>
              <image-slot id={"blog-home-" + i} class="j-blog-photo" shape="rounded" radius="3"
                placeholder="Beitragsbild"></image-slot>
              <div className="j-blog-meta">{p.read} Lesezeit</div>
              <h4>{p.title}</h4>
              <span className="j-blog-link">Weiterlesen <Icon name="arrowUpRight" size={15} /></span>
            </article>
          </Reveal>
        ))}
      </div>
      <div style={{ textAlign: "center", marginTop: 44 }}>
        <Button variant="outline" size="lg" onClick={() => go("blog")}>Alle Beiträge ansehen <Icon name="arrow" size={18} /></Button>
      </div>
    </section>
  );
}

Object.assign(window, { WhatMakesIt, Chapters, BookFacts, Blog });