/* @jsx React.createElement */
const { useState: useStateMW } = React;

function PageHero({ eyebrow, title, lead, image, imageAlt }) {
  return (
    <section style={{ background: "var(--os-paper)", borderBottom: "1px solid var(--border-1)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "72px 32px 80px", display: "grid", gridTemplateColumns: image ? "1.1fr 1fr" : "1fr", gap: 64, alignItems: "center" }}>
        <div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--os-red-485)" }}>{eyebrow}</div>
          <h1 style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: "clamp(36px, 4.6vw, 64px)", lineHeight: 1.08, letterSpacing: "-0.015em", margin: "20px 0 0", color: "var(--os-black)", maxWidth: "16ch" }}>
            {title}
          </h1>
          <div className="os-red-draw" style={{ height: 2, width: 64, background: "var(--os-red-485)", margin: "32px 0 28px" }} />
          {lead && <p style={{ fontFamily: "var(--font-serif)", fontSize: 19, lineHeight: 1.65, color: "var(--fg-2)", margin: 0, maxWidth: "48ch" }}>{lead}</p>}
        </div>
        {image && (
          <div className="os-photo-hover os-image-reveal" style={{ width: "100%" }}>
            <img src={image} alt={imageAlt} style={{ width: "100%", height: 480, objectFit: "cover", objectPosition: "center 50%", display: "block" }} />
          </div>
        )}
      </div>
    </section>
  );
}

function CertGallery() {
  // Certificates and supporting documents shown on /mein-weg. PDF
  // entries carry a `preview` JPG so the card shows a thumbnail
  // (rendered from the first page) instead of a generic file icon.
  // Click opens the file inside an in-page modal instead of a new tab.
  // `srcs` is the array of preview images shown in the modal. For
  // PDFs each page is pre-rendered to a JPG so users can scroll
  // through every page. For simple JPGs the only entry is the file
  // itself. The card cover always uses srcs[0].
  const items = [
    { type: "pdf", title: "Zertifizierte Hundetrainerin", subtitle: "Martin Rütter Akademie",
      file: "assets/zertifikate/martin-ruetter-zertifikat.pdf",
      srcs: ["assets/zertifikate/martin-ruetter-zertifikat-preview-p1.jpg"] },
    { type: "img", title: "Hospitation Januar 2026", subtitle: "Darggiantpaws · Sarah",
      file: "assets/zertifikate/hospitation-januar-2026.jpeg",
      srcs: ["assets/zertifikate/hospitation-januar-2026.jpeg"] },
    { type: "img", title: "Hospitation März 2026", subtitle: "Darggiantpaws · Sarah",
      file: "assets/zertifikate/hospitation-maerz-2026.jpeg",
      srcs: ["assets/zertifikate/hospitation-maerz-2026.jpeg"] },
    { type: "pdf", title: "Teilnahmebestätigung", subtitle: "eDOGcation · April 2026",
      file: "assets/zertifikate/edogcation-april-2026.pdf",
      srcs: [
        "assets/zertifikate/edogcation-april-2026-preview-p1.jpg",
        "assets/zertifikate/edogcation-april-2026-preview-p2.jpg",
      ] },
    { type: "img", title: "Bücher & Weiterbildung", subtitle: "Laufend",
      file: "assets/zertifikate/buecher-weiterbildung.jpg",
      srcs: ["assets/zertifikate/buecher-weiterbildung.jpg"] },
  ];

  const [modal, setModal] = useStateMW(null);
  const open = (c) => setModal(c);
  const close = () => setModal(null);

  return (
    <React.Fragment>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        {items.map((c, i) => {
          const cover = c.srcs[0];
          const multiPage = c.srcs.length > 1;
          return (
            <button key={i} type="button" onClick={() => open(c)} className="os-card os-cert-card" style={{
              display: "flex", flexDirection: "column",
              background: "var(--os-white)", border: "1px solid var(--border-1)",
              textDecoration: "none", color: "inherit",
              cursor: "pointer", padding: 0, textAlign: "left", font: "inherit",
            }}>
              <div className="os-photo-hover" style={{ aspectRatio: "4/3", background: "var(--os-paper-2)", overflow: "hidden", borderBottom: "1px solid var(--border-1)", position: "relative" }}>
                <img src={cover} alt={c.title} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block" }} />
                {multiPage && (
                  <span style={{
                    position: "absolute", top: 10, right: 10,
                    background: "var(--os-black)", color: "var(--os-white)",
                    fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 10,
                    letterSpacing: "0.16em", textTransform: "uppercase",
                    padding: "4px 8px", borderRadius: 2,
                  }}>{c.srcs.length} Seiten</span>
                )}
              </div>
              <div style={{ padding: "20px 22px 22px" }}>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--fg-3)" }}>{c.subtitle}</div>
                <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 17, color: "var(--os-black)", marginTop: 6, letterSpacing: "-0.01em" }}>{c.title}</div>
                <div style={{ marginTop: 14, display: "inline-flex", alignItems: "center", gap: 8, color: "var(--os-red-485)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600 }}>
                  Anzeigen <i data-lucide={c.type === "pdf" ? "file-text" : "image"} style={{ width: 13, height: 13 }}></i>
                </div>
              </div>
            </button>
          );
        })}
      </div>
      <Modal
        open={!!modal}
        onClose={close}
        srcs={modal ? modal.srcs : null}
        externalSrc={modal ? modal.file : null}
        title={modal ? modal.title : null}
      />
    </React.Fragment>
  );
}

