/* global React */
const { useState, useEffect, useRef } = React;

/* ============================================================
   ICONS — clean single-line UI icons
   ============================================================ */
const ICONS = {
  zap:        <path d="M13 2 4 14h7v8l9-12h-7z" fill="currentColor" stroke="none" />,
  battery:    <g><rect x="2" y="7" width="15" height="10" rx="2.5" /><line x1="20" y1="11" x2="20" y2="13" /><path d="M9 9.2 7 12.5h2.7L8 15.2" fill="none" /></g>,
  wrench:     <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />,
  pin:        <g><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z" /><circle cx="12" cy="10" r="3" /></g>,
  calendar:   <g><rect x="3" y="4.5" width="18" height="17" rx="2" /><line x1="3" y1="9.5" x2="21" y2="9.5" /><line x1="8" y1="2.5" x2="8" y2="6.5" /><line x1="16" y1="2.5" x2="16" y2="6.5" /></g>,
  check:      <path d="M20 6 9 17l-5-5" />,
  truck:      <g><rect x="1.5" y="6.5" width="12.5" height="9.5" rx="1.2" /><path d="M14 9.5h3.6l3.4 3.2V16H14z" /><circle cx="6" cy="18" r="1.7" /><circle cx="17" cy="18" r="1.7" /></g>,
  snow:       <g><line x1="12" y1="2.5" x2="12" y2="21.5" /><line x1="3.7" y1="7.2" x2="20.3" y2="16.8" /><line x1="20.3" y1="7.2" x2="3.7" y2="16.8" /></g>,
  phone:      <path d="M22 16.9v2.6a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 3.7 2 2 0 0 1 4.1 1.5h2.6a2 2 0 0 1 2 1.7c.13.9.34 1.8.64 2.65a2 2 0 0 1-.45 2.1L7.6 9.2a16 16 0 0 0 6 6l1.25-1.24a2 2 0 0 1 2.1-.45c.85.3 1.75.5 2.65.64a2 2 0 0 1 1.7 2z" />,
  chat:       <path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-3.9-.9L3 20.3l1.3-3.9A8.4 8.4 0 0 1 3.5 11 8.4 8.4 0 0 1 12 2.6a8.4 8.4 0 0 1 9 8.9z" />,
  mail:       <g><rect x="2" y="4.5" width="20" height="15" rx="2" /><path d="m3 6.5 9 6 9-6" /></g>,
  star:       <path d="M12 2.5l2.9 6 6.6.6-5 4.4 1.5 6.4L12 16.9 6.5 20.4 8 14l-5-4.4 6.6-.6z" fill="currentColor" stroke="none" />,
  ruler:      <g><path d="M21.3 8.7 8.7 21.3a1 1 0 0 1-1.4 0l-4.6-4.6a1 1 0 0 1 0-1.4L15.3 2.7a1 1 0 0 1 1.4 0l4.6 4.6a1 1 0 0 1 0 1.4z" /><line x1="14" y1="4.5" x2="16" y2="6.5" /><line x1="11" y1="7.5" x2="12.5" y2="9" /><line x1="7.5" y1="11" x2="9.5" y2="13" /></g>,
  gauge:      <g><path d="M3.3 17a9 9 0 1 1 17.4 0" /><path d="M12 13.5 16 9" /></g>,
  shield:     <g><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /><path d="m9 11.5 2 2 4-4" /></g>,
  clock:      <g><circle cx="12" cy="12" r="9" /><path d="M12 7.5v5l3 2" /></g>,
  euro:       <g><path d="M16 18.5A6.5 6.5 0 1 1 16 5.5" /><line x1="4" y1="10.5" x2="13.5" y2="10.5" /><line x1="4" y1="14" x2="11.5" y2="14" /></g>,
  arrow:      <g><line x1="4" y1="12" x2="19.5" y2="12" /><path d="m14 6 6 6-6 6" /></g>,
  plus:       <g><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></g>,
  left:       <path d="m15 18-6-6 6-6" />,
  right:      <path d="m9 18 6-6-6-6" />,
  menu:       <g><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></g>,
  x:          <g><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></g>,
  idcard:     <g><rect x="2" y="5" width="20" height="14" rx="2" /><circle cx="8" cy="11" r="2.2" /><path d="M4.7 16.2a3.4 3.4 0 0 1 6.6 0" /><line x1="14.5" y1="10" x2="19" y2="10" /><line x1="14.5" y1="14" x2="18" y2="14" /></g>,
  card:       <g><rect x="2" y="5" width="20" height="14" rx="2" /><line x1="2" y1="10" x2="22" y2="10" /></g>,
  leaf:       <g><path d="M11 20.5A7.5 7.5 0 0 1 3.5 13c0-5.5 4.5-9.5 17-9.5 0 8.5-4.5 12.5-9.5 12.5z" /><path d="M4 20.5c4.5-4.5 7.5-6.5 12-7.5" /></g>,
  droplet:    <path d="M12 3.2S5.5 10 5.5 14.5a6.5 6.5 0 0 0 13 0C18.5 10 12 3.2 12 3.2z" />,
  refresh:    <g><path d="M3.5 12a8.5 8.5 0 0 1 14.7-5.8L21 9" /><path d="M21 4v5h-5" /><path d="M20.5 12a8.5 8.5 0 0 1-14.7 5.8L3 15" /><path d="M3 20v-5h5" /></g>,
  package:    <g><path d="m12 2.5 8.5 4.7v9.6L12 21.5 3.5 16.8V7.2z" /><path d="m3.8 7.3 8.2 4.5 8.2-4.5" /><line x1="12" y1="11.8" x2="12" y2="21.5" /></g>,
  hat:        <g><path d="M4 15a8 8 0 0 1 16 0" /><line x1="2.5" y1="15" x2="21.5" y2="15" /><line x1="2.5" y1="18.5" x2="21.5" y2="18.5" /><path d="M10 5.5h4V10" /></g>,
  roller:     <g><rect x="3" y="4" width="13" height="6" rx="1.5" /><path d="M16 7h3a2 2 0 0 1 2 2v1.5a2 2 0 0 1-2 2h-7V16" /><rect x="9" y="16" width="6" height="5" rx="1.5" /></g>,
  plug:       <g><path d="M9 2v5M15 2v5" /><path d="M6.5 7h11v3.5a5.5 5.5 0 0 1-11 0z" /><path d="M12 16v5.5" /></g>,
  brief:      <g><rect x="2.5" y="7" width="19" height="13.5" rx="2" /><path d="M8 7V5.2A2 2 0 0 1 10 3.2h4a2 2 0 0 1 2 2V7" /><line x1="2.5" y1="12" x2="21.5" y2="12" /></g>,
  upload:     <g><path d="M21 15.5v3.5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3.5" /><path d="m7.5 8 4.5-4.5L16.5 8" /><line x1="12" y1="3.5" x2="12" y2="16" /></g>,
  lock:       <g><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7.5a4 4 0 0 1 8 0V11" /></g>,
  sparkle:    <path d="M12 2.5l1.7 5 5 1.7-5 1.7L12 16l-1.7-5-5-1.7 5-1.7z" fill="currentColor" stroke="none" />,
  route:      <g><circle cx="6" cy="18.5" r="2.3" /><circle cx="18" cy="5.5" r="2.3" /><path d="M8.4 18.5H14a3.5 3.5 0 0 0 0-7h-4a3.5 3.5 0 0 1 0-7h5.6" /></g>,
};

