function Gallery() {
  const tabs = [
  { id: "dashboard", label: "Dashboard", icon: "chart", num: "01",
    title: "Your whole season, on one screen.",
    desc: "Live revenue, tickets sold, scans, season-to-date totals and year-over-year comparisons — the moment you log in. Switch between events without losing context.",
    bullets: ["Live revenue & ticket counters", "Season date range with YoY comparison", "Sales & tickets analytics charts", "Featured events with at-a-glance stats"],
    img: "assets/feat-dashboard.png" },
  { id: "producer", label: "Event Setup", icon: "calendar", num: "02",
    title: "Set up an event in minutes, not hours.",
    desc: "Pick \"Tickets Only\" and start selling the moment you log in. Our guided builder walks you through the essentials with smart defaults — schedule, on-sale date, venue, ticket types and sponsors. We'll even auto-fill the basics from your past events.",
    bullets: ["Three-step builder: Event → Ticket Setup → Review", "AI auto-fill from previous events", "Templates for recurring events", "Promo codes & discounts"],
    img: "assets/feat-event-setup.png" },
  { id: "ticketing", label: "Ticketing", icon: "ticket", num: "03",
    title: "Flexible ticket types and pricing.",
    desc: "However your pricing works, Primo handles it. Set pre-sale and gate prices per category, control single-day vs multi-day access, and decide how QR codes behave — one pass or one per day.",
    bullets: ["Pre-sale, gate and base pricing per category", "Single-day or multi-day passes", "Per-day or single-QR scan behavior", "Color-coded categories with on/off toggles"],
    img: "assets/feat-ticketing.png" },
  { id: "boxoffice", label: "Box Office", icon: "ticket", num: "04",
    title: "Sell at the door, on any device.",
    desc: "Run walk-up sales through whatever payment-capable device is connected — cash, card, contactless or wallet. Track the open shift's gross, refunds and average ticket live as the line moves.",
    bullets: ["Cash, card, contactless & wallet at the gate", "Live shift totals — gross, refunds, avg ticket", "Per-category sold-today and stock counts", "Recent transactions logged in real time"],
    img: "assets/feat-box-office.png" },
  { id: "sponsors", label: "Sponsors", icon: "sponsor", num: "05",
    title: "Digital sponsorships, built into the platform.",
    desc: "Replace the sponsor spreadsheet with a real pipeline — tiers, contracts and outstanding balances tracked all season. Logos auto-applied to tickets and confirmations.",
    bullets: ["Title, Gold, Silver, Bronze tier templates", "Outstanding balance alerts", "Easy payment collection", "Logos on tickets & confirmations", "Reusable across the season"],
    img: "assets/screen-sponsors.png" },
  { id: "orders", label: "Orders & Refunds", icon: "dollar", num: "06",
    title: "Find any order. Refund in one click.",
    desc: "Search across every event by name, email, phone, order ID or amount — then issue a full or partial refund inline. Customer support stops eating your day.",
    bullets: ["Search every order across all events", "Inline full or partial refunds", "Net revenue and refund totals at a glance", "One-click export"],
    img: "assets/feat-orders.png" },
  { id: "payouts", label: "Payments", icon: "credit-card", num: "07",
    title: "Same-day onboarding, same-day payments.",
    desc: "Connect your bank in about five minutes and start selling tickets instantly. It's easy and painless.",
    bullets: ["Built on Stripe's technology \u2014 supported by Primo", "One-click payments \u2014 Apple Pay, Google Pay, Link", "Chargeback guarantee", "Authorization Boost provided by Stripe", "In-person sales with Stripe Terminal"],
    img: "assets/feat-payments.png" },
  { id: "reporting", label: "Reporting", icon: "chart", num: "08",
    title: "Build it once. Schedule it forever.",
    desc: "Build custom reports across sales and attendance, save them, and schedule automatic delivery to your team. No more manual number-pulling at the end of every event.",
    bullets: ["Pre-built report templates", "Save private or team reports", "Scheduled, shareable delivery", "Exports refreshed in minutes"],
    img: "assets/feat-reporting.png" }];


  const [active, setActive] = React.useState("dashboard");
  const tab = tabs.find((t) => t.id === active);

  return (
    <section className="gallery" id="customers">
      <div className="wrap">
        <div className="section-head">
          <h2 style={{ marginTop: 16, color: "var(--text-on-dark)" }}>Every part of your event ops, in one product.</h2>
          <p style={{ color: "var(--text-on-dark-2)" }}>No more spreadsheets and no more wondering where you saved the last document. Switch between the views your team actually uses — without switching tools, logins or data exports.</p>
        </div>

        <div className="gallery-tabs" role="tablist" style={{ flexWrap: "wrap" }}>
          {tabs.map((t) =>
          <button key={t.id} className={"gallery-tab" + (active === t.id ? " active" : "")} onClick={() => setActive(t.id)} role="tab" aria-selected={active === t.id}>
              <Icon name={t.icon} size={16} />
              {t.label}
              <span className="num">{t.num}</span>
            </button>
          )}
        </div>

        <div className="gallery-stage">
          <div className="gallery-info">
            <h3>{tab.title}</h3>
            <p>{tab.desc}</p>
            <ul>
              {tab.bullets.map((b) =>
              <li key={b}><Icon name="check-circle" size={18} />{b}</li>
              )}
            </ul>
          </div>
          <div className={"gallery-frame gallery-frame-" + tab.id}>
            <div className="browser-bar">
              <span className="dot"></span><span className="dot"></span><span className="dot"></span>
              <div style={{ flex: 1, marginLeft: 8, padding: "4px 12px", background: "rgba(255,255,255,0.04)", borderRadius: 6, fontSize: 11, fontFamily: "'JetBrains Mono', monospace", color: "rgba(255,255,255,0.5)" }}>
                app.primoticketing.com / {tab.id}
              </div>
            </div>
            <img src={tab.img} alt={tab.title} />
          </div>
        </div>
      </div>
    </section>);

}

window.Gallery = Gallery;