// Philosophy — the worldview. Editorial spread with a pull quote.
function Philosophy() {
  const { lang } = React.useContext(window.LangContext);
  const { isMobile, isTablet } = window.useBreakpoint();
  const [refH2, visH2] = window.useReveal();
  const [refBody, visBody] = window.useReveal({ threshold: 0.08 });
  const [refTenets, visTenets] = window.useReveal({ threshold: 0.08 });

  const en = {
    eyebrow: "01 · Philosophy",
    h2line1: "Tools don't create strategy —",
    h2line2: "they execute it.",
    body1: "Many SMEs struggle with AI — not because the right tools are missing, but because processes, responsibilities, and knowledge don't work together cleanly.",
    body2: null,
    body3: "That gap is exactly what I close with you.",
    quote1: "Technology is rarely the bottleneck.",
    quote2: "What's usually missing is a shared picture.",
    figcaption: "The operating principle — everywhere",
    tenets: [
      { n: "I",   t: "Clarity before technology",    b: "First create clarity on where we want to go. Then shape the systems and workflows required to get there." },
      { n: "II",  t: "Systems built for production", b: "Systems only create real value when teams can govern, maintain, and reliably use them in daily operations." },
      { n: "III", t: "Adoption through visible value", b: "People work with AI when they understand how it relieves them." },
    ],
  };

  const de = {
    eyebrow: "01 · Philosophie",
    h2line1: "Erst die Strategie.",
    h2line2: "Dann das Tool.",
    body1: "Viele KMU tun sich schwer mit KI — nicht weil die passenden Tools fehlen, sondern weil Prozesse, Verantwortlichkeiten und Wissen nicht sauber zusammenspielen.",
    body2: null,
    body3: "Genau diese Lücke schließe ich mit Ihnen.",
    quote1: "Technologie ist selten der Engpass.",
    quote2: "Meistens fehlt das gemeinsame Bild.",
    figcaption: "Das Arbeitsprinzip — überall",
    tenets: [
      { n: "I",   t: "Klarheit vor Technologie",   b: "Zuerst Klarheit schaffen, wo wir hin wollen. Danach Systeme und Abläufe entwerfen." },
      { n: "II",  t: "Systeme für den Betrieb",     b: "Systeme erzeugen nur dann echten Wert, wenn Teams sie selbst steuern, pflegen und gerne im Alltag einsetzen." },
      { n: "III", t: "Akzeptanz durch klaren Nutzen", b: "Menschen arbeiten mit KI, wenn sie verstehen, wie diese sie entlasten kann." },
    ],
  };

  const t = lang === 'de' ? de : en;

  return (
    <section id="philosophy" style={{
      position: "relative",
      padding: isMobile ? "80px 24px 80px" : isTablet ? "80px 40px 80px 40px" : "200px 80px 200px 120px",
      borderBottom: "1px solid #2d2d38",
      overflow: "hidden",
    }}>
      {/* Section marker */}
      <div style={{
        position: "absolute",
        top: 80,
        right: isMobile ? 16 : 80,
        fontFamily: "Montserrat", fontWeight: 200,
        fontSize: (isMobile || isTablet) ? 80 : 200, lineHeight: 1, color: "#1f1f27",
        letterSpacing: "-0.04em", pointerEvents: "none",
      }}>01</div>

      <div style={{ position: "relative", maxWidth: 1280, margin: "0 auto" }}>
        {/* Eyebrow */}
        <div style={{ display: "flex", gap: 24, alignItems: "center", marginBottom: 64 }}>
          <div style={{ width: 40, height: 1, background: "#4a4a5a" }}></div>
          <span className="label label--wide" style={{ color: "#a8a8b8" }}>
            {t.eyebrow}
          </span>
        </div>

        {/* Headline */}
        <h2 ref={refH2} className={!isMobile ? `reveal${visH2 ? " visible" : ""}` : ""} style={{
          fontFamily: "Montserrat", fontWeight: 200,
          fontSize: "clamp(40px, 5.4vw, 88px)",
          lineHeight: 1.04, letterSpacing: "-0.025em",
          color: "#ffffff", margin: 0,
          maxWidth: 1100,
        }}>
          {t.h2line1}<br/>
          <span style={{ color: "#8e8ea8" }}>{t.h2line2}</span>
        </h2>

        {/* Body grid — quote leads left, body follows right */}
        <div ref={refBody} className={!isMobile ? `reveal${visBody ? " visible" : ""}` : ""} style={{ display: "grid", gridTemplateColumns: (isMobile || isTablet) ? "1fr" : "1fr 1fr", gap: (isMobile || isTablet) ? 48 : 100, marginTop: (isMobile || isTablet) ? 56 : 96, alignItems: "start" }}>

          {/* Quote — left, no quotation marks */}
          <figure style={{ margin: 0 }}>
            <blockquote style={{
              fontFamily: "Montserrat", fontWeight: 200,
              fontSize: "clamp(26px, 2.4vw, 34px)",
              lineHeight: 1.3, letterSpacing: "-0.015em",
              color: "#ffffff", margin: 0,
            }}>
              {t.quote1}<br/>
              <span className="grad-silver-gold">{t.quote2}</span>
            </blockquote>
            <figcaption style={{
              fontFamily: "Montserrat", fontWeight: 400, fontSize: 11,
              letterSpacing: "0.24em", textTransform: "uppercase",
              color: "#8080a0", marginTop: 28,
            }}>
              {t.figcaption}
            </figcaption>
          </figure>

          {/* Body — right, with left border on desktop */}
          <div style={{ padding: isMobile ? "0" : "0 0 0 48px", borderLeft: isMobile ? "none" : "1px solid #2d2d38", borderTop: isMobile ? "1px solid #2d2d38" : "none", paddingTop: isMobile ? 40 : 0 }}>
            <p style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 17, lineHeight: 1.75, color: "#c4c4d0", margin: "0 0 28px" }}>
              {t.body1}
            </p>
            <p style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 17, lineHeight: 1.75, color: "#c4c4d0", margin: "0 0 28px" }}>
              {t.body2}
            </p>
            {t.body3 && (
              <p style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 17, lineHeight: 1.75, color: "#8e8ea8", margin: 0 }}>
                {t.body3}
              </p>
            )}
          </div>
        </div>

        {/* Three tenets */}
        <div ref={refTenets} className={!isMobile ? `reveal-stagger${visTenets ? " visible" : ""}` : ""} style={{
          display: "grid", gridTemplateColumns: (isMobile || isTablet) ? "1fr" : "repeat(3, 1fr)", gap: (isMobile || isTablet) ? 40 : 64,
          marginTop: (isMobile || isTablet) ? 48 : 80, paddingTop: (isMobile || isTablet) ? 40 : 56, borderTop: "1px solid #2d2d38",
        }}>
          {t.tenets.map(p => (
            <div key={p.n} className={!isMobile ? "reveal-item" : ""}>
              <div style={{
                fontFamily: "Montserrat", fontWeight: 200, fontSize: 22,
                letterSpacing: "0.32em", color: "#0db8cc", marginBottom: 24,
              }}>{p.n}</div>
              <h3 style={{
                fontFamily: "Montserrat", fontWeight: 300,
                fontSize: 22, color: "#ffffff", margin: "0 0 16px",
                letterSpacing: "-0.005em", lineHeight: 1.25,
              }}>{p.t}</h3>
              <p style={{
                fontFamily: "Montserrat", fontWeight: 300,
                fontSize: 14, lineHeight: 1.7, color: "#a8a8b8", margin: 0,
              }}>{p.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Philosophy = Philosophy;