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

/* ---------- shared icons ---------- */
const Icon = {
  arrowRight: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  arrowLeft: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M19 12H5M11 18l-6-6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  check: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M4 12.5l5 5L20 6.5" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  chevron: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  plus: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/></svg>
  ),
  trash: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M4 7h16M9 7V5a1 1 0 011-1h4a1 1 0 011 1v2m2 0v12a1 1 0 01-1 1H7a1 1 0 01-1-1V7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  user: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}><circle cx="12" cy="8" r="4" stroke="currentColor" strokeWidth="2"/><path d="M4 21c0-4 3.5-6 8-6s8 2 8 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
  ),
  building: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M4 21V5a1 1 0 011-1h9a1 1 0 011 1v16M15 9h4a1 1 0 011 1v11M4 21h17M8 8h3M8 12h3M8 16h3" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  mail: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="2"/><path d="M4 7l8 6 8-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  upload: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M12 16V8M8 12l4-4 4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/><path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
  ),
  file: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/><path d="M14 2v6h6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  xCircle: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2"/><path d="M15 9l-6 6M9 9l6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
  ),
  pin: (p) => (
    <svg viewBox="0 0 24 24" fill="none" {...p}><path d="M12 21s7-5.7 7-11a7 7 0 10-14 0c0 5.3 7 11 7 11z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/><circle cx="12" cy="10" r="2.5" stroke="currentColor" strokeWidth="2"/></svg>
  ),
  apple: (p) => (
    <svg viewBox="0 0 24 24" fill="#fff" {...p}><path d="M17.05 12.54c-.03-2.66 2.17-3.93 2.27-4-1.24-1.81-3.16-2.06-3.84-2.09-1.63-.17-3.18.96-4.01.96-.82 0-2.1-.94-3.45-.91-1.77.03-3.4 1.03-4.31 2.61-1.84 3.19-.47 7.91 1.32 10.5.87 1.27 1.91 2.69 3.27 2.64 1.31-.05 1.81-.85 3.4-.85 1.58 0 2.03.85 3.42.82 1.41-.03 2.31-1.29 3.18-2.56.99-1.47 1.4-2.89 1.42-2.96-.03-.01-2.72-1.04-2.75-4.13zM14.6 4.93c.72-.88 1.21-2.09 1.07-3.3-1.04.04-2.3.69-3.05 1.56-.67.77-1.25 2.01-1.09 3.19 1.16.09 2.35-.59 3.07-1.45z"/></svg>
  ),
  googlePlay: (p) => (
    <svg viewBox="0 0 24 24" {...p}>
      <path d="M3.609 1.814 13.792 12 3.61 22.186a.996.996 0 0 1-.609-.92V2.734c0-.392.23-.73.608-.92z" fill="#00D0FF"/>
      <path d="m16.856 8.936 3.114 1.775c.78.444.78 1.324 0 1.768l-3.114 1.775L13.792 12l3.064-3.064z" fill="#FFCE00"/>
      <path d="m3.609 1.814 13.247 7.122-3.064 3.064L3.609 1.814z" fill="#00F076"/>
      <path d="m13.792 12 3.064 3.064L3.609 22.186 13.792 12z" fill="#FF3636"/>
    </svg>
  ),
};

/* ---------- scroll reveal hook ---------- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) { els.forEach(e => e.classList.add("in")); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  });
}

/* ---------- FAQ item ---------- */
/* html-items bevatten links; een <a data-order> opent het bestelformulier. */
function FaqItem({ q, a, html, onOrder }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  function handleClick(e) {
    const link = e.target.closest && e.target.closest("a[data-order]");
    if (link && onOrder) { e.preventDefault(); onOrder(); }
  }
  return (
    <div className={"faq-item" + (open ? " open" : "")}>
      <button className="faq-q" onClick={() => setOpen(o => !o)} aria-expanded={open}>
        <span>{q}</span>
        <Icon.chevron className="chev" />
      </button>
      <div className="faq-a" style={{ maxHeight: open ? (ref.current ? ref.current.scrollHeight + "px" : "300px") : "0px" }}>
        {html
          ? <div className="faq-a-inner" ref={ref} onClick={handleClick} dangerouslySetInnerHTML={{ __html: a }} />
          : <div className="faq-a-inner" ref={ref}>{a}</div>}
      </div>
    </div>
  );
}

