/* ============================================================
   Guero's Group — Shared design system, i18n & primitives
   ============================================================ */
const { useState, useEffect, useRef, useContext, createContext, createElement } = React;

/* ---------- i18n ---------- */
let LANG = "fr";                       // current language (module global, set by App each render)
function L(en, fr) { return LANG === "fr" ? fr : en; }
function setActiveLang(l) { LANG = l; }
const LangCtx = createContext({ lang: "fr", setLang: () => {} });

const NavCtx = createContext({ view: "home", go: () => {} });

/* ---------- Company data (Rent A Car Niger / Guero's Group) ---------- */
const CONTACT = {
  company: "Guero\u2019s Group",
  legal: "Rent A Car Niger Sarl",
  address: "Boulevard de l\u2019Ind\u00e9pendance, Immeuble Asusu",
  po: "BP 11.235",
  city: "Niamey, Niger",
  tel: "+227 20 74 20 40",
  mobile: "+227 80 80 80 80",
  mobile2: "+227 96 97 67 33",
  email: "infos@guerosgroup.com",
  web: "guerosgroup.com",
  since: "2007",
  lat: 13.5170, lon: 2.1100,
};

/* Clients & partners — brand icons via Google favicon service (reliable), flags via flag CDN, monogram fallback */
const CLIENTS = [
  { name: "Airtel",       domain: "airtel.africa",  logo: "assets/logos/airtel.avif" },
  { name: "Ericsson",     domain: "ericsson.com",   logo: "assets/logos/ericsson.png" },
  { name: "Orange",       domain: "orange.com",     logo: "assets/logos/orange.png" },
  { name: { en: "World Bank", fr: "Banque Mondiale" }, domain: "worldbank.org", logo: "assets/logos/worldbank.png" },
  { name: { en: "UNDP", fr: "PNUD" },               domain: "undp.org",        logo: "assets/logos/pnud.jpg" },
  { name: { en: "European Union", fr: "Union Europ\u00e9enne" }, domain: "europa.eu", logo: "assets/logos/eu.avif" },
  { name: "JICA",         domain: "jica.go.jp",     logo: "assets/logos/jica.png" },
  { name: "UNODC",        domain: "unodc.org",      logo: "assets/logos/unodc.png" },
  { name: "Chemonics",    domain: "chemonics.com",  logo: "assets/logos/chemonics.jpg" },
  { name: "BCEAO",        domain: "bceao.int",      logo: "assets/logos/bceao.jpg" },
  { name: "BOAD",         domain: "boad.org",       logo: "assets/logos/boad.jpg" },
  { name: "CNPC",         domain: "cnpc.com.cn",    logo: "assets/logos/cnpc.webp" },
  { name: { en: "Embassy of the USA", fr: "Ambassade des USA" },   flag: "us", logo: "assets/logos/embassy-us.png" },
  { name: { en: "Embassy of Japan",   fr: "Ambassade du Japon" },  flag: "jp", logo: "assets/logos/embassy-jp.jpg" },
  { name: { en: "Embassy of Italy",   fr: "Ambassade d\u2019Italie" }, flag: "it", logo: "assets/logos/embassy-it.png" },
];

/* ---------- Inline icon set ---------- */
function Icon({ name, size = 20, stroke = 1.7, style }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", style };
  const paths = {
    arrow: <path d="M5 12h14M13 6l6 6-6 6" />,
    arrowDown: <path d="M12 5v14M6 13l6 6 6-6" />,
    gear: <><circle cx="12" cy="12" r="3.2"/><path d="M12 2.5v3M12 18.5v3M21.5 12h-3M5.5 12h-3M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1M18.4 18.4l-2.1-2.1M7.7 7.7L5.6 5.6"/></>,
    key: <><circle cx="8" cy="15" r="4.2"/><path d="M11 12l9-9M16 3l3 3M14 5l3 3"/></>,
    wrench: <path d="M14.7 6.3a4 4 0 0 0-5.4 5.2L4 16.8 7.2 20l5.3-5.3a4 4 0 0 0 5.2-5.4l-2.6 2.6-2.3-.6-.6-2.3z"/>,
    truck: <><path d="M2 6h11v9H2zM13 9h4l3 3v3h-7z"/><circle cx="7" cy="18" r="1.8"/><circle cx="16.5" cy="18" r="1.8"/></>,
    pin: <><path d="M12 21s-6.5-5.5-6.5-10.5A6.5 6.5 0 0 1 12 4a6.5 6.5 0 0 1 6.5 6.5C18.5 15.5 12 21 12 21z"/><circle cx="12" cy="10.3" r="2.3"/></>,
    phone: <path d="M4 4h4l1.5 5-2 1.5a12 12 0 0 0 5.5 5.5l1.5-2 5 1.5v4a2 2 0 0 1-2 2A16 16 0 0 1 2 6a2 2 0 0 1 2-2z"/>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="1.5"/><path d="M3.5 6.5 12 12.5l8.5-6"/></>,
    check: <path d="M4 12.5l5 5 11-11"/>,
    search: <><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-3.6-3.6"/></>,
    calendar: <><rect x="3" y="4.5" width="18" height="16" rx="1.5"/><path d="M3 9h18M8 2.5v4M16 2.5v4"/></>,
    shield: <path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z"/>,
    globe: <><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.5 4 5.7 4 9s-1.5 6.5-4 9c-2.5-2.5-4-5.7-4-9s1.5-6.5 4-9z"/></>,
    bolt: <path d="M13 2 4 14h6l-1 8 9-12h-6z"/>,
    box: <><path d="M12 2.5 21 7v10l-9 4.5L3 17V7z"/><path d="M3 7l9 4.5L21 7M12 11.5V21"/></>,
    car: <><path d="M3 13l2-5.5A2 2 0 0 1 6.9 6h10.2a2 2 0 0 1 1.9 1.5L21 13v5h-3v-2H6v2H3z"/><circle cx="7" cy="15.5" r="1.3"/><circle cx="17" cy="15.5" r="1.3"/></>,
    users: <><circle cx="9" cy="8" r="3.2"/><path d="M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5M16 5.5a3.2 3.2 0 0 1 0 6M18 14.6c2 .8 3.4 2.6 3.4 5"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></>,
    menu: <path d="M3 6h18M3 12h18M3 18h18"/>,
    close: <path d="M5 5l14 14M19 5L5 19"/>,
    chevron: <path d="M9 6l6 6-6 6"/>,
    star: <path d="M12 3l2.6 5.6 6 .7-4.5 4.2 1.2 6L12 17l-5.3 2.5 1.2-6L3.4 9.3l6-.7z"/>,
    plus: <path d="M12 5v14M5 12h14"/>,
    gauge: <><path d="M21 14a9 9 0 1 0-18 0"/><path d="M12 14l4-4"/><circle cx="12" cy="14" r="1.3"/></>,
    leaf: <path d="M5 19c0-8 6-13 14-13 0 8-5 14-13 14a6 6 0 0 1-1-1zM6 18c3-4 7-6 10-7"/>,
  };
  return <svg {...p}>{paths[name] || null}</svg>;
}

