// Manifesto.jsx — dark statement band between Story and the photo strip
function Manifesto() {
  const { T } = useLang();
  const S = T.story;
  return (
    <section style={{ background: "var(--ink)", color: "var(--paper)", padding: "80px 0 88px", textAlign: "center" }}>
      <div className="container">
        <Reveal>
          {/* The statement — leads the section */}
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: "clamp(2rem, 4.5vw, 3.75rem)", color: "var(--paper)",
              letterSpacing: "-.02em", lineHeight: 1.15 }}>{S.manifestoLine1}</div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: "clamp(2rem, 4.5vw, 3.75rem)", color: "var(--lime)",
              letterSpacing: "-.02em", lineHeight: 1.15, marginTop: 6 }}>{S.manifestoLine2}</div>
          </div>
          {/* Supporting copy — explains the statement */}
          <div style={{ maxWidth: 640, margin: "52px auto 0" }}>
            {S.body3.split('\n\n').map((para, i) => (
              <p key={i} style={{ font: "var(--t-body)", color: "var(--fg-on-dark-2)",
                marginTop: i > 0 ? 16 : 0, whiteSpace: "pre-line" }}>{para}</p>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}
window.Manifesto = Manifesto;