/* ============================================================
   Guero's Group — Hub pages (Home / Group / Services / Coverage / Contact)
   ============================================================ */

/* ---------- Shared CTA band ---------- */
function CTABand() {
  const { go } = useContext(NavCtx);
  return (
    <section style={{ padding: "100px 0", background: "var(--paper)" }}>
      <div className="wrap">
        <div style={{ background: "var(--group)", borderRadius: 6, padding: "clamp(40px,6vw,72px)", position: "relative", overflow: "hidden", boxShadow: "0 30px 70px -34px rgba(0,0,0,.4)" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 50, alignItems: "center" }} className="g2">
            <div>
              <SectionTag color="var(--ink)">{L("Talk to the group", "Parlez au groupe")}</SectionTag>
              <h2 style={{ fontSize: "clamp(34px,4.6vw,58px)", marginTop: 18, color: "var(--ink)" }}>{L("Not sure which service you need?", "Vous h\u00e9sitez entre nos services ?")}</h2>
              <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 460 }}>{L("Tell us what you're trying to move or fix. One message reaches both desks.", "Dites-nous ce que vous devez d\u00e9placer ou r\u00e9parer. Un seul message atteint nos deux \u00e9quipes.")}</p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {[["phone", L("Office", "Bureau"), CONTACT.tel, "tel:" + CONTACT.tel.replace(/\s/g, "")],
                ["phone", L("Mobile / WhatsApp", "Mobile / WhatsApp"), CONTACT.mobile, "tel:" + CONTACT.mobile.replace(/\s/g, "")],
                ["mail", "Email", CONTACT.email, "mailto:" + CONTACT.email]].map(([ic, h, v, href]) => (
                <a key={h} href={href} style={{ background: "var(--paper)", borderRadius: 3, padding: "16px 20px", display: "flex", alignItems: "center", gap: 16, transition: "transform .2s" }}
                  onMouseEnter={(e) => (e.currentTarget.style.transform = "translateX(4px)")}
                  onMouseLeave={(e) => (e.currentTarget.style.transform = "none")}>
                  <span style={{ color: "var(--group-d)" }}><Icon name={ic} size={22} /></span>
                  <div style={{ minWidth: 0 }}>
                    <div className="eyebrow" style={{ color: "var(--muted)" }}>{h}</div>
                    <div style={{ fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 17, marginTop: 2 }}>{v}</div>
                  </div>
                  <span style={{ marginLeft: "auto", color: "var(--muted)" }}><Icon name="arrow" size={18} /></span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Two service cards ---------- */
function ServiceCard({ variant, tag, name, desc, points, cta, icon, photo, onClick }) {
  const [hover, setHover] = useState(false);
  const accent = variant === "spares" ? "var(--spares)" : "var(--rent)";
  const accentD = variant === "spares" ? "var(--spares-d)" : "var(--rent-d)";
  return (
    <Reveal delay={variant === "spares" ? 100 : 0}>
      <div onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{ background: "var(--paper-0)", borderRadius: 5, overflow: "hidden", cursor: "pointer", border: "1px solid var(--line)", transition: "transform .25s, box-shadow .25s", transform: hover ? "translateY(-6px)" : "none", boxShadow: hover ? "0 30px 60px -30px rgba(0,0,0,.3)" : "0 1px 0 rgba(0,0,0,0.02)", display: "flex", flexDirection: "column", height: "100%" }}>
        <Ph scene={
          photo
            ? <div style={{ width: "100%", height: "100%", background: "var(--paper-0)", display: "flex", alignItems: "center", justifyContent: "center", padding: "5% 10%" }}>
                <img src={photo} alt={name} style={{ width: "100%", height: "100%", objectFit: "contain", mixBlendMode: "multiply" }} loading="lazy" />
              </div>
            : variant === "spares" ? <PartTile icon={icon} seed={3} /> : <SahelScene variant="road" seed={7} subject="pickup" />
        } style={{ aspectRatio: "16/9" }}>
          <div style={{ position: "absolute", top: 18, left: 18, width: 48, height: 48, borderRadius: 3, background: accent, display: "grid", placeItems: "center", color: variant === "spares" ? "var(--ink)" : "var(--paper)" }}><Icon name={icon} size={24} /></div>
        </Ph>
        <div style={{ padding: "30px 30px 34px", display: "flex", flexDirection: "column", flex: 1 }}>
          <span className="eyebrow" style={{ color: accentD }}>{tag}</span>
          <h3 style={{ fontSize: 40, marginTop: 12 }}>{name}</h3>
          <p style={{ color: "var(--ink-2)", fontSize: 16, lineHeight: 1.55, marginTop: 14 }}>{desc}</p>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, margin: "22px 0 26px" }}>
            {points.map((p) => (
              <div key={p} style={{ display: "flex", alignItems: "center", gap: 11, fontSize: 15, color: "var(--ink-2)" }}>
                <span style={{ color: accentD }}><Icon name="check" size={17} /></span>{p}
              </div>
            ))}
          </div>
          <button className="btn" style={{ marginTop: "auto", background: hover ? accent : "var(--ink)", color: (hover && variant === "spares") ? "var(--ink)" : "var(--paper)", alignSelf: "flex-start" }}>
            {cta} <Icon name="arrow" size={17} className="arrow" />
          </button>
        </div>
      </div>
    </Reveal>
  );
}
function ServicesGrid() {
  const { go } = useContext(NavCtx);
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 26 }} className="g2">
      <ServiceCard variant="rent" tag={L("01 — Mobility & Fleet", "01 — Mobilit\u00e9 & Flotte")} name="Rent-a-Car"
        photo="assets/fleet/ford-ranger.jpg"
        desc={L("Cars, vans, pickups and trucks for a day, a month or a year. Self-drive or with a driver, for individuals, businesses and institutions.", "Voitures, vans, pickups et camions \u00e0 la journ\u00e9e, au mois ou \u00e0 l\u2019ann\u00e9e. En libre conduite ou avec chauffeur, pour particuliers, entreprises et institutions.")}
        points={[L("Sedans, SUVs, 4x4, vans & trucks", "Berlines, SUV, 4x4, vans & camions"), L("Daily, monthly & long-term plans", "Forfaits journaliers, mensuels & longue dur\u00e9e"), L("Free delivery & pick-up within 25km", "Livraison & reprise gratuites dans un rayon de 25 km")]}
        cta={L("Enter Rent-a-Car", "D\u00e9couvrir Rent-a-Car")} icon="key" onClick={() => go("rent")} />
      <ServiceCard variant="spares" tag={L("02 — Parts & Engines", "02 — Pi\u00e8ces & Moteurs")} name="AfricaSpares"
        photo="assets/parts/africaspares-thumb.png"
        desc={L("Vehicle parts, engine components and consumables for nearly every make. Search the catalogue, order online, and have it delivered.", "Pi\u00e8ces d\u00e9tach\u00e9es, composants moteur et consommables pour presque toutes les marques. Cherchez au catalogue, commandez en ligne, et faites-vous livrer.")}
        points={[L("Engine, transmission & brake parts", "Pi\u00e8ces moteur, transmission & freinage"), L("OEM & quality aftermarket", "Origine & adaptable de qualit\u00e9"), L("Nationwide delivery", "Livraison sur tout le pays")]}
        cta={L("Enter AfricaSpares", "D\u00e9couvrir AfricaSpares")} icon="wrench" onClick={() => go("spares")} />
    </div>
  );
}

