/* @jsx React.createElement */

function Pillars() {
  const c = window.cms || ((p, fb) => fb);
  // Visual mapping per pillar (icon + image) is fixed in JSX and not editable
  // via CMS. Only the eyebrow/intro/title/body strings come from JSON.
  const visuals = [
    { icon: "wind", image: "assets/fotos-corinne/pillar-ruhige-energie.jpg", imageAlt: "Weisser Hund, ruhig und aufmerksam", pos: "center 30%" },
    { icon: "eye", image: "assets/fotos-corinne/hand-lass-das.jpg", imageAlt: "Hand zeigt klares Signal an Hund", pos: "center 50%" },
    { icon: "heart-handshake", image: "assets/fotos-corinne/pillar-leitplanken.jpg", imageAlt: "Hund konzentriert, Sinnbild für aufeinander einlassen", pos: "center 30%" },
  ];
  const defaultItems = [
    { number: "01", title: "Ruhige Energie", body: "Die Basis für Vertrauen. Hunde lesen unseren inneren Zustand, lange bevor das erste Wort fällt. Struktur und bewusste Raumverwaltung schaffen Orientierung." },
    { number: "02", title: "Verstehen lernen", body: "Wann ist was wichtig. Wann macht ein Lob Sinn und wie lobt man richtig. Wann ist eine Grenze oder eine Korrektur angebracht und wieso. Und wann ist Management die beste Lösung." },
    { number: "03", title: "Aufeinander einlassen", body: "Für was wurde mein Hund gemacht, was sagt seine Genetik, wo entstehen Probleme und wo sind Verständigungsprobleme. Was kann wer meistern, und wo braucht es Unterstützung." },
  ];
  const cmsItems = c("pillars.items", defaultItems);
  const items = visuals.map((v, i) => Object.assign({}, defaultItems[i], cmsItems[i] || {}, v, { eyebrow: (cmsItems[i] && cmsItems[i].number) || defaultItems[i].number }));
  return (
    <section style={{ background: "var(--os-white)", borderBottom: "1px solid var(--border-1)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "112px 32px" }}>
        <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--os-red-485)" }}>{c("pillars.eyebrow", "Mein Ansatz")}</div>
        <p style={{ fontFamily: "var(--font-serif)", fontSize: 19, lineHeight: 1.7, color: "var(--fg-1)", margin: "20px 0 0", maxWidth: "62ch", textWrap: "pretty" }}>
          {c("pillars.intro", "Mein Ansatz ist verantwortungsvoll, nachvollziehbar und fair, für alle Beteiligten. Die Weiterentwicklung meiner Arbeit liegt mir sehr am Herzen. Deshalb bilde ich mich regelmässig durch Seminare, Webinare, Fachliteratur und Weiterbildungen weiter, ebenso durch die Begleitung von Mensch-Hund-Teams in ihrem Alltag.")}
        </p>
        <div className="os-pillar-stagger" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40, marginTop: 64 }}>
          {items.map((p, idx) => (
            <div key={idx} className="os-pillar" style={{ "--os-stagger": (idx * 120) + "ms", borderTop: "2px solid var(--os-red-485)", paddingTop: 28, position: "relative", display: "flex", flexDirection: "column" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <div style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 56, letterSpacing: "-0.02em", color: "var(--os-warmgray-3)", lineHeight: 1 }}>{p.eyebrow}</div>
                <i data-lucide={p.icon} style={{ width: 26, height: 26, color: "var(--os-black)", strokeWidth: 1.5, marginTop: 12 }}></i>
              </div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 26, fontWeight: 600, color: "var(--os-black)", margin: "20px 0 14px", letterSpacing: "-0.01em" }}>{p.title}</div>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 17, lineHeight: 1.7, color: "var(--fg-2)", marginBottom: 24, flex: 1 }}>{p.body}</div>
              <div className="os-photo-hover os-image-reveal" style={{ width: "100%", marginTop: "auto" }}>
                <img src={p.image} alt={p.imageAlt} style={{ width: "100%", height: 260, objectFit: "cover", objectPosition: p.pos || "center 30%", display: "block" }} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Pillars = Pillars;