// Mission strip — "Consume with Purpose" anchored by 3 pillars.

function Mission() {
  const C = "var(--c-cream)";
  const Y = "var(--c-yellow)";

  return (
    <section className="dark" id="about">
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0, 1.2fr) minmax(0, 1fr)",
          gap: 64, alignItems: "end", marginBottom: 56,
        }}>
          <div>
            <p className="eyebrow">Mission</p>
            <h2 style={{ color: C, maxWidth: "12ch" }}>
              Consume <em style={{ fontStyle: "italic", color: Y }}>with</em> Purpose.
            </h2>
          </div>
          <p className="lede" style={{
            color: "color-mix(in oklab, " + C + " 80%, transparent)",
            maxWidth: "44ch",
          }}>
            Every cup, every snack, every product you reach for is a small choice — and
            those choices add up. We exist to make the better choice the easy choice.
          </p>
        </div>

        <hr style={{ border: 0, borderTop: "1px solid color-mix(in oklab, " + C + " 22%, transparent)", margin: "0 0 36px" }} />

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48 }}>
          {[
            { tag: "Quality", body: "Well-made coffee, real food, curated goods. No filler. We sweat the small choices — they're what people taste." },
            { tag: "Local", body: "Oak Cliff first. Local makers, local crowd, local pride. 75208 — not licensed from a chain." },
            { tag: "Mindful", body: "Better daily choices. Healthier, more sustainable, more intentional — without the wellness lecture." },
          ].map(p => (
            <div key={p.tag}>
              <div style={{
                fontFamily: "var(--font-display)", fontSize: 44, lineHeight: 1.0,
                color: Y, marginBottom: 14,
              }}>{p.tag}.</div>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6,
                          color: "color-mix(in oklab, " + C + " 80%, transparent)" }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Mission = Mission;