/* ============================================================
   AfricaSpares — Parts & Engines service page
   ============================================================ */
const SPARES_CATS = [
  { k: "engine", label: { en: "Engine", fr: "Moteur" }, icon: "gear", count: 2840 },
  { k: "trans", label: { en: "Transmission", fr: "Transmission" }, icon: "gauge", count: 1120 },
  { k: "brakes", label: { en: "Brakes", fr: "Freinage" }, icon: "shield", count: 1680 },
  { k: "electrical", label: { en: "Electrical", fr: "\u00c9lectricit\u00e9" }, icon: "bolt", count: 2210 },
  { k: "suspension", label: { en: "Suspension", fr: "Suspension" }, icon: "truck", count: 940 },
  { k: "filters", label: { en: "Filters & Fluids", fr: "Filtres & Fluides" }, icon: "box", count: 3050 },
  { k: "body", label: { en: "Body & Trim", fr: "Carrosserie" }, icon: "car", count: 760 },
  { k: "cooling", label: { en: "Cooling", fr: "Refroidissement" }, icon: "leaf", count: 880 },
];

/* Parts now load live from Supabase (see gg-supabase.js).
   window.GG_DATA.parts is filled before React mounts. */
const PARTS = (window.GG_DATA && window.GG_DATA.parts) || [];

/* Part → Unsplash image by category */
const PART_PHOTOS = {
  engine:     "1486262715619-67b85e0b08d3",
  trans:      "1493397234905-8c698b6a7f66",
  brakes:     "1492144534655-ae79c964c9d7",
  electrical: "1558618666-fcd25c85cd64",
  suspension: "1558618047-f8a0efc64a41",
  filters:    "1511919884226-fd3ccc8e827f",
  cooling:    "1563213126-2f10d8629b78",
  body:       "1578662996442-48f60103fc96",
};
/* Exact part image map — one image per product name */
/* Image map merges local fallback files with live Supabase paths.
   We use a Proxy so lookups always check the latest GG_DATA, even
   though this constant is defined before the data finishes loading. */
