/* global React, Icon */
const { useState: useStateCityPage } = React;

const CITY_SLUGS_LOCAL = {
  'Amsterdam':  'emissiezone-amsterdam',
  'Utrecht':    'emissiezone-utrecht',
  'Den Haag':   'emissiezone-den-haag',
  'Rotterdam':  'emissiezone-rotterdam',
  'Arnhem':     'emissiezone-arnhem',
  'Tilburg':    'emissiezone-tilburg',
  'Eindhoven':  'emissiezone-eindhoven',
  'Groningen':  'emissiezone-groningen',
  'Maastricht': 'emissiezone-maastricht',
};

const ZONE_RULES_ALGEMEEN = [
  ['check', 'Bestel- en vrachtauto\'s', 'De zone geldt uitsluitend voor commercieel verkeer. Personenauto\'s worden niet gecontroleerd.'],
  ['check', 'Fossiele voertuigen (kenteken 2025+)', 'Nieuwe fossiele bedrijfswagens met kentekendatum vanaf 2025 zijn niet toegestaan in de zone.'],
  ['check', 'Overgangsregeling', 'Euro 5-voertuigen zijn toegestaan tot en met 2026 · Euro 6-voertuigen tot en met 2027.'],
  ['euro', 'Boetes', '€130 voor bestelauto\'s · €320 voor vrachtauto\'s. Handhaving via kentekenherkenning (ANPR-camera\'s).'],
];

