/* Start page + hero variants */
const { Reveal: R0 } = window; // ensure load order

function HeroContent({ variant }) {
  return null;
}

function HeroText({ align }) {
  return (
    <>
      <div className="hero-eyebrow" style={align === "center" ? { justifyContent: "center" } : null}>
        <span className="dot"></span>
        <span>Außerschulischer Lernort · Erdkinderplan</span>
      </div>
      <h1 style={{ marginTop: ".5rem" }}>
        Ein <span className="script">einzigartiger</span> Lernort,<br />in dem Jugendliche wachsen.
      </h1>
      <p className="lead" style={{ marginTop: "1.2rem" }}>
        <strong>Europaweit einzigartig</strong>, seit <strong>über acht Jahren erprobt</strong>. Hier übernehmen
        Jugendliche in der <strong>dritten Entwicklungsstufe (12–18)</strong> <strong>echte Verantwortung</strong> auf
        der Farm. Komm vorbei, hospitiere und werde Teil der Community.
      </p>
      <div className="hero-ctas">
        <a className="btn btn--primary btn--lg" href="#/familien">Hospitieren <Arrow /></a>
        <a className="btn btn--olive btn--lg" href="#/familien">Teil der Community werden <Arrow /></a>
      </div>
      <div className="hero-secondary">
        <a className="link-arrow" href="#/kooperation">Für Schulen: Kooperieren <Arrow /></a>
      </div>
    </>
  );
}