/* ---------- Advantages grid (from company profile) ---------- */
const ADV = [
  ["truck", { en: "Free delivery", fr: "Livraison gratuite" }, { en: "& pick-up within 25km", fr: "& reprise dans un rayon de 25 km" }],
  ["pin", { en: "Airport service", fr: "Service a\u00e9roport" }, { en: "to Diori Hamani Int'l", fr: "vers Diori Hamani Int." }],
  ["clock", { en: "24h replacement", fr: "Remplacement 24h" }, { en: "if a vehicle fails, anywhere", fr: "en cas de panne, partout" }],
  ["gauge", { en: "Unlimited mileage", fr: "Kilom\u00e9trage illimit\u00e9" }, { en: "on every rental", fr: "sur chaque location" }],
  ["globe", { en: "Road maps & guides", fr: "Cartes & guides" }, { en: "tourist guides on Niger", fr: "guides touristiques du Niger" }],
  ["users", { en: "Extra driver", fr: "Chauffeur suppl." }, { en: "available on request", fr: "disponible sur demande" }],
];
function AdvantagesGrid({ cols = 3 }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${cols},1fr)`, gap: 18 }} className="g3">
      {ADV.map(([ic, n, l], i) => (
        <Reveal key={n.en} delay={(i % cols) * 60}>
          <div style={{ display: "flex", gap: 14, alignItems: "flex-start", background: "var(--paper-0)", border: "1px solid var(--line)", borderRadius: 4, padding: "20px 20px" }}>
            <span style={{ color: "var(--group-d)", marginTop: 2 }}><Icon name={ic} size={22} /></span>
            <div>
              <div style={{ fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 17, lineHeight: 1.05 }}>{L(n.en, n.fr)}</div>
              <div style={{ color: "var(--muted)", fontSize: 14.5, marginTop: 4 }}>{L(l.en, l.fr)}</div>
            </div>
          </div>
        </Reveal>
      ))}
    </div>
  );
}

/* ============================ HOME ============================ */
function Home() {
  const { go } = useContext(NavCtx);
  return (
    <div className="view">
      <Nav variant="group" />

      {/* HERO with Hilux/Sahel photo slot */}
      <section style={{ position: "relative", background: "var(--paper)", color: "var(--ink)", paddingTop: 76, overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0 }}>
                    <img src={(window.GG_DATA && window.GG_DATA.siteImages && window.GG_DATA.siteImages.hub_hero) || "assets/fleet/land-cruiser.jpg"} alt="Guero’s Group fleet — Toyota Land Cruiser" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(246,242,234,.30) 0%, rgba(246,242,234,.70) 55%, var(--paper) 100%)", pointerEvents: "none" }} />
        </div>
        <div className="wrap" style={{ position: "relative", paddingTop: 72, paddingBottom: 70, minHeight: "calc(100vh - 76px)", display: "flex", flexDirection: "column", justifyContent: "center", pointerEvents: "none" }}>
          <Reveal><SectionTag color="var(--group-d)">{L("The Guero\u2019s Group · Niamey, Niger", "Le Guero\u2019s Group · Niamey, Niger")}</SectionTag></Reveal>
          <Reveal delay={70}>
            <h1 style={{ fontSize: "clamp(54px, 8.8vw, 124px)", marginTop: 22, maxWidth: 1100 }}>
              {L(<>Keeping Niger<br />moving</>, <>Le Niger<br />en mouvement</>)}<span style={{ color: "var(--group-d)" }}>.</span>
            </h1>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontSize: "clamp(17px,2vw,21px)", lineHeight: 1.55, maxWidth: 580, marginTop: 28, color: "var(--ink-2)" }}>
              {L(<>One group, two services. A modern rental fleet through <strong style={{ color: "var(--ink)" }}>Rent-a-Car</strong>, and genuine vehicle parts through <strong style={{ color: "var(--ink)" }}>AfricaSpares</strong>. Trusted since {CONTACT.since} by individuals, businesses and international organisations.</>,
                 <>Un groupe, deux services. Une flotte de location moderne avec <strong style={{ color: "var(--ink)" }}>Rent-a-Car</strong>, et des pièces d’origine avec <strong style={{ color: "var(--ink)" }}>AfricaSpares</strong>. La confiance des particuliers, entreprises et organisations internationales depuis {CONTACT.since}.</>)}
            </p>
          </Reveal>
          <Reveal delay={210}>
            <div style={{ display: "flex", gap: 14, marginTop: 38, flexWrap: "wrap", pointerEvents: "auto" }}>
              <button className="btn btn-accent" style={{ background: "var(--rent)", color: "var(--paper)" }} onClick={() => go("rent")}>{L("Rent a Vehicle", "Louer un v\u00e9hicule")} <Icon name="arrow" size={17} className="arrow" /></button>
              <button className="btn btn-ghost" onClick={() => go("spares")}>{L("Shop Parts", "Trouver une pi\u00e8ce")} <Icon name="arrow" size={17} className="arrow" /></button>
            </div>
          </Reveal>
          <div style={{ display: "flex", gap: 48, marginTop: "auto", paddingTop: 64, flexWrap: "wrap" }}>
            {[["2007", L("established", "depuis")], ["35%", L("Niger market share", "du march\u00e9 nig\u00e9rien")], ["50+", L("corporate clients", "clients institutionnels")], ["24h", L("breakdown cover", "d\u00e9pannage")]].map(([n, l], i) => (
              <Reveal key={l} delay={260 + i * 60}>
                <div>
                  <div style={{ fontFamily: "var(--fdisp)", fontWeight: 800, fontSize: 40, color: "var(--group-d)", lineHeight: 1 }}>{n}</div>
                  <div className="eyebrow" style={{ color: "var(--muted)", marginTop: 8 }}>{l}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <Marquee bg="var(--group)" color="var(--ink)" accent="var(--ink)" items={L(
        ["Recent Vehicles", "Unlimited Mileage", "Genuine Parts", "Free Delivery 25km", "Trusted Since 2007", "Long-term Rentals"],
        ["V\u00e9hicules r\u00e9cents", "Kilom\u00e9trage illimit\u00e9", "Pi\u00e8ces d\u2019origine", "Livraison 25km offerte", "Confiance depuis 2007", "Location longue dur\u00e9e"]) } />

      {/* SERVICES teaser */}
      <section style={{ padding: "110px 0 120px", background: "var(--paper-2)" }}>
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 20, marginBottom: 50 }}>
            <div>
              <Reveal><SectionTag n="01">{L("Our Services", "Nos Services")}</SectionTag></Reveal>
              <Reveal delay={60}><h2 style={{ fontSize: "clamp(38px,4.6vw,60px)", marginTop: 20 }}>{L("Choose your lane.", "Choisissez votre voie.")}</h2></Reveal>
            </div>
            <Reveal delay={100}><p style={{ maxWidth: 360, color: "var(--ink-2)", fontSize: 16.5, lineHeight: 1.6 }}>{L("Two specialist storefronts, each with its own team and identity — both backed by the group.", "Deux enseignes sp\u00e9cialis\u00e9es, chacune avec sa propre \u00e9quipe et identit\u00e9 — port\u00e9es par le groupe.")}</p></Reveal>
          </div>
          <ServicesGrid />
        </div>
      </section>

      {/* TRUSTED BY teaser */}
      <section style={{ padding: "100px 0", background: "var(--paper)" }}>
        <div className="wrap">
          <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto 48px" }}>
            <Reveal><div style={{ display: "flex", justifyContent: "center" }}><SectionTag n="02">{L("Trusted by", "Ils nous font confiance")}</SectionTag></div></Reveal>
            <Reveal delay={60}><h2 style={{ fontSize: "clamp(32px,4vw,52px)", marginTop: 18 }}>{L("Official supplier to leading organisations.", "Fournisseur officiel des plus grandes organisations.")}</h2></Reveal>
          </div>
          <Reveal delay={120}><ClientWall /></Reveal>
          <div style={{ textAlign: "center", marginTop: 36 }}>
            <button className="btn btn-ghost" onClick={() => go("group")}>{L("More about the group", "En savoir plus sur le groupe")} <Icon name="arrow" size={17} className="arrow" /></button>
          </div>
        </div>
      </section>

      <CTABand />
      <Footer variant="group" />
    </div>
  );
}

/* ============================ GROUP ============================ */
function GroupPage() {
  const { go } = useContext(NavCtx);
  return (
    <div className="view">
      <Nav variant="group" />
      <PageHeader eyebrow={L("The Group", "Le Groupe")}
        title={L("Two businesses. One standard of trust.", "Deux m\u00e9tiers. Une m\u00eame exigence.")}
        sub={L("Founded in 2007 as AST Voyage and now operating as Rent A Car Niger Sarl, Guero\u2019s Group has become one of Niger\u2019s leading mobility companies.", "Cr\u00e9\u00e9 en 2007 sous le nom d\u2019AST Voyage et op\u00e9rant aujourd\u2019hui sous Rent A Car Niger Sarl, le Guero\u2019s Group est devenu l\u2019un des leaders de la mobilit\u00e9 au Niger.")} />

      <section style={{ padding: "40px 0 110px", background: "var(--paper)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="g2">
            <div>
              <Reveal delay={60}>
                <p style={{ fontSize: 18, lineHeight: 1.65, color: "var(--ink-2)", maxWidth: 480 }}>
                  {L("We work hand in hand with international organisations and multinationals — from Ericsson and Airtel to the European Union, UNDP and the World Bank — managing long-term rentals and parts supply. Over 35% of the local rental market trusts us with their mobility.",
                     "Nous travaillons main dans la main avec des organismes internationaux et des multinationales — d\u2019Ericsson et Airtel \u00e0 l\u2019Union Europ\u00e9enne, au PNUD et \u00e0 la Banque Mondiale — en g\u00e9rant locations longue dur\u00e9e et fourniture de pi\u00e8ces. Plus de 35% du march\u00e9 local de la location nous fait confiance.")}
                </p>
              </Reveal>
              <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 2 }}>
                {[
                  ["box", { en: "Recent, well-kept vehicles", fr: "V\u00e9hicules r\u00e9cents et entretenus" }, { en: "A varied fleet renewed regularly — from economy cars to 4x4s and trucks.", fr: "Un parc vari\u00e9 et renouvel\u00e9 r\u00e9guli\u00e8rement — de la citadine au 4x4 et au camion." }],
                  ["shield", { en: "Backed by service", fr: "Un service qui suit" }, { en: "Unlimited mileage, full insurance, and replacement within 24h anywhere.", fr: "Kilom\u00e9trage illimit\u00e9, assurance compl\u00e8te et remplacement sous 24h partout." }],
                  ["users", { en: "Trusted at the top", fr: "La confiance des grands comptes" }, { en: "Official supplier to embassies, telecoms and international organisations.", fr: "Fournisseur officiel d\u2019ambassades, d\u2019op\u00e9rateurs t\u00e9l\u00e9coms et d\u2019organisations internationales." }],
                ].map(([ic, h, p], i) => (
                  <Reveal key={h.en} delay={120 + i * 70}>
                    <div style={{ display: "flex", gap: 18, padding: "18px 0", borderTop: "1px solid var(--line)" }}>
                      <span style={{ width: 42, height: 42, borderRadius: 3, background: "var(--paper-2)", display: "grid", placeItems: "center", flexShrink: 0, color: "var(--group-d)" }}><Icon name={ic} size={21} /></span>
                      <div>
                        <div style={{ fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 17 }}>{L(h.en, h.fr)}</div>
                        <div style={{ color: "var(--muted)", fontSize: 15, marginTop: 3, lineHeight: 1.5 }}>{L(p.en, p.fr)}</div>
                      </div>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
            <Reveal delay={120}>
              <div style={{ position: "relative" }}>
                <Ph scene={
                  <div style={{ width:"100%", height:"100%", overflow:"hidden" }}>
                    <img src={(window.GG_DATA && window.GG_DATA.siteImages && window.GG_DATA.siteImages.hub_street) || "assets/niamey-street.jpg"} alt="Niamey, Niger — Guero's Group" style={{ width:"100%", height:"100%", objectFit:"cover" }} />
                  </div>
                } style={{ aspectRatio: "4/5", borderRadius: 4 }} />
                <div style={{ position: "absolute", bottom: -24, left: -24, background: "var(--group)", color: "var(--ink)", padding: "22px 26px", borderRadius: 3, maxWidth: 230, boxShadow: "0 24px 50px -24px rgba(0,0,0,.35)" }}>
                  <div style={{ fontFamily: "var(--fdisp)", fontWeight: 800, fontSize: 38, lineHeight: 1 }}>35%</div>
                  <div className="eyebrow" style={{ marginTop: 6 }}>{L("of Niger's rental market", "du march\u00e9 nig\u00e9rien")}</div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* TRUSTED BY full */}
      <section style={{ padding: "100px 0", background: "var(--paper-2)" }}>
        <div className="wrap">
          <div style={{ maxWidth: 640, marginBottom: 44 }}>
            <Reveal><SectionTag>{L("Trusted by", "Ils nous font confiance")}</SectionTag></Reveal>
            <Reveal delay={60}><h2 style={{ fontSize: "clamp(32px,4vw,52px)", marginTop: 18 }}>{L("Official supplier to leading organisations.", "Fournisseur officiel des plus grandes organisations.")}</h2></Reveal>
            <Reveal delay={110}><p style={{ marginTop: 18, color: "var(--ink-2)", fontSize: 16.5, lineHeight: 1.6 }}>{L("From global telecoms to embassies and international institutions, Niger's biggest names rely on us to keep their teams moving.", "Des op\u00e9rateurs t\u00e9l\u00e9coms mondiaux aux ambassades et institutions internationales, les plus grands noms du Niger comptent sur nous.")}</p></Reveal>
          </div>
          <Reveal delay={140}><ClientWall /></Reveal>
        </div>
      </section>

      <CTABand />
      <Footer variant="group" />
    </div>
  );
}

/* ============================ SERVICES ============================ */
function ServicesPage() {
  return (
    <div className="view">
      <Nav variant="group" />
      <PageHeader eyebrow="Services"
        title={L("Two specialist storefronts.", "Deux enseignes sp\u00e9cialis\u00e9es.")}
        sub={L("Whether you need wheels on the road or the right part on the shelf, the group has a dedicated team for it.", "Que vous ayez besoin d\u2019un v\u00e9hicule sur la route ou de la bonne pi\u00e8ce en rayon, le groupe a une \u00e9quipe d\u00e9di\u00e9e.")} />
      <section style={{ padding: "30px 0 90px", background: "var(--paper)" }}>
        <div className="wrap"><ServicesGrid /></div>
      </section>

      {/* Usage / products (from profile) */}
      <section style={{ padding: "90px 0", background: "var(--paper-2)" }}>
        <div className="wrap">
          <Reveal><SectionTag n="01">{L("What we cover", "Ce que nous couvrons")}</SectionTag></Reveal>
          <Reveal delay={60}><h2 style={{ fontSize: "clamp(32px,4.2vw,52px)", marginTop: 18, marginBottom: 44, maxWidth: 760 }}>{L("Every kind of journey and job.", "Tous les trajets, tous les besoins.")}</h2></Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18 }} className="g3">
            {[
              ["car", { en: "Business & airport travel", fr: "D\u00e9placements pro & a\u00e9roport" }],
              ["truck", { en: "Utility vans & large-volume trucks", fr: "Utilitaires & camions grand volume" }],
              ["pin", { en: "4x4 & pickup tourist expeditions", fr: "Expéditions touristiques 4x4 & pickup" }],
              ["users", { en: "Public transport & group travel", fr: "Transport en commun & groupes" }],
              ["star", { en: "Weddings, corteges & VIP events", fr: "Mariages, cort\u00e8ges & \u00e9v\u00e9nements VIP" }],
              ["wrench", { en: "Roadside breakdown assistance", fr: "Assistance & d\u00e9pannage routier" }],
            ].map(([ic, t], i) => (
              <Reveal key={t.en} delay={(i % 3) * 60}>
                <div style={{ display: "flex", gap: 16, alignItems: "center", background: "var(--paper-0)", border: "1px solid var(--line)", borderRadius: 4, padding: "22px 22px" }}>
                  <span style={{ width: 46, height: 46, borderRadius: 3, background: "var(--paper-2)", display: "grid", placeItems: "center", flexShrink: 0, color: "var(--group-d)" }}><Icon name={ic} size={23} /></span>
                  <span style={{ fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 17, lineHeight: 1.2 }}>{L(t.en, t.fr)}</span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <CTABand />
      <Footer variant="group" />
    </div>
  );
}

/* ============================ COVERAGE ============================ */
function CoveragePage() {
  return (
    <div className="view">
      <Nav variant="group" />
      <PageHeader eyebrow={L("Coverage", "Couverture")}
        title={L("Based in Niamey, reaching further.", "Bas\u00e9s \u00e0 Niamey, un rayon qui s\u2019\u00e9tend.")}
        sub={L("Free local delivery, airport service and 24-hour replacement — the details are handled so you can focus on the road.", "Livraison locale gratuite, service a\u00e9roport et remplacement sous 24h — tout est g\u00e9r\u00e9 pour que vous restiez concentr\u00e9 sur la route.")} />

      <section style={{ padding: "20px 0 70px", background: "var(--paper)" }}>
        <div className="wrap">
          <Reveal><MapEmbed height={460} /></Reveal>
        </div>
      </section>

      <section style={{ padding: "20px 0 110px", background: "var(--paper)" }}>
        <div className="wrap">
          <Reveal><SectionTag n="01">{L("The advantages", "Les avantages")}</SectionTag></Reveal>
          <Reveal delay={60}><h2 style={{ fontSize: "clamp(32px,4.2vw,52px)", marginTop: 18, marginBottom: 40 }}>{L("Built around your convenience.", "Pens\u00e9 pour vous faciliter la vie.")}</h2></Reveal>
          <AdvantagesGrid cols={3} />
        </div>
      </section>

      <CTABand />
      <Footer variant="group" />
    </div>
  );
}

/* ============================ CONTACT ============================ */
function ContactForm({ accent = "var(--group)", accentText = "var(--ink)", division = null }) {
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState("");
  const [form, setForm] = useState({ name: "", phone: "", email: "", message: "", _hp: "" });
  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (form._hp) { setSent(true); return; } // honeypot tripped — silently "succeed" for bots
    if (!window.sb) { setError(L("Connection unavailable — please call us instead.", "Connexion indisponible \u2014 merci de nous appeler directement.")); return; }
    setSending(true); setError("");
    const { data: msg, error: err } = await window.sb.from("contact_messages").insert({
      name: form.name, phone: form.phone, email: form.email || null,
      message: form.message, division: division,
    }).select().single();
    setSending(false);
    if (err) { setError(L("Something went wrong — please try again or call us.", "Une erreur est survenue \u2014 merci de r\u00e9essayer ou de nous appeler.")); return; }
    if (window.ggNotify) window.ggNotify("contact", msg);
    setSent(true);
  };

  if (sent) return (
    <div style={{ textAlign: "center", padding: "40px 10px" }}>
      <div style={{ width: 64, height: 64, borderRadius: "50%", background: accent, display: "grid", placeItems: "center", margin: "0 auto", color: accentText }}><Icon name="check" size={34} /></div>
      <h3 style={{ fontSize: 30, marginTop: 22 }}>{L("Message sent.", "Message envoy\u00e9.")}</h3>
      <p style={{ color: "var(--muted)", marginTop: 12, fontSize: 16 }}>{L("Thank you — our team will get back to you shortly.", "Merci — notre \u00e9quipe vous recontacte tr\u00e8s vite.")}</p>
      <button className="btn btn-ghost" style={{ marginTop: 24 }} onClick={() => { setSent(false); setForm({ name: "", phone: "", email: "", message: "", _hp: "" }); }}>{L("Send another", "Envoyer un autre")}</button>
    </div>
  );
  return (
    <form onSubmit={handleSubmit}>
      {/* honeypot — invisible to humans, bots often fill every field */}
      <input type="text" name="website" value={form._hp} onChange={(e) => set("_hp", e.target.value)} autoComplete="off" tabIndex={-1}
        style={{ position: "absolute", width: 1, height: 1, opacity: 0, pointerEvents: "none" }} aria-hidden="true" />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <FormField label={L("Your name", "Votre nom")}><input required value={form.name} onChange={(e) => set("name", e.target.value)} style={fInp} placeholder="Ibrahim M." /></FormField>
        <FormField label={L("Phone / WhatsApp", "T\u00e9l\u00e9phone / WhatsApp")}><input required value={form.phone} onChange={(e) => set("phone", e.target.value)} style={fInp} placeholder="+227 …" /></FormField>
      </div>
      <div style={{ marginTop: 14 }}>
        <FormField label="Email"><input type="email" value={form.email} onChange={(e) => set("email", e.target.value)} style={fInp} placeholder="vous@exemple.com" /></FormField>
      </div>
      <div style={{ marginTop: 14 }}>
        <FormField label={L("How can we help?", "Comment pouvons-nous aider ?")}><textarea required rows={4} value={form.message} onChange={(e) => set("message", e.target.value)} style={{ ...fInp, resize: "vertical" }} placeholder={L("Tell us what you need…", "Dites-nous ce dont vous avez besoin…")} /></FormField>
      </div>
      {error && <p style={{ color: "#B42318", fontSize: 13.5, marginTop: 12 }}>{error}</p>}
      <button type="submit" disabled={sending} className="btn" style={{ width: "100%", justifyContent: "center", marginTop: 18, background: accent, color: accentText, opacity: sending ? 0.6 : 1, cursor: sending ? "wait" : "pointer" }}>
        {sending ? L("Sending…", "Envoi…") : <>{L("Send message", "Envoyer le message")} <Icon name="arrow" size={17} className="arrow" /></>}
      </button>
      <p style={{ marginTop: 14, fontSize: 13, color: "var(--muted)", textAlign: "center" }}>
        {L("Prefer WhatsApp? ", "Vous pr\u00e9f\u00e9rez WhatsApp ? ")}
        <a href={"https://wa.me/" + CONTACT.mobile.replace(/[^\d]/g, "") + "?text=" + encodeURIComponent(L("Hello, I have a question for Guero's Group.", "Bonjour, j'ai une question pour Guero's Group."))} target="_blank" rel="noopener" style={{ color: "var(--group-d)", fontFamily: "var(--fsemi)", fontWeight: 700 }}>
          {L("Chat with us directly →", "Discutez avec nous →")}
        </a>
      </p>
    </form>
  );
}
function ContactPage() {
  return (
    <div className="view">
      <Nav variant="group" />
      <PageHeader eyebrow="Contact"
        title={L("Let's talk.", "Parlons-en.")}
        sub={L("Reach the group directly — one message reaches both the rental and parts desks.", "Contactez le groupe directement — un seul message atteint les bureaux location et pi\u00e8ces.")} />

      <section style={{ padding: "20px 0 90px", background: "var(--paper)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 56, alignItems: "start" }} className="g2">
            <div>
              <Reveal><div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {[["pin", L("Address", "Adresse"), <>{CONTACT.address}<br />{CONTACT.po} · {CONTACT.city}</>, null],
                  ["phone", L("Office", "Bureau"), CONTACT.tel, "tel:" + CONTACT.tel.replace(/\s/g, "")],
                  ["phone", L("Mobile / WhatsApp", "Mobile / WhatsApp"), <>{CONTACT.mobile}<br />{CONTACT.mobile2}</>, "tel:" + CONTACT.mobile.replace(/\s/g, "")],
                  ["mail", "Email", CONTACT.email, "mailto:" + CONTACT.email]].map(([ic, h, v, href]) => {
                  const Inner = (
                    <>
                      <span style={{ width: 44, height: 44, borderRadius: 3, background: "var(--paper-2)", display: "grid", placeItems: "center", flexShrink: 0, color: "var(--group-d)" }}><Icon name={ic} size={21} /></span>
                      <div><div className="eyebrow" style={{ color: "var(--muted)" }}>{h}</div><div style={{ fontFamily: "var(--fsemi)", fontWeight: 700, fontSize: 17, marginTop: 3, lineHeight: 1.4 }}>{v}</div></div>
                    </>
                  );
                  return href
                    ? <a key={h} href={href} style={{ display: "flex", gap: 16, alignItems: "center", background: "var(--paper-0)", border: "1px solid var(--line)", borderRadius: 4, padding: "16px 18px" }}>{Inner}</a>
                    : <div key={h} style={{ display: "flex", gap: 16, alignItems: "center", background: "var(--paper-0)", border: "1px solid var(--line)", borderRadius: 4, padding: "16px 18px" }}>{Inner}</div>;
                })}
              </div></Reveal>
              <Reveal delay={120}><div style={{ marginTop: 28 }}><MapEmbed height={300} /></div></Reveal>
            </div>
            <Reveal delay={80}>
              <div style={{ background: "var(--paper-0)", borderRadius: 6, padding: "clamp(26px,3.5vw,40px)", border: "1px solid var(--line)" }}>
                <h3 style={{ fontSize: 30, marginBottom: 22 }}>{L("Send us a message", "\u00c9crivez-nous")}</h3>
                <ContactForm />
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <Footer variant="group" />
    </div>
  );
}

Object.assign(window, { Home, GroupPage, ServicesPage, CoveragePage, ContactPage, CTABand, ServicesGrid, AdvantagesGrid });
