/* Manifesto.jsx — "About / A note from the founders" section.
 *
 * Edit the four pieces of copy below to change what the page says:
 *   eyebrow  : the small uppercase label
 *   headline : the big sentence
 *   body     : the explanatory paragraph
 *   coda     : the dimmer follow-up paragraph
 */

function ManifestoBlock() {
  const eyebrow  = "About · A note from the founders";
  const headline = "RESEARCH THAT SHIPS. INFRASTRUCTURE THAT RUNS.";
  const body     = "We build the parts of Ethereum that real markets depend on. " +
                   "Settlement guarantees, ordering primitives, on-chain credit rails. " +
                   "The unglamorous plumbing the next decade of capital will sit on top of.";
  const coda     = "Pol Finance runs market structure in production. " +
                   "Aligned runs verification infrastructure on mainnet. " +
                   "Zonda is the bench between them: where research compiles into services mainnet can call.";

  return (
    <section id="manifesto"
             style={{ position: "relative", padding: "124px 96px",
                      background: "var(--cream)", overflow: "hidden",
                      borderTop: "1px solid var(--ink-faint)",
                      borderBottom: "1px solid var(--ink-faint)" }}>
      <svg viewBox="0 0 1280 600"
           style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.5 }}>
        <Vortex cx={1100} cy={300} maxR={260} turns={5}
                color="var(--terra-faint)" strokeWidth={0.8} speed={0.08} />
      </svg>
      <div style={{ position: "relative", zIndex: 2, display: "grid",
                    gridTemplateColumns: "auto 1fr", gap: 64, alignItems: "start" }}>
        <MountainMark size={120} strokeWidth={1.6} />
        <div style={{ maxWidth: 720 }}>
          <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.42em",
                         color: "var(--terra-deep)", textTransform: "uppercase" }}>
            {eyebrow}
          </span>
          <h2 style={{ margin: "20px 0 0", fontFamily: "var(--title)", fontWeight: 500,
                       fontSize: 48, letterSpacing: "0.01em", lineHeight: 1.12,
                       color: "var(--ink)", textWrap: "pretty",
                       textTransform: "none", padding: 0 }}>
            {headline}
          </h2>
          <p style={{ margin: "32px 0 0", fontFamily: "var(--display)", fontSize: 18,
                      lineHeight: 1.55, color: "var(--ink)", maxWidth: 600, textWrap: "pretty" }}>
            {body}
          </p>
          <p style={{ margin: "20px 0 0", fontFamily: "var(--display)", fontSize: 18,
                      lineHeight: 1.55, color: "var(--ink)", maxWidth: 600, textWrap: "pretty" }}>
            {coda}
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ManifestoBlock });