/* @jsx React.createElement */
const { useEffect: useEffectBuchung, useState: useStateBuchung } = React;

const HS_IFRAME_ID = "123hs-6167b796";
const HS_IFRAME_SRC = "https://orientierungsstark.123hundeschule.de/kalender?embed=1";
const HS_DIRECT_URL = "https://orientierungsstark.123hundeschule.de";

// Fallback content (used if site/content/services.json fails to load).
// The CMS overrides title/duration/tag/paragraphs at runtime; icon,
// featured-flag and ctaTo stay in code because they are visual/structural.
const SERVICE_VISUALS = {
  intensiv:    { icon: "flame",           featured: true,  onRequest: true,  ctaTo: "anfragen" },
  ersttermin:  { icon: "compass",         featured: true,  onRequest: true,  ctaTo: "anfragen" },
  wesenstest:  { icon: "shield-check",    featured: false, onRequest: true,  ctaTo: "anfragen" },
  erstkurs:    { icon: "graduation-cap",  featured: false, onRequest: false, ctaTo: null },
  gruppe:      { icon: "users",           featured: false, onRequest: false, ctaTo: null },
  sozial:      { icon: "heart-handshake", featured: false, onRequest: false, ctaTo: null },
  rudel:       { icon: "footprints",      featured: false, onRequest: false, ctaTo: null },
  trail:       { icon: "search",          featured: false, onRequest: false, ctaTo: null },
};

