/* Kontakt page */

const PinIc = () => (
  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 21s7-6.6 7-11a7 7 0 1 0-14 0c0 4.4 7 11 7 11z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/><circle cx="12" cy="10" r="2.4" stroke="currentColor" strokeWidth="1.8"/></svg>
);
const MailIc = () => (
  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2.5" stroke="currentColor" strokeWidth="1.8"/><path d="M4 7l8 6 8-6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
);
const PhoneIc = () => (
  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 4h3l1.6 4-2 1.4a12 12 0 0 0 5 5l1.4-2 4 1.6V18a2 2 0 0 1-2.2 2A15 15 0 0 1 4.9 6.2 2 2 0 0 1 5 4z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>
);

function KontaktPage() {
  const rows = [
    { ic: <PinIc />, label: "Adresse", val: <>Montessori Farm Aulendiebach gGmbH<br />Langgasse 21, 63654 Büdingen-Aulendiebach</> },
    { ic: <MailIc />, label: "E-Mail", val: <a href="mailto:hallo@montessori-buedingen.de">hallo@montessori-buedingen.de</a> },
    { ic: <PhoneIc />, label: "Telefon", val: <a href="tel:+491759506039">+49 175 9506039</a> },
  ];
  return (
    <main className="page-enter">
      <PageHero
        crumb="Kontakt"
        eyebrow="Hallo sagen"
        title="Kontakt aufnehmen"
        lead="Ob Familie, Schule, Weiterbildung oder Presse – schreibt uns, ruft an oder kommt vorbei. Wir freuen uns, von euch zu hören."
      />

      <section className="section section--tight">
        <div className="container">
          <div className="contact-layout">
            <Reveal>
              <InterestForm
                eyebrow="Nachricht"
                title="Schreibt uns"
                lead="Wählt euer Anliegen und erzählt uns kurz, worum es geht."
                reasons={["Familie", "Kooperation", "Weiterbildung", "Presse"]}
                id="kontakt-form"
              />
            </Reveal>
            <Reveal delay="2">
              <div className="contact-cards">
                {rows.map((r) => (
                  <div className="contact-row" key={r.label}>
                    <span className="cr-ic">{r.ic}</span>
                    <div>
                      <div className="cr-label">{r.label}</div>
                      <div className="cr-val">{r.val}</div>
                    </div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* einbettung MZB */}
      <section className="section section--tight">
        <div className="container">
          <Reveal>
            <div className="embed-note">
              <div className="en-logos">
                <span className="chip"><img src="assets/logo-mfa.png" alt="Montessori Farm Aulendiebach" /></span>
                <span className="chip"><img src="assets/logo-mzb.png" alt="Montessori Zentrum Büdingen" /></span>
              </div>
              <p>
                Die Montessori Farm Aulendiebach ist Teil des <b>Montessori Zentrums Büdingen</b> – einem
                gemeinsamen pädagogischen Dach, das die Einrichtungen verbindet und trägt.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      <CtaBand
        title="Lieber persönlich?"
        text="Kommt zu einem unserer Infoabende oder vereinbart eine Hospitation auf der Farm."
        primary={{ label: "Infoabend-Termine", href: "#/familien" }}
        secondary={{ label: "Der Lernort", href: "#/lernort" }}
      />
    </main>
  );
}

Object.assign(window, { KontaktPage });