/* ---------- Landing page ---------- */
function Landing({ t, lang, setLang, onOrder }) {
  useReveal();
  const ASSET = "assets/icons/";
  const [howType, setHowType] = useState("particulier");
  // Groep-keys zijn in alle talen gelijk, dus de keuze blijft staan bij taalwissel.
  const [faqGroup, setFaqGroup] = useState("bestellen");
  const howSteps = howType === "bedrijf" ? t.how.stepsBedrijf : t.how.stepsParticulier;
  return (
    <div className="landing">
      {/* HEADER */}
      <header className="site-header">
        <div className="container header-inner">
          <button className="header-logo-btn" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} aria-label="MobilityPlus">
            <img className="header-logo" src="assets/mobilityplus-logo.png" alt="MobilityPlus" />
          </button>
          <nav className="header-nav">
            <a href="#benefits">{t.nav.benefits}</a>
            <a href="#how">{t.nav.how}</a>
            <a href="#app">{t.nav.app}</a>
            <a href="#pricing">{t.nav.pricing}</a>
            <a href="#business">{t.nav.business}</a>
            <a href="#faq">{t.nav.faq}</a>
          </nav>
          <div className="header-right">
            <LangSwitch lang={lang} setLang={setLang} />
            <button className="btn btn-primary" onClick={onOrder}>{t.nav.order}</button>
          </div>
        </div>
      </header>

      {/* HERO */}
      <section className="hero">
        <div className="container hero-inner">
          <span className="hero-eyebrow"><span className="dot"></span>{t.hero.eyebrow}</span>
          <h1 dangerouslySetInnerHTML={{ __html: t.hero.title }} />
          <p className="hero-lead">{t.hero.lead}</p>
          <div className="hero-actions">
            <button className="btn btn-lime btn-lg" onClick={onOrder}>{t.hero.ctaPrimary} <Icon.arrowRight /></button>
            <a className="btn btn-ghost-dark btn-lg" href="#how">{t.hero.ctaSecondary}</a>
          </div>
          <div className="hero-stats">
            <div className="hero-stat"><div className="v">{t.hero.stat1Value}</div><div className="l">{t.hero.stat1Label}</div></div>
            <div className="hero-stat"><div className="v">{t.hero.stat2Value}</div><div className="l">{t.hero.stat2Label}</div></div>
            <div className="hero-stat"><div className="v">{t.hero.stat3Value}</div><div className="l">{t.hero.stat3Label}</div></div>
          </div>
        </div>
      </section>

      {/* STRIP */}
      <div className="strip">
        <div className="container strip-inner">
          <p className="strip-text" dangerouslySetInnerHTML={{ __html: t.logos.intro }} />
        </div>
      </div>

      {/* BENEFITS */}
      <section className="benefits" id="benefits">
        <div className="container">
          <div className="section-head reveal">
            <span className="eyebrow">{t.benefits.eyebrow}</span>
            <h2 className="section-title">{t.benefits.title}</h2>
            <p className="section-lead">{t.benefits.lead}</p>
          </div>
          <div className="benefit-grid">
            {t.benefits.items.map((it, i) => (
              <div className="benefit-card reveal" key={i} style={{ transitionDelay: (i * 70) + "ms" }}>
                <img className="benefit-icon" src={ASSET + it.icon + ".png"} alt="" />
                <h3>{it.title}</h3>
                <p>{it.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* HOW */}
      <section className="how" id="how">
        <div className="container">
          <div className="section-head reveal">
            <span className="eyebrow">{t.how.eyebrow}</span>
            <h2 className="section-title">{t.how.title}</h2>
          </div>
          <div className="how-toggle reveal" role="tablist">
            <button role="tab" aria-selected={howType === "particulier"} className={howType === "particulier" ? "active" : ""} onClick={() => setHowType("particulier")}>
              <Icon.user /> {t.order.particulier}
            </button>
            <button role="tab" aria-selected={howType === "bedrijf"} className={howType === "bedrijf" ? "active" : ""} onClick={() => setHowType("bedrijf")}>
              <Icon.building /> {t.order.bedrijf}
            </button>
          </div>
          <div className="how-grid">
            {howSteps.map((s, i) => (
              <div className="how-step reveal" key={howType + i} style={{ transitionDelay: (i * 90) + "ms" }}>
                <div className="n">{s.n}</div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CHARGING */}
      <section className="charge" id="charging">
        <div className="container">
          <div className="section-head reveal">
            <span className="eyebrow">{t.charging.eyebrow}</span>
            <h2 className="section-title">{t.charging.title}</h2>
            <p className="section-lead">{t.charging.lead}</p>
          </div>
          <div className="charge-grid">
            {t.charging.steps.map((s, i) => (
              <div className="charge-step reveal" key={lang + i} style={{ transitionDelay: (i * 90) + "ms" }}>
                <div className="n">{s.n}</div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WHITELIST EIGEN THUISLAADSTATION */}
      <section className="wl-sec" id="whitelist">
        <div className="container">
          <div className="section-head text-center reveal">
            <span className="eyebrow">{t.homeWl.eyebrow}</span>
            <h2 className="section-title">{t.homeWl.title}</h2>
            <p className="section-lead">{t.homeWl.lead}</p>
          </div>
          <div className="biz-grid">
            {t.homeWl.items.map((it, i) => (
              <div className="biz-card reveal" key={lang + i} style={{ transitionDelay: (i * 70) + "ms" }}>
                <span className="biz-check"><Icon.check /></span>
                <div>
                  <h3>{it.title}</h3>
                  {it.html ? <p dangerouslySetInnerHTML={{ __html: it.body }} /> : <p>{it.body}</p>}
                </div>
              </div>
            ))}
          </div>
          {t.homeWl.disclaimer && <p className="wl-disclaimer reveal">{t.homeWl.disclaimer}</p>}
          <div className="biz-cta reveal">
            <button className="btn btn-primary btn-lg" onClick={onOrder}>{t.homeWl.cta} <Icon.arrowRight /></button>
            <a className="wl-faq-link" href="#faq" onClick={() => setFaqGroup("whitelist")}>{t.homeWl.faqCta}</a>
          </div>
        </div>
      </section>

      {/* NETWORK */}
      <section className="net" id="network">
        <div className="container net-wrap">
          <div className="section-head reveal">
            <span className="eyebrow">{t.network.eyebrow}</span>
            <h2 className="section-title">{t.network.title}</h2>
            <p className="section-lead">{t.network.lead}</p>
          </div>
          <div className="net-box reveal">
            <span className="net-names-title">{t.network.namesTitle}</span>
            <div className="net-names">
              {t.network.names.map((n, i) => <span className="net-name" key={i}>{n}</span>)}
            </div>
            <p className="net-note">{t.network.note}</p>
          </div>
        </div>
      </section>

      {/* APP */}
      <section className="app-sec" id="app">
        <div className="container">
          <div className="app-card reveal">
            <div className="app-left">
              <span className="eyebrow">{t.app.eyebrow}</span>
              <h2>{t.app.title}</h2>
              <p>{t.app.lead}</p>
              <div className="app-tags">
                {t.app.tags.map((tag, i) => <span className="app-tag" key={i}>{tag}</span>)}
              </div>
              <a className="btn btn-ghost-dark app-map-btn" href={t.app.mapUrl} target="_blank" rel="noopener">{t.app.mapCta} <Icon.arrowRight /></a>
            </div>
            <div className="app-right">
              <a className="store-btn" href="https://apps.apple.com/be/app/mobilityplus-app/id1666609666" target="_blank" rel="noopener">
                <span className="store-icon apple"><Icon.apple /></span>
                <span className="store-txt"><span className="via">{t.app.downloadVia}</span><span className="name">App Store</span></span>
              </a>
              <a className="store-btn" href="https://play.google.com/store/apps/details?id=be.mobilityplus.app" target="_blank" rel="noopener">
                <span className="store-icon google"><Icon.googlePlay /></span>
                <span className="store-txt"><span className="via">{t.app.downloadVia}</span><span className="name">Google Play</span></span>
              </a>
              <p className="app-os-note">{t.app.osNote}</p>
            </div>
          </div>
        </div>
      </section>

      {/* COMPARE */}
      <section className="cmp" id="compare">
        <div className="container">
          <div className="section-head text-center reveal">
            <span className="eyebrow">{t.compare.eyebrow}</span>
            <h2 className="section-title">{t.compare.title}</h2>
            <p className="section-lead">{t.compare.lead}</p>
          </div>
          <div className="cmp-scroll reveal">
            <table className="cmp-table">
              <thead>
                <tr>
                  <th />
                  {t.compare.cols.map((c, i) => (
                    <th key={i} className={i === 0 ? "cmp-us" : ""}>
                      {c}
                      {i === 0 && <span className="cmp-badge">{t.compare.recommended}</span>}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {t.compare.rows.map((r, i) => (
                  <tr key={i}>
                    <th scope="row">{r.k}</th>
                    {r.v.map((v, j) => <td key={j} className={j === 0 ? "cmp-us" : ""}>{v}</td>)}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* PRICING */}
      <section className="pricing" id="pricing">
        <div className="container">
          <div className="pricing-wrap">
            <div className="pricing-side reveal">
              <span className="eyebrow">{t.pricing.eyebrow}</span>
              <h2 className="section-title">{t.pricing.title}</h2>
              <p className="section-lead">{t.pricing.lead}</p>
              <div className="pricing-badge-row">
                <div className="pricing-badge"><span className="pb-v">{t.hero.stat1Value}</span><span className="pb-l">{t.hero.stat1Label}</span></div>
                <div className="pricing-badge"><span className="pb-v">{t.hero.stat2Value}</span><span className="pb-l">{t.hero.stat2Label}</span></div>
              </div>
            </div>
            <div className="pricing-card reveal">
              <span className="plan-label">{t.pricing.cardLabel}</span>
              <div className="price"><span className="amount">{t.pricing.monthly}</span></div>
              <div className="price-sub">{t.pricing.monthlySub}</div>
              <ul className="feature-list">
                {[t.pricing.feature1, t.pricing.feature2, t.pricing.feature3, t.pricing.feature4].map((f, i) => (
                  <li key={i}><span className="check"><Icon.check /></span><span>{f}</span></li>
                ))}
              </ul>
              <button className="btn btn-primary btn-block btn-lg" onClick={onOrder}>{t.pricing.cta} <Icon.arrowRight /></button>
              <p className="pricing-note" dangerouslySetInnerHTML={{ __html: t.pricing.note }} />
            </div>
          </div>
        </div>
      </section>

      {/* BUSINESS */}
      <section className="biz" id="business">
        <div className="container">
          <div className="section-head text-center reveal">
            <span className="eyebrow">{t.business.eyebrow}</span>
            <h2 className="section-title">{t.business.title}</h2>
            <p className="section-lead">{t.business.lead}</p>
          </div>
          <div className="biz-grid">
            {t.business.items.map((it, i) => (
              <div className="biz-card reveal" key={i} style={{ transitionDelay: (i * 70) + "ms" }}>
                <span className="biz-check"><Icon.check /></span>
                <div>
                  <h3>{it.title}</h3>
                  <p>{it.body}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="biz-cta reveal">
            <button className="btn btn-primary btn-lg" onClick={onOrder}>{t.business.cta} <Icon.arrowRight /></button>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="faq" id="faq">
        <div className="container">
          <div className="section-head text-center reveal">
            <span className="eyebrow">{t.faq.eyebrow}</span>
            <h2 className="section-title">{t.faq.title}</h2>
          </div>
          <div className="faq-tabs reveal" role="tablist">
            {t.faq.groups.map((g) => (
              <button key={g.key} role="tab" aria-selected={faqGroup === g.key}
                className={faqGroup === g.key ? "active" : ""} onClick={() => setFaqGroup(g.key)}>
                {g.label}
              </button>
            ))}
          </div>
          <div className="faq-wrap reveal">
            {(t.faq.groups.find((g) => g.key === faqGroup) || t.faq.groups[0]).items.map((it, i) => (
              <FaqItem key={lang + faqGroup + i} q={it.q} a={it.a} html={it.html} onOrder={onOrder} />
            ))}
          </div>
        </div>
      </section>

      {/* SUPPORT — zelfde blok als op de driver-onboardingpagina */}
      <section className="sup" id="support">
        <div className="container">
          <div className="contact-banner reveal">
            <div className="contact-banner-hd">
              <span className="eyebrow-teal">{t.support.eyebrow}</span>
              <h2>{t.support.title}</h2>
              <p>{t.support.lead}</p>
            </div>
            <div className="contact-layout">

              <div className="mobi-card">
                <div>
                  <div className="mobi-card-top">
                    <span className="mobi-card-icon" aria-hidden="true">
                      <svg viewBox="0 0 24 24"><path d="M12 2a2 2 0 0 1 2 2v1h2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2V4a2 2 0 0 1 2-2z" /><circle cx="9" cy="11" r="1" /><circle cx="15" cy="11" r="1" /><path d="M9 15s1 1.5 3 1.5 3-1.5 3-1.5" /></svg>
                    </span>
                    <div>
                      <p className="mobi-card-title">{t.support.mobiName}</p>
                      <p className="mobi-card-sub">{t.support.mobiSub}</p>
                    </div>
                  </div>
                  <p className="mobi-desc">{t.support.mobiDesc}</p>
                  <p className="mobi-app-note">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="2" width="14" height="20" rx="2" /><line x1="12" y1="18" x2="12.01" y2="18" /></svg>
                    <span>{t.support.mobiApp}</span>
                  </p>
                </div>
                <a className="mobi-cta" href={t.support.url} target="_blank" rel="noopener">
                  <svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>
                  <span>{t.support.chat}</span>
                  <svg viewBox="0 0 24 24"><path d="M5 12h14" /><path d="M12 5l7 7-7 7" /></svg>
                </a>
              </div>

              <div className="contact-side">
                <div className="contact-tile">
                  <span className="contact-tile-icon" aria-hidden="true">
                    <svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" /></svg>
                  </span>
                  <div className="contact-tile-body">
                    <h4>{t.support.ticket}</h4>
                    <p className="ct-desc">{t.support.ticketDesc}</p>
                    <a className="ct-btn" href={t.support.ticketUrl} target="_blank" rel="noopener">
                      <span>{t.support.ticketBtn}</span>
                      <svg viewBox="0 0 24 24"><path d="M5 12h14" /><path d="M12 5l7 7-7 7" /></svg>
                    </a>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="final-cta">
        <div className="container final-cta-inner reveal">
          <h2>{t.cta.title}</h2>
          <p>{t.cta.lead}</p>
          <button className="btn btn-on-dark btn-lg" onClick={onOrder}>{t.cta.button} <Icon.arrowRight /></button>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="site-footer">
        <div className="container">
          <div className="footer-grid">
            <div className="footer-col">
              <img className="footer-logo" src="assets/mobilityplus-logo-white.png" alt="MobilityPlus" />
              <p className="footer-tagline">{t.footer.tagline}</p>
            </div>
            <div className="footer-col">
              <h4>{t.footer.contactTitle}</h4>
              <p className="block" dangerouslySetInnerHTML={{ __html: t.footer.address }} />
              <p className="block">{t.footer.vat}</p>
              <a href={"mailto:" + t.footer.supportEmail}>{t.footer.supportEmail}</a>
            </div>
            <div className="footer-col">
              <h4>{t.footer.linksTitle}</h4>
              <p className="block"><a href={t.footer.termsUrl} target="_blank" rel="noopener">{t.footer.terms}</a></p>
              <p className="block"><a href="https://www.mobilityplus.be" target="_blank" rel="noopener">mobilityplus.be</a></p>
            </div>
          </div>
          <div className="footer-bottom">
            <span>© {new Date().getFullYear()} MobilityPlus · laadpassen.be</span>
            <span>{t.footer.rights}</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

/* ---------- Language switch (shared) ---------- */
function LangSwitch({ lang, setLang }) {
  return (
    <div className="lang-switch" role="group" aria-label="Language">
      {window.LANGS.map(l => (
        <button key={l.code} className={lang === l.code ? "active" : ""} onClick={() => setLang(l.code)} aria-pressed={lang === l.code}>{l.label}</button>
      ))}
    </div>
  );
}

Object.assign(window, { Icon, Landing, LangSwitch, FaqItem });