const SERVICES_FALLBACK = [
  {
    id: "intensiv", icon: "flame",
    title: "Intensivtrainingstage / Intensivtrainingswochenende",
    duration: "4 oder 8 Stunden · über zwei Tage",
    tag: "Beliebt",
    onRequest: true,
    featured: true,
    ctaTo: "anfragen",
    paragraphs: [
      "Nicht online buchbar. Frag bei mir an, und wir finden einen Termin.",
      "Das Intensivtraining zählt zu den beliebtesten Präsenzformaten, da es den entscheidenden Vorteil bietet, sich ausreichend Zeit, Ruhe und gezielte Wiederholungen zu nehmen, um nachhaltige Veränderungen zu ermöglichen. Es geht dabei nicht darum, dass ein einzelner Termin grundsätzlich nicht ausreicht. Vielmehr liegt die Stärke dieses Formats in der bewussten Tiefe der Arbeit.",
      "Über einen Zeitraum von zwei aufeinanderfolgenden Tagen analysieren wir den aktuellen Ist-Zustand umfassend und arbeiten strukturiert sowie praxisorientiert an Verhalten, Führung und alltagstauglichen Lösungen. Die vermittelten Inhalte werden nicht nur verstanden, sondern durch gezielte Wiederholungen gefestigt und verinnerlicht. Genau in diesem Prozess lösen sich häufig Blockaden, die in kürzeren Formaten bestehen bleiben.",
      "Auf dieser fundierten Basis entwickeln wir einen klar definierten Trainingsfahrplan für die weitere Entwicklung, insbesondere bei tief verankerten Verhaltensmustern. Im Paket „Intensivtrainingstage 8 Stunden“ ist eine 60-minütige Online-Sitzung vor dem Termin und eine siebentägige Nachbetreuung via WhatsApp enthalten, um den Transfer in den Alltag zu sichern und offene Fragen zeitnah zu klären.",
      "Das Angebot ist auf einen Hund ausgelegt. Für jeden weiteren Hund erhöht sich der Trainingsaufwand entsprechend.",
    ],
  },
  {
    id: "ersttermin", icon: "compass",
    title: "Ersttermin / Hausbesuch und Einzeltraining",
    duration: "120 Min vor Ort · 90 Min als Hausbesuch",
    tag: "Ersttermin",
    onRequest: true,
    featured: true,
    ctaTo: "anfragen",
    paragraphs: [
      "Nicht online buchbar. Frag bei mir an, und wir finden einen Termin.",
      "Der Analyse- und Starttermin bildet den professionellen Einstieg in meine Arbeit. Es handelt sich dabei nicht um ein reines Kennenlernen, sondern um eine bereits vollwertige, strukturierte Trainingseinheit.",
      "Im Rahmen dieses Termins wird der aktuelle Ist-Zustand des Mensch-Hund-Teams umfassend und differenziert analysiert. Verhaltensweisen, Dynamiken, bestehende Strukturen sowie emotionale Ebenen werden klar eingeordnet und verständlich erläutert. Ziel ist es, Zusammenhänge transparent zu machen und ein fundiertes Verständnis für die aktuelle Situation zu schaffen.",
      "Auf Basis dieser Analyse wird eine klar strukturierte und individuell angepasste Handlungsanleitung für die nächsten Schritte erarbeitet. Der Termin eignet sich sowohl für Teams, die am Anfang stehen und Orientierung suchen, als auch für Menschen, die wiederkehrende Problematiken endlich nachhaltig verstehen und verändern möchten.",
      "Bitte beachte, dass im Analyse- und Starttermin keine Nachbetreuung enthalten ist. Eine weiterführende Begleitung erfolgt über separat buchbare Folgetermine.",
    ],
  },
  {
    id: "wesenstest", icon: "shield-check",
    title: "Wesenstest nach Paragraph 7a",
    duration: "Vor Ort · individuell",
    tag: "Anerkannt",
    onRequest: true,
    ctaTo: "anfragen",
    paragraphs: [
      "Nicht online buchbar. Frag bei mir an.",
      "Der Wesenstest dient der Einschätzung des Verhaltens und der Alltagstauglichkeit eines Hundes in unterschiedlichen Situationen. Das Sozialverhalten, die Reaktionsfähigkeit sowie den Umgang mit Umweltreizen wird objektiv beurteilt. Bei der Anschaffung eines im Thurgau auf der Rasseliste aufgeführten Hundes ist dies obligatorisch.",
      "Während des Tests werden verschiedene Alltagssituationen nachgestellt. Dazu gehören Begegnungen mit Menschen und Hunden, optische und akustische Reize sowie Situationen, in denen der Hund Ruhe, Gelassenheit und Führbarkeit zeigen soll. Der Fokus liegt dabei nicht auf Perfektion, sondern auf einem kontrollierbaren und sozialverträglichen Verhalten des Hundes.",
      "Ein Wesenstest bietet Hundehaltern eine wertvolle Einschätzung über den Ausbildungsstand, die Belastbarkeit und das Verhalten ihres Hundes im Alltag. Gleichzeitig schafft er Sicherheit im Zusammenleben zwischen Menschen, Hund und Umwelt.",
      "Der Test wird in ruhiger und fairer Atmosphäre durchgeführt, angepasst an Alter, Ausbildungsstand und individuelle Voraussetzungen des Hundes. Eine respektvolle und fachkundige Begleitung von Menschen und Hund steht dabei stets im Mittelpunkt.",
      "Dieser Wesenstest ist vom Veterinäramt Thurgau anerkannt.",
    ],
  },
  {
    id: "erstkurs", icon: "graduation-cap",
    title: "Obligatorischer Kurs für Ersthundehalter",
    duration: "1 Einzeltraining 90 Min · 9 Gruppentrainings 90 Min · max. 5 Teams",
    tag: "Paragraph 7a",
    paragraphs: [
      "Seit dem 1. April 2024 ist es für Ersthundehalter obligatorisch, den Hundeerziehungskurs gemäss Paragraph 7a zu absolvieren und innert des ersten Jahres bei der Gemeinde einzureichen.",
      "Der Kurs vermittelt wichtige Grundlagen für einen sicheren, verständnisvollen und harmonischen Alltag mit dem Hund. Inhalte sind unter anderem Leinenführigkeit, Grundgehorsam, Raumverwaltung, Regeln, Lob und Grenzen sowie Alltagstraining.",
      "Der Kurs umfasst insgesamt 10 Lektionen: 1 Einzeltraining à 90 Minuten (muss während der Kurslaufzeit absolviert werden) und 9 Gruppentrainings à 90 Minuten.",
      "Die Gruppengrösse beträgt maximal 5 Mensch-Hund-Teams, um eine individuelle Betreuung zu gewährleisten.",
    ],
  },
  {
    id: "gruppe", icon: "users",
    title: "Alltagstraining",
    duration: "60 Min wöchentlich · 90 Min alle 2 Wochen · Raum Amriswil, Romanshorn",
    tag: "Wiederkehrend",
    paragraphs: [
      "Eine selbstständige Einbuchung ist nicht möglich. Zuerst ist ein Kennenlernen über ein Einzeltraining erforderlich.",
      "Im Alltagstraining arbeiten wir in kleinen, ruhigen Einheiten gezielt an Orientierung, alltagsrelevanten Themen und einer klaren, sicheren Führung. Inhalte werden vertieft und in unterschiedlichen Situationen angewendet.",
      "Dank der bewusst klein gehaltenen Gruppengrösse von maximal sechs Mensch-Hund-Teams ist es möglich, individuell auf jedes Team einzugehen, persönliches Feedback zu geben und die Trainingsreize kontrolliert zu gestalten. So entsteht ein lernförderndes Umfeld, in dem alle Teilnehmenden nachhaltig profitieren können.",
      "Dieses Format eignet sich besonders für Halterinnen und Halter, die ihre Führungskompetenz im Alltag stärken und in realen Situationen weiterentwickeln möchten.",
      "Das Training findet an wechselnden Orten im Raum Amriswil und Romanshorn statt. Der jeweilige Treffpunkt wird vorab per WhatsApp, SMS oder E-Mail bekannt gegeben.",
    ],
  },
  {
    id: "sozial", icon: "heart-handshake",
    title: "Sozialkontaktstunde",
    duration: "120 Min Freilauf · max. 6–7 Hunde · Raum Amriswil, Romanshorn",
    tag: "Begegnung",
    paragraphs: [
      "In meiner Sozialkontaktstunde biete ich deinem Hund die Möglichkeit, in einem geschützten und professionell begleiteten Rahmen den Umgang mit Artgenossen zu erlernen und zu festigen. Gleichzeitig erhältst du als Halter:in die wertvolle Gelegenheit, deinen Hund besser zu lesen und zu erkennen, in welchen Situationen ein Eingreifen sinnvoll und notwendig ist und was man auch mal laufen lassen kann.",
      "Die Hunde dürfen miteinander in Kontakt treten, sich frei bewegen und voneinander lernen. Dabei lege ich grossen Wert auf eine kontrollierte und strukturierte Durchführung. Gemeinsam beobachten wir jede Interaktion aufmerksam und greifen bei Bedarf gezielt und angemessen ein.",
      "Ein besonderer Fokus liegt auf dem Erlernen und Verstehen der Körpersprache unserer Hunde, denn sie kommunizieren überwiegend über feine körpersprachliche Signale sowie über ihre Sinne und eine klare „Lass das“-Kommunikation. Dein Hund lernt dabei, bewusst zu kommunizieren und die Signale anderer Hunde richtig zu deuten.",
    ],
  },
  {
    id: "rudel", icon: "footprints",
    title: "Rudelspaziergang",
    duration: "Social Walk · max. 6 Teams · Raum Amriswil, Romanshorn",
    tag: "Spaziergang",
    paragraphs: [
      "Der Social Walk ist ein geführter Spaziergang in der Gruppe, die aus maximal sechs Teams besteht. Hunde und Halter:innen sind dabei gemeinsam unterwegs, ruhig und strukturiert. Ziel ist es, den Hunden kontrollierte soziale Erfahrungen zu ermöglichen, ohne direkten Kontakt aufnehmen zu müssen.",
      "Während des Spaziergangs lernen sich die Hunde über ihre Sinne kennen. Sie nehmen einander olfaktorisch (Geruch), visuell (Sehen) und akustisch (Hören) wahr, ohne dabei in direkten, körperlichen Kontakt zu gehen. Ein Social Walk bietet einen sicheren Rahmen, um Begegnungssituationen stressfrei zu üben und das Vertrauen zwischen Mensch und Hund zu stärken.",
      "Für wen ist der Social Walk geeignet? Für alle Hunde, ob jung oder alt, unsicher oder temperamentvoll, ob Hunde mit Verhaltensproblemen oder einfach solche, die nett sind. Gemeinsam schaffen wir positive Erfahrungen und arbeiten weiter daran für souveräne Begegnungen im Alltag.",
    ],
  },
  {
    id: "trail", icon: "search",
    title: "Personensuche (Mantrailing)",
    duration: "1× monatlich · wechselnde Umgebungen",
    tag: "Auslastung",
    paragraphs: [
      "Eine selbstständige Einbuchung ist nicht möglich. Zuerst ist ein Kennenlernen über ein Einzeltraining erforderlich.",
      "Bei der Personensuche, auch bekannt als Mantrailing, steht die artgerechte Auslastung sowie die sinnvolle mentale und körperliche Beschäftigung des Hundes im Vordergrund. Die Nasenarbeit zählt zu den natürlichsten und beliebtesten Tätigkeiten unserer Hunde, nahezu jeder Hund zeigt hierbei grosse Motivation und Freude.",
      "Beim Mantrailing lernt der Hund, der individuellen Spur einer bestimmten Person zu folgen. Dies fördert nicht nur die Konzentration und das Selbstvertrauen, sondern stärkt auch die Bindung zwischen Mensch und Hund.",
      "Unsere Mantrailing-Einheiten finden einmal im Monat in abwechslungsreichen Umgebungen statt. Dabei legen wir grossen Wert auf eine entspannte, unterstützende Atmosphäre, in der jedes Mensch-Hund-Team individuell begleitet wird.",
      "Dieses Angebot richtet sich an alle, die Freude an gemeinsamer Beschäftigung haben, unabhängig von Vorerfahrung, Alter oder Rasse des Hundes. Egal ob Einsteiger:in oder Fortgeschritten, jeder ist herzlich willkommen.",
    ],
  },
];