function Icon({ name, ...rest }) {
  return (
    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor"
      strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...rest}>
      {ICONS[name] || null}
    </svg>
  );
}

/* ============================================================
   BRAND
   ============================================================ */
function ZeroGoMark({ size = 42 }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} aria-hidden="true" className="zg-mark">
      <circle cx="50" cy="50" r="45" fill="#15241b" stroke="#6cb43c" strokeWidth="6" />
      <rect x="30" y="29" width="40" height="11" rx="2.5" fill="#fff" />
      <rect x="30" y="60" width="40" height="11" rx="2.5" fill="#fff" />
      <path d="M57 31 L41 51 L50 51 L40 71 L62 49 L52 49 L66 31 Z" fill="#6cb43c" stroke="#15241b" strokeWidth="1.5" strokeLinejoin="round" />
    </svg>
  );
}

function Brand({ light }) {
  return (
    <span className="brand">
      <img className="brand__logo" src="assets/zerogo-wordmark.png" alt="ZeroGo" />
    </span>
  );
}

/* ============================================================
   HEADER
   ============================================================ */
const NAV = [
  { label: 'Home',          page: 'home', hash: 'top' },
  { label: 'Onze vloot',    page: 'fleet', hash: 'top' },
  { label: 'Het voertuig',  page: 'home', hash: 'voertuig' },
  { label: 'Waarom ZeroGo', page: 'home', hash: 'waarom' },
  { label: 'Onze kracht',   page: 'home', hash: 'kracht' },
  { label: 'Emissiezones',  page: 'home', hash: 'zones' },
  { label: 'Veelgesteld',   page: 'home', hash: 'faq' },
];

