// Components
const { useState, useEffect, useRef } = React;

// Word-by-word reveal — words array fades in on viewport
function WordReveal({ words, className, italicIdx = [], accentIdx = [] }) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const o = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {setInView(true);o.disconnect();}
    }, { threshold: 0.2 });
    o.observe(ref.current);
    return () => o.disconnect();
  }, []);
  return (
    <span ref={ref} className={`word-reveal ${inView ? "in-view" : ""} ${className || ""}`}>
      {words.map((w, i) =>
      <span key={i} className="word" style={{ transitionDelay: `${i * 80}ms`, fontStyle: italicIdx.includes(i) ? "italic" : "normal", color: accentIdx.includes(i) ? "var(--accent)" : "inherit" }}>
          {w}{i < words.length - 1 ? "\u00A0" : ""}
        </span>
      )}
    </span>);

}

// Logo
function LeonLogo() {
  return (
    <span className="lh-logo">
      <svg viewBox="0 0 175 51" xmlns="http://www.w3.org/2000/svg">
        <path d="M29.84 50.74H1.79C.8 50.74 0 49.94 0 48.95V2.3C0 1.31.8.51 1.79.51h8.65c1 0 1.79.8 1.79 1.79v36.1c0 .99.8 1.79 1.8 1.79h15.81c1 0 1.8.8 1.8 1.8v7.01c0 .95-.8 1.74-1.79 1.74Z" fill="var(--accent)" />
        <path d="M69.13 50.74H37.65c-1 0-1.8-.8-1.8-1.79V2.3c0-1 .8-1.79 1.8-1.79h30.19c1 0 1.79.8 1.79 1.8v6.71c0 1-.8 1.8-1.8 1.8H49.34c-1 0-1.8.8-1.8 1.8v5.87c0 1 .8 1.8 1.8 1.8h17.31c1 0 1.79.8 1.79 1.79v6.17c0 1-.8 1.8-1.8 1.8H49.34c-1 0-1.8.79-1.8 1.79v6.87c0 1 .8 1.8 1.8 1.8h19.79c1 0 1.8.79 1.8 1.79v6.77c-.06.9-.85 1.7-1.8 1.7Z" fill="var(--accent)" />
        <path d="M173.15 50.74h-10.99c-.6 0-1.2-.3-1.5-.85L140.97 17.89h-.2l.25 31.06c0 1-.8 1.79-1.79 1.79h-8.21c-1 0-1.79-.8-1.79-1.79V2.3c0-1 .8-1.79 1.79-1.79h11.04c.6 0 1.2.3 1.55.85l19.59 31.91h.2l-.25-30.97c0-1 .8-1.79 1.79-1.79h8.2c1 0 1.8.8 1.8 1.79v46.7c-.05.94-.85 1.74-1.8 1.74Z" fill="var(--accent)" />
        <path d="M118.87 12.68 113.23 18.33c-.38.38-.52 1-.33 1.48.8 2.04 1.18 4.36 1.04 6.74-.57 7.36-6.55 13.29-13.9 13.81-8.78.62-15.85-6.36-15.85-15-.0-3.61 1.28-6.89 3.37-9.49.52-.62 1.47-.71 2.04-.14l9.01 8.64c.57.52 1.43.52 1.95 0l9.44-9.45.05.05 6.31-6.31c.57-.57.57-1.47-.05-1.99-4.65-4.27-10.91-6.84-17.79-6.65-13.33.34-24.2 11.21-24.62 24.5C73.19 39.18 85.14 51.14 99.8 50.67c13.47-.43 24.34-11.54 24.53-25.02.05-4.6-1.14-8.97-3.23-12.72-.47-.71-1.61-.86-2.23-.24Z" fill="var(--accent)" />
      </svg>
    </span>);

}

