const CUSTOMERS = [
  {
    num: "01", name: "Dairy & beef farms", icon: "Tractor", mode: "Sale · T1 / T2",
    details: "Power the back-paddock pump, calf-shed lights, fencer top-ups and the staff smoko shed without trenching new mains. Pays back in 18–30 months for most operations.",
    examples: [
      "Wairarapa beef station — T2 + irrigation, 2.6 km from grid",
      "Taranaki dairy — T1 + comms, $4.2k/yr diesel cut",
      "Manawatū lifestyle block — T1 with EV charger",
    ],
  },
  {
    num: "02", name: "Residential builds", icon: "Hammer", mode: "Hire · T1",
    details: "Day-one site power without the gen-set drone, fuel theft or Saturday-morning noise complaint. Tools charge off-peak solar overnight; site lights run the perimeter cam by themselves.",
    examples: [
      "Auckland infill build — 8-month hire, T1",
      "Queenstown architect home — T1 + tool kit",
      "Two-stage subdivision before mains is in",
    ],
  },
  {
    num: "03", name: "Roading & civil", icon: "Road", mode: "Long-term hire · T2 / T3",
    details: "Quiet variable-message-board and tower-light power for night work near homes. Sits inside council noise limits where diesel can't.",
    examples: [
      "SH1 night resurfacing, Pukekohe",
      "Bridge piling sub-base, Wellington",
      "Cycleway lighting & comms, 6-month run",
    ],
  },
  {
    num: "04", name: "Festivals & events", icon: "Music", mode: "Hire · summer skewed",
    details: "Silent stage power, vendor-row charge bays and EV-arrival charging on one chassis. Drops the on-site diesel count and the noise floor at the same time.",
    examples: [
      "Splore vendor row — 4 trailers, full event",
      "Rhythm & Vines — Stage 3",
      "Auckland NYE — 2 trailers, council-approved",
    ],
  },
  {
    num: "05", name: "Off-grid lifestyle", icon: "Home", mode: "Sale · T1",
    details: "Powers a tiny home, off-grid bach or a back-block whare without trenching, long-form battery installs or fuel deliveries up the metal.",
    examples: [
      "Coromandel bach — full self-sufficiency",
      "Pureora tiny home — T1 + Starlink",
      "Family bach top-up over Christmas",
    ],
  },
  {
    num: "06", name: "Vineyards & orchards", icon: "Grape", mode: "Seasonal hire · vintage",
    details: "Frost-fight booster pumps, vintage night-light towers and crew refrigeration. Wakes up at 2am, sleeps through the rest of the year.",
    examples: [
      "Marlborough vintage 2024 — 6-week hire",
      "Hawke's Bay frost run — 11 nights live",
      "Otago cellar-door pop-up",
    ],
  },
  {
    num: "07", name: "Film & TV units", icon: "Camera", mode: "Long hire · T3 base camp",
    details: "Silent unit base for hair, makeup, comms and craft — actors hear cues, not gennies. Boom ops love us.",
    examples: [
      "Feature shoot — 14-week hire",
      "TVC overnight base camp",
      "Documentary remote location, off-grid",
    ],
  },
  {
    num: "08", name: "Glamping & eco-tourism", icon: "Tent", mode: "Sale + shoulder hire",
    details: "Power six tents, a check-in office and a hot-water boost without diesel breaking the brand promise. Guests get hot showers, you keep the silence.",
    examples: [
      "6-tent Northland glamping site",
      "Off-grid lodge top-up, ski season",
      "Eco-pod retreat — full silent",
    ],
  },
  {
    num: "09", name: "Civil defence & FENZ", icon: "Shield", mode: "Standby contract · T3",
    details: "Standby fleet ready to deploy — remote command, comms uplink, refrigeration and lighting on tap. Fuel-independent in the worst week.",
    examples: [
      "Cyclone Gabrielle response unit",
      "Rural fire forward base",
      "Standby contract — regional council",
    ],
  },
  {
    num: "10", name: "Mobile services", icon: "Stethoscope", mode: "Bespoke sale · T1",
    details: "Mobile vet, dental, beauty, blood-bank, micro-bakery — power that travels with the practice. We co-design the fit-out.",
    examples: [
      "Mobile dental clinic for rural schools",
      "Field vet — large-animal unit",
      "Pop-up bakery, summer markets",
    ],
  },
];

function Customers() {
  const ICON = { Tractor, Hammer, Road, Music, Home, Grape, Camera, Tent, Shield, Stethoscope };
  return (
    <section className="customers section-pad" id="customers">
      <div className="shell">
        <div className="customers-head">
          <div>
            <div className="eyebrow" style={{color:'var(--ink)',opacity:0.55}}>§ 07 — Who it's for</div>
            <h2 className="kicker" style={{marginTop:14}}>Ten jobs.<br/>One trailer.</h2>
          </div>
          <p className="body-lg" style={{opacity:0.75}}>
            From a coffee cart at Splore to a calf-shed pump on a back-country station — silent power makes itself useful in places diesel never could. Hover any tile for the story.
          </p>
        </div>

        <div className="cust-grid">
          {CUSTOMERS.map(c => {
            const Ico = ICON[c.icon];
            return (
              <div className="cust-cell" key={c.num} tabIndex={0}>
                <div className="card-base">
                  <div>
                    <div className="cust-num"><span className="bar"/> Profile {c.num}</div>
                    <div className="cust-icon"><Ico size={32} stroke={1.5}/></div>
                    <h4>{c.name}</h4>
                  </div>
                  <span className="cust-mode">{c.mode}</span>
                </div>
                <div className="card-pop card-pop--cust" aria-hidden="true">
                  <div className="card-pop-eyebrow">
                    <span>{c.name}</span>
                    <span className="card-pop-tag">{c.mode}</span>
                  </div>
                  <p className="card-pop-detail">{c.details}</p>
                  <div className="card-pop-list-label">In the wild</div>
                  <ul className="card-pop-list">
                    {c.examples.map((ex, i) => <li key={i}>{ex}</li>)}
                  </ul>
                </div>
                <div className="card-hint card-hint--cust" aria-hidden="true">Hover for detail</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.Customers = Customers;