const CITY_DATA = {
  Amsterdam: {
    naam: 'Amsterdam',
    provincie: 'Noord-Holland',
    sinds: '1 jan 2025',
    gebied: 'Vrijwel het hele gebied binnen de A10',
    gebiedDetail: 'De zero-emissiezone omvat alle wijken binnen de ringweg A10: de binnenstad, Jordaan, De Pijp, Oost, Noord en grote delen van West. Invalswegen worden gecontroleerd met vaste ANPR-camera\'s bij elk knooppunt.',
    extra: 'Naast de zero-emissiezone geldt er ook een milieuzone voor oudere dieselpersonenauto\'s (Euro 3 en ouder) in een groot deel van de stad.',
    tip: 'Amsterdam heeft de hoogste controle-intensiteit van alle Nederlandse steden. Camera\'s bij elke hoofdinvalsweg registreren elk kenteken automatisch. Rij je regelmatig in Amsterdam? Elektrisch rijden is de enige betrouwbare oplossing.',
    voordelen: [
      ['zap', 'Altijd toegelaten', 'Een 100% elektrische bedrijfswagen valt in de schoonste categorie en mag altijd de zone in.'],
      ['shield', 'Geen ontheffing nodig', 'Met ZeroGo heb je geen gemeentelijke ontheffing nodig. Dat scheelt papierwerk en kosten.'],
      ['euro', 'Geen boetes', 'Voorkom boetes van €130 per rit. Bij dagelijks gebruik loopt dat snel op tot honderden euro\'s per maand.'],
    ],
  },
  Utrecht: {
    naam: 'Utrecht',
    provincie: 'Utrecht',
    sinds: '1 jan 2025',
    gebied: 'Binnenstad en omliggende wijken',
    gebiedDetail: 'De zero-emissiezone beslaat de Utrechtse binnenstad inclusief aangrenzende wijken zoals Lombok, Wittevrouwen en Nieuw Engeland. De begrenzing volgt grotendeels de singels en de ring om het historische centrum.',
    extra: 'Er geldt ook een milieuzone voor dieselpersonenauto\'s Euro 3 en ouder in dezelfde zone.',
    tip: 'Utrecht groeit snel als logistieke stad. De zone wordt de komende jaren naar verwachting uitgebreid. Ga je langdurig in Utrecht werken? Begin direct elektrisch — zo loop je nooit achter de feiten aan.',
    voordelen: [
      ['zap', 'Altijd toegelaten', 'Elektrisch is de enige categorie zonder restricties. Nu en na toekomstige uitbreidingen.'],
      ['shield', 'Klaar voor groei', 'Utrecht breidt de zone uit. Met een elektrische bus ben je al klaar voor de volgende fase.'],
      ['route', 'Heel centrum bereikbaar', 'Geen omrijden of afleverplek buiten de zone zoeken. Direct bij de deur leveren.'],
    ],
  },
  'Den Haag': {
    naam: 'Den Haag',
    provincie: 'Zuid-Holland',
    sinds: '1 jan 2025',
    gebied: 'Centrum en kustgebied (Scheveningen & Kijkduin)',
    gebiedDetail: 'De zone in Den Haag omvat het stadscentrum en is in 2026 uitgebreid met het kustgebied rondom Scheveningen en Kijkduin. Met de uitbreiding is Den Haag een van de grotere emissiezones van Nederland geworden.',
    extra: 'Een milieuzone voor oudere diesels is van kracht in een overlappend gebied in het centrum.',
    tip: 'De uitbreiding naar het kustgebied in 2026 overviel veel bezorg- en servicediensten. Heb je klanten aan de Haagse kust? Zorg dan dat je voertuig emissievrij is — ook buiten het centrum.',
    voordelen: [
      ['pin', 'Centrum én kust bereikbaar', 'Van Centrum tot Scheveningen: met een elektrische bus kom je overal.'],
      ['zap', 'Geen verrassingen bij uitbreiding', 'Den Haag breidt actief uit. Elektrisch rijden beschermt je tegen toekomstige zoneveranderingen.'],
      ['shield', 'Geen ontheffing nodig', 'Met ZeroGo rij je zonder gemeentelijke ontheffing de gehele zone in.'],
    ],
  },
  Rotterdam: {
    naam: 'Rotterdam',
    provincie: 'Zuid-Holland',
    sinds: '1 jan 2025',
    gebied: 'Groot deel van de binnenstad',
    gebiedDetail: 'Rotterdam\'s zero-emissiezone omvat het kerncentrum inclusief de binnenstadsdistricten rondom de Lijnbaan, Kop van Zuid en het Stadsdriehoek-gebied. Het havengebied zelf valt voorlopig buiten de zone, maar logistiek richting de binnenstad raakt de zone wel.',
    extra: null,
    tip: 'Rotterdam kijkt naar verdere uitbreiding richting het Noordereiland en Kralingen. Houd de gemeentelijke kaart bij voor updates — de grens kan snel verschuiven.',
    voordelen: [
      ['truck', 'Binnenstad volledig bereikbaar', 'Lever overal in het Rotterdamse centrum — geen omwegen, geen ontheffingen.'],
      ['zap', 'Toekomstbestendig', 'Rotterdam breidt de zone uit. Elektrisch rijden nu betekent geen problemen straks.'],
      ['euro', 'Bespaar op boetes', 'Boetes van €130–€320 per rit tellen snel op. Elektrisch rijden is de slimmere economische keuze.'],
    ],
  },
  Arnhem: {
    naam: 'Arnhem',
    provincie: 'Gelderland',
    sinds: '1 jun 2026',
    gebied: 'Binnenstad',
    gebiedDetail: 'Arnhem startte per 1 juni 2026 met een zero-emissiezone in de binnenstad. De begrenzing volgt de singels rondom het historische centrum. Dit is een van de nieuwste zones in Nederland en nog niet bij alle ondernemers bekend.',
    extra: 'De bestaande milieuzone voor dieselpersonenauto\'s (Euro 3 en ouder) blijft naast de zero-emissiezone bestaan.',
    tip: 'Arnhem is pas recent gestart. Veel chauffeurs zijn nog niet op de hoogte van de exacte grenzen. Controleer altijd de actuele gemeentelijke kaart en wijs je team erop.',
    voordelen: [
      ['zap', 'Altijd de zone in', 'Arnhem handhaaft actief, ook als zone nog nieuw is. Elektrisch is de enige zekerheid.'],
      ['pin', 'Geen grensonzekerheid', 'Weet je niet precies of een locatie in de zone ligt? Met elektrisch maakt het niet uit.'],
      ['shield', 'Voor op de muziek', 'Arnhem is gestart en groeit. Begin elektrisch voordat de druk op ontheffingen toeneemt.'],
    ],
  },
  Tilburg: {
    naam: 'Tilburg',
    provincie: 'Noord-Brabant',
    sinds: '1 jan 2025',
    gebied: 'Binnenstad',
    gebiedDetail: 'Tilburg hanteert een compacte zero-emissiezone in het stadscentrum. De zone is bewust klein gehouden om stadslogistiek niet te verstoren tijdens de overgangsperiode. De verwachting is dat de grenzen in de komende jaren worden uitgebreid.',
    extra: null,
    tip: 'Tilburg groeit als logistieke hub in Noord-Brabant. Wacht niet op uitbreiding van de zone — kies nu voor elektrisch en profiteer van de flexibiliteit die dat geeft.',
    voordelen: [
      ['route', 'Centrum altijd bereikbaar', 'Lever direct in het winkelcentrum en de voetgangerszone van Tilburg.'],
      ['zap', 'Klaar voor uitbreiding', 'Tilburg breidt de zone uit. Met ZeroGo loop je altijd voor op de regelgeving.'],
      ['euro', 'Geen boeterisico', 'Voorkom €130 per overtreding en rij altijd correct de zone in.'],
    ],
  },
  Eindhoven: {
    naam: 'Eindhoven',
    provincie: 'Noord-Brabant',
    sinds: '1 jan 2025',
    gebied: 'Centrum en omliggende wijken',
    gebiedDetail: 'Eindhoven heeft een middelgrote zero-emissiezone die het centrum en direct omliggende woonwijken beslaat. Technologiebedrijven, bouwbedrijven en logistiek zijn frequent actief in deze zone rondom de vele ontwikkellocaties.',
    extra: null,
    tip: 'Eindhoven trekt veel bouwverkeer rondom de Brainport-ontwikkelingen en stadsvernieuwingsprojecten. Controleer bij elk project of de locatie binnen de emissiezone valt — de grenzen zijn niet altijd intuïtief.',
    voordelen: [
      ['zap', 'Altijd toegang', 'Elektrisch rijden geeft onbeperkte toegang tot het hele zone-gebied in Eindhoven.'],
      ['pin', 'Brainport-klaar', 'Lever bij kantoren, fabrieken en bouwprojecten in het centrum zonder beperkingen.'],
      ['shield', 'Geen papierwerk', 'Geen ontheffingen aanvragen of bijhouden. ZeroGo regelt het voor je.'],
    ],
  },
  Groningen: {
    naam: 'Groningen',
    provincie: 'Groningen',
    sinds: '1 jan 2025',
    gebied: 'Binnenstad',
    gebiedDetail: 'Groningen is al jaren een van de groenste steden van Nederland. De zero-emissiezone beslaat de historische binnenstad inclusief de singels. De stad heeft een sterke handhavingscultuur en investeert actief in zero-emissiemobiliteit.',
    extra: null,
    tip: 'Groningen handhaaft streng en consequent. Reken niet op een waarschuwing bij een eerste overtreding — boetes worden direct en automatisch opgelegd via kentekenherkenning.',
    voordelen: [
      ['shield', 'Zero risico op boetes', 'Groningen handhaaft automatisch. Met elektrisch is er nooit een risico.'],
      ['leaf', 'Past bij Groningens imago', 'Groningen is groen. Elektrisch rijden past bij de cultuur en verwachtingen van klanten in de stad.'],
      ['zap', 'Direct inzetbaar', 'Geen aanvraagprocedures. ZeroGo levert de bus, jij rijdt de zone in.'],
    ],
  },
  Maastricht: {
    naam: 'Maastricht',
    provincie: 'Limburg',
    sinds: '1 jan 2025',
    gebied: 'Binnenstad',
    gebiedDetail: 'De zone in Maastricht omvat de historische binnenstad aan beide oevers van de Maas. Bezorgdiensten voor de vele horeca, winkels en musea zijn frequent aanwezig. De smalle straten vragen om compacte, wendbare voertuigen.',
    extra: null,
    tip: 'Maastricht heeft veel smalle steegjes en historische straten in de zone. Een compacte elektrische bestelauto is hier niet alleen een milieuvoordeel — ook praktisch bij het manoeuvreren.',
    voordelen: [
      ['truck', 'Compact & wendbaar', 'Onze E-Vito is geschikt voor de smalle straten van Maastrichts binnenstad.'],
      ['pin', 'Beide Maasovers bereikbaar', 'Lever aan Wyck én in het centrum zonder beperkingen.'],
      ['zap', 'Altijd toegelaten', 'Elektrisch is de enige categorie zonder restricties in de Maastrichtse zone.'],
    ],
  },
};

