const MODULES = [
  {
    name: "Irrigation pump", icon: "Pump",
    desc: "Pressure pump + filter for remote stock or crop irrigation.",
    sale: 2400, day: 45, week: 180, month: 520,
    details: "1.5 kW marine-grade pump, self-cleaning 200µm filter, 100 m of layflat hose and quick-connect fittings. Pulls from creek, tank or bore — runs all day off the trailer's solar without touching grid.",
    examples: [
      "Stock water for 200 head, 4 km from the shed",
      "Frost-fight booster across a 6 ha block",
      "Calf-shed top-up over a wet spring",
    ],
  },
  {
    name: "Espresso & hospitality", icon: "Coffee",
    desc: "Full coffee + service fit-out. Boiler, water, bench.",
    sale: 8500, day: 110, week: 450, month: 1300,
    details: "Twin-group commercial machine, 22 L water + grey-water capture, fold-out 1.4 m bar bench, dual grinders and an under-counter chiller.",
    examples: [
      "≈ 600 coffees a day on solar alone",
      "Stage-side cart at Splore — 4 days, zero diesel",
      "Wedding catering with full barista service",
    ],
  },
  {
    name: "PA & lighting rig", icon: "Speaker",
    desc: "Stage-grade PA + LED rig for events up to 500 pax.",
    sale: 4800, day: 80, week: 320, month: 920,
    details: "8 kW PA, 24× DMX LED pars, 2× moving heads, FOH desk and 100 m of armoured cable. Flight-cased and stage-ready.",
    examples: [
      "500-pax outdoor wedding, 6 hours, silent",
      "Council 'Christmas in the Park' stage",
      "Brand activation at the A&P show",
    ],
  },
  {
    name: "Tool & charging", icon: "Tools",
    desc: "Tool charge bench + 240 V power tool station.",
    sale: 1800, day: 30, week: 120, month: 340,
    details: "6× Milwaukee / DeWalt / Makita fast-chargers, 4× 240 V outlets, lockable tool wall and overnight battery rotation.",
    examples: [
      "Frame crew of 8 charging overnight on-site",
      "Renovation with no street power",
      "Subdivision build before mains is in",
    ],
  },
  {
    name: "Refrigeration", icon: "Snow",
    desc: "Insulated chest + chiller for catering and field crews.",
    sale: 3200, day: 55, week: 220, month: 640,
    details: "240 L chest freezer + 180 L chiller. Holds 5 °C / -18 °C set-and-forget, runs through the night on stored solar — NZFS-compliant temperature logging on board.",
    examples: [
      "200-head plated dinner, food-safe all night",
      "Vaccine field clinic — cold chain held 36 h",
      "Game-meat hold for hunters in the bush",
    ],
  },
  {
    name: "EV fast-charge", icon: "Plug",
    desc: "Type 2 connector for events, ski-fields, rural EVs.",
    sale: 3800, day: 65, week: 260, month: 750,
    details: "22 kW Type 2 with OCPP, RFID and app start. Pulls from the trailer's battery and refills off solar — zero new grid connection needed.",
    examples: [
      "Festival EV hub — 60 vehicles a day",
      "Back-country lodge stop-gap charger",
      "Worksite ute & van top-up between shifts",
    ],
  },
  {
    name: "Comms & Starlink", icon: "Wifi",
    desc: "Starlink dish, 5G failover, Wi-Fi mesh, SIP phone.",
    sale: 2900, day: 48, week: 190, month: 560,
    details: "Roaming Starlink dish, dual-SIM 5G failover, 4× SSID Wi-Fi mesh out to 80 m, SIP desk phone and a CCTV uplink port.",
    examples: [
      "Site office online on day one, before fibre",
      "FENZ remote command post",
      "Concert-ground POS + ticketing uplink",
    ],
  },
  {
    name: "Bespoke build", icon: "Cog",
    desc: "Quoted to spec. Mobile vet, dental, beauty, retail.",
    sale: null, day: null, week: null, month: null,
    details: "We co-design the fit-out with you — wet bench, exam table, ventilation, signage, payment, the lot. 8–14 week build window depending on spec.",
    examples: [
      "Mobile dental clinic for rural schools",
      "Pop-up brand activation across three cities",
      "Large-animal vet unit, fully equipped",
    ],
  },
];

function Modules() {
  const ICON = { Pump, Coffee, Speaker, Tools, Snow, Plug, Wifi, Cog };
  return (
    <section className="modules section-pad" id="modules">
      <div className="shell">
        <div className="modules-head">
          <div>
            <div className="eyebrow">§ 05.2 — Cargo bay ecosystem</div>
            <h2 className="kicker" style={{marginTop:14}}>Bolt-on,<br/><span style={{color:'var(--signal)'}}>earn more.</span></h2>
          </div>
          <p className="body-lg" style={{opacity:0.78}}>
            A standardised internal mounting rail means a single trailer becomes a coffee cart, an irrigation station, a stage power hub, or a mobile EV charger. Specify modules at order, retrofit them later, or rent them separately on top of a trailer hire.
          </p>
        </div>

        <div className="modules-grid">
          {MODULES.map(m => {
            const Ico = ICON[m.icon];
            return (
              <div className="module-card" key={m.name} tabIndex={0}>
                <div className="card-base">
                  <div>
                    <div className="module-icon"><Ico size={28} stroke={1.5}/></div>
                    <h4>{m.name}</h4>
                    <p>{m.desc}</p>
                  </div>
                  <div className="module-prices">
                    {m.sale ? (
                      <>
                        <span className="pp"><span className="lbl">Buy</span><span className="v">${m.sale.toLocaleString()}</span></span>
                        <span className="pp"><span className="lbl">Day</span><span className="v">${m.day}</span></span>
                        <span className="pp"><span className="lbl">Week</span><span className="v">${m.week}</span></span>
                        <span className="pp"><span className="lbl">Mo</span><span className="v">${m.month}</span></span>
                      </>
                    ) : (
                      <span className="pp"><span className="lbl">Pricing</span><span className="v">On quote</span></span>
                    )}
                  </div>
                </div>
                <div className="card-pop" aria-hidden="true">
                  <div className="card-pop-eyebrow">
                    <span>{m.name}</span>
                    <span className="card-pop-tag">Detail</span>
                  </div>
                  <p className="card-pop-detail">{m.details}</p>
                  <div className="card-pop-list-label">In the field</div>
                  <ul className="card-pop-list">
                    {m.examples.map((ex, i) => <li key={i}>{ex}</li>)}
                  </ul>
                </div>
                <div className="card-hint" aria-hidden="true">Hover for detail</div>
              </div>
            );
          })}
        </div>

        <div className="modules-rail"><span>Standardised rail · hot-swappable · NZ-built · 5-year warranty</span></div>
      </div>
    </section>
  );
}
window.Modules = Modules;