function MeinWeg() {
  const chapters = [
    {
      eyebrow: "Kapitel 01", title: "Mein Start in die Hundewelt",
      body: [
        "Schon als kleines Kind wurde ich von einem Rottweiler-Schäferhund-Mix begleitet, Ringo, ein Rüde, der mich früh prägte und mir den Umgang mit Tieren näherbrachte.",
        "Zu Beginn meiner Jugend zog dann Tao bei uns ein, ein Leonberger-Schäferhund-Mix, ebenfalls ein Rüde.",
        "Beide Hunde waren feste Familienmitglieder und wurden von meinen Eltern mit viel Liebe, aber auch mit klaren Grenzen erzogen.",
        "Von ihnen habe ich unglaublich viel gelernt, nicht nur über Hunde, sondern auch darüber, was es bedeutet, ein Tier in seinem Leben zu haben. Hunde waren für uns immer mehr als „nur Tiere“. Gleichzeitig durften sie aber genau das sein: Hunde. Lebewesen mit eigenen Bedürfnissen, Gefühlen und Grenzen. Und ja, auch Hunde dürfen zeigen, wenn ihnen etwas zu viel wird oder sie sich unwohl fühlen.",
        "Als Tao im Jahr 2012 alters- und krankheitsbedingt eingeschläfert werden musste, brach für mich eine Welt zusammen. Er war in meiner Freizeit fast immer an meiner Seite. Spätestens ab diesem Zeitpunkt wusste ich: Eines Tages wird ein eigener Hund mein Leben begleiten.",
      ],
      images: {
        0: [
          { src: "assets/ringo-und-ich.jpg", alt: "Corinne als Kind mit Ringo", pos: "center 70%" },
          { src: "assets/ringo-und-ich-2.jpg", alt: "Corinne und Ringo", pos: "center 50%" },
        ],
        1: [
          { src: "assets/tao-und-ich.jpeg", alt: "Corinne mit Tao", pos: "center 50%" },
          { src: "assets/tao-und-ich-2.jpg", alt: "Corinne und Tao", pos: "center 50%" },
        ],
      },
    },
    {
      eyebrow: "Kapitel 02", title: "Mein erster eigener Hund",
      body: [
        "2021 war es dann so weit. Beruflich und privat passte alles, und dann kam Darwin. Ein Bardino-Mix-Rüde, etwa eineinhalb Jahre alt, der bereits eine schwierige Vergangenheit hinter sich hatte. Mit guten Absichten wurde er von Spanien in die Schweiz geholt und in eine Welt gedrängt, die nie wirklich seine war. Seine damaligen Halter verstanden ihn nicht. Seine Reaktion darauf: Frust, Zähne einsetzen, sich behaupten. Er wurde mit Medikamenten ruhiggestellt.",
        "Klare Regeln, Führung und die Möglichkeit, sich auf jemanden verlassen zu dürfen, kannte er nicht. Ebenso wenig einen Menschen, der ihn so annahm, wie er war, und ihm Orientierung gab. Zum Glück griff die Tierschutzorganisation ein und veranlasste seine Abgabe. Darwin kam in eine grossartige Pflegefamilie, die begann, die Medikamente schrittweise abzusetzen.",
        "Ich entdeckte ihn damals im Internet und wollte ihn kennenlernen. Es war keine Liebe auf den ersten Blick. Aber ich wusste: Ich möchte mit diesem Hund arbeiten. Und ich hatte das Gefühl, dass er ohne mich vielleicht nie die Chance auf ein wirklich gutes Leben bekommen würde.",
        "Nach einer zweimonatigen Kennenlernphase zog Darwin bei mir ein.",
      ],
    },
    {
      eyebrow: "Kapitel 03", title: "Herausforderungen und Rückschläge",
      body: [
        "Es dauerte nicht lange, bis Darwin zeigte, was wirklich in ihm steckte. Tränen gehörten zum Alltag. Zweifel kamen immer wieder auf. Trotz Zweifel und zeitweise auch Angst vor ihm wollte ich diesen Weg gemeinsam mit ihm gehen, für ihn.",
        "Ich suchte Unterstützung bei einem Hundetrainer. Doch die Methoden, die mir dort gezeigt wurden, waren für mich moralisch und ethisch nicht vertretbar: den Hund mit Gewalt gefügig machen, bis hin zur Empfehlung eines Stromhalsbandes. Spätestens dort war meine Grenze erreicht.",
        "Die Folge: Mein Hund agierte nur noch aus Angst. Die Verzweiflung auf beiden Seiten wurde von Tag zu Tag grösser. Wir verstanden uns nicht. Wir sprachen nicht dieselbe Sprache. Drei Monate später war alles schlimmer denn je: blaue Flecken an Armen und Beinen, permanentes Gegeneinander statt Miteinander, unser Alltag fühlte sich wie die Hölle an.",
      ],
    },
    {
      eyebrow: "Kapitel 04", title: "Der Wendepunkt",
      body: [
        "Anfang 2022 lernte ich die Martin Rütter Hundeschule in Wil / St. Gallen kennen. Dort begann für uns ein völlig neuer Weg. Wir haben unglaublich viel gelernt und sind dankbar für all die Möglichkeiten, die uns gegeben wurden, gemeinsam zu wachsen und das Leben wieder farbig zu sehen.",
        "Darwin begleitete mich durch die Ausbildung zur zertifizierten Hundetrainerin nach der Martin Rütter Philosophy. Von Juni 2023 bis Mai 2026 war er an meiner Seite bei meiner Tätigkeit auf dem Trainingsplatz der Martin Rütter Hundeschule Wil / St. Gallen & Thurgau.",
        "Parallel dazu begann ich, das Tierheim Tellen in Hohentannen ehrenamtlich zu unterstützen. Diese Zeit schenkte mir, neben der Ausbildung und den vielen Stunden auf dem Trainingsplatz, unglaublich wertvolle Erfahrungen. Noch heute ist der Tierschutz eine grosse Herzensangelegenheit.",
        "Darwin entwickelte sich zu einem beeindruckenden Partner. Seine Leinenaggression wurde gut händelbar, erforderte aber weiterhin Aufmerksamkeit, Planung und Management. Trotzdem fühlte sich für mich noch etwas unvollständig an. Irgendwo gab es noch Verständigungsprobleme zwischen uns.",
        "Ende 2025 lernte ich Sarah von Darggiantpaws, Hundepsychologie in Werl (DE) kennen und besuchte ein Hospitationswochenende bei ihr. Ihre Trainingsansätze waren komplett anders: Wenig Energie, klar und strukturiert. Eine Kombination aus verständlichen Grenzen, fairen Korrekturen und ehrlichem Lob. Hunde so anzunehmen, wie sie sind.",
        "Ich hatte selten so viel Wohlwollen, Wissen und Verständnis im Umgang mit Hunden erlebt. Alles ist stimmig bei ihr, und ich begann, Hunde mit ganz anderen Augen zu sehen.",
        "Der entscheidende Wendepunkt für meine Zukunft und meine Entscheidung, mit meiner eigenen Hundeschule im Bereich Verhaltenstherapie zu arbeiten, entstand Anfang dieses Jahres (2026). All das, was ich lernen durfte, in allen Facetten, fand endlich mit dem zusammen, was sich für mich richtig anfühlt. Zum ersten Mal begann in meinem Kopf ein klares Bild zu entstehen, eines, das Wissen, Erfahrung und meine persönliche Überzeugung miteinander verbunden hat. Nicht alles perfekt machen zu müssen. Zu lernen, mit wenig Energie zu führen, Grenzen zu setzen wo Grenzen hingehören und damit Orientierung zu geben. Dieses Gefühl war unglaublich befreiend.",
      ],
      images: {
        2: {
          cols: 3,
          items: [
            { src: "assets/fotos-corinne/meinweg-kapitel4-1.jpg", alt: "Mensch-Hund-Team im Training" },
            { src: "assets/fotos-corinne/meinweg-kapitel4-2.jpg", alt: "Mensch-Hund-Team im Training" },
            { src: "assets/fotos-corinne/meinweg-kapitel4-3.jpg", alt: "Mensch-Hund-Team im Training" },
            { src: "assets/fotos-corinne/meinweg-kapitel4-4.jpg", alt: "Mensch-Hund-Team im Training" },
            { src: "assets/fotos-corinne/meinweg-kapitel4-5.jpg", alt: "Mensch-Hund-Team im Training" },
            { src: "assets/fotos-corinne/meinweg-kapitel4-6.jpg", alt: "Mensch-Hund-Team im Training" },
          ],
        },
      },
    },
    {
      eyebrow: "Kapitel 05", title: "Heute",
      body: [
        "Nach vergleichsweise kurzer Zeit habe ich einen Hund an meiner Seite, der mehr Freiheit geniesst als je zuvor. Nicht, weil er „funktioniert“ oder ich ihn ständig umlenken muss, sondern weil wir uns verstehen.",
        "Er weiss, was von ihm erwartet wird, und ich weiss, was er leisten kann, und was nicht. Gleichzeitig darf er einfach er selbst sein.",
        "Zum ersten Mal sehe ich seine fiddelige, schelmische Seite. Darwin ist für mich zu einem Felsen in der Brandung geworden. Zu einem Partner in Crime, auf den ich mich verlassen kann. Und zu einem Spiegel meiner eigenen Entwicklung.",
      ],
      images: {
        0: [
          { src: "assets/fotos-corinne/corinne-darwin-nah.jpg", alt: "Corinne und Darwin, Nahaufnahme", pos: "center 50%" },
        ],
      },
    },
    {
      eyebrow: "Kapitel 06", title: "Ausblick",
      body: [
        "Ich freue mich darauf, euch und euren Vierbeinern zu zeigen, wie ein klarer, fairer und respektvoller Umgang aussehen kann, mit Struktur, Grenzen und Verständnis.",
        "Und natürlich wird Darwin dabei immer an meiner Seite sein.",
      ],
      images: {
        1: {
          cols: 1,
          items: [
            { src: "assets/fotos-corinne/darwin-treat-glas.jpg", alt: "Darwin mit einem Glas voller Treats", fit: "contain", height: 620 },
          ],
        },
      },
    },
  ];

  return (
    <React.Fragment>
      <PageHero
        eyebrow="Mein Weg"
        title="Vom ersten Hund bis zur eigenen Schule."
        image="assets/fotos-corinne/corinne-darwin-meinweg.jpg"
        imageAlt="Corinne und Darwin"
      />

      <section style={{ background: "var(--os-white)" }}>
        <div style={{ maxWidth: 880, margin: "0 auto", padding: "96px 32px" }}>
          {chapters.map((c, i) => (
            <div key={i} style={{ marginBottom: 80, paddingBottom: 64, borderBottom: i < chapters.length - 1 ? "1px solid var(--border-1)" : "none" }}>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--os-red-485)" }}>{c.eyebrow}</div>
              <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 40, lineHeight: 1.15, letterSpacing: "-0.01em", margin: "16px 0 0", color: "var(--os-black)" }}>{c.title}</h2>
              <div style={{ height: 2, width: 48, background: "var(--os-red-485)", margin: "24px 0 32px" }} />
              {c.body.map((p, j) => {
                const group = c.images && c.images[j];
                const items = Array.isArray(group) ? group : (group && group.items);
                const cols = Array.isArray(group)
                  ? Math.min(items.length, 2)
                  : (group && group.cols) || 2;
                const colsCss = Array.from({ length: cols }, () => "1fr").join(" ");
                return (
                  <React.Fragment key={j}>
                    <p style={{ fontFamily: "var(--font-serif)", fontSize: 18, lineHeight: 1.75, color: "var(--fg-1)", margin: "0 0 20px", textWrap: "pretty" }}>{p}</p>
                    {items && (
                      <div style={{ display: "grid", gridTemplateColumns: colsCss, gap: 12, margin: "8px 0 28px" }}>
                        {items.map((img, k) => (
                          <div key={k} className="os-photo-hover os-image-reveal" style={{ width: "100%", background: img.fit === "contain" ? "var(--os-paper)" : undefined }}>
                            <img src={img.src} alt={img.alt} style={{ width: "100%", height: img.height || 340, objectFit: img.fit || "cover", objectPosition: img.pos || "center 30%", display: "block" }} />
                          </div>
                        ))}
                      </div>
                    )}
                  </React.Fragment>
                );
              })}
            </div>
          ))}

        </div>
      </section>

      {/* Zertifikate & Weiterbildungen */}
      <section style={{ background: "var(--os-paper)", 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)" }}>Belege für meinen Weg</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)" }}>
            Zertifikate &amp; Weiterbildungen.
          </h2>
          <div style={{ height: 2, width: 56, background: "var(--os-red-485)", margin: "24px 0 56px" }} />

          <CertGallery />
        </div>
      </section>
    </React.Fragment>
  );
}

window.MeinWeg = MeinWeg;
window.PageHero = PageHero;
