/* @jsx React.createElement */

function Berichte() {
  const reviews = [
    { name: "Sandra & Bruno", dog: "Border Collie · 3 J.", body: "Nach Monaten voller Hilflosigkeit mit Brunos Leinenaggression habe ich bei Corinne zum ersten Mal verstanden, was mein Hund mir eigentlich sagen will. Ruhig, klar, ohne Druck. Heute spazieren wir wieder gerne miteinander.", rating: 5, format: "Intensivtraining" },
    { name: "Markus & Luna", dog: "Tierschutzhündin · 5 J.", body: "Luna kam aus Rumänien und war in jeder neuen Situation überfordert. Corinne hat uns Werkzeuge gegeben, mit denen wir im Alltag wirklich weiterkommen. Nicht Tricks, sondern Haltung.", rating: 5, format: "Hausbesuch" },
    { name: "Petra & Fritz", dog: "Mischling · 7 J.", body: "Was mich am meisten beeindruckt hat: Corinne sieht den Hund. Wirklich. Und sie sieht auch, wo ich als Mensch meine Anteile habe. Unbequem manchmal, aber genau das hat den Unterschied gemacht.", rating: 5, format: "Analyse-Termin" },
    { name: "Janine & Mochi", dog: "Cocker Spaniel · 2 J.", body: "Im Gruppentraining habe ich erlebt, wie viel ein souveräner Mensch ausmacht. Mochi ist ruhiger geworden, weil ich ruhiger geworden bin. Die kleine Gruppengrösse macht's.", rating: 5, format: "Gruppentraining" },
    { name: "Tobias & Enzo", dog: "Schäferhund-Mix · 4 J.", body: "Das Intensivwochenende war intensiv im wahrsten Sinne. Zwei Tage konzentrierte Arbeit, dann eine Woche Nachbetreuung. Das hat richtig was bewegt.", rating: 5, format: "Intensivtraining" },
    { name: "Nicole & Ronja", dog: "Australian Shepherd · 1 J.", body: "Mantrailing war für Ronja und mich ein Türöffner. Sie kam endlich in den Kopf, ich endlich in die Ruhe. Wir freuen uns jeden Monat.", rating: 5, format: "Mantrailing" },
  ];

  return (
    <React.Fragment>
      <PageHero
        eyebrow="Erfahrungsberichte"
        title="Was Mensch-Hund-Teams sagen."
        lead="Echte Stimmen von Halter:innen, mit denen ich gearbeitet habe, von der ersten Analyse bis zum Wochenend-Intensiv."
      />
      <section style={{ background: "var(--os-white)" }}>
        <div style={{ maxWidth: 1240, margin: "0 auto", padding: "72px 32px 112px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {reviews.map((r, i) => (
              <article key={i} className="os-card" style={{ background: "var(--os-paper)", border: "1px solid var(--border-1)", padding: 32, display: "flex", flexDirection: "column" }}>
                <div style={{ display: "flex", gap: 4 }}>
                  {Array.from({ length: r.rating }).map((_, k) => (
                    <i key={k} data-lucide="star" style={{ width: 16, height: 16, color: "var(--os-red-485)", fill: "var(--os-red-485)" }}></i>
                  ))}
                </div>
                <p style={{ fontFamily: "var(--font-serif)", fontSize: 17, lineHeight: 1.65, color: "var(--os-black)", margin: "20px 0 24px", textWrap: "pretty", flex: 1 }}>„{r.body}“</p>
                <div style={{ paddingTop: 20, borderTop: "1px solid var(--border-1)" }}>
                  <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 15, color: "var(--os-black)" }}>{r.name}</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--fg-3)", marginTop: 2 }}>{r.dog}</div>
                  <div style={{ marginTop: 10, display: "inline-block", fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--os-red-485)" }}>{r.format}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function Shop() {
  const products = [
    { name: "Schleppleine 10m · gefettet", price: "45.–", tag: "Beliebt", icon: "rope" },
    { name: "Halsband Leder · handgefertigt", price: "89.–", tag: "Handwerk" },
    { name: "Trainings-Treats · Leberwurst", price: "12.–", tag: "Snacks" },
    { name: "Geschirr Y-Form · gepolstert", price: "78.–", tag: "Ausrüstung" },
    { name: "Maulkorb Biothane · masss", price: "65.–", tag: "Sicherheit" },
    { name: "Buch · „Die goldene Mitte“", price: "28.–", tag: "Lektüre" },
  ];

  return (
    <React.Fragment>
      <PageHero
        eyebrow="Shop"
        title="Ausgewähltes für deinen Alltag."
        lead="Eine kleine, persönlich kuratierte Auswahl an Ausrüstung, Snacks und Lektüre. Dinge, die ich selbst nutze und gerne weiterempfehle."
      />
      <section style={{ background: "var(--os-white)" }}>
        <div style={{ maxWidth: 1240, margin: "0 auto", padding: "72px 32px 112px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {products.map((p, i) => (
              <article key={i} className="os-card" style={{ border: "1px solid var(--border-1)", background: "var(--os-paper)", display: "flex", flexDirection: "column" }}>
                <div style={{ aspectRatio: "4/3", background: "var(--os-warmgray-2)", position: "relative", display: "flex", alignItems: "center", justifyContent: "center", borderBottom: "1px solid var(--border-1)" }}>
                  <i data-lucide="image" style={{ width: 48, height: 48, color: "var(--os-warmgray-5)", strokeWidth: 1.25 }}></i>
                  <div style={{ position: "absolute", top: 14, left: 14, padding: "4px 10px", background: "var(--os-black)", color: "var(--os-white)", fontFamily: "var(--font-sans)", fontSize: 10, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase" }}>{p.tag}</div>
                </div>
                <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 8 }}>
                  <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 17, color: "var(--os-black)", letterSpacing: "-0.005em" }}>{p.name}</div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 8 }}>
                    <div style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 22, color: "var(--os-red-485)" }}>{p.price}</div>
                    <button className="os-cta-black" style={{ background: "var(--os-black)", color: "var(--os-white)", border: 0, padding: "10px 16px", fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", cursor: "pointer", borderRadius: 2, display: "inline-flex", alignItems: "center", gap: 8 }}>
                      <i data-lucide="shopping-bag" style={{ width: 13, height: 13 }}></i>In den Korb
                    </button>
                  </div>
                </div>
              </article>
            ))}
          </div>
          <div style={{ marginTop: 56, padding: "24px 32px", background: "var(--os-paper-2)", border: "1px solid var(--border-1)", display: "flex", alignItems: "center", gap: 16, fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--fg-2)" }}>
            <i data-lucide="info" style={{ width: 18, height: 18, color: "var(--os-red-485)", flexShrink: 0 }}></i>
            <div>Versand innerhalb der Schweiz · Abholung in Hefenhofen jederzeit möglich. Bestellungen per WhatsApp oder Mail an <strong style={{ color: "var(--os-black)" }}>c.p.hundeschule@gmail.com</strong>.</div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function Anfragen() {
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Anfragen"
        title="Schreib mir. Ich melde mich zeitnah."
      />
      <ContactCTA />
    </React.Fragment>
  );
}

window.Berichte = Berichte;
window.Shop = Shop;
window.Anfragen = Anfragen;