// Header
function Header({ t, lang, setLang, overHero, scrolled }) {
  const [langOpen, setLangOpen] = useState(false);
  const langRef = useRef(null);
  useEffect(() => {
    if (!langOpen) return;
    const onDoc = (e) => {if (langRef.current && !langRef.current.contains(e.target)) setLangOpen(false);};
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [langOpen]);
  const LANGS = [
  { code: "fr", label: "Français", short: "FR" },
  { code: "en", label: "English", short: "EN" },
  { code: "ru", label: "Русский", short: "RU" }];

  const current = LANGS.find((l) => l.code === lang) || LANGS[0];
  return (
    <header className={`lh-header ${scrolled ? "scrolled" : ""} ${overHero ? "over-hero" : ""}`}>
      <LeonLogo />
      <nav className="lh-nav">
        <a href="#services">{t.nav.services}</a>
        <a href="#security">{t.nav.security}</a>
        <a href="#cities">{t.nav.cities}</a>
        <a href="#business" style={{ fontFamily: "Geist" }}>{t.nav.business}</a>
        <a href="#help">{t.nav.help}</a>
      </nav>
      <div className="lh-right">
        <div className="lh-lang" ref={langRef}>
          <button className="lh-lang-trigger" onClick={() => setLangOpen((o) => !o)} aria-haspopup="listbox" aria-expanded={langOpen}>
            <span className="lh-lang-globe" aria-hidden="true">
              <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4">
                <circle cx="8" cy="8" r="6.5" />
                <ellipse cx="8" cy="8" rx="3" ry="6.5" />
                <path d="M1.5 8h13" />
              </svg>
            </span>
            <span>{current.short}</span>
            <svg className={`lh-lang-caret ${langOpen ? "open" : ""}`} viewBox="0 0 10 6" width="9" height="6" aria-hidden="true">
              <path d="M1 1l4 4 4-4" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
          {langOpen &&
          <ul className="lh-lang-menu" role="listbox">
              {LANGS.map((l) =>
            <li key={l.code}>
                  <button
                role="option"
                aria-selected={lang === l.code}
                className={lang === l.code ? "active" : ""}
                onClick={() => {setLang(l.code);setLangOpen(false);}}>
                    <span className="lh-lang-short">{l.short}</span>
                    <span className="lh-lang-label">{l.label}</span>
                    {lang === l.code &&
                <svg viewBox="0 0 12 10" width="11" height="10" aria-hidden="true">
                        <path d="M1 5l3.5 3.5L11 1.5" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                }
                  </button>
                </li>
            )}
            </ul>
          }
        </div>
        <a className="lh-cta-ghost" href="#signin">{t.cta.signin}</a>
        <a className="lh-cta-solid" href="#book">{t.cta.book}</a>
      </div>
    </header>);

}

// MiniCalendar + Booking now live in booking.jsx (Mapbox-powered functional widget).
// Loaded BEFORE this file so window.Booking is the new functional one.

// Hero variants
function HeroA({ t, lang }) {
  return (
    <section className="lh-hero hero-a" data-screen-label="01 Hero — Cinematic">
      <div className="hero-bg">
        <image-slot id="hero-cinematic-bg" src="assets/hero-cover.jpg" placeholder="Photo cinématique — passager dans la voiture · 16:9 grand format"></image-slot>
      </div>
      <div className="hero-content">
        <div className="hero-eyebrow">{t.hero.eyebrow}</div>
        <h1>
          <WordReveal words={t.hero.titleA.slice(0, 2)} italicIdx={[1]} />
          <br />
          <WordReveal words={t.hero.titleA.slice(2)} italicIdx={[1]} />
        </h1>
        <p className="hero-sub">{t.hero.sub}</p>
        <Booking t={t} lang={lang} />
      </div>
    </section>);

}

function HeroB({ t, lang }) {
  return (
    <section className="lh-hero hero-b" data-screen-label="01 Hero — Editorial split">
      <div className="hero-b-wrap">
        <div className="hero-b-left">
          <div>
            <div className="hero-b-tag">{t.hero.eyebrow}</div>
            <h1><WordReveal words={t.hero.titleB} italicIdx={[1]} /></h1>
            <p className="hero-sub" style={{ marginTop: 28, color: "var(--ink-mute)", fontSize: 17, maxWidth: "44ch", lineHeight: 1.5 }}>{t.hero.sub}</p>
          </div>
          <div>
            <div className="hero-b-meta">
              {t.hero.meta.map((m, i) =>
              <div key={i} className="hero-b-meta-item">
                  <div className="num">{m.n}</div>
                  <div className="lbl">{m.l}</div>
                </div>
              )}
            </div>
            <div style={{ marginTop: 40 }}>
              <Booking t={t} lang={lang} light />
            </div>
          </div>
        </div>
        <div className="hero-b-right">
          <image-slot id="hero-edit-right" src="assets/hero-cover.jpg" placeholder="Photo verticale — chauffeur en costume · portrait"></image-slot>
        </div>
      </div>
    </section>);

}

function HeroC({ t, lang }) {
  return (
    <section className="lh-hero hero-c" data-screen-label="01 Hero — Minimal card">
      <div className="hero-c-inner">
        <div className="hero-c-head">
          <h1><WordReveal words={t.hero.titleC} italicIdx={[1]} accentIdx={[1]} /></h1>
          <p>{t.hero.sub}</p>
        </div>
        <div className="hero-c-card">
          <image-slot id="hero-min-card" src="assets/hero-cover.jpg" placeholder="Photo signature — Mercedes Classe S · 16:9"></image-slot>
        </div>
        <div style={{ marginTop: 40 }}>
          <Booking t={t} lang={lang} light center />
        </div>
      </div>
    </section>);

}

// Service image with imperative src setter (React + web components compatibility)
function ServiceImage({ id, photo, cat }) {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current) {
      if (photo) ref.current.setAttribute('src', photo);else
      ref.current.removeAttribute('src');
    }
  }, [photo]);
  return <image-slot ref={ref} id={id} fit="contain" placeholder={`Photo · ${cat}`}></image-slot>;
}

// Sticky services
function Services({ t }) {
  const total = t.services.list.length;
  const pad2 = (n) => String(n).padStart(2, '0');
  return (
    <section className="services-stack" id="services" data-screen-label="02 Services — sticky">
      <div className="sec-pad services-intro">
        <div className="container services-intro-grid">
          <div className="services-intro-head">
            <div className="sec-eyebrow">{t.services.eyebrow}</div>
            <h2 className="sec-title services-intro-title">
              <WordReveal words={t.services.title} italicIdx={[3, 4]} />
            </h2>
          </div>
          <ol className="services-index">
            {t.services.list.map((s, i) => (
              <li key={i} className="services-index-row">
                <a href={`#service-${i + 1}`} className="services-index-link">
                  <span className="services-index-num">{pad2(i + 1)}</span>
                  <span className="services-index-cat">{s.cat}</span>
                  <span className="services-index-arrow" aria-hidden="true">
                    <svg viewBox="0 0 14 14" fill="none"><path d="M1 7h12m0 0L8 2m5 5l-5 5" stroke="currentColor" strokeWidth="1.4" /></svg>
                  </span>
                </a>
              </li>
            ))}
          </ol>
        </div>
      </div>
      {t.services.list.map((s, i) =>
      <div key={i} id={`service-${i + 1}`} className={`service-panel ${i % 2 ? "flip" : ""}`}>
          <div className="service-panel-text">
            <div className="service-num"><em>{pad2(i + 1)}</em><span className="service-num-sep"> / </span><span className="service-num-total">{pad2(total)}</span></div>
            <div className="service-cat">{s.cat}</div>
            <h3 className="service-h"><WordReveal words={s.h} italicIdx={[s.h.length - 1]} /></h3>
            <p className="service-d">{s.d}</p>
            <ul className="service-bullets">
              {s.bullets.map((b, j) => <li key={j}>{b}</li>)}
            </ul>
            <a className="service-link" href="#">En savoir plus
              <svg viewBox="0 0 14 14" fill="none"><path d="M1 7h12m0 0L8 2m5 5l-5 5" stroke="currentColor" strokeWidth="1.5" /></svg>
            </a>
          </div>
          <div className="service-panel-img">
            <ServiceImage id={`service-img-${i}`} photo={s.photo} cat={s.cat} />
          </div>
        </div>
      )}
    </section>);

}

