/* global React, Icon */

/* ============================================================
   FLEET / VLOOT-OVERZICHT
   ============================================================ */

const FLEET = [
  {
    id: 'evito',
    img: 'assets/evito-laden.jpg',
    tag: 'Mercedes-Benz',
    name: 'E-Vito Koeler',
    badge: 'Onze specialiteit',
    body: 'Volledig elektrische koelwagen, instelbaar van 0°C tot 8°C. Voor versvervoer, medische logistiek en spoedleveringen.',
    specs: [
      ['gauge', 'tot 350 km'],
      ['snow', 'Gekoeld 0–8°C'],
      ['idcard', 'Rijbewijs B'],
    ],
    price: '€950',
    rate: 950,
    featured: true,
  },
  {
    id: 'citan',
    img: 'assets/mercedes-citan.webp',
    tag: 'Mercedes-Benz',
    name: 'eCitan Business Pro',
    body: 'Compacte stadsbus, lange uitvoering met dubbele cabine voor 3 personen. Wendbaar in de drukke binnenstad.',
    specs: [
      ['gauge', 'tot 285 km'],
      ['package', '2,9 m³ laadruimte'],
      ['idcard', 'Rijbewijs B'],
    ],
    price: 'Op aanvraag',
  },
  {
    id: 'pv5',
    img: 'assets/kia-pv5.webp',
    tag: 'Kia',
    name: 'PV5 L2H1 Long Range',
    body: 'Nieuwe generatie e-bestelbus met ruime actieradius en slim laadvloer-ontwerp. Business-uitvoering met camera en navigatie.',
    specs: [
      ['gauge', '416 km WLTP'],
      ['battery', '71,2 kWh'],
      ['idcard', 'Rijbewijs B'],
    ],
    price: 'Op aanvraag',
  },
  {
    id: 'interstar',
    img: 'assets/nissan-interstar.webp',
    tag: 'Nissan',
    name: 'Interstar L2H2 Limited',
    body: 'Grote bestelbus met hoog dak voor groot volume. De werkpaard van de vloot — 5 jaar garantie inbegrepen.',
    specs: [
      ['gauge', '400 km WLTP'],
      ['battery', '87 kWh'],
      ['idcard', 'Rijbewijs B'],
    ],
    price: 'Op aanvraag',
  },
  {
    id: 'edeliver',
    img: 'assets/maxus-edeliver3.webp',
    tag: 'Maxus',
    name: 'eDeliver 3 LWB',
    body: 'Betrouwbare middelgrote bezorgbus met lange wielbasis. Ideaal voor stedelijke distributie en pakketrondes.',
    specs: [
      ['gauge', '232 km WLTP'],
      ['battery', '50 kWh'],
      ['idcard', 'Rijbewijs B'],
    ],
    price: 'Op aanvraag',
  },
];

function VehicleCard({ v, go }) {
  return (
    <article className={'fleet-card' + (v.featured ? ' fleet-card--feat' : '')}>
      <div className="fleet-card__media">
        <img src={v.img} alt={v.tag + ' ' + v.name} loading="lazy" />
        {v.badge ? <span className="fleet-card__badge"><Icon name="star" /> {v.badge}</span> : null}
      </div>
      <div className="fleet-card__body">
        <span className="fleet-card__tag">{v.tag}</span>
        <h3 className="fleet-card__name">{v.name}</h3>
        <p className="fleet-card__desc">{v.body}</p>
        <div className="fleet-card__specs">
          {v.specs.map(([ic, label]) => (
            <span className="fleet-spec" key={label}>
              <Icon name={ic} /> {label}
            </span>
          ))}
        </div>
        <div className="fleet-card__foot">
          <div className="fleet-card__price">
            {v.price.startsWith('€')
              ? <React.Fragment><span className="from">vanaf</span><b>{v.price}</b><span className="per">p/m</span></React.Fragment>
              : <b className="onreq">{v.price}</b>}
          </div>
          <button className="btn btn--primary btn--sm" onClick={() => go('reserve', 'top', v.id)}>
            Offerte <Icon name="arrow" />
          </button>
        </div>
      </div>
    </article>
  );
}

function FleetPage({ go }) {
  return (
    <main className="fleet-page">
      <section className="section section--tight fleet-head-sec">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow"><Icon name="truck" style={{ width: 15, height: 15 }} /> Onze vloot</span>
            <h2>Eén partner, de hele elektrische vloot</h2>
            <p>Van compacte stadsbus tot grote koelwagen — allemaal 100% elektrisch, direct inzetbaar in elke emissiezone en maandelijks opzegbaar. All-in, zonder investering.</p>
          </div>
        </div>
      </section>

      <section className="section section--tint" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="fleet-grid">
            {FLEET.map((v) => <VehicleCard key={v.id} v={v} go={go} />)}
            <div className="fleet-cta-card">
              <div className="fleet-cta-card__ic"><Icon name="chat" /></div>
              <h3>Iets anders nodig?</h3>
              <p>Zoek je een specifieke uitvoering of een hele wagenpark-oplossing? We denken graag mee.</p>
              <button className="btn btn--ghost btn--sm" onClick={() => go('reserve', 'top')}>
                <Icon name="phone" /> Neem contact op
              </button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { FleetPage, FLEET });