/* Philosophy / Manifesto — rewritten, stats removed */
const Philosophy = () => {
  const { isMobile } = useViewport();
  const wrap = {
    position: "relative",
    padding: isMobile ? "80px 0 72px" : "140px 0 120px",
    overflow: "hidden",
  };
  const container = {
    position: "relative", zIndex: 2,
    maxWidth: 1440, margin: "0 auto",
    padding: isMobile ? "0 20px" : "0 56px",
    display: "grid",
    gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 380px) 1fr",
    gap: isMobile ? 40 : 80,
    alignItems: "start",
  };
  const aside = { paddingTop: 8 };
  const lead = {
    fontFamily: "var(--serif)",
    fontSize: isMobile ? 36 : 60,
    lineHeight: 1.06,
    letterSpacing: "-0.02em",
    color: "var(--ink)",
    margin: 0,
    textWrap: "balance",
  };
  const para = {
    fontSize: isMobile ? 15 : 17,
    lineHeight: 1.65,
    color: "var(--ink-2)",
    maxWidth: 640,
    marginTop: isMobile ? 24 : 36,
    textWrap: "pretty",
  };
  const marbleStrip = {
    position: "absolute",
    left: -40, top: 110,
    width: 360, height: 540,
    backgroundImage: `url(${(window.__resources && window.__resources.marble) || "assets/marble-full.png"})`,
    backgroundSize: "cover",
    backgroundPosition: "center",
    filter: "blur(40px) saturate(120%) brightness(0.45)",
    opacity: 0.35,
    mixBlendMode: "screen",
    pointerEvents: "none",
    zIndex: 0,
    borderRadius: 8,
  };

  return (
    <section id="about" style={wrap} data-screen-label="02 Manifesto">
      <div style={marbleStrip} aria-hidden="true"></div>
      <div style={container}>
        <div style={aside}>
          <div className="eyebrow">§ 01 — Manifesto</div>
          <div style={{
            marginTop: isMobile ? 20 : 28,
            fontFamily: "var(--serif)",
            fontStyle: "italic",
            fontSize: isMobile ? 19 : 24,
            lineHeight: 1.45,
            color: "var(--ink-2)",
            paddingLeft: 20,
            borderLeft: "1px solid var(--lav-2)",
            textWrap: "balance",
          }}>
            We are not a vendor.<br />
            We are not a bootcamp.<br />
            We are a <span style={{ color: "var(--lav-1)" }}>capability partner</span><br />
            for organisations that take<br />
            the human side seriously.
          </div>
        </div>

        <div>
          <h2 style={lead}>
            AI capability is only as good as the <em style={{ fontStyle: "italic", color: "var(--lav-1)" }}>humans</em> it's built around.
          </h2>
          <p style={para}>
            Most organisations optimise for the model. We optimise for the room the model walks into — the ward, the courtroom, the operations centre, the team meeting. Our work builds the human infrastructure that makes AI worth deploying.
          </p>
        </div>
      </div>
    </section>
  );
};

window.Philosophy = Philosophy;