// City timezone + country mapping (also handles RU + EN spellings)
const CITY_META = {
  Monaco: { tz: "Europe/Monaco", country: { fr: "Monaco", en: "Monaco", ru: "Монако" } },
  Paris: { tz: "Europe/Paris", country: { fr: "France", en: "France", ru: "Франция" } },
  "Genève": { tz: "Europe/Zurich", country: { fr: "Suisse", en: "Switzerland", ru: "Швейцария" } },
  Geneva: { tz: "Europe/Zurich", country: { fr: "Suisse", en: "Switzerland", ru: "Швейцария" } },
  Dubai: { tz: "Asia/Dubai", country: { fr: "Émirats Arabes Unis", en: "United Arab Emirates", ru: "ОАЭ" } },
  "Монако": { tz: "Europe/Monaco", country: { fr: "Monaco", en: "Monaco", ru: "Монако" } },
  "Париж": { tz: "Europe/Paris", country: { fr: "France", en: "France", ru: "Франция" } },
  "Женева": { tz: "Europe/Zurich", country: { fr: "Suisse", en: "Switzerland", ru: "Швейцария" } },
  "Дубай": { tz: "Asia/Dubai", country: { fr: "Émirats Arabes Unis", en: "United Arab Emirates", ru: "ОАЭ" } }
};
const STATUS_LABEL = {
  open: { fr: "En service", en: "On duty", ru: "На службе" },
  oncall: { fr: "Sur appel", en: "On call", ru: "По вызову" }
};
const COL_LABEL = {
  city: { fr: "Ville", en: "City", ru: "Город" },
  coord: { fr: "Coordonnées", en: "Coordinates", ru: "Координаты" },
  tz: { fr: "Fuseau", en: "Timezone", ru: "Пояс" },
  time: { fr: "Heure locale", en: "Local time", ru: "Местное время" }
};

function useCityTime(tz) {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const parts = new Intl.DateTimeFormat("en-GB", {
    timeZone: tz, hour12: false,
    hour: "2-digit", minute: "2-digit", second: "2-digit",
    timeZoneName: "short"
  }).formatToParts(now);
  const get = (k) => parts.find((p) => p.type === k)?.value || "00";
  const h = +get("hour"),m = +get("minute"),s = +get("second");
  const tzName = parts.find((p) => p.type === "timeZoneName")?.value || "";
  return { h, m, s, tzName, hh: String(h).padStart(2, "0"), mm: String(m).padStart(2, "0") };
}

// The Leon "O" — repurposed as a clock face
function CityClock({ tz, size = 86 }) {
  const { h, m, s } = useCityTime(tz);
  const hAng = h % 12 * 30 + m * 0.5;
  const mAng = m * 6;
  const sAng = s * 6;
  const polar = (a, r) => [50 + Math.sin(a * Math.PI / 180) * r, 50 - Math.cos(a * Math.PI / 180) * r];
  const [hx, hy] = polar(hAng, 22);
  const [mx, my] = polar(mAng, 32);
  const [sx, sy] = polar(sAng, 36);
  return (
    <svg viewBox="0 0 100 100" className="city-clock" style={{ width: size, height: size }}>
      <circle cx="50" cy="50" r="46" fill="none" stroke="currentColor" strokeWidth="2" opacity=".75" />
      {[0, 90, 180, 270].map((a) => {
        const [x1, y1] = polar(a, 41);
        const [x2, y2] = polar(a, 45.5);
        return <line key={a} x1={x1} y1={y1} x2={x2} y2={y2} stroke="currentColor" strokeWidth="1.6" opacity=".55" />;
      })}
      <line x1="50" y1="50" x2={hx} y2={hy} stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" />
      <line x1="50" y1="50" x2={mx} y2={my} stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" opacity=".88" />
      <line x1="50" y1="50" x2={sx} y2={sy} stroke="var(--accent-soft)" strokeWidth="1" strokeLinecap="round" />
      <circle cx="50" cy="50" r="2.2" fill="currentColor" />
    </svg>);

}

function CityRow({ city, lang, index }) {
  const meta = CITY_META[city.name] || { tz: "Europe/Paris", country: { fr: "", en: "", ru: "" } };
  const { hh, mm, h, tzName } = useCityTime(meta.tz);
  const open = h >= 6 && h < 23;
  const country = meta.country[lang] || meta.country.fr;
  const statusKey = open ? "open" : "oncall";
  return (
    <div className="city-row">
      <div className="city-num">{String(index + 1).padStart(2, "0")}</div>
      <div className="city-clock-wrap"><CityClock tz={meta.tz} /></div>
      <div className="city-row-main">
        <div className="city-row-country">{country}</div>
        <div className="city-row-name">{city.name}</div>
        <div className="city-row-tag">{city.tag}</div>
      </div>
      <div className="city-row-coord">{city.coord}</div>
      <div className="city-row-tz">{tzName}</div>
      <div className="city-row-time">
        <div className="time-digits">
          <span>{hh}</span><span className="time-colon">:</span><span>{mm}</span>
        </div>
        <div className={`city-status ${statusKey}`}>
          <span className="status-dot" />{STATUS_LABEL[statusKey][lang] || STATUS_LABEL[statusKey].fr}
        </div>
      </div>
    </div>);

}

