function PlatformGrid() {
  const screens = [
    { icon: "calendar", img: "assets/feat-events.png", url: "event-management",
      title: "Every event in one place",
      desc: "A sortable, filterable list of all your events with status, venue, sub-type and quick actions — no more juggling spreadsheets." },
    { icon: "calendar", img: "assets/feat-calendar.png", url: "calendar",
      title: "Plan the season on a calendar",
      desc: "See everything that's coming up on a month calendar, color-coded by event, with list and calendar views plus filters." },
    { icon: "users", img: "assets/feat-devices.png", url: "devices",
      title: "Devices and check-in, monitored live",
      desc: "Register Stripe Terminals, scanners and iPads, then assign them to events and staff — with live status, battery and last-seen for every device at the gate." },
    { icon: "ticket", img: "assets/feat-event-details.png", url: "event-details",
      title: "Event details and live sell-through",
      desc: "Hero, schedule, venue and per-tier sales on a single page — see exactly which ticket tiers are moving." },
  ];

  return (
    <section className="platform-grid-section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>And there's more</span>
          <h2 style={{ marginTop: 16 }}>Everything else your event runs on.</h2>
          <p>From the first device you connect to the last refund you issue, the whole operation lives in one place — no exports, no extra tools.</p>
        </div>

        <div className="platform-grid">
          {screens.map((s) => (
            <article className="platform-card" key={s.url}>
              <div className="platform-card-frame">
                <div className="browser-bar">
                  <span className="dot"></span><span className="dot"></span><span className="dot"></span>
                  <div className="platform-card-url">app.primoticketing.com / {s.url}</div>
                </div>
                <img src={s.img} alt={s.title} loading="lazy" />
              </div>
              <div className="platform-card-body">
                <span className="platform-card-icon"><Icon name={s.icon} size={18} /></span>
                <div>
                  <h3>{s.title}</h3>
                  <p>{s.desc}</p>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.PlatformGrid = PlatformGrid;