// ---- Homepage --------------------------------------------------------

function Hero({ go, data, setData }) {
  return (
    <section style={{ position: "relative", overflow: "hidden" }}>
      <div className="j-hero-glow" />
      <div className="j-wrap j-hero">
        <div className="j-hero-copy">
          <Reveal>
            <div className="j-kicker"><span className="j-kicker-line" /> Mehr als nur ein Schwangerschaftsjournal</div>
          </Reveal>
          <Reveal delay={.06}>
            <h1 style={{ fontFamily: "var(--display)", fontSize: "clamp(42px, 5.6vw, 78px)",
              lineHeight: 1.1, letterSpacing: "-.015em", margin: "20px 0 0", fontWeight: 700 }}>
              Neun Monate,<br /><span style={{ fontStyle: "italic", color: "var(--terracotta)" }}>liebevoll</span> begleitet.
            </h1>
          </Reveal>
          <Reveal delay={.12}>
            <p style={{ fontSize: "clamp(16px,1.4vw,18.5px)", lineHeight: 1.65, color: "var(--ink-soft)",
              maxWidth: 470, marginTop: 24 }}>
              Ein Journal, das deinen Namen trägt und mit deinem Termin mitdenkt. Es bringt Ordnung in
              deine Tage und bewahrt Raum für das, was du fühlst, vom ersten Test bis zum Tag der Geburt.
            </p>
          </Reveal>
          <Reveal delay={.18}>
            <div className="j-hero-name">
              <label>Schreib deinen Namen aufs Cover</label>
              <div className="j-hero-name-row">
                <input value={data.name} maxLength={18} placeholder="z. B. Marie"
                onChange={(e) => setData({ ...data, name: e.target.value })} />
                <Button size="md" onClick={() => go("product")}>Personalisieren</Button>
              </div>
            </div>
          </Reveal>
          <Reveal delay={.24}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 28 }}>
              <Stars value={5} size={17} />
              <span style={{ fontSize: 14, color: "var(--ink-soft)" }}><b style={{ color: "var(--espresso)" }}>4,9</b> von 5, über 2.300 begleitete Schwangerschaften</span>
            </div>
          </Reveal>
        </div>

        <div className="j-hero-art">
          <div className="j-hero-cover-float">
            <JournalCover data={data} />
          </div>
        </div>
      </div>
    </section>);

}

function UspStrip() {
  return (
    <section style={{ borderBlock: "1px solid var(--line)", background: "var(--cream-2)" }}>
      <div className="j-wrap j-usp-strip">
        {USPS.map((u, i) =>
        <div key={i} className="j-usp">
            <span className="j-usp-ico"><Icon name={u.icon} size={22} stroke={1.5} /></span>
            <div>
              <div style={{ fontWeight: 600, fontFamily: "var(--ui)", fontSize: 14.5 }}>{u.title}</div>
              <div style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 2, lineHeight: 1.45 }}>{u.text}</div>
            </div>
          </div>
        )}
      </div>
    </section>);

}

function PersonalizationShowcase({ go, data }) {
  return (
    <section id="how" className="j-wrap" style={{ paddingBlock: "clamp(72px,9vw,130px)", scrollMarginTop: 80 }}>
      <div className="j-show-grid">
        <div style={{ position: "sticky", top: 100, alignSelf: "start" }}>
          <Reveal><JournalCover data={data} /></Reveal>
        </div>
        <div>
          <SectionHead kicker="So funktioniert die Personalisierung"
          title="Ein Buch, das nur dir gehört"
          sub="Vier Angaben genügen. Sie ziehen sich durch das ganze Buch, vom Cover bis zur letzten Wochenseite." />
          <div className="j-field-list">
            {PERSONALIZATION_FIELDS.map((f, i) =>
            <Reveal key={f.key} delay={i * .05}>
                <div className="j-field-card">
                  <span className="j-field-ico"><Icon name={f.icon} size={20} stroke={1.5} /></span>
                  <div>
                    <div style={{ fontFamily: "var(--ui)", fontWeight: 600, fontSize: 16 }}>{f.title}</div>
                    <div style={{ fontSize: 14, color: "var(--ink-soft)", marginTop: 3 }}>{f.affects}</div>
                  </div>
                </div>
              </Reveal>
            )}
          </div>
          <div style={{ marginTop: 32 }}>
            <Button size="lg" onClick={() => go("product")}>Dein Journal gestalten <Icon name="arrow" size={18} /></Button>
          </div>
        </div>
      </div>
    </section>);

}