function Hero({ variant }) {
  if (variant === "center") {
    return (
      <section className="hero hero--center has-rays">
        <div className="rays" style={{ "--ray-y": "8%", "--ray-opacity": ".05" }} aria-hidden="true"></div>
        <div className="hero-bg" aria-hidden="true"><Ph motif="Fachwerkhof & Bauernhof-Ambiente" tone="ph--sage" /></div>
        <div className="container hero-inner">
          <Reveal><HeroText align="center" /></Reveal>
        </div>
      </section>
    );
  }
  if (variant === "editorial") {
    return (
      <section className="hero hero--editorial has-rays">
        <div className="rays" style={{ "--ray-y": "0%", "--ray-opacity": ".04" }} aria-hidden="true"></div>
        <div className="container hero-top">
          <Reveal>
            <div className="hero-eyebrow"><span className="dot"></span><span>Außerschulischer Lernort · Erdkinderplan</span></div>
            <h1 style={{ marginTop: ".6rem" }}>
              Lernen, das im <span className="script">Leben</span> wurzelt.
            </h1>
            <div className="hero-meta">
              <p className="lead">
                Ein europaweit einzigartiger Montessori-Lernort nach dem Erdkinderplan, seit über
                acht Jahren erprobt. Hospitiere oder werde Teil der Community.
              </p>
              <div className="hero-ctas" style={{ marginTop: 0 }}>
                <a className="btn btn--primary btn--lg" href="#/familien">Hospitieren <Arrow /></a>
                <a className="btn btn--olive btn--lg" href="#/familien">Teil der Community werden <Arrow /></a>
              </div>
            </div>
            <div className="hero-secondary"><a className="link-arrow" href="#/kooperation">Für Schulen: Kooperieren <Arrow /></a></div>
          </Reveal>
        </div>
        <div className="container" style={{ paddingBottom: "clamp(40px,6vw,90px)" }}>
          <Reveal delay="2">
            <div className="hero-strip">
              <Ph motif="Fachwerkhof & Bauernhof-Ambiente" tone="ph--sage" />
              <Ph motif="Jugendliche bei der Gartenarbeit" tone="ph--olive" />
              <Ph motif="Werkstatt & Atelier" tone="ph--bordeaux" />
            </div>
          </Reveal>
        </div>
      </section>
    );
  }
  // default: split
  return (
    <section className="hero hero--split has-rays">
      <div className="rays" style={{ "--ray-x": "82%", "--ray-y": "6%", "--ray-opacity": ".05" }} aria-hidden="true"></div>
      <div className="container hero-inner">
        <Reveal><div><HeroText /></div></Reveal>
        <Reveal delay="2">
          <div className="hero-collage">
            <Ph motif="Jugendliche bei Garten- und Tierarbeit" tone="ph--sage" className="ph-main" />
            <Ph motif="Lagerfeuer & Musik" tone="ph--bordeaux" className="ph-float" />
            <div className="badge">
              <span className="num">8+</span>
              <span className="lbl">Jahre gelebter Erdkinderplan</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function JoinBand() {
  return (
    <section className="section section--tight">
      <div className="container">
        <SecHead center eyebrow="Dabei sein" title="Zwei Wege, den Lernort kennenzulernen">
          Ob für einen ersten Einblick oder dauerhaft: Auf der Farm ist Platz, mitzuarbeiten und mitzugestalten.
        </SecHead>
        <div className="join-cards">
          <Reveal>
            <a className="join-card jc-1" href="#/familien">
              <Ph motif="Gemeinsames Lernen in Kleingruppen" tone="ph--olive" />
              <span className="veil"></span>
              <span className="kicker">Hospitieren</span>
              <h3>Einen Einblick gewinnen</h3>
              <p>Probeweise einen Tag am Lernort verbringen, die Community erleben und herausfinden, ob die Farm passt.</p>
              <span className="link-arrow">Mehr für Familien <Arrow /></span>
            </a>
          </Reveal>
          <Reveal delay="2">
            <a className="join-card jc-2" href="#/familien">
              <Ph motif="Jugendliche bei Garten- und Tierarbeit" tone="ph--bordeaux" />
              <span className="veil"></span>
              <span className="kicker">Teil der Community werden</span>
              <h3>Dauerhaft mitgestalten</h3>
              <p>Als Jugendliche:r dauerhaft auf der Farm mitarbeiten, einen Bereich übernehmen und Verantwortung tragen.</p>
              <span className="link-arrow">Mehr für Familien <Arrow /></span>
            </a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Pillars() {
  return (
    <section className="section section--sage has-rays">
      <div className="rays rays--sage" style={{ "--ray-opacity": ".03" }} aria-hidden="true"></div>
      <div className="container">
        <SecHead eyebrow="Die vier Säulen" title="Worauf der Lernort gebaut ist" />
        <div className="pillars">
          {window.SITE.pillars.map((p, i) => (
            <Reveal key={p.t} delay={String((i % 4) + 1)}>
              <div className="pillar">
                <div className="idx">{String(i + 1).padStart(2, "0")}</div>
                <h3>{p.t}</h3>
                <p>{p.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ErdkinderIntro() {
  return (
    <section className="section">
      <div className="container">
        <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", alignItems: "center", gap: "clamp(28px,4vw,64px)" }}>
          <Reveal>
            <Ph motif="Jugendliche im Gespräch auf der Farm" tone="ph--olive" ratio="4/3" />
          </Reveal>
          <Reveal delay="2">
            <div>
              <span className="eyebrow">Der Erdkinderplan</span>
              <h2 style={{ fontSize: "clamp(1.8rem,3.2vw,2.6rem)" }}>Maria Montessoris Idee für das Jugendalter</h2>
              <p className="lead" style={{ marginTop: "1rem" }}>
                Der Erdkinderplan beschreibt einen Lernort, an dem Jugendliche durch echte Arbeit
                in einer Gemeinschaft erwachsen werden. Produktion, Verantwortung und gelebte
                Selbstständigkeit stehen im Mittelpunkt, nicht der Frontalunterricht.
              </p>
              <div style={{ marginTop: "1.4rem" }}>
                <a className="link-arrow" href="#/lernort">Den Lernort entdecken <Arrow /></a>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function FilmSection({ deep }) {
  return (
    <section className="section section--olive film has-rays" id="film">
      <div className="rays" aria-hidden="true"></div>
      <div className="container">
        <div className="film-grid">
          <Reveal>
            <div className="film-frame">
              <iframe src={window.SITE.trailerEmbed} title='Trailer: Das Lernen der Eigenständigkeit'
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
            </div>
          </Reveal>
          <Reveal delay="2">
            <div>
              <span className="film-tag"><span className="rec"></span>Der Lernort im Film</span>
              <h2 style={{ color: "#fff", marginTop: ".5rem" }}>
                Das Lernen der Eigenständigkeit
              </h2>
              <p className="lead" style={{ color: "rgba(255,255,255,.85)", marginTop: "1rem" }}>
                Der Dokumentarfilm begleitet die Jugendlichen über ein Jahr und macht den
                Erdkinderplan im Alltag der Farm erlebbar.
              </p>
              <div className="hero-ctas">
                <a className="btn btn--light btn--lg" href={window.SITE.filmInfoUrl} target="_blank" rel="noopener">Mehr zum Film <Arrow /></a>
                {!deep && <a className="btn btn--ghost btn--lg" href="#/lernort" style={{ color: "#fff", borderColor: "rgba(255,255,255,.4)" }}>Im Lernort vertiefen</a>}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Highlights() {
  const items = window.SITE.highlights;
  const loop = [...items, ...items];
  return (
    <section className="highlights" aria-label="Besonderheiten">
      <div className="marquee">
        {loop.map((h, i) => (
          <span className="item" key={i}><span className="star">✦</span>{h}</span>
        ))}
      </div>
    </section>
  );
}

function Stats() {
  return (
    <section className="section">
      <div className="container">
        <SecHead center eyebrow="In Zahlen" title="Ein gewachsener Lernort" />
        <div className="stats">
          {window.SITE.stats.map((s, i) => (
            <Reveal key={i} delay={String((i % 4) + 1)}>
              <div className={`stat ${s.text && s.text.length > 5 ? "stat--word" : ""}`}>
                <Counter to={s.to} suffix={s.suffix} text={s.text} />
                <div className="lbl">{s.lbl}</div>
                <div className="sub">{s.sub}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Termine() {
  const dates = window.SITE.infoabende;
  return (
    <section className="section section--sage has-rays">
      <div className="rays rays--sage" style={{ "--ray-opacity": ".03", "--ray-x": "18%" }} aria-hidden="true"></div>
      <div className="container">
        <div className="grid" style={{ gridTemplateColumns: "0.85fr 1.15fr", alignItems: "center", gap: "clamp(28px,4vw,60px)" }}>
          <Reveal>
            <div>
              <span className="eyebrow">Termine</span>
              <h2 style={{ fontSize: "clamp(1.9rem,3.4vw,2.7rem)" }}>Nächste Termine</h2>
              <p className="lead" style={{ marginTop: "1rem" }}>
                Lernt die Farm persönlich kennen: Community, Tagesablauf und Farm an einem Abend.
                Wir freuen uns auf euch.
              </p>
              <div className="hero-ctas">
                <a className="btn btn--primary" href="#/familien">Alle Termine & Anmeldung <Arrow /></a>
              </div>
            </div>
          </Reveal>
          <Reveal delay="2">
            <div className="date-list">
              {dates.map((d) => (
                <div className="date-row" key={d.date}>
                  <div className="date-cal">
                    <div className="dc-top">{d.date.split(" ")[1].slice(0, 3)}</div>
                    <div className="dc-day">{d.date.split(".")[0]}</div>
                  </div>
                  <div className="date-info">
                    <div className="di-when">{d.weekday}, {d.date} · {d.time}</div>
                    <div className="di-meta"><span>{d.place}</span></div>
                  </div>
                  <span className="di-note">{d.note}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function EntryTiles() {
  const tiles = [
    { t: "Kooperation", d: "Modelle für Schulen, Schulträger und Weiterbildung.", href: "#/kooperation", motif: "Pädagog:innen im Austausch", tone: "ph--olive" },
    { t: "Aktuelles", d: "Der Blog vom Lernort, laufend aktualisiert.", href: "#/aktuelles", motif: "Lagerfeuer & Musik", tone: "ph--bordeaux" },
  ];
  return (
    <section className="section section--tight">
      <div className="container">
        <div className="entry-tiles entry-tiles--2">
          {tiles.map((t, i) => (
            <Reveal key={t.t} delay={String((i % 3) + 1)}>
              <a className="entry-tile" href={t.href}>
                <Ph motif={t.motif} tone={t.tone} />
                <span className="veil"></span>
                <div className="inner">
                  <h3>{t.t}</h3>
                  <p>{t.d}</p>
                  <span className="link-arrow" style={{ color: "#fff" }}>Mehr erfahren <Arrow /></span>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function BlogTeaser() {
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 18, marginBottom: "clamp(28px,3.5vw,48px)" }}>
          <Reveal>
            <div>
              <span className="eyebrow">Aus dem Lernort</span>
              <h2 style={{ fontSize: "clamp(1.9rem,3.4vw,2.7rem)" }}>Aktuelles von der Farm</h2>
            </div>
          </Reveal>
          <Reveal delay="2"><a className="btn btn--ghost" href="#/aktuelles">Zum Blog <Arrow /></a></Reveal>
        </div>
        <div className="blog-grid">
          {window.SITE.posts.map((p, i) => (
            <Reveal key={i} delay={String((i % 3) + 1)}>
              <a className="post-card" href="#/aktuelles">
                <Ph motif={p.motif} tone={p.bg} />
                <div className="body">
                  <div className="meta"><span className="cat">{p.cat}</span><span>·</span><span>{p.date}</span></div>
                  <h3>{p.t}</h3>
                  <span className="link-arrow more">Weiterlesen <Arrow /></span>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function NewsletterBand() {
  return (
    <section className="section section--tight">
      <div className="container">
        <Reveal>
          <div className="news-band has-rays">
            <div className="rays rays--sage" style={{ "--ray-opacity": ".04", "--ray-x": "85%" }} aria-hidden="true"></div>
            <div style={{ maxWidth: 560, position: "relative", zIndex: 1 }}>
              <span className="eyebrow">Newsletter</span>
              <h2 style={{ fontSize: "clamp(1.8rem,3vw,2.4rem)" }}>Nichts vom Lernort verpassen</h2>
              <p className="lead" style={{ marginTop: ".8rem" }}>
                Infoabende, Hospitationstermine und Geschichten aus der Community, etwa einmal im Monat.
              </p>
              <form className="news-form" onSubmit={(e) => e.preventDefault()}>
                <input type="email" placeholder="E-Mail-Adresse" aria-label="E-Mail-Adresse" />
                <button className="btn btn--primary" type="submit">Anmelden <Arrow /></button>
              </form>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function StartPage({ heroVariant }) {
  return (
    <main className="page-enter">
      <Hero variant={heroVariant} />
      <JoinBand />
      <EntryTiles />
      <Pillars />
      <ErdkinderIntro />
      <FilmSection />
      <Highlights />
      <Stats />
      <Termine />
      <BlogTeaser />
      <NewsletterBand />
    </main>
  );
}

Object.assign(window, { StartPage, FilmSection, Highlights });