const PROMISE_ART = {
  clock:
  <svg viewBox="0 0 200 200" aria-hidden="true">
      <circle cx="100" cy="100" r="84" fill="var(--accent)" />
      <circle cx="100" cy="100" r="84" fill="none" stroke="#fff" strokeWidth="2" opacity=".25" />
      <text x="100" y="118" textAnchor="middle" fontFamily="var(--serif), serif" fontStyle="italic" fontWeight="500" fontSize="58" fill="#fff" letterSpacing="-1">24/7</text>
    </svg>,

  car:
  <svg viewBox="0 0 200 200" aria-hidden="true">
      <circle cx="100" cy="100" r="84" fill="var(--accent)" />
      <g fill="#fff">
        <path d="M40 116 L52 86 C56 78 64 74 74 74 L132 74 C140 74 146 76 152 82 L168 100 C170 102 170 106 168 110 L160 116 Z" />
        <rect x="40" y="116" width="128" height="6" rx="2" />
        <circle cx="64" cy="124" r="11" fill="var(--accent)" stroke="#fff" strokeWidth="3" />
        <circle cx="148" cy="124" r="11" fill="var(--accent)" stroke="#fff" strokeWidth="3" />
      </g>
      <path d="M70 86 L80 76 L100 76 L100 86 Z M104 76 L130 76 C136 76 140 78 144 82 L148 86 L104 86 Z" fill="var(--accent)" opacity=".35" />
    </svg>,

  shield:
  <svg viewBox="0 0 200 200" aria-hidden="true">
      <circle cx="100" cy="100" r="84" fill="var(--accent)" />
      <path d="M100 50 L138 64 L138 100 C138 122 122 142 100 152 C78 142 62 122 62 100 L62 64 Z" fill="#fff" />
      <path d="M82 100 L96 114 L122 84" fill="none" stroke="var(--accent)" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>

};

function TrustedBy({ t }) {
  const items = t.trusted.list;
  // duplicate for seamless marquee
  const loop = [...items, ...items];
  return (
    <section className="trusted" id="trusted" data-screen-label="01b Trusted by">
      <div className="trusted-head">
        <div className="trusted-eyebrow">
          <span className="trusted-rule" aria-hidden="true"></span>
          {t.trusted.eyebrow}
          <span className="trusted-rule" aria-hidden="true"></span>
        </div>
      </div>
      <div className="trusted-marquee" aria-hidden="false">
        <div className="trusted-track">
          {loop.map((name, i) =>
          <span key={i} className="trusted-item">
              <span className="trusted-name">{name}</span>
              <span className="trusted-sep" aria-hidden="true">✦</span>
            </span>
          )}
        </div>
      </div>
    </section>);

}

function PromiseRoad_disabled({ t }) {
  return (
    <div className="promise-road">
      <svg className="promise-road-svg" viewBox="0 0 1200 220" preserveAspectRatio="none" aria-hidden="true">
        <line x1="0" y1="110" x2="1200" y2="110" stroke="currentColor" strokeWidth="1" opacity=".25" />
        <line x1="0" y1="110" x2="1200" y2="110" stroke="currentColor" strokeWidth="1.5" strokeDasharray="14 18" className="promise-road-dashes" />
      </svg>
      <div className="promise-car" aria-hidden="true">
        <svg viewBox="0 0 88 32" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round">
          <path d="M4 22 L10 12 C12 9 16 7 20 7 L60 7 C66 7 70 9 74 13 L82 19 C84 21 84 22 82 22 Z" />
          <circle cx="22" cy="22" r="5" fill="var(--bg)" />
          <circle cx="64" cy="22" r="5" fill="var(--bg)" />
        </svg>
      </div>
      <div className="promise-stations">
        {t.promise.items.map((it, i) =>
        <div key={i} className="promise-station">
            <div className="promise-station-icon" aria-hidden="true">{PROMISE_ICONS[it.k]}</div>
            <div className="promise-station-dot"><span /></div>
            <div className="promise-station-num">{String(i + 1).padStart(2, '0')}</div>
            <h3 className="promise-station-h">{it.h}</h3>
          </div>
        )}
      </div>
    </div>);

}

function PromiseAccordion({ t }) {
  const [active, setActive] = React.useState(0);
  return (
    <div className="promise-acc">
      {t.promise.items.map((it, i) =>
      <div
        key={i}
        className={`promise-acc-row ${active === i ? 'is-open' : ''}`}
        onMouseEnter={() => setActive(i)}
        onClick={() => setActive(i)}>
        
          <div className="promise-acc-bar">
            <span className="promise-acc-num">{String(i + 1).padStart(2, '0')}</span>
            <h3 className="promise-acc-h">{it.h}</h3>
            <span className="promise-acc-arrow" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
            </span>
          </div>
          <div className="promise-acc-reveal">
            <div className="promise-acc-icon" aria-hidden="true">{PROMISE_ICONS[it.k]}</div>
            <div className="promise-acc-mark">
              <span>0{i + 1}</span>
              <em>Leon</em>
            </div>
          </div>
        </div>
      )}
    </div>);

}

function PromiseCinetic({ t }) {
  return (
    <div className="promise-cinetic">
      {t.promise.items.map((it, i) =>
      <div key={i} className={`promise-cin-panel cin-${i}`}>
          <div className="promise-cin-bg-num" aria-hidden="true">{String(i + 1).padStart(2, '0')}</div>
          <div className="promise-cin-icon" aria-hidden="true">{PROMISE_ICONS[it.k]}</div>
          <h3 className="promise-cin-h">{it.h}</h3>
          <div className="promise-cin-rule" aria-hidden="true"></div>
        </div>
      )}
    </div>);

}

const PROMISE_PHOTO = {
  clock: "Photo éditoriale · concierge au téléphone, ambiance feutrée",
  car: "Photo éditoriale · Mercedes Classe S, détail intérieur cuir",
  shield: "Photo éditoriale · chauffeur en costume, main sur la portière"
};

