/* Manifesto — short editorial pull, between hero and systems */

const Manifesto = () => {
  return (
    <section className="section section--tight" style={{ borderTop: "1px solid var(--line-2)", borderBottom: "1px solid var(--line-2)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "clamp(20px, 3vw, 48px)", alignItems: "start" }}>
        <div className="reveal label" style={{ writingMode: "vertical-rl", transform: "rotate(180deg)", whiteSpace: "nowrap" }}>
          // a note · before sowing
        </div>

        <div>
          <p
            className="reveal display"
            style={{
              fontSize: "clamp(22px, 2.6vw, 38px)",
              lineHeight: 1.25,
              maxWidth: "32ch",
              fontStyle: "italic",
              color: "var(--ink-soft)",
              "--reveal-delay": "100ms",
            }}
          >
            Most tools answer in a hurry.
            <span style={{ color: "var(--moss)" }}> eth3r reasons slow,</span>
            built for the hour before the answer ripens.
          </p>

          <div
            className="reveal"
            style={{
              marginTop: 28,
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
              gap: 24,
              maxWidth: 720,
              "--reveal-delay": "240ms",
            }}
          >
            {[
              ["one operator", "plants, ships, tends"],
              ["built to last", "seasons, not sprints"],
              ["every knob exposed", "defaults are not destiny"],
              ["seasoned tools", "slow grows reliable"],
            ].map(([k, v]) => (
              <div key={k} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                <span style={{ color: "var(--moss)", marginTop: 4 }}>
                  <Botanical kind="asterisk" size={12} stroke={1.4} />
                </span>
                <div>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink)" }}>{k}</div>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: "0.04em", color: "var(--ink-mute)", marginTop: 4 }}>{v}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Manifesto = Manifesto;