/* ---------- Brand wordmark ---------- */
function Logo({ variant = "group", light = false, size = 1, onClick }) {
  const sub = { group: null, spares: "AfricaSpares", rent: "Rent-a-Car" }[variant];
  const accent = { group: "var(--group)", spares: "var(--spares)", rent: "var(--rent)" }[variant];
  const src = light ? "assets/brand/gueros-logo-light.png" : "assets/brand/gueros-logo.png";
  return (
    <button onClick={onClick} aria-label="Guero's Group home" style={{ display: "flex", alignItems: "center", gap: 13 * size }}>
      <img src={src} alt="Guero's Group — Rent A Car Niger" style={{ height: 46 * size, width: "auto", display: "block" }} />
      {sub && (
        <span style={{ display: "flex", alignItems: "center", gap: 11 * size }}>
          <span style={{ width: 1, height: 28 * size, background: light ? "rgba(246,242,234,.28)" : "var(--line)" }}></span>
          <span style={{
            fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 12 * size, letterSpacing: "0.14em",
            textTransform: "uppercase", color: accent, whiteSpace: "nowrap",
          }}>{sub}</span>
        </span>
      )}
    </button>
  );
}

/* ---------- Striped placeholder / scene host ---------- */
function Ph({ label, scene, style, className = "", children }) {
  return (
    <div className={"ph " + (scene ? "ph-scene " : "") + className} style={style}>
      {scene}
      {!scene && label && <span className="ph-label">{label}</span>}
      {children}
    </div>
  );
}

/* ---------- Scroll reveal ---------- */
function Reveal({ children, delay = 0, as = "div", style, className = "" }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const show = () => el.classList.add("in");
    const r = el.getBoundingClientRect();
    const vh = window.innerHeight || document.documentElement.clientHeight;
    if (r.top < vh * 0.92) { setTimeout(show, delay); return; }
    let done = false;
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting && !done) { done = true; setTimeout(show, delay); io.unobserve(el); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" });
    io.observe(el);
    const t = setTimeout(() => { if (!done) { done = true; show(); io.disconnect(); } }, 1600);
    return () => { io.disconnect(); clearTimeout(t); };
  }, [delay]);
  return createElement(as, { ref, className: "reveal " + className, style }, children);
}

/* ---------- Section label ---------- */
function SectionTag({ n, children, color = "var(--accent)" }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <span style={{ width: 7, height: 7, background: color, borderRadius: "50%" }} />
      <span className="eyebrow" style={{ color: "var(--muted)" }}>{n && <span style={{ color }}>{n} / </span>}{children}</span>
    </div>
  );
}

/* ---------- Page header band (inner pages) ---------- */
function PageHeader({ eyebrow, title, sub, accent = "var(--group-d)" }) {
  return (
    <section style={{ paddingTop: 140, paddingBottom: 36, background: "var(--paper)" }}>
      <div className="wrap">
        <Reveal><SectionTag color={accent}>{eyebrow}</SectionTag></Reveal>
        <Reveal delay={60}><h1 style={{ fontSize: "clamp(44px,6.5vw,86px)", marginTop: 20, maxWidth: 1000 }}>{title}</h1></Reveal>
        {sub && <Reveal delay={120}><p style={{ marginTop: 22, fontSize: "clamp(16px,1.7vw,19px)", color: "var(--ink-2)", maxWidth: 620, lineHeight: 1.6 }}>{sub}</p></Reveal>}
      </div>
    </section>
  );
}

/* ---------- Real location map (Niamey) ---------- */
function MapEmbed({ height = 420, rounded = true }) {
  const { lat, lon } = CONTACT;
  const d = 0.028;
  const bbox = `${lon - d}%2C${lat - d * 0.7}%2C${lon + d}%2C${lat + d * 0.7}`;
  const src = `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${lat}%2C${lon}`;
  const gmaps = `https://www.google.com/maps/search/?api=1&query=${lat},${lon}`;
  return (
    <div style={{ position: "relative", borderRadius: rounded ? 5 : 0, overflow: "hidden", border: "1px solid var(--line)", background: "var(--paper-3)" }}>
      <iframe title="Guero's Group — Niamey" src={src} loading="lazy"
        style={{ width: "100%", height, border: "none", display: "block", filter: "grayscale(.18) contrast(1.02)" }} />
      <div style={{ position: "absolute", top: 14, left: 14, background: "var(--paper-0)", borderRadius: 4, padding: "12px 15px", boxShadow: "0 10px 30px -14px rgba(0,0,0,.35)", maxWidth: 280, pointerEvents: "none" }}>
        <div className="eyebrow" style={{ color: "var(--group-d)" }}>{L("Head office", "Si\u00e8ge social")}</div>
        <div style={{ fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 15, marginTop: 5, lineHeight: 1.35 }}>{CONTACT.address}</div>
        <div style={{ color: "var(--muted)", fontSize: 13.5, marginTop: 3 }}>{CONTACT.po} · {CONTACT.city}</div>
      </div>
      <a href={gmaps} target="_blank" rel="noopener" className="btn" style={{ position: "absolute", bottom: 14, right: 14, background: "var(--ink)", color: "var(--paper)", padding: "10px 16px", fontSize: 12.5 }}>
        {L("Open in Maps", "Ouvrir dans Maps")} <Icon name="arrow" size={15} className="arrow" />
      </a>
    </div>
  );
}

