/* @jsx React.createElement */

function Manifesto() {
  const c = window.cms || ((p, fb) => fb);
  const quoteText = c("manifesto.quote", "„Ich arbeite nicht nach einer starren Methode. Jedes Mensch-Hund-Team ist einzigartig. Deshalb entsteht jedes Training aus dem, was ich sehe, und aus dem, was zu euch passt.“");
  // Split quote into word-spans for staggered reveal (see .os-quote-words in index.html)
  const quoteWords = quoteText.split(/\s+/).filter(Boolean);
  return (
    <section style={{ background: "var(--os-warmgray-8)", color: "var(--os-white)", position: "relative", overflow: "hidden" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "128px 32px", textAlign: "left", position: "relative", zIndex: 1 }}>
        <p className="os-quote-words" style={{
          fontFamily: "var(--font-serif)",
          fontSize: 22, lineHeight: 1.6, color: "var(--os-white)",
          margin: 0, textWrap: "pretty", maxWidth: "62ch", fontWeight: 400,
        }}>
          {quoteWords.map((w, i) => (
            <React.Fragment key={i}>
              <span className="word">{w}</span>
              {i < quoteWords.length - 1 ? " " : ""}
            </React.Fragment>
          ))}
        </p>
        <div className="os-red-draw" style={{ height: 2, width: 64, background: "var(--os-red-485)", margin: "48px 0 32px" }} />
        <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 28, lineHeight: 1.4, color: "var(--os-white)", margin: 0, maxWidth: "32ch", fontWeight: 400 }}>
          {c("manifesto.tagline", "Denn am Ende geht es nicht um perfekte Kommandos, sondern um einen für beide Seiten passenden Alltag.")}
        </p>
        <div style={{ marginTop: 32, padding: "20px 28px", borderLeft: "3px solid var(--os-red-485)" }}>
          <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.5, color: "var(--os-white)", margin: 0, maxWidth: "32ch" }}>
            {c("manifesto.miteinander", "Nicht höher. Nicht schneller. Nicht mehr. Sondern miteinander. Als Team. Als Einheit. Als Partner.")}
          </p>
        </div>
      </div>
    </section>
  );
}

window.Manifesto = Manifesto;