const ALLE_STEDEN = [
  'Amsterdam', 'Utrecht', 'Den Haag', 'Rotterdam',
  'Arnhem', 'Tilburg', 'Eindhoven', 'Groningen', 'Maastricht',
];

function CityHero({ city, go }) {
  return (
    <section className="hero hero--split" id="top">
      <div className="container hero__inner">
        <div className="hero__copy">
          <span className="eyebrow">
            <Icon name="pin" style={{ width: 15, height: 15 }} /> Zero-emissiezone · {city.provincie}
          </span>
          <h1>Zero-emissiezone {city.naam}</h1>
          <p className="hero__sub">
            Actief sinds <strong>{city.sinds}</strong> · {city.gebied}. Met ZeroGo rij je altijd emissievrij de stad in — zonder ontheffing, zonder boetes.
          </p>
          <div className="hero__cta">
            <button className="btn btn--primary btn--lg" onClick={() => go('reserve', 'top')}>
              <Icon name="calendar" /> Beschikbaarheid bekijken
            </button>
            <a className="btn btn--ghost btn--lg" href="index.html#zones" onClick={(e) => { e.preventDefault(); go('home', 'zones'); }}>
              Alle steden <Icon name="arrow" />
            </a>
          </div>
          <p className="hero__zones">
            <Icon name="check" /> 100% elektrisch · altijd toegelaten · geen ontheffing
          </p>
        </div>
        <div className="hero__media">
          <div className="zone-pop" style={{ position: 'static', boxShadow: 'var(--shadow-lg)', marginTop: 0 }}>
            <div className="zone-pop__head">
              <b style={{ fontSize: 20 }}>{city.naam}</b>
              <span className="zone-pop__badge"><Icon name="leaf" /> Zero-emissiezone</span>
            </div>
            <div className="zone-pop__meta">
              <span><Icon name="calendar" /> Actief sinds {city.sinds}</span>
              <span><Icon name="pin" /> {city.gebied}</span>
            </div>
            <ul className="zone-pop__rules">
              {ZONE_RULES_ALGEMEEN.map(([, t]) => (
                <li key={t}><Icon name="check" /> {t}</li>
              ))}
            </ul>
            <p className="zone-pop__zerogo"><Icon name="zap" /> Met ZeroGo rij je hier altijd in — zonder ontheffing.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function CityZoneInfo({ city }) {
  return (
    <section className="section section--tint" id="zone-info">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow"><Icon name="pin" style={{ width: 15, height: 15 }} /> De zone in {city.naam}</span>
          <h2>Wat houdt de emissiezone in?</h2>
        </div>
        <div className="vehicle" style={{ gap: 'clamp(32px,5vw,64px)', alignItems: 'flex-start' }}>
          <div>
            <h3 style={{ marginBottom: 16 }}>Zonegebied</h3>
            <p style={{ color: 'var(--muted)', fontSize: 17, lineHeight: 1.65 }}>{city.gebiedDetail}</p>
            {city.extra && (
              <div style={{ marginTop: 20, padding: '16px 20px', background: 'var(--teal-50)', borderRadius: 'var(--r)', borderLeft: '3px solid var(--accent)' }}>
                <p style={{ margin: 0, fontSize: 15, color: 'var(--teal-700)' }}><strong>Let op:</strong> {city.extra}</p>
              </div>
            )}
          </div>
          <div>
            <h3 style={{ marginBottom: 16 }}>Praktische tip</h3>
            <div style={{ padding: '20px 24px', background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)' }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <span style={{ color: 'var(--accent)', flexShrink: 0, marginTop: 2 }}><Icon name="sparkle" /></span>
                <p style={{ margin: 0, fontSize: 16, lineHeight: 1.65, color: 'var(--muted)' }}>{city.tip}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CityRules() {
  const [open, setOpen] = useStateCityPage(null);
  return (
    <section className="section" id="regels">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow"><Icon name="ruler" style={{ width: 15, height: 15 }} /> Regelgeving</span>
          <h2>Welke regels gelden in de zero-emissiezone?</h2>
          <p>De zero-emissiezones voor stadslogistiek gelden in heel Nederland voor dezelfde categorieën voertuigen en hanteren dezelfde boetescala.</p>
        </div>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          {ZONE_RULES_ALGEMEEN.map(([ic, titel, uitleg], i) => (
            <div key={titel} className={'faq-item' + (open === i ? ' open' : '')} style={{ marginBottom: 2 }}>
              <button className="faq-q" onClick={() => setOpen(open === i ? null : i)}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ color: 'var(--accent)', flexShrink: 0 }}><Icon name={ic} style={{ width: 18, height: 18 }} /></span>
                  {titel}
                </span>
                <span className="faq-q__ic"><Icon name="plus" /></span>
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? 200 : 0 }}>
                <div className="faq-a__inner">{uitleg}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CityVoordelen({ city, go }) {
  return (
    <section className="section section--tint" id="zerogo">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow"><Icon name="zap" style={{ width: 15, height: 15 }} /> Waarom ZeroGo in {city.naam}</span>
          <h2>Altijd de zone in, zonder gedoe</h2>
          <p>Onze volledig elektrische bedrijfswagens zijn toegelaten in alle Nederlandse zero-emissiezones. Geen ontheffingen, geen boetes, geen zorgen.</p>
        </div>
        <div className="why-grid">
          {city.voordelen.map(([ic, t, d]) => (
            <div className="why-card" key={t}>
              <div className="why-card__ic"><Icon name={ic} /></div>
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 'clamp(28px,4vw,44px)' }}>
          <button className="btn btn--primary btn--lg" onClick={() => go('reserve', 'top')}>
            <Icon name="calendar" /> Beschikbaarheid bekijken
          </button>
        </div>
      </div>
    </section>
  );
}

function CityOtherCities({ current, go }) {
  const others = ALLE_STEDEN.filter((s) => s !== current).slice(0, 6);
  return (
    <section className="section" id="andere-steden">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow"><Icon name="pin" style={{ width: 15, height: 15 }} /> Andere steden</span>
          <h2>Emissiezones in heel Nederland</h2>
          <p>ZeroGo is inzetbaar in alle Nederlandse zero-emissiezones. Bekijk de regels per stad.</p>
        </div>
        <div className="zone-chips" style={{ justifyContent: 'center' }}>
          {others.map((naam) => (
            <a
              key={naam}
              href={CITY_SLUGS_LOCAL[naam]}
              className="zone-chip"
              onClick={(e) => { e.preventDefault(); go('city', 'top', naam); }}
            >
              <Icon name="pin" /> {naam}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function CityCta({ city, go }) {
  return (
    <section className="section section--tight">
      <div className="container">
        <div className="cta-banner">
          <div className="cta-banner__inner">
            <div>
              <h2>Klaar voor {city.naam}?</h2>
              <p>Start vandaag nog met elektrisch rijden in de zero-emissiezone. Geen investering, maandelijks opzegbaar.</p>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn--primary btn--lg" onClick={() => go('reserve', 'top')}>
                <Icon name="calendar" /> Beschikbaarheid bekijken
              </button>
              <button className="btn btn--light btn--lg" onClick={() => go('reserve', 'top')}>
                Offerte aanvragen
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CityPage({ cityName, go }) {
  const city = CITY_DATA[cityName];
  if (!city) {
    return (
      <main>
        <section className="section">
          <div className="container" style={{ textAlign: 'center', padding: '80px 0' }}>
            <h2>Stad niet gevonden</h2>
            <p style={{ color: 'var(--muted)', marginTop: 12 }}>We hebben geen informatie over deze emissiezone.</p>
            <button className="btn btn--primary" style={{ marginTop: 24 }} onClick={() => go('home', 'zones')}>
              Bekijk alle steden
            </button>
          </div>
        </section>
      </main>
    );
  }
  return (
    <main>
      <div style={{ background: 'var(--deep)', padding: '10px 0 0' }}>
        <div className="container">
          <button
            style={{ background: 'none', border: 'none', color: 'var(--muted)', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, fontSize: 14, padding: '8px 0' }}
            onClick={() => go('home', 'zones')}
          >
            <Icon name="left" style={{ width: 16, height: 16 }} /> Alle emissiezones
          </button>
        </div>
      </div>
      <CityHero city={city} go={go} />
      <CityZoneInfo city={city} />
      <CityRules />
      <CityVoordelen city={city} go={go} />
      <CityOtherCities current={city.naam} go={go} />
      <CityCta city={city} go={go} />
    </main>
  );
}

window.CityPage = CityPage;