/* @jsx React.createElement */

// Pflegehunde wechseln, darum als Liste angelegt. Foto + Name pro Hund.
// Wird ein neuer Pflegehund aufgenommen: hier einen Eintrag ergänzen.
const FOSTER_DOGS = [
  {
    name: "Rocky",
    role: "der Rottweiler",
    image: "assets/fotos-corinne/pflegehund-rocky.jpg",
    imageAlt: "Rocky, Rottweiler-Pflegehund",
    pos: "center 40%",
  },
];

function MeinHund() {
  const paragraphs = [
    "Ich kam 2020 aus Spanien. Ich war etwa 1,5 Jahre alt, und ich hatte bereits gelernt, dass die Welt kein sicherer Ort ist. Um in ihr zu bestehen, musste ich kämpfen. Ich musste meine Zähne einsetzen, musste mich behaupten. Niemand hatte mir je gezeigt, wie es anders geht. Regeln kannte ich nicht. Vertrauen auch nicht.",
    "Ich wurde ruhiggestellt, angepasst, irgendwie „funktionierend“ gemacht, in einer Welt, die sich für mich nie richtig angefühlt hat. Ich war ständig angespannt, ständig bereit, mich zu verteidigen.",
    "Dann änderte sich etwas. Menschen griffen ein. Ich kam in eine Pflegefamilie. Zum ersten Mal wurde es ein wenig ruhiger.",
    "Und dann war da plötzlich dieser Mensch.",
    "Sie wollte mich kennenlernen. Und auch wenn ich es damals nicht verstand. Irgendetwas an ihr war anders. Zwei Monate später war sie jeden Tag um mich herum.",
    "Für mich war alles neu. Zu viele Reize, zu viele Erwartungen, zu viele Unsicherheiten. Ich reagierte so, wie ich es gelernt hatte: mit Abwehr, mit meinen Zähnen, und mit Frust. Ich war verzweifelt. Sie war verzweifelt.",
    "Dann auf einmal begann für uns etwas Neues. Andere Menschen, andere Wege. Plötzlich wurde ich gesehen. Nicht als „Problem“, sondern als Hund, der lernen darf. Schritt für Schritt begannen wir uns anzunähern.",
    "Meine Aggression war noch da. Sie gehört zu mir. Aber wir fanden Wege, damit umzugehen. Sie begann, mich zu lesen. Mich zu führen. Mir Orientierung zu geben. Und ich begann, ihr immer mehr zu vertrauen.",
    "Der grösste Unterschied war jedoch sie selbst. Sie wurde klar. Ruhig. Verständlich. Und genau das hatte ich all die Zeit gebraucht.",
    "Heute ist mein Leben besser denn je. Ich habe mehr Freiheit als je zuvor. Zum ersten Mal kann ich einfach ich sein. Ich spiele. Ich bin frech. Ich schnüffle, und ich kuschle so gerne.",
    "Mein Mensch ist für mich zu einem sicheren Hafen geworden. Zu jemandem, an dem ich mich orientieren kann. Zu jemandem, dem ich vertraue.",
    "Bald beginnt sie ihren eigenen Weg, mit ihrer eigenen Hundeschule. Und ich werde an ihrer Seite sein. So wie sie von Anfang an an meiner war.",
  ];

  return (
    <React.Fragment>
      <section style={{ background: "var(--os-black)", color: "var(--os-white)" }}>
        <div style={{ maxWidth: 1240, margin: "0 auto", padding: "72px 32px 80px", display: "grid", gridTemplateColumns: "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)" }}>Meine Hunde</div>
            <h1 style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: "clamp(40px, 5vw, 68px)", lineHeight: 1.05, letterSpacing: "-0.015em", margin: "20px 0 0" }}>
              Darwin.
            </h1>
            <div style={{ height: 2, width: 64, background: "var(--os-red-485)", margin: "32px 0 28px" }} />
            <p style={{ fontFamily: "var(--font-serif)", fontSize: 19, lineHeight: 1.7, color: "rgba(255,255,255,0.78)", margin: 0, maxWidth: "44ch" }}>
              „Eines Tages tritt ein Mensch in mein Leben, der bleibt.“
            </p>
            <div style={{ marginTop: 32, display: "flex", gap: 32, fontFamily: "var(--font-sans)", fontSize: 13, color: "rgba(255,255,255,0.7)" }}>
              <div>
                <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)" }}>Rasse</div>
                <div style={{ marginTop: 4, fontWeight: 500, color: "var(--os-white)", fontSize: 15 }}>Bardino-Mix</div>
              </div>
              <div>
                <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)" }}>Herkunft</div>
                <div style={{ marginTop: 4, fontWeight: 500, color: "var(--os-white)", fontSize: 15 }}>Spanien · Tierschutz</div>
              </div>
              <div>
                <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)" }}>Bei mir seit</div>
                <div style={{ marginTop: 4, fontWeight: 500, color: "var(--os-white)", fontSize: 15 }}>2021</div>
              </div>
            </div>
          </div>
          <div className="os-photo-hover os-image-reveal" style={{ width: "100%" }}>
            <img src="assets/fotos-corinne/darwin-portrait.jpg" alt="Darwin" style={{ width: "100%", height: 700, objectFit: "cover", objectPosition: "center 52%", display: "block" }} />
          </div>
        </div>
      </section>

      <section style={{ background: "var(--os-paper)" }}>
        <div style={{ maxWidth: 760, margin: "0 auto", padding: "96px 32px" }}>
          {paragraphs.map((p, i) => (
            <p key={i} style={{
              fontFamily: "var(--font-serif)", fontSize: i === 3 ? 26 : 19,
              fontStyle: i === 3 ? "italic" : "normal",
              fontWeight: i === 3 ? 400 : 400,
              lineHeight: i === 3 ? 1.4 : 1.75,
              color: "var(--os-black)", margin: "0 0 28px", textWrap: "pretty",
              maxWidth: i === 3 ? "20ch" : "none",
            }}>{p}</p>
          ))}
          <div style={{ marginTop: 48, paddingTop: 32, borderTop: "2px solid var(--os-red-485)", textAlign: "center" }}>
            <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 22, color: "var(--os-black)", margin: 0 }}>
              Darwin
            </p>
          </div>
        </div>
      </section>

      {/* PFLEGEHUNDE */}
      <section style={{ background: "var(--os-white)", borderTop: "1px solid var(--border-1)" }}>
        <div style={{ maxWidth: 1240, margin: "0 auto", padding: "96px 32px" }}>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--os-red-485)" }}>
            Pflegehunde
          </div>
          <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 44, lineHeight: 1.15, letterSpacing: "-0.01em", margin: "16px 0 0", color: "var(--os-black)" }}>
            Hunde, die bei mir auf Zeit ein Zuhause finden.
          </h2>
          <div style={{ height: 2, width: 56, background: "var(--os-red-485)", margin: "24px 0 48px" }} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 32 }}>
            {FOSTER_DOGS.map((dog, i) => (
              <div key={i}>
                <div className="os-photo-hover os-image-reveal" style={{ width: "100%" }}>
                  <img src={dog.image} alt={dog.imageAlt} style={{ width: "100%", height: 360, objectFit: "cover", objectPosition: dog.pos || "center 50%", display: "block" }} />
                </div>
                <div style={{ marginTop: 18, fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 22, color: "var(--os-black)", letterSpacing: "-0.01em" }}>
                  {dog.name}
                </div>
                {dog.role && (
                  <div style={{ marginTop: 4, fontFamily: "var(--font-serif)", fontSize: 17, color: "var(--fg-2)" }}>
                    {dog.role}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.MeinHund = MeinHund;