function Header({ page, go }) {
  const [open, setOpen] = useState(false);
  return (
    <header className="site-header">
      <div className="container site-header__bar">
        <a href="#top" onClick={(e) => { e.preventDefault(); go('home', 'top'); }}><Brand light /></a>
        <nav className="nav">
          {NAV.map((n) => (
            <a key={n.label} href={'#' + n.hash}
              onClick={(e) => { e.preventDefault(); go(n.page, n.hash); }}>{n.label}</a>
          ))}
        </nav>
        <div className="header-actions">
          <a className="header-phone" href="tel:+31850001234"><Icon name="phone" /> 085 - 000 12 34</a>
          <button className="btn btn--primary btn--sm" onClick={() => go('reserve', 'top')}>
            <Icon name="calendar" /> Beschikbaarheid
          </button>
          <button className="nav-toggle" onClick={() => setOpen(true)} aria-label="Menu"><Icon name="menu" /></button>
        </div>
      </div>

      <div className={'mnav' + (open ? ' open' : '')}>
        <div className="mnav__scrim" onClick={() => setOpen(false)} />
        <div className="mnav__panel">
          <button className="mnav__close" onClick={() => setOpen(false)} aria-label="Sluiten"><Icon name="x" /></button>
          {NAV.map((n) => (
            <a key={n.label} href={'#' + n.hash}
              onClick={(e) => { e.preventDefault(); setOpen(false); go(n.page, n.hash); }}>{n.label}</a>
          ))}
          <button className="btn btn--primary" style={{ marginTop: 12 }}
            onClick={() => { setOpen(false); go('reserve', 'top'); }}>
            <Icon name="calendar" /> Beschikbaarheid bekijken
          </button>
          <a className="header-phone" style={{ marginTop: 16, padding: '0 12px' }} href="tel:+31850001234">
            <Icon name="phone" /> 085 - 000 12 34
          </a>
        </div>
      </div>
    </header>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer({ go }) {
  return (
    <footer className="site-footer">
      <div className="container footer-grid">
        <div className="footer-about">
          <Brand light />
          <p className="footer-tagline">Jouw klus. Onze elektrische bus.</p>
          <p>De specialist in elektrische bedrijfswagens voor emissiezones. Direct inzetbaar, altijd opgeladen, zonder investering.</p>
        </div>
        <div className="footer-col">
          <h4>Aanbod</h4>
          <a href="#" onClick={(e) => { e.preventDefault(); go('fleet', 'top'); }}>Onze vloot</a>
          <a href="#voertuig" onClick={(e) => { e.preventDefault(); go('home', 'voertuig'); }}>Mercedes E-Vito Koeler</a>
          <a href="#" onClick={(e) => { e.preventDefault(); go('reserve', 'top'); }}>Offerte aanvragen</a>
          <a href="#waarom" onClick={(e) => { e.preventDefault(); go('home', 'waarom'); }}>Waarom ZeroGo</a>
          <a href="#zones" onClick={(e) => { e.preventDefault(); go('home', 'zones'); }}>Emissiezones</a>
        </div>
        <div className="footer-col">
          <h4>Steden</h4>
          <a href="#" onClick={(e) => e.preventDefault()}>Amsterdam</a>
          <a href="#" onClick={(e) => e.preventDefault()}>Rotterdam</a>
          <a href="#" onClick={(e) => e.preventDefault()}>Utrecht</a>
          <a href="#" onClick={(e) => e.preventDefault()}>Den Haag</a>
        </div>
        <div className="footer-col footer-contact">
          <h4>Contact</h4>
          <a href="tel:+31850001234"><Icon name="phone" /> 085 - 000 12 34</a>
          <a href="https://wa.me/31612345678"><Icon name="chat" /> WhatsApp ons</a>
          <a href="mailto:hallo@zerogo.nl"><Icon name="mail" /> hallo@zerogo.nl</a>
        </div>
      </div>
      <div className="container footer-bottom">
        <span>© 2026 ZeroGo · KvK 87 65 43 21 · BTW NL0012345678B01</span>
        <span className="footer-legal"><a href="#" onClick={(e) => e.preventDefault()}>Algemene voorwaarden</a> · <a href="#" onClick={(e) => e.preventDefault()}>Privacyverklaring</a></span>
      </div>
    </footer>
  );
}

Object.assign(window, { Icon, ZeroGoMark, Brand, Header, Footer, NAV });