function Reviews() {
  return (
    <section id="reviews" style={{ background: "var(--cream-2)", borderBlock: "1px solid var(--line)", scrollMarginTop: 80 }}>
      <div className="j-wrap" style={{ paddingBlock: "clamp(72px,9vw,128px)" }}>
        <div style={{ display: "flex", flexWrap: "wrap", alignItems: "flex-end", justifyContent: "space-between", gap: 20 }}>
          <SectionHead kicker="Stimmen werdender Mamas" title="4,9 von 5, aus dem Herzen geschrieben" />
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <Stars value={5} size={20} /><span style={{ fontFamily: "var(--ui)", fontSize: 14, color: "var(--ink-soft)" }}>2.314 Bewertungen</span>
          </div>
        </div>
        <div className="j-reviews">
          {REVIEWS.map((r, i) =>
          <Reveal key={i} delay={i % 4 * .05}>
              <figure className="j-review">
                <Stars value={r.rating} size={15} />
                <blockquote style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 22, lineHeight: 1.28, margin: "16px 0 16px", letterSpacing: "-.005em" }}>
                  „{r.title}"
                </blockquote>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, color: "var(--ink-soft)" }}>{r.body}</p>
                <figcaption style={{ marginTop: 18, display: "flex", alignItems: "center", gap: 10 }}>
                  <span className="j-review-ava">{r.name[0]}</span>
                  <span>
                    <span style={{ fontFamily: "var(--ui)", fontWeight: 600, fontSize: 14 }}>{r.name}</span>
                    {r.verified && <span style={{ display: "block", fontSize: 11.5, color: "var(--green)" }}>Verifizierter Kauf</span>}
                  </span>
                </figcaption>
              </figure>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function FaqAccordion() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="j-wrap" style={{ paddingBlock: "clamp(72px,9vw,128px)", scrollMarginTop: 80 }}>
      <div className="j-faq-grid">
        <div>
          <SectionHead kicker="Gut zu wissen" title="Häufige Fragen" />
          <p style={{ marginTop: 18, color: "var(--ink-soft)", lineHeight: 1.65 }}>
            Noch etwas offen? Schreib uns. Wir sind echte Menschen und antworten meist am selben Tag.
          </p>
        </div>
        <div>
          {FAQ.map((f, i) =>
          <div key={i} className="j-faq-item" onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="j-faq-q">
                <span style={{ fontFamily: "var(--ui)", fontWeight: 600, fontSize: 17 }}>{f.q}</span>
                <span style={{ transform: open === i ? "rotate(180deg)" : "none", transition: "transform .3s", color: "var(--terracotta)" }}>
                  <Icon name="chevronD" size={20} />
                </span>
              </div>
              <div className="j-faq-a" style={{ gridTemplateRows: open === i ? "1fr" : "0fr" }}>
                <div style={{ overflow: "hidden" }}>
                  <p style={{ paddingTop: 12, color: "var(--ink-soft)", lineHeight: 1.65, fontSize: 15.5 }}>{f.a}</p>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function FinalCta({ go, data }) {
  return (
    <section style={{ position: "relative", overflow: "hidden", background: "var(--terracotta)", color: "var(--cream)" }}>
      <div className="j-wrap j-final">
        <div>
          <h2 style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: "clamp(36px,5vw,60px)", lineHeight: 1.1, letterSpacing: "-.01em" }}>
            Ein Buch,<br />das bleibt.
          </h2>
          <p style={{ marginTop: 22, fontSize: 18, lineHeight: 1.65, color: "rgba(255,247,229,.86)", maxWidth: 440 }}>
            Begleite deine Schwangerschaft Woche für Woche und behalte ein Buch, das dir bleibt.
            Ab {eur(PRICE)}, Lieferung in 8 bis 10 Tagen, Versand 4,95 €.
          </p>
          <div style={{ marginTop: 32 }}>
            <Button size="lg" variant="ghost" onClick={() => go("product")} style={{ background: "var(--cream)", color: "var(--espresso)" }}>
              Dein Journal gestalten <Icon name="arrow" size={18} />
            </Button>
          </div>
        </div>
        <div className="j-final-cover">
          <JournalCover data={data} />
        </div>
      </div>
    </section>);

}

function Home({ go, data, setData, openArticle }) {
  return (
    <main>
      <Hero go={go} data={data} setData={setData} />
      <UspStrip />
      <WhatMakesIt />
      <Chapters />
      <PersonalizationShowcase go={go} data={data} />
      <BookFacts />
      <Reviews />
      <Blog go={go} openArticle={openArticle} />
      <FaqAccordion />
      <FinalCta go={go} data={data} />
    </main>);

}

Object.assign(window, { Home });