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

function Services({ go }) {
  const services = [
    { id: "analyse", title: "Analyse- und Starttermin", duration: "120 Min · vor Ort", body: "Vollwertige, strukturierte Trainingseinheit mit umfassender Ist-Zustand-Analyse und individuell angepasster Handlungsanleitung.", price: "auf Anfrage" },
    { id: "haus", title: "Hausbesuch", duration: "90 Min · bei dir zuhause", body: "Wir arbeiten dort, wo dein Hund lebt, am vertrauten Ort, wo Verhalten am ehrlichsten zu sehen ist.", price: "auf Anfrage" },
    { id: "intensiv", title: "Intensivtraining", duration: "4 oder 8 Stunden · Wochenende", body: "Tiefe der Arbeit über zwei aufeinanderfolgende Tage. 8-Stunden-Paket inkl. 60 Min online & 7 Tage Nachbetreuung.", price: "auf Anfrage", featured: true },
    { id: "gruppe", title: "Gruppentraining", duration: "60 oder 90 Min · max. 6 Teams", body: "Kleine, ruhige Einheiten zu Orientierung, Alltag und klarer Führung. Wechselnde Orte im Raum Amriswil / Romanshorn.", price: "5er-Karte 200.–" },
    { id: "sozial", title: "Sozialkontaktstunde", duration: "120 Min · Freilauf", body: "Kontrollierter, professionell begleiteter Rahmen für Begegnungen mit Artgenossen. Körpersprache lesen lernen.", price: "60.–" },
    { id: "rudel", title: "Rudelspaziergang", duration: "Social Walk · max. 6 Teams", body: "Geführter Spaziergang ohne Direktkontakt. Hunde lernen sich olfaktorisch, visuell und akustisch wahrzunehmen.", price: "auf Anfrage" },
    { id: "trail", title: "Mantrailing", duration: "Personensuche · 1× monatlich", body: "Artgerechte Auslastung über die Nase. Fördert Konzentration, Selbstvertrauen und Bindung, für jeden Hund.", price: "auf Anfrage" },
  ];
  const [active, setActive] = useStateSvc(2);
  return (
    <section id="angebote" style={{ background: "var(--os-white)", borderBottom: "1px solid var(--border-1)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "112px 32px" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 24 }}>
          <div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--os-red-485)" }}>Angebote &amp; Preise</div>
            <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 48, lineHeight: 1.1, letterSpacing: "-0.015em", margin: "12px 0 0", color: "var(--os-black)", maxWidth: "20ch" }}>
              Formate für jedes Mensch-Hund-Team.
            </h2>
          </div>
          <div style={{ fontFamily: "var(--font-serif)", fontSize: 15, color: "var(--fg-2)", maxWidth: "38ch", lineHeight: 1.65 }}>
            Gruppentraining ist nur möglich nach einem Kennenlernen, einem Ersttermin oder einem Kurs.
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 56 }}>
          {services.map((s, i) => {
            const isActive = i === active;
            return (
              <button key={i} onClick={() => setActive(i)} style={{
                textAlign: "left", cursor: "pointer", background: isActive ? "var(--os-black)" : "var(--os-white)",
                color: isActive ? "var(--os-white)" : "var(--os-black)",
                border: "1px solid " + (isActive ? "var(--os-black)" : "var(--border-1)"),
                padding: "28px 26px 24px", display: "flex", flexDirection: "column", gap: 10,
                transition: "all 220ms cubic-bezier(0.2,0.6,0.2,1)", borderRadius: 0, fontFamily: "inherit",
                minHeight: 260,
              }}>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: isActive ? "var(--os-red-485-soft)" : "var(--os-red-485)" }}>{s.duration}</div>
                <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 22, letterSpacing: "-0.01em" }}>{s.title}</div>
                <div style={{ height: 2, width: 36, background: "var(--os-red-485)", margin: "2px 0 6px" }} />
                <div style={{ fontFamily: "var(--font-serif)", fontSize: 14.5, lineHeight: 1.65, color: isActive ? "rgba(255,255,255,0.78)" : "var(--fg-2)" }}>{s.body}</div>
                <div style={{ marginTop: "auto", paddingTop: 14, fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14, color: isActive ? "var(--os-white)" : "var(--os-black)" }}>{s.price}</div>
              </button>
            );
          })}
          <button onClick={() => go && go("angebote")} style={{
            textAlign: "left", cursor: "pointer",
            background: "var(--os-paper)", border: "1px dashed var(--border-2)",
            padding: "28px 26px", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "flex-start", gap: 12,
            fontFamily: "inherit", minHeight: 260,
          }}>
            <i data-lucide="arrow-up-right" style={{ width: 28, height: 28, color: "var(--os-red-485)", strokeWidth: 1.75 }}></i>
            <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 22, color: "var(--os-black)", letterSpacing: "-0.01em" }}>Alle Angebote &amp; Preise im Detail</div>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 14.5, lineHeight: 1.65, color: "var(--fg-2)" }}>Inkl. Zusatzoptionen, Wiederholungstage und Buchungsinformationen.</div>
          </button>
        </div>
      </div>
    </section>
  );
}

window.Services = Services;