/* ---------- Top navigation (multi-page) ---------- */
function Nav({ variant = "group" }) {
  const { view, go } = useContext(NavCtx);
  const { lang, setLang } = useContext(LangCtx);
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const [adminOpen, setAdminOpen] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 24);
    f(); window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  const accent = { group: "var(--group)", spares: "var(--spares)", rent: "var(--rent)" }[variant];
  const onService = variant !== "group";

  const hubLinks = [
    { k: "home", label: L("Home", "Accueil") },
    { k: "group", label: L("The Group", "Le Groupe") },
    { k: "services", label: "Services" },
    { k: "coverage", label: L("Coverage", "Couverture") },
    { k: "contact", label: "Contact" },
  ];
  const links = onService ? [{ k: "home", label: L("\u2190 Guero\u2019s Group", "\u2190 Guero\u2019s Group") }] : hubLinks;

  const handleNav = (k) => { setOpen(false); go(k); };

  const LangToggle = ({ block }) => (
    <div style={{ display: "inline-flex", border: "1px solid var(--line)", borderRadius: 3, overflow: "hidden", marginLeft: block ? 0 : 4 }}>
      {["fr", "en"].map((lg) => (
        <button key={lg} onClick={() => setLang(lg)} style={{
          fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 12.5, letterSpacing: "0.08em", padding: "8px 11px",
          background: lang === lg ? "var(--ink)" : "transparent", color: lang === lg ? "var(--paper)" : "var(--muted)", transition: "all .2s",
        }}>{lg.toUpperCase()}</button>
      ))}
    </div>
  );

  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 80,
      transition: "background .3s, box-shadow .3s, border-color .3s",
      background: scrolled ? "rgba(246,242,234,0.86)" : "transparent",
      backdropFilter: scrolled ? "saturate(1.2) blur(14px)" : "none",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
    }}>
      <div className="wrap" style={{ height: 76, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <Logo variant={variant} onClick={() => go("home")} />
        <nav style={{ display: "flex", alignItems: "center", gap: 2 }} className="nav-desk">
          {links.map((l) => {
            const active = !onService && view === l.k;
            return (
              <button key={l.k} onClick={() => handleNav(l.k)} style={{
                fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 13.5, letterSpacing: "0.04em",
                textTransform: "uppercase", color: active ? accent : "var(--ink)", padding: "10px 13px", borderRadius: 2,
                transition: "color .2s", position: "relative",
              }}
                onMouseEnter={(e) => (e.currentTarget.style.color = accent)}
                onMouseLeave={(e) => (e.currentTarget.style.color = active ? accent : "var(--ink)")}>{l.label}</button>
            );
          })}
          {onService ? (
            variant === "spares" ? <CartNavButton /> : (
              <button className="btn" style={{ marginLeft: 10, background: accent, color: "var(--paper)" }}
                onClick={() => { const el = document.getElementById("sec-book"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 70, behavior: "smooth" }); }}>
                {L("Reserve Now", "R\u00e9server")}
              </button>
            )
          ) : (
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginLeft: 8 }}>
              <LangToggle />
              <button className="btn btn-ink" onClick={() => handleNav("contact")}>{L("Get in Touch", "Nous contacter")}</button>
              <div style={{ position: "relative", borderLeft: "1px solid var(--line)", marginLeft: 4, paddingLeft: 10 }}>
                <button onClick={() => setAdminOpen(o => !o)}
                  style={{ display: "flex", alignItems: "center", gap: 5, color: adminOpen ? "var(--spares)" : "var(--muted)", fontSize: 12, fontFamily: "var(--fsemi)", fontWeight: 700, letterSpacing: ".04em", padding: "5px 4px", whiteSpace: "nowrap", transition: "color .2s", background: "transparent", cursor: "pointer" }}>
                  🔒 Espace Admin <span style={{ fontSize: 9, opacity: .7 }}>▾</span>
                </button>
                {adminOpen && (
                  <div onClick={() => setAdminOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 49 }} />
                )}
                {adminOpen && (
                  <div style={{ position: "absolute", top: "calc(100% + 10px)", right: 0, background: "var(--ink)", borderRadius: 4, padding: "6px 0", minWidth: 230, boxShadow: "0 10px 28px rgba(0,0,0,.28)", zIndex: 50 }}>
                    {[
                      { href: "Login.html?dest=crm", icon: "📊", title: "CRM", sub: "Gestion commerciale" },
                      { href: "Login.html?dest=cms", icon: "🗂",  title: "CMS", sub: "Gestion de contenu"  },
                    ].map(item => (
                      <a key={item.href} href={item.href}
                        style={{ display: "flex", alignItems: "center", gap: 11, padding: "11px 16px", textDecoration: "none", transition: "background .15s" }}
                        onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(255,255,255,.07)"; }}
                        onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}>
                        <span style={{ fontSize: 20, lineHeight: 1 }}>{item.icon}</span>
                        <div>
                          <div style={{ fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 14, color: "#FCFAF4", lineHeight: 1 }}>{item.title}</div>
                          <div style={{ fontSize: 11, color: "rgba(252,250,244,.42)", marginTop: 3, fontFamily: "var(--fbody)" }}>{item.sub}</div>
                        </div>
                      </a>
                    ))}
                    <div style={{ margin: "4px 14px 2px", borderTop: "1px solid rgba(255,255,255,.08)" }} />
                    <div style={{ padding: "5px 16px 8px", fontSize: 10.5, color: "rgba(252,250,244,.28)", fontFamily: "var(--fsemi)", textTransform: "uppercase", letterSpacing: ".1em" }}>Accès administrateurs uniquement</div>
                  </div>
                )}
              </div>
            </div>
          )}
        </nav>
        <button className="nav-burger" onClick={() => setOpen(true)} style={{ display: "none", color: "var(--ink)" }} aria-label="Menu"><Icon name="menu" size={26} /></button>
      </div>

      {open && (
        <div style={{ position: "fixed", inset: 0, zIndex: 90, background: "var(--paper)", color: "var(--ink)", padding: 32, animation: "fadeIn .3s both", display: "flex", flexDirection: "column" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <Logo variant={variant} onClick={() => { setOpen(false); go("home"); }} />
            <button onClick={() => setOpen(false)} style={{ color: "var(--ink)" }}><Icon name="close" size={28} /></button>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 44 }}>
            {(onService ? [{ k: "home", label: L("Home", "Accueil") }, ...(variant === "spares" ? [{ k: "basket", label: L("Basket", "Panier") }] : [])] : hubLinks).map((l) => (
              <button key={l.k} onClick={() => handleNav(l.k)} style={{ textAlign: "left", fontFamily: "var(--fdisp)", fontWeight: 700, fontSize: 36, color: (!onService && view === l.k) ? accent : "var(--ink)", padding: "7px 0", textTransform: "uppercase" }}>{l.label}</button>
            ))}
          </div>
          <div style={{ marginTop: "auto", paddingTop: 24, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
            <div style={{ color: "var(--muted)", fontSize: 15, lineHeight: 1.6 }}>{CONTACT.tel}<br />{CONTACT.email}</div>
            <LangToggle block />
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 1040px){
          .nav-desk{display:none !important}
          .nav-burger{display:block !important}
        }
      `}</style>
    </header>
  );
}

/* ---------- Footer ---------- */
function Footer({ variant = "group" }) {
  const { go } = useContext(NavCtx);
  const [legal, setLegal] = React.useState(null); // null | 'privacy' | 'terms' | 'cookies'
  return (
    <>
      <footer style={{ background: "var(--paper-3)", color: "var(--ink)", paddingTop: 80, borderTop: "3px solid var(--group)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1.7fr 1fr 1fr 1.2fr", gap: 40, paddingBottom: 60, borderBottom: "1px solid var(--line)" }} className="footgrid">
            <div>
              <Logo variant="group" />
              <p style={{ marginTop: 20, maxWidth: 340, color: "var(--muted)", fontSize: 15.5, lineHeight: 1.6 }}>
                {L("A Niger automotive group. A modern rental fleet through Rent-a-Car and genuine vehicle parts through AfricaSpares — under one roof, keeping people and goods moving.",
                   "Un groupe automobile nigérien. Une flotte de location moderne avec Rent-a-Car et des pièces auto d'origine avec AfricaSpares — sous un même toit, pour faire circuler les personnes et les marchandises.")}
              </p>
              <div style={{ display: "flex", gap: 14, marginTop: 24 }}>
                <span className="eyebrow" style={{ color: "var(--group-d)" }}>{L("Est.", "Depuis")} {CONTACT.since}</span>
                <span className="eyebrow" style={{ color: "var(--muted)" }}>Niamey · Niger</span>
              </div>
            </div>
            {[
              { h: "Services", color: "var(--spares-d)", links: [[L("Rent-a-Car — Fleet", "Rent-a-Car — Flotte"), () => go("rent")], [L("AfricaSpares — Parts", "AfricaSpares — Pièces"), () => go("spares")], [L("Long-term leasing", "Location longue durée"), () => go("rent")], [L("Chauffeur service", "Service avec chauffeur"), () => go("rent")]] },
              { h: L("Company", "Société"), color: "var(--group-d)", links: [[L("The Group", "Le Groupe"), () => go("group")], [L("Our clients", "Nos clients"), () => go("group")], [L("Coverage", "Couverture"), () => go("coverage")], ["Contact", () => go("contact")]] },
            ].map((col) => (
              <div key={col.h}>
                <div className="eyebrow" style={{ color: col.color, marginBottom: 18 }}>{col.h}</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  {col.links.map(([t, fn]) => (
                    <button key={t} onClick={fn || undefined} style={{ textAlign: "left", color: "var(--ink-2)", fontSize: 15, transition: "color .2s", width: "fit-content" }}
                      onMouseEnter={(e) => (e.currentTarget.style.color = "var(--ink)")}
                      onMouseLeave={(e) => (e.currentTarget.style.color = "var(--ink-2)")}>{t}</button>
                  ))}
                </div>
              </div>
            ))}
            <div>
              <div className="eyebrow" style={{ color: "var(--rent-d)", marginBottom: 18 }}>Contact</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 11, color: "var(--ink-2)", fontSize: 15, lineHeight: 1.5 }}>
                <span>{CONTACT.address}<br />{CONTACT.po} · {CONTACT.city}</span>
                <a href={"tel:" + CONTACT.tel.replace(/\s/g, "")} style={{ fontFamily: "var(--fsemi)", fontWeight: 700 }}>{CONTACT.tel}</a>
                <a href={"tel:" + CONTACT.mobile.replace(/\s/g, "")}>{CONTACT.mobile}</a>
                <a href={"mailto:" + CONTACT.email}>{CONTACT.email}</a>
              </div>
            </div>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "24px 0 34px", flexWrap: "wrap", gap: 12 }}>
            <span style={{ color: "var(--muted)", fontSize: 13.5 }}>© 2026 {CONTACT.company} · {CONTACT.legal}. {L("All rights reserved.", "Tous droits réservés.")} <span style={{ color: "var(--light)", fontSize: 12, marginLeft: 10 }}>— {L("Designed & developed by", "Conçu & développé par")} <strong style={{ color: "var(--ink-2)", fontFamily: "var(--fsemi)", letterSpacing: ".02em" }}>Djabir Oumarou Kadri</strong></span></span>
            <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
              <a href="Login.html" style={{ color: "var(--group-d)", fontSize: 13.5, fontFamily: "var(--fsemi)", fontWeight: 700, display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="gauge" size={14} />{L("Management area", "Espace Gestion")}</a>
              {[
                [L("Privacy", "Confidentialité"), "privacy"],
                [L("Terms", "Conditions"), "terms"],
                ["Cookies", "cookies"],
              ].map(([label, key]) => (
                <button key={key} onClick={() => setLegal(key)}
                  style={{ color: "var(--muted)", fontSize: 13.5, cursor: "pointer", background: "transparent", border: "none", transition: "color .2s" }}
                  onMouseEnter={(e) => { e.currentTarget.style.color = "var(--ink)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.color = "var(--muted)"; }}>
                  {label}
                </button>
              ))}
            </div>
          </div>
        </div>
        <style>{`@media (max-width:880px){.footgrid{grid-template-columns:1fr 1fr !important;gap:32px !important}}@media (max-width:560px){.footgrid{grid-template-columns:1fr !important}}`}</style>
      </footer>

      {/* ── Legal modal ── */}
      {legal && <LegalModal page={legal} onClose={() => setLegal(null)} onOpenCookies={() => setLegal("cookies")} />}
    </>
  );
}

/* ---------- Legal modal ---------- */
function LegalModal({ page, onClose, onOpenCookies }) {
  const T = {
    privacy: { fr: "Politique de Confidentialité", en: "Privacy Policy" },
    terms:   { fr: "Conditions Générales d'Utilisation", en: "Terms of Use" },
    cookies: { fr: "Gestion des Cookies", en: "Cookie Policy" },
  }[page];
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 300, background: "rgba(22,19,15,.65)", overflow: "auto", display: "flex", justifyContent: "center", alignItems: "flex-start", padding: "48px 20px 80px" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: "var(--paper)", borderRadius: 5, maxWidth: 700, width: "100%", padding: "36px 40px 44px", position: "relative", boxShadow: "0 30px 80px rgba(0,0,0,.35)" }}>
        <button onClick={onClose} style={{ position: "absolute", top: 18, right: 20, fontSize: 22, color: "var(--muted)", lineHeight: 1, cursor: "pointer", background: "transparent", border: "none" }}>×</button>
        <div className="eyebrow" style={{ color: "var(--group-d)", marginBottom: 12 }}>■ Guero's Group — Niamey, Niger</div>
        <h2 style={{ fontFamily: "var(--fdisp)", fontWeight: 800, fontSize: 28, lineHeight: 1.1, marginBottom: 28 }}>{L(T.en, T.fr)}</h2>

        {page === "privacy" && <PrivacyContent />}
        {page === "terms"   && <TermsContent />}
        {page === "cookies" && <CookiesContent onClose={onClose} />}
      </div>
    </div>
  );
}

/* ---------- Legal prose helpers ---------- */
const LH = ({ n, children }) => (
  <h3 style={{ fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 15, textTransform: "uppercase", letterSpacing: ".08em", color: "var(--ink)", marginTop: 26, marginBottom: 8, borderBottom: "1px solid var(--line)", paddingBottom: 6 }}>
    {n && <span style={{ color: "var(--group-d)", marginRight: 8 }}>{n}.</span>}{children}
  </h3>
);
const LP = ({ children, style }) => <p style={{ fontSize: 14.5, lineHeight: 1.7, color: "var(--ink-2)", marginBottom: 10, ...style }}>{children}</p>;
const LI = ({ children }) => <li style={{ fontSize: 14.5, lineHeight: 1.7, color: "var(--ink-2)", marginBottom: 4 }}>{children}</li>;

function PrivacyContent() {
  return (
    <div>
      <LP>Conformément à la <strong>Loi n° 2017-28 du 03 mai 2017</strong> relative à la protection des données à caractère personnel au Niger et aux recommandations de la <strong>Haute Autorité de Protection des Données Personnelles (HAPDP)</strong>, Guero's Group s'engage à protéger vos données personnelles.</LP>
      <LH n="1">Responsable du traitement</LH>
      <LP><strong>Guero's Group / Rent A Car Niger Sarl</strong><br />Boulevard de l'Indépendance, Immeuble Asusu, BP 11.235 — Niamey, Niger<br />Email : infos@guerosgroup.com · Tél. : +227 20 74 20 40</LP>
      <LH n="2">Données collectées</LH>
      <LP>Dans le cadre de nos services, nous collectons les données suivantes :</LP>
      <ul style={{ paddingLeft: 20, marginBottom: 10 }}>
        <LI>Données d'identification : nom, prénom, date de naissance, numéro de pièce d'identité ou passeport</LI>
        <LI>Coordonnées : adresse postale, numéro de téléphone, adresse e-mail</LI>
        <LI>Données contractuelles : permis de conduire, préférences de véhicule, historique de location</LI>
        <LI>Données financières : coordonnées bancaires ou mobile money pour le règlement des prestations</LI>
        <LI>Données de navigation : adresse IP, cookies, pages consultées (voir section Cookies)</LI>
      </ul>
      <LH n="3">Finalités et base légale</LH>
      <LP>Vos données sont traitées sur les bases légales suivantes (Art. 5 Loi n° 2017-28) :</LP>
      <ul style={{ paddingLeft: 20, marginBottom: 10 }}>
        <LI><strong>Exécution du contrat :</strong> gestion des réservations, facturation, livraison des véhicules et pièces</LI>
        <LI><strong>Intérêt légitime :</strong> prévention de la fraude, sécurité des biens et des personnes</LI>
        <LI><strong>Consentement :</strong> communications commerciales, newsletter, cookies non essentiels</LI>
        <LI><strong>Obligation légale :</strong> conservation des documents comptables (5 ans — OHADA), déclarations fiscales (DGI Niger)</LI>
      </ul>
      <LH n="4">Durée de conservation</LH>
      <LP>Conformément à l'Acte Uniforme OHADA relatif au droit commercial général, vos données sont conservées :</LP>
      <ul style={{ paddingLeft: 20, marginBottom: 10 }}>
        <LI>Données clients actifs : pendant toute la durée de la relation commerciale + 5 ans</LI>
        <LI>Données de navigation : 13 mois maximum</LI>
        <LI>Données de prospection : 3 ans après le dernier contact</LI>
      </ul>
      <LH n="5">Vos droits</LH>
      <LP>Conformément aux articles 19 à 27 de la Loi n° 2017-28, vous disposez des droits suivants :</LP>
      <ul style={{ paddingLeft: 20, marginBottom: 10 }}>
        <LI><strong>Droit d'accès</strong> — obtenir copie de vos données</LI>
        <LI><strong>Droit de rectification</strong> — corriger des données inexactes</LI>
        <LI><strong>Droit d'effacement</strong> — supprimer vos données (sous conditions)</LI>
        <LI><strong>Droit d'opposition</strong> — vous opposer à un traitement fondé sur l'intérêt légitime</LI>
        <LI><strong>Droit à la portabilité</strong> — recevoir vos données dans un format structuré</LI>
      </ul>
      <LP>Pour exercer vos droits : <strong>infos@guerosgroup.com</strong>. En cas de litige non résolu, vous pouvez saisir la <strong>HAPDP</strong> — Haute Autorité de Protection des Données Personnelles du Niger, sise à Niamey.</LP>
      <LH n="6">Transferts internationaux</LH>
      <LP>Vos données ne sont pas transférées hors de la République du Niger sans garanties appropriées conformément à l'Art. 30 de la Loi n° 2017-28. Nos prestataires techniques sont tenus contractuellement à des obligations équivalentes.</LP>
      <LP style={{ fontSize: 13, color: "var(--muted)", marginTop: 20 }}>Dernière mise à jour : juin 2026 · Réf. légale : Loi n° 2017-28, HAPDP Niger, OHADA AUDCG</LP>
    </div>
  );
}

function TermsContent() {
  return (
    <div>
      <LP>Les présentes Conditions Générales d'Utilisation (CGU) régissent l'accès et l'utilisation du site internet guerosgroup.com et des services en ligne de <strong>Guero's Group / Rent A Car Niger Sarl</strong>, société de droit nigérien immatriculée au Registre du Commerce et du Crédit Mobilier (RCCM) de Niamey.</LP>
      <LH n="1">Objet</LH>
      <LP>Le site guerosgroup.com présente les services de location de véhicules (Rent-a-Car Niger) et de vente de pièces détachées automobiles (AfricaSpares). Il permet la prise de contact, la demande de devis et la réservation en ligne.</LP>
      <LH n="2">Accès au site</LH>
      <LP>L'accès au site est gratuit. L'utilisation des formulaires en ligne est réservée aux personnes majeures (18 ans et plus) disposant de la capacité juridique selon le Code Civil nigérien. Guero's Group se réserve le droit de suspendre l'accès en cas d'utilisation abusive ou frauduleuse.</LP>
      <LH n="3">Services et réservations</LH>
      <LP>Les demandes de réservation effectuées via le site valent offre de contrat et ne deviennent fermes qu'à réception d'une confirmation écrite de Guero's Group. Tout contrat de location est régi par le droit nigérien et, en particulier, par :</LP>
      <ul style={{ paddingLeft: 20, marginBottom: 10 }}>
        <LI>L'Acte Uniforme OHADA relatif au droit commercial général</LI>
        <LI>Le Code Civil nigérien applicable aux contrats de louage</LI>
        <LI>La Loi n° 2019-33 du 23 juillet 2019 relative au commerce électronique au Niger</LI>
        <LI>Le Code de la Route du Niger pour les conditions d'utilisation des véhicules</LI>
      </ul>
      <LH n="4">Tarifs et paiement</LH>
      <LP>Tous les prix sont exprimés en <strong>Francs CFA (XOF)</strong>, monnaie officielle des États membres de l'UEMOA dont le Niger. Le paiement s'effectue par virement bancaire, espèces, Orange Money, Airtel Money ou chèque certifié. La facturation est établie conformément à la réglementation fiscale de la Direction Générale des Impôts (DGI Niger).</LP>
      <LH n="5">Responsabilités</LH>
      <LP>Guero's Group s'engage à fournir les services conformément aux descriptions figurant sur le site. La responsabilité de la société ne saurait être engagée en cas de force majeure au sens du droit nigérien, ni en cas d'utilisation anormale du véhicule loué. Le locataire est responsable de tout dommage causé au véhicule pendant la période de location.</LP>
      <LH n="6">Propriété intellectuelle</LH>
      <LP>L'ensemble des contenus du site (textes, images, logos, marques) sont la propriété exclusive de Guero's Group et sont protégés par les dispositions de l'Accord de Bangui révisé du 24 février 1999 sur la propriété intellectuelle, en vigueur au Niger. Toute reproduction sans autorisation est interdite.</LP>
      <LH n="7">Droit applicable et juridiction</LH>
      <LP>Les présentes CGU sont régies par le <strong>droit de la République du Niger</strong>. En cas de litige, les parties s'efforceront de trouver une solution amiable. À défaut, tout différend sera soumis à la compétence exclusive des <strong>Tribunaux de Niamey, Niger</strong>, conformément au Code de Procédure Civile nigérien et aux dispositions OHADA applicables.</LP>
      <LP style={{ fontSize: 13, color: "var(--muted)", marginTop: 20 }}>Dernière mise à jour : juin 2026 · Société immatriculée RCCM Niamey · Réf. : Loi 2019-33, OHADA, Code Civil Niger</LP>
    </div>
  );
}

function CookiesContent({ onClose }) {
  const [accepted, setAccepted] = React.useState(() => {
    try { return localStorage.getItem("gg_cookies") || null; } catch (e) { return null; }
  });
  const accept = (level) => {
    try { localStorage.setItem("gg_cookies", level); } catch (e) {}
    setAccepted(level);
    if (onClose) setTimeout(onClose, 800);
  };
  return (
    <div>
      <LP>Conformément aux recommandations de la <strong>Haute Autorité de Protection des Données Personnelles (HAPDP)</strong> du Niger et à la Loi n° 2017-28, nous vous informons de l'utilisation de cookies sur ce site.</LP>
      <LH n="1">Qu'est-ce qu'un cookie ?</LH>
      <LP>Un cookie est un petit fichier texte déposé sur votre terminal (ordinateur, tablette, smartphone) lors de la visite d'un site web. Il permet au site de mémoriser certaines informations pour améliorer votre navigation.</LP>
      <LH n="2">Cookies utilisés sur ce site</LH>
      <div style={{ border: "1px solid var(--line)", borderRadius: 3, overflow: "hidden", marginBottom: 16 }}>
        {[
          ["Essentiels", "Session, sécurité du formulaire de contact, préférence de langue", "Toujours actifs", "Session"],
          ["Analytiques", "Mesure d'audience anonymisée (fréquentation des pages)", "Avec consentement", "13 mois"],
          ["Fonctionnels", "Mémorisation de vos préférences (langue, division active)", "Avec consentement", "12 mois"],
        ].map(([type, desc, status, duration], i) => (
          <div key={type} style={{ display: "grid", gridTemplateColumns: "120px 1fr 140px 80px", gap: 0, borderBottom: i < 2 ? "1px solid var(--line)" : "none" }}>
            <div style={{ padding: "10px 12px", fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 13, borderRight: "1px solid var(--line)", background: "var(--paper-2)" }}>{type}</div>
            <div style={{ padding: "10px 12px", fontSize: 13, color: "var(--ink-2)", borderRight: "1px solid var(--line)" }}>{desc}</div>
            <div style={{ padding: "10px 12px", fontSize: 12.5, color: status === "Toujours actifs" ? "var(--ok)" : "var(--muted)", borderRight: "1px solid var(--line)" }}>{status}</div>
            <div style={{ padding: "10px 12px", fontSize: 12.5, color: "var(--muted)" }}>{duration}</div>
          </div>
        ))}
      </div>
      <LH n="3">Gérer vos préférences</LH>
      <LP>Vous pouvez modifier vos préférences à tout moment depuis les paramètres de votre navigateur :</LP>
      <ul style={{ paddingLeft: 20, marginBottom: 14 }}>
        <LI><strong>Chrome</strong> : Paramètres › Confidentialité et sécurité › Cookies</LI>
        <LI><strong>Firefox</strong> : Paramètres › Vie privée et sécurité › Cookies</LI>
        <LI><strong>Safari</strong> : Préférences › Confidentialité</LI>
        <LI><strong>Edge</strong> : Paramètres › Confidentialité, recherche et services</LI>
      </ul>
      <LP>Le refus des cookies analytiques et fonctionnels n'affecte pas l'accès aux services de Guero's Group.</LP>
      {accepted
        ? <LP style={{ color: "var(--ok)", fontWeight: 700, marginTop: 16 }}>✓ Préférences enregistrées ({accepted === "all" ? "tous les cookies acceptés" : "cookies essentiels uniquement"})</LP>
        : (
          <div style={{ display: "flex", gap: 10, marginTop: 20, flexWrap: "wrap" }}>
            <button onClick={() => accept("all")} style={{ padding: "10px 22px", background: "var(--ink)", color: "var(--paper)", fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 13.5, textTransform: "uppercase", letterSpacing: ".05em", borderRadius: 3, border: "none", cursor: "pointer" }}>
              Tout accepter
            </button>
            <button onClick={() => accept("essential")} style={{ padding: "10px 22px", background: "transparent", color: "var(--ink)", fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 13.5, textTransform: "uppercase", letterSpacing: ".05em", borderRadius: 3, border: "1.5px solid var(--cream-b)", cursor: "pointer" }}>
              Essentiels uniquement
            </button>
          </div>
        )
      }
      <LP style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 16 }}>Réf. : Loi n° 2017-28 art. 6, HAPDP Niger · Contact : infos@guerosgroup.com</LP>
    </div>
  );
}

/* ---------- Cookie consent banner ---------- */
function CookieBanner() {
  const [show, setShow] = React.useState(() => {
    try { return !localStorage.getItem("gg_cookies"); } catch (e) { return true; }
  });
  const [modalOpen, setModalOpen] = React.useState(false);

  const accept = (level) => {
    try { localStorage.setItem("gg_cookies", level); } catch (e) {}
    setShow(false);
  };

  if (!show) return null;
  return (
    <>
      <div style={{ position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 250, background: "var(--ink)", color: "var(--paper-0)", boxShadow: "0 -4px 30px rgba(0,0,0,.35)", padding: "18px 32px", display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
        <div style={{ flex: 1, minWidth: 280, fontSize: 14, lineHeight: 1.55, color: "rgba(252,250,244,.8)" }}>
          <strong style={{ color: "var(--paper-0)" }}>Ce site utilise des cookies</strong> pour améliorer votre expérience et mesurer l'audience. Conformément à la Loi n° 2017-28 (Niger) et aux recommandations de la HAPDP, votre consentement est requis pour les cookies non essentiels.{" "}
          <button onClick={() => setModalOpen(true)} style={{ color: "var(--group)", fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 13.5, textDecoration: "underline", background: "transparent", border: "none", cursor: "pointer", padding: 0 }}>En savoir plus</button>
        </div>
        <div style={{ display: "flex", gap: 10, flexShrink: 0 }}>
          <button onClick={() => accept("essential")} style={{ padding: "9px 18px", background: "rgba(255,255,255,.1)", color: "var(--paper-0)", fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 13, textTransform: "uppercase", letterSpacing: ".05em", borderRadius: 3, border: "1px solid rgba(255,255,255,.2)", cursor: "pointer", transition: "background .2s" }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(255,255,255,.18)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(255,255,255,.1)"; }}>
            Refuser
          </button>
          <button onClick={() => accept("all")} style={{ padding: "9px 18px", background: "var(--group)", color: "var(--ink)", fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 13, textTransform: "uppercase", letterSpacing: ".05em", borderRadius: 3, border: "none", cursor: "pointer", transition: "opacity .2s" }}
            onMouseEnter={(e) => { e.currentTarget.style.opacity = ".88"; }}
            onMouseLeave={(e) => { e.currentTarget.style.opacity = "1"; }}>
            Tout accepter
          </button>
        </div>
      </div>
      {modalOpen && <LegalModal page="cookies" onClose={() => setModalOpen(false)} />}
    </>
  );
}

/* ---------- Marquee strip ---------- */
function Marquee({ items = [], bg = "var(--ink)", color = "#fff", accent = "var(--group)" }) {
  const list = [...items, ...items];
  return (
    <div style={{ background: bg, overflow: "hidden", padding: "13px 0", position: "relative" }}>
      <style>{`@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}`}</style>
      <div style={{ display: "flex", gap: 0, animation: "marquee 28s linear infinite", width: "max-content" }}>
        {list.map((item, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 18, padding: "0 28px", fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 13, textTransform: "uppercase", letterSpacing: ".1em", color, whiteSpace: "nowrap" }}>
            <span style={{ color: accent, fontSize: 10 }}>■</span>
            {item}
          </span>
        ))}
      </div>
    </div>
  );
}

/* ---------- Client wall ---------- */
const CLIENT_META = {
  "airtel.africa":  { abbr: "Ai",   bg: "#E40000", color: "#fff" },
  "ericsson.com":   { abbr: "Er",   bg: "#0082F0", color: "#fff" },
  "orange.com":     { abbr: "Or",   bg: "#FF7900", color: "#fff" },
  "worldbank.org":  { abbr: "WB",   bg: "#009FDA", color: "#fff" },
  "undp.org":       { abbr: "UN",   bg: "#0068B4", color: "#fff" },
  "europa.eu":      { abbr: "EU",   bg: "#003399", color: "#FFD700" },
  "jica.go.jp":     { abbr: "JICA", bg: "#12A3D8", color: "#fff" },
  "unodc.org":      { abbr: "ONU",  bg: "#009EDB", color: "#fff" },
  "chemonics.com":  { abbr: "Ch",   bg: "#CD202C", color: "#fff" },
  "bceao.int":      { abbr: "BC",   bg: "#006B3C", color: "#fff" },
  "boad.org":       { abbr: "BD",   bg: "#8B1C1C", color: "#fff" },
  "cnpc.com.cn":    { abbr: "CN",   bg: "#CC0000", color: "#fff" },
  us:               { abbr: "USA",  bg: "#B22234", color: "#fff" },
  jp:               { abbr: "JPN",  bg: "#BC002D", color: "#fff" },
  it:               { abbr: "ITA",  bg: "#009246", color: "#fff" },
};

function ClientWall() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 28, alignItems: "stretch" }}>
      {CLIENTS.map((c, i) => {
        const label = typeof c.name === "object" ? L(c.name.en, c.name.fr) : c.name;
        const key   = c.domain || c.flag || String(i);
        return <ClientLogo key={key} client={c} label={label} />;
      })}
    </div>
  );
}

function ClientLogo({ client, label }) {
  const [err, setErr] = React.useState(false);
  const meta = CLIENT_META[client.domain || client.flag] || { abbr: label.slice(0,2).toUpperCase(), bg: "var(--ink)", color: "var(--paper)" };
  return (
    <div title={label} style={{
      background: "var(--paper)",
      border: "1px solid var(--line)",
      borderRadius: 4,
      padding: "10px 14px",
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      justifyContent: "center",
      gap: 7,
      height: 84,
      width: 116,
      transition: "border-color .2s, box-shadow .2s",
      cursor: "default",
    }}
      onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--group)"; e.currentTarget.style.boxShadow = "0 4px 14px rgba(0,0,0,.07)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.boxShadow = "none"; }}>
      {client.logo && !err ? (
        <img
          src={client.logo}
          alt={label}
          onError={() => setErr(true)}
          style={{
            maxHeight: 44,
            maxWidth: 88,
            objectFit: "contain",
            mixBlendMode: "multiply",
            display: "block",
            flexShrink: 0,
          }}
        />
      ) : (
        <span style={{
          width: 38, height: 38, borderRadius: 6,
          background: meta.bg, color: meta.color,
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          fontFamily: "var(--fsemi)", fontWeight: 800,
          fontSize: meta.abbr.length > 2 ? 9 : 13,
          flexShrink: 0, lineHeight: 1,
        }}>{meta.abbr}</span>
      )}
      <span style={{
        fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 10,
        color: "var(--mid)", textAlign: "center", lineHeight: 1.25,
        maxWidth: 96, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
        letterSpacing: ".02em",
      }}>{label}</span>
    </div>
  );
}


Object.assign(window, { L, setActiveLang, LangCtx, NavCtx, CONTACT, CLIENTS, Icon, Logo, Ph, Reveal, SectionTag, PageHeader, MapEmbed, Nav, Footer, LegalModal, CookieBanner, Marquee, ClientWall });