const TIERS = [
  {
    id: 1,
    name: "Solo",
    slug: "Compact / Single axle",
    blurb: "One operator. Off-grid bach, small builds, lifestyle blocks.",
    lede: "A single-axle utility-format trailer for one-operator jobs — off-grid lifestyle, small residential builds, mobile services, surveyors and lifestyle owners with modest power demand. Tows behind a 1-tonne ute. No special licence.",
    specs: [
      ["Footprint", "1.6 × 2.6 m · single axle"],
      ["Solar", "2.5–3.0 kW · folding"],
      ["Battery", "5 kWh LiFePO₄ → 15 kWh"],
      ["Inverter", "3 kW pure sine-wave"],
      ["Outputs", "2 × 15A · USB-C PD · 12V Anderson"],
      ["Cargo bay", "0.6 m³ lockable"],
      ["Tare", "~520 kg"],
    ],
    price: 19500,
    bayLabel: "0.6 m³",
  },
  {
    id: 2,
    name: "Crew",
    slug: "Tandem / Flagship",
    blurb: "Small teams. Mid builds, dairy, festivals, hospitality.",
    lede: "Our flagship. A tandem, fully-enclosed trailer built for small teams — mid-size construction sites, mid festivals, dairy support, vineyards and event hospitality. The workhorse of the rental fleet.",
    specs: [
      ["Footprint", "2.0 × 3.6 m · tandem"],
      ["Solar", "5.0 kW · bifold + ground option"],
      ["Battery", "20 kWh LiFePO₄ → 40 kWh"],
      ["Inverter", "5 kW · split-phase compatible"],
      ["Outputs", "4 × 15A · 1 × 32A 3φ · 12V/24V DC · USB"],
      ["Cargo bay", "2.4 m³ insulated"],
      ["Tare", "~1,150 kg"],
    ],
    price: 36500,
    bayLabel: "2.4 m³",
  },
  {
    id: 3,
    name: "Command",
    slug: "Tandem braked / Premium",
    blurb: "Big ops. Major sites, multi-day events, civil defence.",
    lede: "A premium, large-format trailer for big operations — major construction, multi-day festivals, film unit base camps, marae and community deployments, and civil-defence response. Powers tools, lighting, refrigeration and coordination simultaneously.",
    specs: [
      ["Footprint", "2.4 × 4.2 m · tandem braked"],
      ["Solar", "8.0–10.0 kW · extending bifold"],
      ["Battery", "40 kWh LiFePO₄ → 80 kWh"],
      ["Inverter", "10 kW · split / 3-phase"],
      ["Outputs", "6 × 15A · 2 × 32A 3φ · EV optional · full DC"],
      ["Cargo bay", "5.0 m³ insulated · bench-ready"],
      ["Tare", "~1,850 kg"],
    ],
    price: 58000,
    bayLabel: "5.0 m³",
  },
];

function Tiers() {
  const [active, setActive] = React.useState(2);
  const tier = TIERS.find(t => t.id === active);
  return (
    <section className="tiers section-pad" id="trailers">
      <div className="shell">
        <div className="tiers-head">
          <div>
            <div className="eyebrow" style={{color:'var(--ink)',opacity:0.55}}>§ 05 — Product range</div>
            <h2 className="kicker" style={{marginTop:14}}>Three trailers.<br/>One platform.</h2>
          </div>
          <p className="body-lg" style={{opacity:0.75}}>
            Every tier ships with a standardised internal mounting rail. Modules can be specified at order, retrofitted later, or rented separately on top of a trailer hire. The trailer is the platform — the modules are how it earns a living.
          </p>
        </div>
        <div className="tier-tabs" role="tablist">
          {TIERS.map(t => (
            <button key={t.id} role="tab" aria-selected={active===t.id}
              className={`tier-tab ${active===t.id?'active':''}`}
              onClick={()=>setActive(t.id)}>
              <div className="tier-num">Tier 0{t.id} — {t.slug}</div>
              <div className="tier-title">{t.name}</div>
              <div className="tier-blurb">{t.blurb}</div>
            </button>
          ))}
        </div>

        <div className="tier-detail" key={tier.id}>
          <div className="tier-art">
            <div className="tier-stats">
              <span><span className="live-dot"/> TRAILER · TIER 0{tier.id}</span>
              <span>SoC 100% · OUT 0 kW</span>
            </div>
            <SolarTrailer tier={tier.id} deployed={true}/>
          </div>
          <div className="tier-info">
            <div className="tier-tag-line">{tier.slug}</div>
            <h3>{tier.name}</h3>
            <p className="tier-lede">{tier.lede}</p>
            <dl className="spec-table">
              {tier.specs.map(([k,v]) => (
                <div className="spec-row" key={k}><dt>{k}</dt><dd>{v}</dd></div>
              ))}
            </dl>
            <div className="tier-price">
              <span className="from">From</span>
              <span className="num">${tier.price.toLocaleString()}</span>
              <span className="ex">NZD ex-GST</span>
              <span className="tier-price-badge">Launch parity · save 8% off post-launch RRP</span>
            </div>
            <div className="tier-cta-row">
              <a href="#contact" className="btn btn-dark">Reserve this tier <ArrowRight size={14} stroke={2} className="arrow"/></a>
              <a href="#buyhire" className="btn btn-outline-dark">Or hire from ${tier.id===1?150:tier.id===2?320:520}/day</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Tiers = Tiers;