/* Für Familien page + shared PageHero / InterestForm (exported for other pages) */

/* ---- reusable interior page hero ---- */
function PageHero({ crumb, eyebrow, title, lead, children }) {
  return (
    <section className="page-hero has-rays">
      <div className="rays" style={{ "--ray-y": "0%", "--ray-opacity": ".045" }} aria-hidden="true"></div>
      <div className="container">
        <Reveal>
          <div className="breadcrumb"><a href="#/">Start</a> · {crumb}</div>
          {eyebrow && <span className="hero-eyebrow"><span className="dot"></span><span>{eyebrow}</span></span>}
          <h1 style={{ marginTop: ".5rem" }}>{title}</h1>
          {lead && <p className="lead">{lead}</p>}
          {children}
        </Reveal>
      </div>
    </section>
  );
}

/* ---- reusable interest / contact form ---- */
function InterestForm({ id = "interesse", title, lead, reasons, eyebrow = "Anfrage" }) {
  const opts = reasons || ["Familie", "Kooperation", "Weiterbildung", "Presse"];
  const [reason, setReason] = useState(opts[0]);
  const [sent, setSent] = useState(false);
  return (
    <div className="form-card" id={id}>
      {eyebrow && <span className="eyebrow">{eyebrow}</span>}
      <h2 style={{ fontSize: "clamp(1.6rem,2.8vw,2.2rem)" }}>{title}</h2>
      {lead && <p className="lead" style={{ marginTop: ".6rem", marginBottom: "1.6rem" }}>{lead}</p>}
      {sent ? (
        <div className="note-band" style={{ borderLeftColor: "var(--olive)", marginTop: "1rem" }}>
          <span className="nb-ic" aria-hidden="true">✓</span>
          <div>
            <h3>Danke für deine Nachricht!</h3>
            <p>Wir melden uns persönlich bei dir. (Demo-Formular – es wird nichts versendet.)</p>
          </div>
        </div>
      ) : (
        <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
          <div className="field">
            <label>Mein Anliegen</label>
            <div className="seg-choice" role="radiogroup" aria-label="Anliegen">
              {opts.map((o) => (
                <button type="button" key={o} role="radio" aria-checked={reason === o}
                  className={`opt ${reason === o ? "active" : ""}`} onClick={() => setReason(o)}>
                  <span className="dot"></span>{o}
                </button>
              ))}
            </div>
          </div>
          <div className="field-row">
            <div className="field"><label htmlFor={`${id}-name`}>Name</label><input id={`${id}-name`} type="text" placeholder="Vor- und Nachname" required /></div>
            <div className="field"><label htmlFor={`${id}-mail`}>E-Mail</label><input id={`${id}-mail`} type="email" placeholder="name@beispiel.de" required /></div>
          </div>
          <div className="field"><label htmlFor={`${id}-msg`}>Nachricht</label><textarea id={`${id}-msg`} placeholder="Worum geht es? Erzähl uns kurz von eurer Situation." required></textarea></div>
          <label className="form-consent">
            <input type="checkbox" required />
            <span>Ich bin einverstanden, dass meine Angaben zur Bearbeitung der Anfrage verarbeitet werden. Es gilt die Datenschutzerklärung.</span>
          </label>
          <button className="btn btn--primary btn--lg" type="submit" style={{ width: "100%" }}>Absenden <Arrow /></button>
        </form>
      )}
    </div>
  );
}