const PARTS_IMGS_LOCAL = {
  "Turbocharger Assembly":       "assets/parts/turbocharger.png",
  "Complete Clutch Kit":         "assets/parts/clutch-kit.png",
  "Front Brake Disc (pair)":     "assets/parts/brake-disc-pair.png",
  "Alternator 120A":             "assets/parts/alternator-120a.png",
  "Shock Absorber Set":          "assets/parts/shock-absorber.png",
  "Oil + Air + Fuel Filter Kit": "assets/parts/filter-kit.png",
  "Radiator Assembly":           "assets/parts/radiator.png",
  "Headlamp Unit (LH)":          "assets/parts/headlamp.png",
  "Timing Chain Kit":            "assets/parts/timing-chain.png",
  "Water Pump":                  "assets/parts/water-pump.png",
  "Glow Plug Set (4)":           "assets/parts/glow-plugs.png",
  "Leaf Spring (rear)":          "assets/parts/leaf-spring.png",
  "Battery 100Ah":               "assets/parts/battery-100ah.png",
  "Front Brake Pad Set":         "assets/parts/brake-pads.png",
  "A/C Compressor":              "assets/parts/ac-compressor.png",
  "Fuel Injector":               "assets/parts/fuel-injector.png",
  "Wiper Blade Set":             "assets/parts/wiper-blades.png",
};
const PARTS_IMGS = new Proxy(PARTS_IMGS_LOCAL, {
  get(local, key) {
    const live = (window.GG_DATA && window.GG_DATA.partImgs) || {};
    return live[key] || local[key];
  },
});
const PROD_BG = { width: "100%", height: "100%", background: "var(--paper-0)", display: "flex", alignItems: "center", justifyContent: "center" };
const PROD_IMG = { width: "100%", height: "100%", objectFit: "contain", mixBlendMode: "multiply" };
function AfricaSpares() {
  const [cat, setCat] = useState("all");
  const [make, setMake] = useState("");
  const [query, setQuery] = useState("");
  const [sugOpen, setSugOpen] = useState(false);
  const sugRef = useRef(null);
  useEffect(() => {
    const h = (e) => { if (sugRef.current && !sugRef.current.contains(e.target)) setSugOpen(false); };
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, []);
  const goCatalog = () => { const el = document.getElementById("sec-catalog"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 70, behavior: "smooth" }); };

  // keyword search: split into tokens, every token must match name / fitment / SKU / tag / category label
  const catLabel = (c) => { const f = SPARES_CATS.find((x) => x.k === c); return f ? f.label.en + " " + f.label.fr : ""; };
  const tokens = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
  const filtered = PARTS.filter((p) => {
    if (cat !== "all" && p.cat !== cat) return false;
    if (make && !p.fit.toLowerCase().includes(make.toLowerCase())) return false;
    if (tokens.length === 0) return true;
    const hay = (p.name + " " + p.fit + " " + p.sku + " " + p.tag + " " + catLabel(p.cat)).toLowerCase();
    return tokens.every((t) => hay.includes(t));
  });
  // live suggestions for the search box
  const ql = query.trim().toLowerCase();
  const suggest = ql.length >= 1 ? PARTS.filter((p) => (p.name + " " + p.fit + " " + p.sku + " " + catLabel(p.cat)).toLowerCase().includes(ql)).slice(0, 6) : [];

  return (
    <CartProvider>
      <div className="view" style={{ "--accent": "var(--spares)", "--accent-d": "var(--spares-d)" }}>
      <Nav variant="spares" />

      {/* HERO + SEARCH */}
      <section style={{ background: "var(--paper)", color: "var(--ink)", paddingTop: 76, position: "relative", overflow: "visible" }}>
        <Ph scene={
          <div style={{ width: "100%", height: "100%" }}>
            <img src="assets/parts/africaspares-thumb.png" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.14, mixBlendMode: "multiply" }} />
          </div>
        } style={{ position: "absolute", inset: 0 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg,rgba(246,242,234,.5),rgba(246,242,234,.92))" }} />
        <div className="wrap" style={{ position: "relative", paddingTop: 70, paddingBottom: 58 }}>
          <Reveal><div style={{ fontFamily: "var(--fdisp)", fontWeight: 700, fontSize: 13, textTransform: "uppercase", letterSpacing: ".14em", color: "var(--muted)", marginBottom: 16 }}>Guero’s Group AfricaSpares</div></Reveal>
          <Reveal><SectionTag color="var(--spares-d)">{L("AfricaSpares · A Guero\u2019s Group service", "AfricaSpares · Un service du Guero\u2019s Group")}</SectionTag></Reveal>
          <Reveal delay={70}><h1 style={{ fontSize: "clamp(48px,7.5vw,108px)", marginTop: 20, maxWidth: 900 }}>{L(<>The right part,<br />first time</>, <>La bonne pièce,<br />du premier coup</>)}<span style={{ color: "var(--spares)" }}>.</span></h1></Reveal>
          <Reveal delay={130}><p style={{ fontSize: "clamp(16px,1.9vw,20px)", color: "var(--ink-2)", marginTop: 24, maxWidth: 560, lineHeight: 1.55 }}>{L("Search genuine and quality aftermarket parts by vehicle or part number. Order online with secure payment, delivered across Niger.", "Cherchez des pi\u00e8ces d\u2019origine et adaptables de qualit\u00e9 par v\u00e9hicule ou par r\u00e9f\u00e9rence. Commandez en ligne avec paiement s\u00e9curis\u00e9, livr\u00e9 dans tout le Niger.")}</p></Reveal>

          {/* search bar */}
          <Reveal delay={190}>
            <div style={{ background: "var(--paper-0)", borderRadius: 5, padding: 12, marginTop: 40, display: "grid", gridTemplateColumns: "1.1fr 1.6fr auto", gap: 10, maxWidth: 860, boxShadow: "0 30px 60px -34px rgba(0,0,0,.3)", border: "1px solid var(--line)" }} className="searchbar">
              <Field icon="car" label={L("Vehicle make", "Marque du v\u00e9hicule")}>
                <select value={make} onChange={(e) => setMake(e.target.value)} style={selStyle}>
                  <option value="">{L("All makes", "Toutes marques")}</option>
                  {["Toyota", "Nissan", "Ford", "Mercedes", "Isuzu", "Hyundai", "VW"].map((m) => <option key={m}>{m}</option>)}
                </select>
              </Field>
              <div ref={sugRef} style={{ position: "relative" }}>
                <Field icon="search" label={L("Part name, number or keyword", "Nom, r\u00e9f\u00e9rence ou mot-cl\u00e9")}>
                  <input value={query} onChange={(e) => { setQuery(e.target.value); setSugOpen(true); }} onFocus={() => setSugOpen(true)} onKeyDown={(e) => { if (e.key === "Enter") { setSugOpen(false); goCatalog(); } else if (e.key === "Escape") setSugOpen(false); }} placeholder={L("e.g. brake disc, turbo, ENG-TBO-2840", "ex. disque de frein, turbo, ENG-TBO-2840")} style={inpStyle} autoComplete="off" />
                </Field>
                {sugOpen && suggest.length > 0 && (
                  <div style={{ position: "absolute", top: "calc(100% + 8px)", left: 0, right: 0, background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 6, boxShadow: "0 24px 48px -20px rgba(0,0,0,.4)", zIndex: 60, overflow: "hidden" }}>
                    {suggest.map((p) => (
                      <button key={p.sku} type="button" onClick={() => { setQuery(p.name); setSugOpen(false); goCatalog(); }} style={{ display: "flex", alignItems: "center", gap: 12, width: "100%", textAlign: "left", padding: "11px 16px", borderBottom: "1px solid var(--line)", background: "transparent" }}
                        onMouseEnter={(e) => { e.currentTarget.style.background = "var(--paper-2)"; }} onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}>
                        <span style={{ color: "var(--spares-d)", flexShrink: 0 }}><Icon name={(SPARES_CATS.find((c) => c.k === p.cat) || {}).icon || "box"} size={18} /></span>
                        <span style={{ minWidth: 0, flex: 1 }}>
                          <span style={{ display: "block", fontFamily: "var(--fsemi)", fontWeight: 600, fontSize: 14.5, color: "var(--ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.name}</span>
                          <span style={{ display: "block", fontSize: 12.5, color: "var(--muted)" }}>{p.fit} · {p.sku}</span>
                        </span>
                        <span style={{ fontFamily: "var(--fdisp)", fontWeight: 700, fontSize: 14, color: "var(--ink)", flexShrink: 0 }}>{p.price.toLocaleString()} F</span>
                      </button>
                    ))}
                  </div>
                )}
              </div>
              <button className="btn btn-accent" style={{ borderRadius: 3, justifyContent: "center" }} onClick={() => { setSugOpen(false); goCatalog(); }}>
                <Icon name="search" size={18} /> {L("Search", "Rechercher")}
              </button>
            </div>
          </Reveal>
          <Reveal delay={240}>
            <div style={{ display: "flex", gap: 22, marginTop: 22, flexWrap: "wrap", color: "var(--muted)", fontSize: 14 }}>
              {[L("Genuine OEM available", "Pi\u00e8ces d\u2019origine"), L("Warranty on every order", "Garantie sur chaque commande"), L("Delivery across Niger", "Livraison dans tout le Niger")].map((t) => (
                <span key={t} style={{ display: "inline-flex", gap: 8, alignItems: "center" }}><Icon name="check" size={15} style={{ color: "var(--spares-d)" }} />{t}</span>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      <Marquee bg="var(--spares)" color="var(--ink)" accent="var(--ink)" items={L(["Engine Parts", "Brakes", "Electrical", "Filters", "Transmission", "Suspension", "Cooling", "Body"], ["Moteur", "Freinage", "\u00c9lectricit\u00e9", "Filtres", "Transmission", "Suspension", "Refroidissement", "Carrosserie"])} />

      {/* CATEGORIES */}
      <section id="sec-catalog" style={{ padding: "100px 0 40px", background: "var(--paper)" }}>
        <div className="wrap">
          <Reveal><SectionTag n="01" color="var(--spares-d)">{L("Browse by category", "Parcourir par cat\u00e9gorie")}</SectionTag></Reveal>
          <Reveal delay={60}><h2 style={{ fontSize: "clamp(34px,4.4vw,56px)", marginTop: 18, marginBottom: 36 }}>{L("What are you fixing today?", "Que r\u00e9parez-vous aujourd\u2019hui ?")}</h2></Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 14 }} className="catgrid">
            {SPARES_CATS.map((c, i) => {
              const active = cat === c.k;
              return (
                <Reveal key={c.k} delay={i * 40}>
                  <button onClick={() => setCat(active ? "all" : c.k)} style={{
                    width: "100%", textAlign: "left", padding: "22px 20px", borderRadius: 4,
                    background: active ? "var(--ink)" : "var(--paper-2)", color: active ? "var(--paper)" : "var(--ink)",
                    border: "1px solid " + (active ? "var(--ink)" : "var(--line)"), transition: "all .2s",
                  }}
                    onMouseEnter={(e) => { if (!active) e.currentTarget.style.borderColor = "var(--spares)"; }}
                    onMouseLeave={(e) => { if (!active) e.currentTarget.style.borderColor = "var(--line)"; }}>
                    <span style={{ color: "var(--spares)", display: "block" }}><Icon name={c.icon} size={26} /></span>
                    <div style={{ fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 18, marginTop: 16 }}>{L(c.label.en, c.label.fr)}</div>
                    <div style={{ fontSize: 13, color: active ? "rgba(246,242,234,.5)" : "var(--muted)", marginTop: 3 }}>{c.count.toLocaleString()} {L("parts", "pi\u00e8ces")}</div>
                  </button>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* CATALOG RESULTS */}
      <section style={{ padding: "40px 0 110px", background: "var(--paper)" }}>
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24, flexWrap: "wrap", gap: 12 }}>
            <div style={{ fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 15, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.08em" }}>
              {filtered.length} {L(filtered.length !== 1 ? "results" : "result", filtered.length !== 1 ? "r\u00e9sultats" : "r\u00e9sultat")}{cat !== "all" && <> · {L(SPARES_CATS.find((c) => c.k === cat)?.label.en, SPARES_CATS.find((c) => c.k === cat)?.label.fr)}</>}
            </div>
            {(cat !== "all" || query) && <button onClick={() => { setCat("all"); setQuery(""); }} className="lnk" style={{ color: "var(--spares-d)" }}><Icon name="close" size={15} /> {L("Clear filters", "Effacer les filtres")}</button>}
          </div>
          {filtered.length === 0 ? (
            <div style={{ padding: "60px 0", textAlign: "center", color: "var(--muted)" }}>
              {window.GG_DATA && window.GG_DATA.loadError ? (
                <>
                  <p style={{ marginBottom: 14 }}>{L("We're having trouble loading the catalogue right now.", "Nous avons un probl\u00e8me pour charger le catalogue en ce moment.")}</p>
                  <button className="btn" onClick={() => window.location.reload()}>{L("Try again", "R\u00e9essayer")}</button>
                </>
              ) : (
                L("No parts match — try a different search or clear the filters.", "Aucune pi\u00e8ce trouv\u00e9e — essayez une autre recherche ou effacez les filtres.")
              )}
            </div>
          ) : (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18 }} className="g3">
              {filtered.map((p, i) => <PartCard key={p.sku} p={p} delay={(i % 3) * 50} />)}
            </div>
          )}
        </div>
      </section>

      {/* WHY */}
      <section style={{ padding: "100px 0", background: "var(--paper-2)", color: "var(--ink)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 70 }} className="g2">
            <div>
              <Reveal><SectionTag n="02" color="var(--spares-d)">{L("Why AfricaSpares", "Pourquoi AfricaSpares")}</SectionTag></Reveal>
              <Reveal delay={60}><h2 style={{ fontSize: "clamp(34px,4.4vw,56px)", marginTop: 18 }}>{L(<>Parts you can stake<br />a job on.</>, <>Des pièces sur lesquelles<br />compter.</>)}</h2></Reveal>
              <Reveal delay={120}><p style={{ marginTop: 22, color: "var(--ink-2)", fontSize: 17, lineHeight: 1.6, maxWidth: 420 }}>{L("Garages and fleet managers come back because the part fits, arrives on time, and is covered if it doesn't.", "Garages et gestionnaires de flotte reviennent : la pi\u00e8ce est conforme, arrive \u00e0 temps, et reste garantie si besoin.")}</p></Reveal>
            </div>
            <div style={{ display: "flex", flexDirection: "column" }}>
              {[
                ["shield", { en: "Warranty-backed", fr: "Sous garantie" }, { en: "Every part carries a fitment and quality guarantee. Wrong fit? We make it right.", fr: "Chaque pi\u00e8ce est garantie en conformit\u00e9 et qualit\u00e9. Mauvais montage ? On corrige." }],
                ["box", { en: "Traceable sourcing", fr: "Appro tra\u00e7able" }, { en: "OEM and vetted aftermarket only — each part logged from supplier to shelf.", fr: "Origine et adaptable v\u00e9rifi\u00e9 uniquement — chaque pi\u00e8ce suivie du fournisseur au rayon." }],
                ["truck", { en: "Fast delivery", fr: "Livraison rapide" }, { en: "Dispatched quickly across Niger, with free local delivery within 25km.", fr: "Exp\u00e9di\u00e9 rapidement dans tout le Niger, livraison locale gratuite sous 25 km." }],
                ["users", { en: "Technical support", fr: "Support technique" }, { en: "Not sure of the part? Send your VIN or plate and our team confirms fitment.", fr: "Un doute sur la pi\u00e8ce ? Envoyez votre VIN ou plaque, notre \u00e9quipe confirme." }],
              ].map(([ic, h, d], i) => (
                <Reveal key={h.en} delay={i * 70}>
                  <div style={{ display: "flex", gap: 18, padding: "22px 0", borderTop: "1px solid var(--line)" }}>
                    <span style={{ color: "var(--spares-d)" }}><Icon name={ic} size={24} /></span>
                    <div>
                      <div style={{ fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 18 }}>{L(h.en, h.fr)}</div>
                      <div style={{ color: "var(--muted)", fontSize: 15, marginTop: 4, lineHeight: 1.55 }}>{L(d.en, d.fr)}</div>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>

      <Footer variant="spares" />
    </div>
    </CartProvider>
  );
}

/* ---------- Part card ---------- */
function PartCard({ p, delay }) {
  const [hover, setHover] = useState(false);
  const [added, setAdded] = useState(false);
  const { addItem } = useCart();
  const onAdd = (e) => { e.stopPropagation(); addItem({ ...p, img: PARTS_IMGS[p.name] || null }); setAdded(true); setTimeout(() => setAdded(false), 1400); };
  const low = p.stock === "Low stock";
  const stockLabel = low ? L("Low stock", "Stock faible") : L("In stock", "En stock");
  const catIcon = (SPARES_CATS.find((c) => c.k === p.cat) || {}).icon || "box";
  return (
    <Reveal delay={delay}>
      <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{ background: "var(--paper-0)", border: "1px solid var(--line)", borderRadius: 4, overflow: "hidden", transition: "transform .2s, box-shadow .2s", transform: hover ? "translateY(-4px)" : "none", boxShadow: hover ? "0 24px 44px -28px rgba(0,0,0,.3)" : "none", display: "flex", flexDirection: "column", height: "100%" }}>
        <Ph scene={<div style={{ ...PROD_BG, padding: "10%" }}><img src={PARTS_IMGS[p.name] || "assets/parts/turbocharger.png"} alt={p.name} style={PROD_IMG} loading="lazy" /></div>} style={{ aspectRatio: "4/3" }}>
          <span style={{ position: "absolute", top: 12, left: 12, background: p.tag === "OEM" ? "var(--ink)" : "var(--paper-3)", color: p.tag === "OEM" ? "var(--paper)" : "var(--ink)", fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", padding: "5px 9px", borderRadius: 2 }}>{p.tag}</span>
        </Ph>
        <div style={{ padding: "18px 20px 22px", display: "flex", flexDirection: "column", flex: 1 }}>
          <div style={{ fontFamily: "var(--fsemi)", fontSize: 11.5, letterSpacing: "0.1em", color: "var(--muted)", textTransform: "uppercase" }}>{p.sku}</div>
          <h3 style={{ fontSize: 22, marginTop: 7, lineHeight: 1.05 }}>{p.name}</h3>
          <div style={{ fontSize: 14, color: "var(--muted)", marginTop: 6 }}>{L("Fits", "Compatible")}: {p.fit}</div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 12 }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: low ? "var(--spares)" : "oklch(0.62 0.13 150)" }} />
            <span style={{ fontSize: 13.5, color: low ? "var(--spares-d)" : "oklch(0.5 0.1 150)", fontWeight: 600 }}>{stockLabel}</span>
          </div>
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginTop: "auto", paddingTop: 18 }}>
            <div>
              <div style={{ fontSize: 12, color: "var(--muted)" }}>{L("from", "d\u00e8s")}</div>
              <div style={{ fontFamily: "var(--fdisp)", fontWeight: 800, fontSize: 26, lineHeight: 1 }}>{p.price.toLocaleString()}<span style={{ fontSize: 13, color: "var(--muted)", fontFamily: "var(--fbody)", fontWeight: 600 }}> FCFA</span></div>
            </div>
            <div style={{ display: "flex", gap: 8, flex: 1, marginLeft: 16, maxWidth: 220 }}>
              <button onClick={onAdd} className="btn" style={{ flex: 1, justifyContent: "center", background: added ? "oklch(0.55 0.12 150)" : "var(--spares)", color: "#fff", padding: "10px 0", fontSize: 12.5 }}>{added ? L("\u2713 Added", "\u2713 Ajout\u00e9") : L("Add to basket", "Ajouter au panier")}</button>
            </div>
          </div>
        </div>
      </div>
    </Reveal>
  );
}

/* ---------- form helpers ---------- */
const selStyle = { width: "100%", border: "none", background: "transparent", fontSize: 16, fontWeight: 600, outline: "none", cursor: "pointer", color: "var(--ink)" };
const inpStyle = { width: "100%", border: "none", background: "transparent", fontSize: 16, outline: "none", color: "var(--ink)" };
const fInp = { width: "100%", border: "1px solid var(--line)", borderRadius: 3, padding: "12px 14px", fontSize: 15.5, background: "var(--paper)", outline: "none", transition: "border-color .2s" };

function Field({ icon, label, children }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "8px 14px", borderRadius: 3, background: "var(--paper-2)" }}>
      <span style={{ color: "var(--spares-d)" }}><Icon name={icon} size={20} /></span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: "var(--fsemi)", fontSize: 10.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>{label}</div>
        {children}
      </div>
    </div>
  );
}
function FormField({ label, children }) {
  return (
    <label style={{ display: "block" }}>
      <span style={{ fontFamily: "var(--fsemi)", fontSize: 11.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--muted)", display: "block", marginBottom: 7 }}>{label}</span>
      {children}
    </label>
  );
}

Object.assign(window, { AfricaSpares, Field, FormField, fInp, PARTS_IMGS });
