/* @jsx React.createElement */

const WHATSAPP_GROUP_URL_HOME = "https://chat.whatsapp.com/E1iQGAiwPYXBiyfRFrexgg";

function Home({ go }) {
  const c = window.cms || ((p, fb) => fb);
  return (
    <React.Fragment>
      {/* HERO */}
      <section style={{ background: "var(--os-paper)", borderBottom: "1px solid var(--border-1)" }}>
        <div style={{ maxWidth: 1240, margin: "0 auto", padding: "40px 32px 96px", display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "center" }}>
          <div className="os-hero-stagger">
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--os-red-485)" }}>
              {c("home.heroEyebrow", "Im Raum Thurgau · Hefenhofen")}
            </div>
            <h1 style={{
              fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: "clamp(40px, 5.2vw, 72px)", lineHeight: 1.05,
              letterSpacing: "-0.015em", color: "var(--os-black)", margin: "20px 0 0",
            }}>
              Verhaltens&shy;therapie,<br />
              Intensivtraining<br />
              &amp; <span style={{ fontWeight: 600 }}>Hundeschule.</span>
            </h1>
            <div className="os-red-draw" style={{ height: 2, width: 64, background: "var(--os-red-485)", margin: "32px 0 28px" }} />
            {(() => {
              const lead1 = c("home.heroLeadParagraph1", "Artgerechte Hundehaltung bedeutet nicht, Hunde ständig zu beschäftigen, Kilometer zu sammeln oder immer noch mehr zu bieten. Sie bedeutet, den Hund wirklich zu sehen. Seine Persönlichkeit. Seine Ängste. Seine Genetik. Sein Alter. Seine Bedürfnisse und seine Probleme mit unserer Welt.");
              const lead2 = c("home.heroLeadParagraph2", "Du weisst mit deinem Hund nicht mehr weiter? Verhaltensauffälligkeiten machen euren Alltag zur Hölle. Unsicherheit, Angst, Frust oder Aggression bestimmen den Alltag? Oder willst einfach mehr über deinen Begleiter lernen? Dann melde dich bei mir.");
              const leads = [lead1, lead2].filter(t => t && t.trim());
              return leads.map((t, i) => (
                <p key={i} style={{
                  fontFamily: "var(--font-serif)", fontSize: 19, lineHeight: 1.65, color: "var(--fg-2)",
                  margin: i === 0 ? 0 : "20px 0 0", maxWidth: "46ch",
                }}>{t}</p>
              ));
            })()}
          </div>

          <div className="os-image-reveal" style={{ position: "relative", overflow: "hidden" }}>
            <img src="assets/fotos-corinne/corinne-darwin-hero.jpg" alt="Corinne und Darwin" className="os-kenburns" style={{ width: "100%", height: 620, objectFit: "cover", objectPosition: "center 50%", display: "block" }} />
            <div className="os-hero-badge" style={{
              position: "absolute", left: 24, bottom: 24,
              background: "rgba(255,255,255,0.96)",
              padding: "16px 20px", maxWidth: 280,
              borderLeft: "3px solid var(--os-red-485)",
            }}>
              <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 15, color: "var(--os-black)", letterSpacing: "-0.01em" }}>
                {c("home.heroBadgeName", "Corinne & Darwin")}
              </div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--fg-3)", marginTop: 4, lineHeight: 1.5 }}>
                {c("home.heroBadgeSubtitle", "Zertifizierte Hundetrainerin")}
              </div>
            </div>
            <a href={WHATSAPP_GROUP_URL_HOME} target="_blank" rel="noopener" className="os-hero-pill os-cta-black" style={{
              position: "absolute", right: 24, top: 24, background: "var(--os-black)", color: "var(--os-white)",
              padding: "10px 14px", display: "flex", alignItems: "center", gap: 8,
              fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase",
              textDecoration: "none",
            }}>
              <i data-lucide="message-circle" style={{ width: 13, height: 13, color: "var(--os-red-485)" }}></i>
              WhatsApp-Gruppe
            </a>
          </div>
        </div>
      </section>

      {/* INTRO / PERSONAL */}
      <section style={{ background: "var(--os-white)", borderBottom: "1px solid var(--border-1)" }}>
        <div style={{ maxWidth: 1240, margin: "0 auto", padding: "112px 32px", display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 96, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 120 }}>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--os-red-485)" }}>
              {c("home.introEyebrow", "Mein Name ist Corinne")}
            </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)" }}>
              {c("home.introHeading", "Ein Hund braucht nicht nur Beschäftigung, sondern muss auch verstanden und gesehen werden.")}
            </h2>
            <div style={{ height: 2, width: 56, background: "var(--os-red-485)", margin: "28px 0 32px" }} />
            <div className="os-photo-hover os-image-reveal" style={{ width: "100%" }}>
              <img src="assets/fotos-corinne/pfote-und-hand.jpg" alt="Pfote und Hand, Verbindung Mensch und Hund" style={{ width: "100%", height: 380, objectFit: "cover", objectPosition: "center 30%", display: "block" }} />
            </div>
          </div>
          <div>
            <p style={{ fontFamily: "var(--font-serif)", fontSize: 18, lineHeight: 1.7, color: "var(--fg-1)", margin: 0, textWrap: "pretty" }}>
              {(window.cmsRender || ((s) => s))(c("home.introParagraph1", "Ich bin Inhaberin und Gründerin von Orientierungs**stark** – Hundeverhalten im Kanton Thurgau. Als zertifizierte Hundetrainerin unterstütze ich Mensch-Hund-Teams dort, wo andere Ansätze nicht weitergeholfen haben oder neue Fragen entstanden sind."))}
            </p>
            <p style={{ fontFamily: "var(--font-serif)", fontSize: 18, lineHeight: 1.7, color: "var(--fg-1)", margin: "24px 0 0", textWrap: "pretty" }}>
              {c("home.introParagraph2", "Nicht jeder Hund braucht dasselbe. Nicht an jedem Tag. Manchmal ist es Bewegung. Manchmal Ruhe. Manchmal Abenteuer. Manchmal einfach Sicherheit und Grenzen.")}
            </p>
            <p style={{ fontFamily: "var(--font-serif)", fontSize: 18, lineHeight: 1.7, color: "var(--fg-1)", margin: "24px 0 0", textWrap: "pretty" }}>
              {c("home.introParagraph3", "Ich orientiere mich nicht an Trends, Methoden oder den Erwartungen anderer. In meiner Arbeit setze ich auf ruhige Energie, verstehen lernen und sich aufeinander einlassen.")}
            </p>
            <p style={{ fontFamily: "var(--font-serif)", fontSize: 18, lineHeight: 1.7, color: "var(--fg-1)", margin: "24px 0 0", textWrap: "pretty" }}>
              {c("home.introParagraph4", "Für mich ist ein Hund kein Projekt. Kein Statussymbol. Kein „es ist nur ein Hund“. Er ist ein Partner, der gesehen und verstanden werden möchte. Bewusste Raumverwaltung und verlässliche Leitplanken, kombiniert mit viel Wohlwollen, sind für verhaltensauffällige Hunde essenziell. All das schafft Ruhe, Vertrauen und die Grundlage für nachhaltige Entwicklung.")}
            </p>
            <p style={{ fontFamily: "var(--font-serif)", fontSize: 18, lineHeight: 1.7, color: "var(--fg-1)", margin: "24px 0 0", textWrap: "pretty" }}>
              {c("home.introParagraph5", "Einen Hund wirklich zu verstehen bedeutet, ihn nicht verändern zu wollen, sondern ihn lesen und verstehen zu können. Zu erkennen, was er braucht. Wann ist Unterstützung angebracht, wann Management, wann aber auch mal Grenzen. Und wann weniger bereits genug ist.")}
            </p>
            <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 26, lineHeight: 1.4, color: "var(--os-black)", margin: "32px 0 0", textWrap: "pretty", maxWidth: "32ch" }}>
              {c("home.introScriptLine", "Nicht jede Ruhe ist Langeweile.")}
            </p>
            <p style={{ fontFamily: "var(--font-serif)", fontSize: 18, lineHeight: 1.7, color: "var(--fg-1)", margin: "20px 0 0", textWrap: "pretty" }}>
              {c("home.introParagraph6", "Nicht jede Stille ist Unterforderung. Oft zeigt sich echte Fürsorge genau darin, nicht ständig mehr zu verlangen, sondern zu wissen, wann weniger der bessere Weg ist.")}
            </p>
            <div style={{ marginTop: 40, padding: "24px 28px", background: "var(--os-paper)", borderLeft: "3px solid var(--os-red-485)" }}>
              <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.5, color: "var(--os-black)", margin: 0, maxWidth: "32ch" }}>
                {c("home.introQuote", "„Entwicklung ist immer möglich, wenn man bereit ist, sich darauf einzulassen.“")}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* PILLARS */}
      <Pillars />

      {/* MANIFESTO */}
      <Manifesto />

      {/* ALL TEAMS WELCOME */}
      <section style={{ background: "var(--os-paper)", borderBottom: "1px solid var(--border-1)" }}>
        <div style={{ maxWidth: 1240, margin: "0 auto", padding: "112px 32px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div className="os-photo-hover os-image-reveal" style={{ width: "100%" }}>
            <img src="assets/fotos-corinne/sunny-und-snow.jpg" alt="Sunny und Snow" style={{ width: "100%", height: 720, objectFit: "cover", objectPosition: "center 62%", display: "block" }} />
          </div>
          <div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--os-red-485)" }}>
              {c("home.willkommenEyebrow", "Bei mir willkommen sind…")}
            </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)" }}>
              {c("home.willkommenHeading", "Alle Mensch-Hund-Teams.")}
            </h2>
            <div style={{ height: 2, width: 56, background: "var(--os-red-485)", margin: "24px 0 28px" }} />
            <p style={{ fontFamily: "var(--font-serif)", fontSize: 19, lineHeight: 1.7, color: "var(--fg-2)", margin: 0, maxWidth: "44ch" }}>
              {c("home.willkommenBody", "Egal ob gross oder klein, sensibel oder impulsiv, aus dem Tierschutz oder vom Züchter. Entwicklung ist immer möglich, wenn man bereit ist, sich darauf einzulassen.")}
            </p>
          </div>
        </div>
      </section>

      {/* CONTACT CTA */}
      <ContactCTA />
    </React.Fragment>
  );
}

window.Home = Home;