function PromiseSection({ t }) {
  return (
    <section className="promise sec-pad" id="promise" data-screen-label="03 Promise">
      <div className="container">
        <div className="promise-head">
          <div className="sec-eyebrow">{t.promise.eyebrow}</div>
          <h2 className="sec-title"><WordReveal words={t.promise.title} italicIdx={[1]} /></h2>
        </div>
        <div className="promise-cols">
          {t.promise.items.map((it, i) =>
          <article key={i} className="promise-col" style={{ animationDelay: `${i * 140}ms` }}>
              <div className="promise-photo">
                <image-slot id={`promise-${it.k}`} shape="circle" placeholder={PROMISE_PHOTO[it.k]}></image-slot>
              </div>
              <div className="promise-num">0{i + 1} <span aria-hidden="true">—</span> 03</div>
              <h3 className="promise-h">{it.h}</h3>
              <p className="promise-d">{it.d}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// Process
function Process({ t }) {
  return (
    <section className="process sec-pad" id="process" data-screen-label="04 Process">
      <div className="container">
        <div className="process-head">
          <div className="sec-eyebrow" style={{ justifyContent: 'center', display: 'inline-flex' }}>{t.process.eyebrow}</div>
          <h2 className="sec-title"><WordReveal words={t.process.title} italicIdx={[1]} /></h2>
          <p className="sec-sub" style={{ margin: '22px auto 0' }}>{t.process.sub}</p>
        </div>
        <div className="process-grid">
          {t.process.steps.map((s, i) =>
          <div key={i} className="process-card">
              <div className="process-num">— Étape <em>{s.n}</em></div>
              <h3 className="process-h"><WordReveal words={s.h} italicIdx={[s.h.length - 1]} /></h3>
              <p className="process-d" style={{ marginTop: 'auto' }}>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// App
function AppSection({ t, variant = "new", introPhoto = true }) {
  const stores =
  <div className={`app-stores ${variant === "legacy" ? "" : "app-stores-center"}`}>
      {t.app.stores.map((s, i) =>
    <a className="app-store-btn" key={i} href="#">
          {i === 0 ?
      <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.05 12.04c-.03-2.93 2.4-4.34 2.5-4.4-1.36-1.99-3.49-2.27-4.24-2.3-1.8-.18-3.53 1.06-4.45 1.06-.92 0-2.34-1.04-3.86-1.01-1.99.03-3.82 1.16-4.83 2.93-2.07 3.59-.53 8.89 1.49 11.79.99 1.42 2.16 3.01 3.69 2.95 1.49-.06 2.05-.96 3.85-.96 1.79 0 2.31.96 3.87.93 1.6-.03 2.61-1.44 3.59-2.86 1.13-1.64 1.6-3.24 1.62-3.32-.04-.02-3.11-1.19-3.14-4.81zm-2.92-8.84c.82-.99 1.37-2.36 1.22-3.73-1.18.05-2.61.79-3.46 1.78-.76.87-1.42 2.27-1.24 3.61 1.32.1 2.66-.67 3.48-1.66z" /></svg> :

      <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 4.2v15.6c0 .55.62.87 1.07.55l11.06-7.8a.67.67 0 0 0 0-1.1L8.07 3.65A.67.67 0 0 0 7 4.2z" /></svg>
      }
          <div className="store-l">
            <span className="store-s">{s.s}</span>
            <strong>{s.l}</strong>
          </div>
        </a>
    )}
    </div>;


  if (variant === "legacy") {
    return (
      <section className="app-sec sec-pad" id="app" data-screen-label="05 App">
        <div className="container app-grid">
          <div className="app-left">
            <div className="sec-eyebrow">{t.app.eyebrow}</div>
            <h2 className="sec-title"><WordReveal words={t.app.title} italicIdx={[2]} /></h2>
            <p className="sec-sub">{t.app.sub}</p>
            {stores}
          </div>
          <div className="app-right app-right-legacy">
            <div className="app-phone p1">
              <image-slot id="app-screen-1" placeholder="App screen — réservation"></image-slot>
            </div>
            <div className="app-phone p2">
              <image-slot id="app-screen-2" placeholder="App screen — suivi temps réel"></image-slot>
            </div>
          </div>
        </div>
      </section>);

  }

  return (
    <section className="app-sec app-sec-mockups sec-pad" id="app" data-screen-label="05 App">
      <div className="container">
        <div className="app-mockups-head">
          <div className="sec-eyebrow">{t.app.eyebrow}</div>
          <h2 className="sec-title"><WordReveal words={t.app.title} italicIdx={[2]} /></h2>
          <p className="sec-sub">{t.app.sub}</p>
        </div>
        <div className="app-mockups-row">
          <AppMockIntro photo={introPhoto} />
          <AppMockHome />
          <AppMockDetail />
        </div>
        {stores}
      </div>
    </section>);

}

function AppMockIntro({ photo = true }) {
  if (!photo) {
    return (
      <div className="lm lm-intro lm-intro-typo" aria-label="Écran d'accueil de l'application Leon">
        <div className="lm-intro-poster">
          <div className="lm-intro-mark">LEON</div>
          <div className="lm-poster-eyebrow">— Édition privée —</div>
          <div className="lm-poster-mono"><em>L</em></div>
          <div className="lm-poster-rule" aria-hidden="true"></div>
          <div className="lm-poster-cap">Saison 2026</div>
          <div className="lm-poster-foot">Maison de transport privé</div>
        </div>
        <div className="lm-intro-body">
          <h3>
            Arrivez<br />
            <em>comme on</em><br />
            vous attend.
          </h3>
          <p>Chauffeurs privés et sûreté à la demande. Monaco · Paris · Genève · Dubai.</p>
          <button className="lm-intro-btn">Commencer</button>
        </div>
      </div>);

  }
  return (
    <div className="lm lm-intro" aria-label="Écran d'accueil de l'application Leon">
      <div className="lm-intro-photo" style={{ backgroundImage: 'url(assets/hero-cover.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }}>
        <div className="lm-intro-grad" aria-hidden="true"></div>
        <div className="lm-intro-mark" aria-hidden="true"></div>
      </div>
      <div className="lm-intro-body">
        <h3>
          Arrivez<br />
          <em>comme on</em><br />
          vous attend.
        </h3>
        <p></p>
        <button className="lm-intro-btn">Commencer</button>
      </div>
    </div>);

}

function AppMockHome() {
  const Icon = {
    info: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9" /><line x1="12" y1="11" x2="12" y2="16" /><circle cx="12" cy="8" r=".8" fill="currentColor" /></svg>,
    bell: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M6 16V11a6 6 0 0112 0v5l1.5 2h-15z" /><path d="M10 20a2 2 0 004 0" /></svg>,
    walk: <svg viewBox="0 0 24 24" fill="currentColor"><circle cx="13" cy="4" r="2" /><path d="M9 22l2-7-3-3 2-5 4 1 3 4h3l-1 2-3-1-2-2-1 3 3 3v5h-2v-4l-2-2-2 6z" /></svg>,
    snow: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4" /></svg>,
    bolt: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4 14h7l-2 8 9-12h-7z" /></svg>,
    pin: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 21s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z" /><circle cx="12" cy="9" r="2.4" /></svg>,
    arr: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
  };
  return (
    <div className="lm lm-home" aria-label="Écran d'accueil — courses">
      <div className="lm-home-tabs">
        <span className="lm-pill"><i>{Icon.info}</i>Information</span>
        <span className="lm-pill"><i>{Icon.bell}</i>Notifications</span>
      </div>

      <div className="lm-card lm-nearest">
        <div className="lm-cap">CHAUFFEUR LE PLUS PROCHE</div>
        <div className="lm-nearest-img" aria-hidden="true">
          <svg viewBox="0 0 1000 480" preserveAspectRatio="xMidYMid meet">
            <ellipse cx="500" cy="430" rx="380" ry="10" fill="rgba(14,23,34,.18)" />
            <path d="M 130 372 L 130 280 Q 130 264 144 262 L 178 258 L 188 154 Q 190 138 208 138 L 836 138 Q 854 138 856 154 L 866 258 L 884 262 Q 898 264 898 280 L 898 372 Z" fill="#0E1722" />
            <rect x="216" y="158" width="630" height="74" rx="2" fill="#0a0e16" />
            <g fill="#0E1722">
              <rect x="246" y="158" width="6" height="74" />
              <rect x="416" y="158" width="6" height="74" />
              <rect x="586" y="158" width="6" height="74" />
              <rect x="800" y="158" width="6" height="74" />
            </g>
            <line x1="130" y1="248" x2="898" y2="248" stroke="rgba(255,255,255,.06)" strokeWidth="1.5" />
            <line x1="130" y1="350" x2="898" y2="350" stroke="rgba(0,0,0,.5)" strokeWidth="2" />
            <g stroke="rgba(255,255,255,.05)" strokeWidth="1.4">
              <line x1="334" y1="232" x2="334" y2="372" />
              <line x1="500" y1="232" x2="500" y2="372" />
              <line x1="666" y1="232" x2="666" y2="372" />
            </g>
            <g fill="rgba(255,255,255,.45)">
              <rect x="280" y="262" width="44" height="3" rx="1.5" />
              <rect x="446" y="262" width="44" height="3" rx="1.5" />
              <rect x="612" y="262" width="44" height="3" rx="1.5" />
            </g>
            <path d="M 192 372 L 192 322 L 326 322 L 326 372 Z" fill="#06090e" />
            <path d="M 700 372 L 700 322 L 836 322 L 836 372 Z" fill="#06090e" />
            <rect x="326" y="354" width="374" height="14" rx="2" fill="#06090e" />
            <rect x="130" y="358" width="62" height="14" rx="2" fill="#06090e" />
            <rect x="836" y="358" width="62" height="14" rx="2" fill="#06090e" />
            <path d="M 232 158 L 218 150 L 210 158 L 214 168 L 232 168 Z" fill="#06090e" />
            <g>
              <circle cx="258" cy="372" r="58" fill="#06090e" />
              <circle cx="258" cy="372" r="54" fill="#0a0e16" />
              <circle cx="258" cy="372" r="38" fill="#1a1f28" />
              <g stroke="#cfd3d8" strokeWidth="2.4" strokeLinecap="round" opacity=".85">
                <line x1="258" y1="338" x2="258" y2="406" />
                <line x1="224" y1="372" x2="292" y2="372" />
                <line x1="234" y1="348" x2="282" y2="396" />
                <line x1="234" y1="396" x2="282" y2="348" />
              </g>
              <circle cx="258" cy="372" r="9" fill="#cfd3d8" />
              <circle cx="258" cy="372" r="4" fill="#06090e" />
              <circle cx="770" cy="372" r="58" fill="#06090e" />
              <circle cx="770" cy="372" r="54" fill="#0a0e16" />
              <circle cx="770" cy="372" r="38" fill="#1a1f28" />
              <g stroke="#cfd3d8" strokeWidth="2.4" strokeLinecap="round" opacity=".85">
                <line x1="770" y1="338" x2="770" y2="406" />
                <line x1="736" y1="372" x2="804" y2="372" />
                <line x1="746" y1="348" x2="794" y2="396" />
                <line x1="746" y1="396" x2="794" y2="348" />
              </g>
              <circle cx="770" cy="372" r="9" fill="#cfd3d8" />
              <circle cx="770" cy="372" r="4" fill="#06090e" />
            </g>
          </svg>
        </div>
        <div className="lm-nearest-name">Cadillac Escalade</div>
        <div className="lm-nearest-meta">
          <span><i>{Icon.walk}</i>4 min</span>
          <span className="lm-dot" aria-hidden="true"></span>
          <span>Pierre L.</span>
          <span className="lm-dot" aria-hidden="true"></span>
          <span>★ 4,98</span>
          <span className="lm-price">320€<small>/h</small></span>
        </div>
      </div>

      <div className="lm-row2">
        <div className="lm-mini-map" aria-hidden="true">
          <svg viewBox="0 0 140 130" preserveAspectRatio="xMidYMid slice">
            <rect width="140" height="130" fill="#EEF1F4" />
            <g stroke="#D7DCE3" strokeWidth="1.6" fill="none">
              <path d="M-5 28 L150 36" />
              <path d="M-5 70 L150 64" />
              <path d="M-5 102 L150 110" />
              <path d="M28 -5 L36 140" />
              <path d="M82 -5 L78 140" />
              <path d="M120 -5 L126 140" />
            </g>
            <circle cx="36" cy="64" r="3.5" fill="#0E1722" />
            <path d="M36 64 L82 78 L78 110" stroke="#0E1722" strokeWidth="2" fill="none" strokeLinecap="round" />
            <polygon points="74,108 80,114 84,108" fill="#0E1722" />
          </svg>
        </div>
        <div className="lm-driver">
          <div className="lm-driver-avatar" aria-hidden="true">
            <svg viewBox="0 0 40 40">
              <rect width="40" height="40" fill="#c9b890" />
              <circle cx="20" cy="16" r="6" fill="#5e4a30" />
              <path d="M6 40 Q10 26 20 26 Q30 26 34 40 Z" fill="#5e4a30" />
            </svg>
          </div>
          <div className="lm-driver-name">Edgar Schultz</div>
          <div className="lm-driver-price">
            <span className="cur">€</span><span className="big">2,9</span><span className="big">12</span><span className="dec">,56</span>
          </div>
        </div>
      </div>

      <div className="lm-card lm-saved">
        <div className="lm-saved-head">
          <span className="lm-cap-light">COURSES SAUVEGARDÉES</span>
          <span className="lm-dots3" aria-hidden="true">···</span>
        </div>
        <div className="lm-saved-row">
          <div>
            <div className="lm-saved-h">3 trajets</div>
            <div className="lm-saved-meta">
              <i>{Icon.pin}</i>Aéroport
              <span className="lm-sep">·</span>
              <i>{Icon.snow}</i>
              <i>{Icon.bolt}</i>
            </div>
          </div>
          <span className="lm-saved-arrow"><i>{Icon.arr}</i></span>
        </div>
        <div className="lm-saved-divider" aria-hidden="true"></div>
        <div className="lm-saved-row">
          <div>
            <div className="lm-saved-h">22 réguliers</div>
            <div className="lm-saved-meta">
              <span>≤ 320€/h</span>
              <span className="lm-sep">·</span>
              <i>{Icon.pin}</i>1 500 m
              <span className="lm-sep">·</span>
              <span>&gt; 100 km</span>
            </div>
          </div>
          <span className="lm-saved-arrow"><i>{Icon.arr}</i></span>
        </div>
      </div>
    </div>);

}

function AppMockDetail() {
  const Icon = {
    back: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M19 12H5M12 5l-7 7 7 7" /></svg>,
    sliders: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><line x1="4" y1="8" x2="20" y2="8" /><line x1="4" y1="16" x2="20" y2="16" /><circle cx="9" cy="8" r="2.2" fill="#fff" /><circle cx="15" cy="16" r="2.2" fill="#fff" /></svg>,
    walk: <svg viewBox="0 0 24 24" fill="currentColor"><circle cx="13" cy="4" r="2" /><path d="M9 22l2-7-3-3 2-5 4 1 3 4h3l-1 2-3-1-2-2-1 3 3 3v5h-2v-4l-2-2-2 6z" /></svg>,
    bat: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="8" width="16" height="9" rx="2" /><rect x="20" y="11" width="2" height="3" fill="currentColor" /><rect x="5" y="10" width="8" height="5" fill="currentColor" /></svg>,
    close: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>,
    water: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"><path d="M12 3c4 5 6 9 6 12a6 6 0 11-12 0c0-3 2-7 6-12z" /></svg>,
    wifi: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M3 9a14 14 0 0118 0M6 13a9 9 0 0112 0M9 17a4 4 0 016 0" /><circle cx="12" cy="20" r="1.2" fill="currentColor" /></svg>,
    snow: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4" /></svg>,
    silence: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 9v6h3l5 4V5L8 9z" /><path d="M16 9l5 6M21 9l-5 6" /></svg>
  };
  return (
    <div className="lm lm-detail" aria-label="Écran détail course">
      <div className="lm-detail-map" aria-hidden="true">
        <svg viewBox="0 0 320 360" preserveAspectRatio="xMidYMid slice">
          <rect width="320" height="360" fill="#F4F5F7" />
          <g stroke="#DDE2E8" strokeWidth="1.4" fill="none">
            <path d="M-10 50 L340 70" />
            <path d="M-10 130 L340 110" />
            <path d="M-10 200 L340 220" />
            <path d="M-10 280 L340 270" />
            <path d="M-10 340 L340 330" />
            <path d="M40 -10 L60 380" />
            <path d="M120 -10 L100 380" />
            <path d="M200 -10 L220 380" />
            <path d="M280 -10 L260 380" />
          </g>
          <g fill="#C5CCD4">
            <circle cx="60" cy="70" r="3" />
            <circle cx="220" cy="70" r="3" />
            <circle cx="300" cy="220" r="3" />
            <circle cx="100" cy="200" r="3" />
            <circle cx="60" cy="270" r="3" />
            <circle cx="220" cy="270" r="3" />
          </g>
          <g stroke="#0E1722" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeDasharray="2 5">
            <path d="M150 165 L210 210 L260 195" />
          </g>
          <circle cx="150" cy="165" r="6" fill="#0E1722" />
          <polygon points="252,188 268,202 254,212" fill="#0E1722" />
        </svg>
      </div>
      <button className="lm-detail-back" aria-label="Retour"><i>{Icon.back}</i></button>
      <button className="lm-detail-filter" aria-label="Filtres"><i>{Icon.sliders}</i></button>
      <div className="lm-detail-pin">
        <i>{Icon.walk}</i><span>4 min</span>
      </div>

      <div className="lm-sheet">
        <button className="lm-sheet-close" aria-label="Fermer"><i>{Icon.close}</i></button>
        <div className="lm-sheet-head">
          <div>
            <div className="lm-sheet-name">Cadillac Escalade</div>
            <div className="lm-sheet-meta">
              <span><i>{Icon.bat}</i>284 km</span>
              <span><i>{Icon.walk}</i>4 min</span>
            </div>
          </div>
          <div className="lm-sheet-img" aria-hidden="true">
            <svg viewBox="0 0 1000 480" preserveAspectRatio="xMidYMid meet">
              <ellipse cx="500" cy="430" rx="380" ry="10" fill="rgba(14,23,34,.18)" />
              <path d="M 130 372 L 130 280 Q 130 264 144 262 L 178 258 L 188 154 Q 190 138 208 138 L 836 138 Q 854 138 856 154 L 866 258 L 884 262 Q 898 264 898 280 L 898 372 Z" fill="#0E1722" />
              <rect x="216" y="158" width="630" height="74" rx="2" fill="#0a0e16" />
              <g fill="#0E1722">
                <rect x="246" y="158" width="6" height="74" />
                <rect x="416" y="158" width="6" height="74" />
                <rect x="586" y="158" width="6" height="74" />
                <rect x="800" y="158" width="6" height="74" />
              </g>
              <line x1="130" y1="350" x2="898" y2="350" stroke="rgba(0,0,0,.5)" strokeWidth="2" />
              <path d="M 192 372 L 192 322 L 326 322 L 326 372 Z" fill="#06090e" />
              <path d="M 700 372 L 700 322 L 836 322 L 836 372 Z" fill="#06090e" />
              <rect x="326" y="354" width="374" height="14" rx="2" fill="#06090e" />
              <rect x="130" y="358" width="62" height="14" rx="2" fill="#06090e" />
              <rect x="836" y="358" width="62" height="14" rx="2" fill="#06090e" />
              <g>
                <circle cx="258" cy="372" r="58" fill="#06090e" />
                <circle cx="258" cy="372" r="38" fill="#1a1f28" />
                <g stroke="#cfd3d8" strokeWidth="3" strokeLinecap="round" opacity=".85">
                  <line x1="258" y1="338" x2="258" y2="406" />
                  <line x1="224" y1="372" x2="292" y2="372" />
                </g>
                <circle cx="258" cy="372" r="9" fill="#cfd3d8" />
                <circle cx="770" cy="372" r="58" fill="#06090e" />
                <circle cx="770" cy="372" r="38" fill="#1a1f28" />
                <g stroke="#cfd3d8" strokeWidth="3" strokeLinecap="round" opacity=".85">
                  <line x1="770" y1="338" x2="770" y2="406" />
                  <line x1="736" y1="372" x2="804" y2="372" />
                </g>
                <circle cx="770" cy="372" r="9" fill="#cfd3d8" />
              </g>
            </svg>
          </div>
        </div>
        <div className="lm-features-h">À bord</div>
        <div className="lm-features">
          <div className="lm-feat">
            <i>{Icon.water}</i>
            <strong>Eau plate</strong>
            <span>San Pellegrino</span>
          </div>
          <div className="lm-feat">
            <i>{Icon.wifi}</i>
            <strong>Wi-Fi</strong>
            <span>Fibre 4G+</span>
          </div>
          <div className="lm-feat">
            <i>{Icon.snow}</i>
            <strong>Climat.</strong>
            <span>Bi-zone</span>
          </div>
          <div className="lm-feat">
            <i>{Icon.silence}</i>
            <strong>Silence</strong>
            <span>Sur demande</span>
          </div>
        </div>
        <div className="lm-cta-row">
          <div className="lm-price">
            <span className="cur">€</span><span className="big">375</span><span className="dec">,00</span><span className="per">/h</span>
          </div>
          <button className="lm-book">Réserver<i>{Icon.back && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg>}</i></button>
        </div>
      </div>
    </div>);

}

// Testimonials
function Testimonials({ t }) {
  return (
    <section className="testimonials sec-pad" id="testimonials" data-screen-label="06 Testimonials">
      <div className="container">
        <div style={{ maxWidth: '40ch', marginBottom: 64 }}>
          <div className="sec-eyebrow">{t.testimonials.eyebrow}</div>
          <h2 className="sec-title"><WordReveal words={t.testimonials.title} italicIdx={[1]} /></h2>
        </div>
        <div className="testimonial-rail">
          {t.testimonials.list.map((q, i) =>
          <div key={i} className="testimonial">
              <div className="stars">★★★★★</div>
              <p className="quote">«&nbsp;{q.q}&nbsp;»</p>
              <div className="testimonial-author">
                <div className="testimonial-avatar"><image-slot id={`avatar-${i}`} placeholder="Avatar" shape="circle"></image-slot></div>
                <div>
                  <div className="testimonial-name">{q.n}</div>
                  <div className="testimonial-role">{q.r}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// B2B
function B2B({ t }) {
  return (
    <section className="b2b sec-pad" id="business" data-screen-label="07 Business">
      <div className="container b2b-wrap">
        <div>
          <div className="sec-eyebrow">{t.b2b.eyebrow}</div>
          <h2 className="sec-title"><WordReveal words={t.b2b.title} italicIdx={[2]} /></h2>
          <p className="sec-sub">{t.b2b.sub}</p>
          <ul className="b2b-list">
            {t.b2b.list.map((x, i) => <li key={i}>{x}</li>)}
          </ul>
          <div style={{ marginTop: 40, display: 'flex', gap: 12 }}>
            <a className="lh-cta-solid" href="#">Parler à un conseiller →</a>
            <a className="lh-cta-ghost" style={{ borderColor: 'rgba(255,255,255,.4)', color: '#fff' }} href="#">Brochure PDF</a>
          </div>
        </div>
        <div className="b2b-img">
          <image-slot id="b2b-img" placeholder="Photo · arrivée hôtel / lobby"></image-slot>
        </div>
      </div>
    </section>);

}

// Footer
function Footer({ t }) {
  return (
    <footer>
      <div className="container">
        <div className="foot-top">
          <div className="foot-brand">
            <LeonLogo />
            <p>{t.footer.tag}. Chauffeur privé haut de gamme & sécurité rapprochée. Monaco · Paris · Genève · Dubai.</p>
          </div>
          {t.footer.cols.map((c, i) =>
          <div key={i} className="foot-col">
              <h5>{c.h}</h5>
              {c.links.map((l, j) => <a key={j} href="#">{l}</a>)}
            </div>
          )}
        </div>
        <div className="foot-bottom">
          <span>{t.footer.legal}</span>
          <span>Carte pro T2-2024-001 · CQP-APS · ISO 27001</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Header, HeroA, HeroB, HeroC, Services, TrustedBy, PromiseSection, Process, AppSection, Testimonials, B2B, Footer, LeonLogo });