/* Process — 4 steps, condensed */

const STEPS = [
  { n: "01", title: "Architect", italic: "before any code", desc: "Map what the system has to do. Decide structure, contracts, edges, before a single keystroke." },
  { n: "02", title: "Engineer",  italic: "production tooling", desc: "Build with documented, maintainable tools. No surprises six months on." },
  { n: "03", title: "Deploy",    italic: "verified, monitored", desc: "Ship to production. Observable, monitored, alerting from day one." },
  { n: "04", title: "Operate",   italic: "tend the soil",    desc: "Keep it running. Scale it. Tend it. Treat it as soil, not a sprint." },
];

const Process = () => {
  return (
    <section id="process" className="section">
      <div className="reveal label" style={{ marginBottom: 16 }}>// 04 · how it grows</div>
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "end", marginBottom: "clamp(48px, 6vw, 80px)" }}>
        <h2 className="reveal display" style={{ fontSize: "var(--t-h1)", maxWidth: "20ch", "--reveal-delay": "100ms" }}>
          Requirement to
          <br />
          running system,
          <br />
          in <span style={{ fontStyle: "italic", color: "var(--moss)" }}>four seasons</span>
          <span style={{ color: "var(--accent)" }}>.</span>
        </h2>
        <p className="reveal" style={{ color: "var(--ink-soft)", fontSize: "var(--t-h3)", lineHeight: 1.45, "--reveal-delay": "200ms" }}>
          No mystery process. No four-month discovery phase.
          Architect, engineer, deploy, tend.
        </p>
      </div>

      <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 0 }}>
        {STEPS.map((s, i) => (
          <li
            key={s.n}
            className="reveal lift"
            style={{
              display: "grid",
              gridTemplateColumns: "80px 1fr 1.6fr 120px",
              alignItems: "baseline",
              gap: "clamp(16px, 3vw, 48px)",
              padding: "clamp(24px, 3vw, 36px) 0",
              borderTop: "1px solid var(--line-2)",
              borderBottom: i === STEPS.length - 1 ? "1px solid var(--line-2)" : "none",
              "--reveal-delay": i * 80 + "ms",
            }}
          >
            <span className="display" style={{ fontSize: "clamp(36px, 4vw, 56px)", color: "var(--moss)", fontStyle: "italic" }}>
              {s.n}
            </span>
            <h3 className="display" style={{ fontSize: "clamp(28px, 2.6vw, 40px)" }}>
              {s.title}
              <span style={{ display: "block", fontStyle: "italic", color: "var(--moss)", fontSize: "0.5em", marginTop: 4 }}>
                / {s.italic}
              </span>
            </h3>
            <p style={{ color: "var(--ink-soft)", fontSize: "var(--t-body)", lineHeight: 1.55 }}>
              {s.desc}
            </p>
            <div style={{ color: "var(--moss-2)", justifySelf: "end", opacity: 0.7 }}>
              <Botanical kind={["sprig", "leaf", "fern", "flower"][i]} size={72} stroke={1.1} />
            </div>
          </li>
        ))}
      </ol>

      {/* Reliability micro-marquee */}
      <div className="reveal" style={{ marginTop: "clamp(72px, 8vw, 120px)", "--reveal-delay": "200ms" }}>
        <div className="label" style={{ marginBottom: 20 }}>// reliability · the long view</div>
        <div
          className="display"
          style={{
            display: "flex",
            gap: "clamp(28px, 4vw, 64px)",
            flexWrap: "wrap",
            fontSize: "clamp(22px, 2.6vw, 36px)",
            color: "var(--ink-soft)",
            lineHeight: 1.2,
          }}
        >
          <span>Built for seasons, not sprints.</span>
          <span style={{ color: "var(--moss)", fontStyle: "italic" }}>Documented from day one.</span>
          <span>One operator tends it.</span>
          <span style={{ color: "var(--accent)", fontStyle: "italic" }}>Shaped to the work.</span>
        </div>
      </div>
    </section>
  );
};

window.Process = Process;