function FamilienPage() {
  return (
    <main className="page-enter">
      <PageHero
        crumb="Für Familien"
        eyebrow="Für Familien · Wege auf die Farm"
        title="Ein Lernort, an dem dein Kind wirklich gebraucht wird"
        lead="Auf der Farm übernehmen Jugendliche echte Verantwortung in einer Gemeinschaft. Hier erfahrt ihr, für wen der Lernort gedacht ist, wie ein Tag aussieht und welche Wege auf die Farm führen."
      >
        <div className="hero-ctas">
          <a className="btn btn--primary btn--lg" href="#interesse">Interesse anmelden <Arrow /></a>
          <a className="btn btn--ghost btn--lg" href="#infoabende">Infoabend-Termine</a>
        </div>
      </PageHero>

      {/* für wen */}
      <section className="section section--tight">
        <div className="container">
          <SecHead eyebrow="Für wen" title="Für wen der Lernort gedacht ist" />
          <div className="who-grid">
            {window.SITE.forWhom.map((w, i) => (
              <Reveal key={w.t} delay={String((i % 3) + 1)}>
                <div className="who-card">
                  <div className="wc-mark" aria-hidden="true">{String(i + 1)}</div>
                  <h3>{w.t}</h3>
                  <p>{w.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* tagesablauf */}
      <section className="section section--sage has-rays">
        <div className="rays rays--sage" style={{ "--ray-opacity": ".03", "--ray-x": "80%" }} aria-hidden="true"></div>
        <div className="container">
          <div className="split-2">
            <Reveal>
              <div>
                <span className="eyebrow">Ein Tag auf der Farm</span>
                <h2 style={{ fontSize: "clamp(1.9rem,3.4vw,2.7rem)" }}>Wie ein Tag auf der Farm aussieht</h2>
                <p className="lead" style={{ marginTop: "1rem" }}>
                  Arbeiten, lernen, gemeinsam essen und reflektieren: Ein rhythmisierter Tag verbindet
                  praktische Arbeit mit fachlichem Lernen. Kein Stundenplan an der Tafel, sondern eine
                  Farm, die gelebt werden will.
                </p>
                <div className="timeline" style={{ marginTop: "1.8rem" }}>
                  {window.SITE.daySchedule.map((d) => (
                    <div className="tl-row" key={d.time}>
                      <div className="tl-time">{d.time}</div>
                      <div className="tl-body"><h4>{d.t}</h4><p>{d.d}</p></div>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
            <Reveal delay="2">
              <div style={{ position: "sticky", top: 100 }}>
                <Ph motif="Tagesablauf auf der Farm: Arbeit & Gemeinschaft" tone="ph--olive" ratio="3/4" />
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* drei wege */}
      <section className="section">
        <div className="container">
          <SecHead eyebrow="Drei Wege" title="Die drei Wege auf die Farm" center>
            Ob auf Zeit, dauerhaft oder international: Es gibt mehr als einen Weg, Teil der Community zu werden.
          </SecHead>
          <div className="path-cards">
            {window.SITE.pathways.map((p, i) => (
              <Reveal key={p.key} delay={String((i % 3) + 1)}>
                <div className="path-card">
                  <Ph motif={`${p.tag}: Jugendliche auf der Farm`} tone={p.tone} />
                  <div className="pc-body">
                    <div className="pc-head">
                      <span className="pc-tag">{p.tag}</span>
                      <span className="pc-dur">{p.dur}</span>
                    </div>
                    <h3>{p.t}</h3>
                    <p className="pc-desc">{p.d}</p>
                    <ul>{p.points.map((pt) => <li key={pt}>{pt}</li>)}</ul>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal>
            <div className="note-band" style={{ marginTop: "clamp(28px,3.4vw,44px)" }}>
              <span className="nb-ic" aria-hidden="true">i</span>
              <div>
                <h3>Der schulische Rahmen läuft über den Kooperationspartner</h3>
                <p>Die Montessori Farm ist ein außerschulischer Lernort. Anerkannte Abschlüsse, Prüfungen und die formale Trägerschaft übernimmt unser kooperierender Schulträger – Lernort und Schule greifen dabei eng ineinander.</p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* eltern- und ehemaligenarbeit */}
      <section className="section section--tight">
        <div className="container">
          <div className="split-2 rev">
            <Reveal>
              <Ph motif="Eltern und Ehemalige auf der Farm" tone="ph--sage" ratio="4/3" />
            </Reveal>
            <Reveal delay="2">
              <div>
                <span className="eyebrow">Eltern & Ehemalige</span>
                <h2 style={{ fontSize: "clamp(1.8rem,3.2vw,2.5rem)" }}>Aktive Eltern- und Ehemaligenarbeit</h2>
                <p className="lead" style={{ marginTop: "1rem" }}>
                  Familien gehören dazu. Über Newsletter, Blog und regelmäßige Infoabende bleibt ihr
                  nah am Lernort. Ehemalige kehren als Begleitung zurück und geben weiter, was sie selbst
                  hier gelernt haben.
                </p>
                <div className="grid" style={{ gridTemplateColumns: "1fr 1fr 1fr", gap: 14, marginTop: "1.6rem" }}>
                  {[["Newsletter", "#/aktuelles"], ["Blog", "#/aktuelles"], ["Infoabende", "#infoabende"]].map(([t, h]) => (
                    <a key={t} href={h} className="card card--link" style={{ padding: "18px 20px", textAlign: "center" }}>
                      <b style={{ color: "var(--olive)", fontSize: "1.05rem" }}>{t}</b>
                    </a>
                  ))}
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <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="FAQ" title="Häufige Fragen von Familien" center>
            Was Eltern und Jugendliche am häufigsten wissen möchten.
          </SecHead>
          <Reveal><Faq items={window.SITE.faq} /></Reveal>
        </div>
      </section>

      {/* infoabende */}
      <section className="section" id="infoabende">
        <div className="container">
          <SecHead eyebrow="Termine" title="Infoabende & Hospitationen">
            Lernt die Farm persönlich kennen. Bei einem Infoabend erlebt ihr Community, Tagesablauf und Farm direkt.
          </SecHead>
          <Reveal>
            <div className="date-list" style={{ maxWidth: 820 }}>
              {window.SITE.infoabende.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>
      </section>

      {/* interessenformular */}
      <section className="section section--tight">
        <div className="container" style={{ maxWidth: 820 }}>
          <Reveal>
            <InterestForm
              eyebrow="Interesse"
              title="Interesse anmelden"
              lead="Erzählt uns kurz von eurer Situation – wir melden uns persönlich und finden gemeinsam den passenden Weg auf die Farm."
              reasons={["Hospitation", "Community", "International", "Infoabend"]}
            />
          </Reveal>
        </div>
      </section>

      <CtaBand
        title="Lernt die Farm persönlich kennen"
        text="Der beste Weg, den Lernort zu verstehen, ist ein Besuch. Kommt zum Infoabend oder vereinbart eine Hospitation."
        primary={{ label: "Interesse anmelden", href: "#interesse" }}
        secondary={{ label: "Der Lernort", href: "#/lernort" }}
      />
    </main>
  );
}

/* ---- FAQ accordion (shared) ---- */
function Faq({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div className="faq">
      {items.map((f, i) => (
        <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
          <button className="faq-q" aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
            {f.q}<span className="pm" aria-hidden="true"></span>
          </button>
          <div className="faq-a" style={{ maxHeight: open === i ? "320px" : "0" }}>
            <div className="inner">{f.a}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { FamilienPage, PageHero, InterestForm, Faq });