/* @jsx React.createElement */

function Tierheime() {
  const heime = [
    {
      name: "Tierheim Tellen",
      where: "Hohen Tannen, Schweiz",
      role: "Ehrenamtliche Unterstützung",
      body: "Seit Beginn meiner Hundetrainerausbildung unterstütze ich das Tierheim Tellen ehrenamtlich. Die Jahre auf der Wiese mit den unterschiedlichsten Hunden haben mir unschätzbare Erfahrung gegeben. Sie haben mir gezeigt, wie wichtig klare, faire Führung gerade für Hunde mit schwieriger Vergangenheit ist.",
      url: "tierheim-tellen.ch",
      icon: "home",
    },
    {
      name: "SOS Listenhunde Ostschweiz",
      where: "Ostschweiz",
      role: "Wir geben Listenhunden eine Stimme",
      body: "Listenhunde sind Hunde, die in vielen Kantonen besonderen Auflagen unterliegen, oft ungerechtfertigt. SOS Listenhunde Ostschweiz setzt sich für eine differenzierte Sicht ein und vermittelt diese Hunde in passende Hände. Eine Herzensangelegenheit.",
      url: "soslistenhunde-schweiz.ch",
      icon: "megaphone",
    },
  ];

  return (
    <React.Fragment>
      <PageHero
        eyebrow="Tierheime"
        title="Wo ich mich engagiere."
        lead="Die Arbeit mit Hunden aus dem Tierschutz ist für mich nicht nur Beruf, sie ist ein Stück meiner eigenen Geschichte. Diese Organisationen liegen mir besonders am Herzen."
      />
      <section style={{ background: "var(--os-white)" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto", padding: "80px 32px 112px", display: "flex", flexDirection: "column", gap: 32 }}>
          {heime.map(h => (
            <article key={h.name} className="os-card" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 48, padding: 40, border: "1px solid var(--border-1)", background: "var(--os-paper)" }}>
              <div>
                <div style={{ width: 64, height: 64, background: "var(--os-red-485)", color: "var(--os-white)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <i data-lucide={h.icon} style={{ width: 28, height: 28, strokeWidth: 1.5 }}></i>
                </div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--fg-3)", marginTop: 24 }}>{h.role}</div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--fg-2)", marginTop: 6, display: "flex", alignItems: "center", gap: 8 }}>
                  <i data-lucide="map-pin" style={{ width: 14, height: 14 }}></i>{h.where}
                </div>
              </div>
              <div>
                <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 32, color: "var(--os-black)", margin: 0, letterSpacing: "-0.01em" }}>{h.name}</h3>
                <div style={{ height: 2, width: 48, background: "var(--os-red-485)", margin: "20px 0 24px" }} />
                <p style={{ fontFamily: "var(--font-serif)", fontSize: 17, lineHeight: 1.75, color: "var(--fg-1)", margin: 0 }}>{h.body}</p>
                <a href="#" className="os-link-draw is-persistent" style={{ display: "inline-flex", alignItems: "center", gap: 10, marginTop: 24, color: "var(--os-red-485)", fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 600 }}>
                  {h.url} <i data-lucide="external-link" style={{ width: 14, height: 14 }}></i>
                </a>
                {h.images && (
                  <div style={{ display: "grid", gridTemplateColumns: h.images.length > 1 ? "1fr 1fr" : "1fr", gap: 12, marginTop: 28 }}>
                    {h.images.map((img, k) => (
                      <div key={k} className="os-photo-hover os-image-reveal" style={{ width: "100%" }}>
                        <img src={img.src} alt={img.alt} style={{ width: "100%", height: 360, objectFit: "cover", objectPosition: img.pos || "center 50%", display: "block" }} />
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </article>
          ))}
        </div>
      </section>
    </React.Fragment>
  );
}

window.Tierheime = Tierheime;
