/* global React */
function Capabilities() {
  const items = [
    {
      n: "01",
      cat: "Storefront",
      title: "A storefront built for what you sell.",
      desc: "Layouts composed for your category — mobile-first by default.",
      tags: ["Editorial", "Minimal", "Mobile-first"],
      glyph: "storefront",
      tint: "violet",
    },
    {
      n: "02",
      cat: "Catalog",
      title: "Products written in your voice.",
      desc: "Names, descriptions, pricing tiers, and SKU structure — ready to publish.",
      tags: ["Copy", "Pricing", "SKUs"],
      glyph: "catalog",
      tint: "rose",
    },
    {
      n: "03",
      cat: "Brand",
      title: "An identity that feels considered.",
      desc: "Type, color, logo, voice — generated as a system, not a moodboard.",
      tags: ["Type", "Color", "Logo"],
      glyph: "brand",
      tint: "orange",
    },
    {
      n: "04",
      cat: "Checkout",
      title: "Conversion-tuned checkout, day one.",
      desc: "Cards, wallets, subscriptions, and tax in 47 countries.",
      tags: ["Stripe", "Apple Pay", "Klarna", "Tax in 47"],
      glyph: "checkout",
      tint: "blue",
    },
    {
      n: "05",
      cat: "Operations",
      title: "Inventory, fulfillment, support.",
      desc: "Connect a supplier or 3PL. Dispatch reorders, packs, ships, and replies.",
      tags: ["3PL", "Reorders", "Replies in tone"],
      glyph: "ops",
      tint: "green",
    },
    {
      n: "06",
      cat: "Growth",
      title: "Campaigns, without an agency.",
      desc: "Email, paid social, landing pages, and offers — written and measured.",
      tags: ["Email", "Paid social", "Landing pages"],
      glyph: "analytics",
      tint: "rose",
    },
    {
      n: "07",
      cat: "Analytics",
      title: "Answers, not dashboards.",
      desc: "Ask “why did Tuesday spike?” and get a real answer.",
      tags: ["Ask in plain English", "Live data"],
      glyph: "analytics",
      tint: "violet",
    },
    {
      n: "08",
      cat: "Infrastructure",
      title: "Production-grade, invisibly.",
      desc: "CDN, edge rendering, SSL, accessibility, SOC 2 — running underneath.",
      tags: ["CDN", "SSL", "SOC 2"],
      glyph: "infra",
      tint: "blue",
    },
  ];

  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="num">03 ——</span> The surface area</span>
          <h2>Everything your store needs.<br/><span className="accent">In one place. Built to your direction.</span></h2>
          <p className="lede">Not a builder bolted to a checkout. Dispatch is one system — storefront, brand, products, payments, fulfillment, support, and marketing, built and run together.</p>
        </div>

        <div className="cap-grid">
          {items.map((it, i) => (
            <div className={"cap" + (it.wide ? " wide" : "")} key={i}>
              <div className="cap-top">
                <span className={"cap-icon cap-tint-" + it.tint}><Glyph kind={it.glyph} size={22} /></span>
                <span className="cap-num">{it.n} <span className="cap-cat">/ {it.cat}</span></span>
              </div>
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
              <div className="cap-tags">
                {it.tags.map((t, k) => <span className="cap-tag" key={k}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Capabilities = Capabilities;