function Buchung({ go }) {
  const [empty, setEmpty] = useStateBuchung(false);
  const [open, setOpen] = useStateBuchung("intensiv");
  const c = window.cms || ((p, fb) => fb);

  // Merge CMS overrides into the fallback list, preserving visual flags from
  // SERVICE_VISUALS. CMS provides id/title/duration/tag/paragraphs; visuals
  // come from code.
  const cmsItems = c("services.items", null);
  const baseItems = Array.isArray(cmsItems) && cmsItems.length ? cmsItems : SERVICES_FALLBACK;
  const services = baseItems.map((s) => {
    const v = SERVICE_VISUALS[s.id] || {};
    return Object.assign({}, s, v);
  });
  const servicesIntro = c("services.intro", "Vom strukturierten Ersttermin über Intensivtrainingstage bis zu Gruppentraining, Rudelspaziergängen, Mantrailing, und mehr findet ihr in meinem Buchungssystem.");

  // Auto-resize the iframe based on postMessage from the 123Hundeschule embed.
  // The embed reports height: 0 when no group sessions are published yet —
  // ignore tiny values and surface a clean fallback instead of an empty box.
  useEffectBuchung(() => {
    const onMsg = (e) => {
      if (e.data && e.data.type === "123hundeschule-resize") {
        const f = document.getElementById(HS_IFRAME_ID);
        if (f && e.source === f.contentWindow) {
          if (e.data.height >= 240) {
            f.style.height = e.data.height + "px";
            setEmpty(false);
          } else {
            setEmpty(true);
          }
        }
      }
    };
    window.addEventListener("message", onMsg);
    return () => window.removeEventListener("message", onMsg);
  }, []);

  return (
    <React.Fragment>
      <PageHero
        eyebrow="Buchungen und Angebote"
        title="Meine Arbeit beginnt dort, wo andere nicht weiterkommen."
      />

      {/* INTRO + BUTTON ZUM BUCHUNGSSYSTEM */}
      <section style={{ background: "var(--os-white)" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto", padding: "72px 32px 24px" }}>
          <p style={{ fontFamily: "var(--font-serif)", fontSize: 19, lineHeight: 1.7, color: "var(--fg-1)", margin: 0, maxWidth: "60ch", textWrap: "pretty" }}>
            {servicesIntro}
          </p>
          <div style={{ marginTop: 32, display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
            <a href={HS_DIRECT_URL} target="_blank" rel="noopener" className="os-cta-red" style={{
              background: "var(--os-red-485)", color: "var(--os-white)", textDecoration: "none",
              fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14,
              padding: "14px 24px", borderRadius: 2, letterSpacing: "0.04em", textTransform: "uppercase",
              display: "inline-flex", alignItems: "center", gap: 10,
            }}>
              Zum Buchungssystem <i data-lucide="external-link" style={{ width: 14, height: 14 }}></i>
            </a>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--fg-3)" }}>
              Termine, Verfügbarkeiten und Preise live auf 123Hundeschule.
            </span>
          </div>
        </div>
      </section>

      {/* 4-IMAGE GALLERY STRIP */}
      <section style={{ background: "var(--os-white)" }}>
        <div style={{ maxWidth: 1240, margin: "0 auto", padding: "32px 32px 16px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
            {[
              { src: "assets/fotos-corinne/buchung-1.jpg", alt: "Training mit Hund", pos: "center 30%" },
              { src: "assets/fotos-corinne/buchung-2.jpg", alt: "Training mit Hund", pos: "center 30%" },
              { src: "assets/fotos-corinne/buchung-3.jpg", alt: "Training mit Hund", pos: "center 50%" },
              { src: "assets/fotos-corinne/buchung-4.jpg", alt: "Hund mit Maulkorb im Training", pos: "center 42%" },
            ].map((it, i) => (
              <div key={i} className="os-photo-hover os-image-reveal" style={{ width: "100%" }}>
                <img src={it.src} alt={it.alt} style={{ width: "100%", height: 280, objectFit: "cover", objectPosition: it.pos, display: "block" }} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* KALENDER EMBED */}
      <section style={{ background: "var(--os-white)" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto", padding: "32px 32px 24px" }}>
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 16, marginBottom: 24 }}>
            <div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--os-red-485)" }}>Live aus 123Hundeschule</div>
              <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 32, lineHeight: 1.15, letterSpacing: "-0.01em", margin: "8px 0 0", color: "var(--os-black)" }}>
                Termin-Kalender.
              </h2>
            </div>
          </div>
        </div>
      </section>

      <section style={{ background: "var(--os-white)" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto", padding: "0 32px 64px" }}>
          {empty && (
            <div style={{
              border: "1px solid var(--border-1)", background: "var(--os-paper)",
              padding: "48px 40px", marginBottom: 24,
              borderLeft: "3px solid var(--os-red-485)",
            }}>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--os-red-485)" }}>
                Kalender lädt nicht
              </div>
              <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 26, lineHeight: 1.2, letterSpacing: "-0.01em", margin: "10px 0 0", color: "var(--os-black)" }}>
                Schreib mir gerne direkt.
              </h3>
              <p style={{ fontFamily: "var(--font-serif)", fontSize: 17, lineHeight: 1.7, color: "var(--fg-2)", margin: "16px 0 24px", maxWidth: "60ch" }}>
                Falls hier nichts erscheint, melde dich gerne per Mail, Telefon oder über das Kontaktformular. Ich antworte zeitnah.
              </p>
              <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
                <a href="#" onClick={(e) => { e.preventDefault(); go && go("anfragen"); }} className="os-cta-red" style={{
                  background: "var(--os-red-485)", color: "var(--os-white)", textDecoration: "none",
                  fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14,
                  padding: "13px 22px", borderRadius: 2, letterSpacing: "0.04em", textTransform: "uppercase",
                  display: "inline-flex", alignItems: "center", gap: 10,
                }}>Anfrage stellen <i data-lucide="arrow-right" style={{ width: 14, height: 14 }}></i></a>
                <a href="tel:+41798436183" className="os-link-draw is-persistent" style={{
                  display: "inline-flex", alignItems: "center", gap: 10,
                  color: "var(--os-black)", fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14,
                }}>
                  <i data-lucide="phone" style={{ width: 14, height: 14, color: "var(--os-red-485)" }}></i>
                  079 / 843 61 83
                </a>
              </div>
            </div>
          )}
          <div style={{ border: "1px solid var(--border-1)", background: "var(--os-paper)", overflow: "hidden", display: empty ? "none" : "block" }}>
            <iframe
              id={HS_IFRAME_ID}
              title="123Hundeschule Buchungskalender"
              src={HS_IFRAME_SRC}
              width="100%"
              height="800"
              frameBorder="0"
              sandbox="allow-forms allow-scripts allow-popups allow-top-navigation-by-user-activation allow-same-origin"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
              style={{ display: "block", width: "100%", border: 0, minHeight: 800, background: "var(--os-paper)" }}
            />
          </div>
        </div>
      </section>

      {/* ANGEBOTE — ACCORDION */}
      <section style={{ background: "var(--os-paper-2)", borderTop: "1px solid var(--border-1)" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto", padding: "96px 32px 112px" }}>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--os-red-485)" }}>
            Angebote im Detail
          </div>
          <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 40, lineHeight: 1.15, letterSpacing: "-0.01em", margin: "12px 0 0", color: "var(--os-black)" }}>
            Was ich unter anderem anbiete.
          </h2>
          <div style={{ height: 2, width: 56, background: "var(--os-red-485)", margin: "24px 0 48px" }} />

          <div style={{ display: "flex", flexDirection: "column", gap: 0, background: "var(--os-white)", border: "1px solid var(--border-1)" }}>
            {services.map((s, idx) => {
              const isOpen = open === s.id;
              return (
                <article key={s.id} style={{
                  borderTop: idx === 0 ? "none" : "1px solid var(--border-1)",
                  background: isOpen ? "var(--os-paper)" : "transparent",
                  transition: "background 220ms var(--ease-standard)",
                }}>
                  <button onClick={() => setOpen(isOpen ? null : s.id)} style={{
                    width: "100%", textAlign: "left", padding: "32px 24px",
                    background: "transparent", border: 0, cursor: "pointer",
                    display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 32, alignItems: "center",
                    fontFamily: "inherit",
                  }}>
                    <div style={{
                      width: 56, height: 56, borderRadius: 2,
                      background: s.featured ? "var(--os-red-485)" : "var(--os-warmgray-8)",
                      color: "var(--os-white)", display: "flex", alignItems: "center", justifyContent: "center",
                    }}>
                      <i data-lucide={s.icon} style={{ width: 24, height: 24, strokeWidth: 1.75 }}></i>
                    </div>
                    <div>
                      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 6 }}>
                        <span style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: s.featured ? "var(--os-red-485)" : "var(--fg-3)" }}>{s.tag}</span>
                        <span style={{ width: 4, height: 4, background: "var(--border-2)", borderRadius: "50%" }} />
                        <span style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--fg-2)" }}>{s.duration}</span>
                      </div>
                      <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 24, color: "var(--os-black)", letterSpacing: "-0.01em" }}>{s.title}</div>
                    </div>
                    <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 15, color: s.onRequest ? "var(--os-black)" : "transparent", textAlign: "right", whiteSpace: "nowrap" }}>
                      {s.onRequest ? "auf Anfrage" : ""}
                    </div>
                    <div style={{ width: 32, height: 32, border: "1px solid var(--os-black)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                      <span className={"os-icon-plusminus" + (isOpen ? " is-open" : "")} aria-hidden="true" />
                    </div>
                  </button>
                  <div className={"os-accordion-body" + (isOpen ? " is-open" : "")}>
                    <div className="inner">
                      <div style={{ padding: "0 24px 36px 112px" }}>
                        {s.paragraphs.map((p, i) => (
                          <p key={i} style={{ fontFamily: "var(--font-serif)", fontSize: 17, lineHeight: 1.75, color: "var(--fg-1)", margin: "0 0 18px", maxWidth: "70ch" }}>
                            {p}
                          </p>
                        ))}
                        {s.ctaTo && (
                          <button onClick={() => go && go(s.ctaTo)} className="os-cta-black" style={{
                            marginTop: 14, background: "var(--os-warmgray-8)", color: "var(--os-white)", border: 0,
                            padding: "14px 24px", fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14,
                            letterSpacing: "0.04em", textTransform: "uppercase", cursor: "pointer", borderRadius: 2,
                            display: "inline-flex", alignItems: "center", gap: 10,
                          }}>Anfrage stellen <i data-lucide="arrow-right" style={{ width: 14, height: 14 }}></i></button>
                        )}
                      </div>
                    </div>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.Buchung = Buchung;
