/* Systems — 4 systems as an editorial list with botanical accents */

const SYSTEMS = [
  {
    n: "01",
    code: "OP",
    title: "Operational Systems",
    italic: "the soil",
    desc: "The software that keeps daily work moving. Inventory, dashboards, internal tools, control planes.",
    bot: "sprig",
    bullets: ["Inventory ops", "Workflow", "Dashboards", "Internal tools"],
  },
  {
    n: "02",
    code: "DP",
    title: "Digital Platforms",
    italic: "the leaves",
    desc: "Customer-facing systems that hold up in a real storm. Websites, portals, ordering flows.",
    bot: "leaf",
    bullets: ["Websites", "Ordering", "Portals", "Customer flows"],
  },
  {
    n: "03",
    code: "CM",
    title: "Commercial Media",
    italic: "the light",
    desc: "Photography and visual assets, taken in season. One brand across every surface.",
    bot: "sun",
    bullets: ["Restaurant photo", "Graduation", "Branded assets", "Marketing"],
  },
  {
    n: "04",
    code: "BI",
    title: "Brand Infrastructure",
    italic: "the bloom",
    desc: "One brand, every surface. Menus, identity, presentation. Printed, plated, posted.",
    bot: "flower",
    bullets: ["Menu systems", "Identity", "Presentation", "Experience"],
  },
];

const Systems = () => {
  return (
    <section id="systems" className="section">
      <div className="reveal label" style={{ marginBottom: 16 }}>// 02 · what we grow</div>
      <h2
        className="reveal display"
        style={{
          fontSize: "var(--t-h1)",
          maxWidth: "18ch",
          marginBottom: "clamp(40px, 5vw, 72px)",
          "--reveal-delay": "120ms",
        }}
      >
        Four systems.
        <br />
        <span style={{ fontStyle: "italic", color: "var(--moss)" }}>One garden.</span>
      </h2>

      <div className="reveal" style={{ maxWidth: 720, color: "var(--ink-soft)", marginBottom: 56, fontSize: "var(--t-h3)", lineHeight: 1.45 }}>
        Most agencies sell these as four separate projects. Here they grow
        from the same root, because that's how a business actually uses them.
      </div>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: "clamp(1px, 0.2vw, 2px)",
          background: "var(--line-2)",
          border: "1px solid var(--line-2)",
        }}
      >
        {SYSTEMS.map((s, i) => (
          <article
            key={s.code}
            className="reveal lift"
            style={{
              background: "var(--paper)",
              padding: "clamp(28px, 3.2vw, 44px)",
              minHeight: 360,
              display: "flex",
              flexDirection: "column",
              gap: 18,
              position: "relative",
              "--reveal-delay": i * 100 + "ms",
            }}
          >
            <div className="mono" style={{ display: "flex", justifyContent: "space-between", color: "var(--ink-mute)", fontSize: 12 }}>
              <span>/{s.n}</span>
              <span style={{ color: "var(--moss)" }}>{s.code}</span>
            </div>

            <div style={{ color: "var(--moss)", alignSelf: "flex-start" }}>
              <Botanical kind={s.bot} size={56} stroke={1.2} />
            </div>

            <h3 className="display" style={{ fontSize: "clamp(26px, 2.4vw, 34px)" }}>
              {s.title}
              <span style={{ display: "block", fontStyle: "italic", color: "var(--moss)", fontSize: "0.6em", marginTop: 4 }}>
                / {s.italic}
              </span>
            </h3>

            <p style={{ color: "var(--ink-soft)", fontSize: 16, lineHeight: 1.5 }}>{s.desc}</p>

            <ul
              style={{
                listStyle: "none",
                padding: 0,
                margin: "auto 0 0 0",
                display: "flex",
                flexWrap: "wrap",
                gap: 6,
              }}
            >
              {s.bullets.map((b) => (
                <li
                  key={b}
                  className="mono"
                  style={{
                    fontSize: 11,
                    letterSpacing: "0.06em",
                    textTransform: "uppercase",
                    border: "1px solid var(--line-2)",
                    borderRadius: 999,
                    padding: "5px 10px",
                    color: "var(--ink-mute)",
                  }}
                >
                  {b}
                </li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </section>
  );
};

window.Systems = Systems;