// CESPRO landing sections — Liquid Glass, dark/light, EN/AR.
const { useState, useEffect, useRef, useMemo } = React;

/* ─────────── NAV — floating glass pill ─────────── */
const Nav = () => {
  const { t, dir } = useI18n();
  const [open, setOpen] = useState(false);
  const links = [
    [t("nav.services"), "#services"],
    [t("nav.packages"), "#packages"],
    [t("nav.platform"), "#platform"],
    [t("nav.about"),    "#about"],
    [t("nav.contact"),  "#contact"],
  ];

  return (
    <header className="cespro-nav-host" style={{ position: "sticky", top: 16, zIndex: 50, padding: "0 16px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", display: "flex", justifyContent: "center" }}>
        <div className="glass sheen" style={{
          width: "100%",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "10px 14px 10px 18px", borderRadius: 999,
          gap: 16,
        }}>
          <Logo height={28} />

          <nav className="hide-md" style={{ display: "flex", gap: 4 }}>
            {links.map(([label, href]) => (
              <a key={label} href={href} style={{
                padding: "8px 14px", borderRadius: 999,
                fontSize: 13.5, fontWeight: 500, color: "var(--ink-2)",
                transition: "background .15s ease, color .15s ease",
              }}
              onMouseOver={(e) => { e.currentTarget.style.color = "var(--ink)"; e.currentTarget.style.background = "var(--btn-glass-bg)"; }}
              onMouseOut={(e) => { e.currentTarget.style.color = "var(--ink-2)"; e.currentTarget.style.background = "transparent"; }}>
                {label}
              </a>
            ))}
          </nav>

          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <span className="nav-lang"><LangToggle /></span>
            <span className="nav-theme"><ThemeToggle /></span>
            <a className="btn btn-primary btn-sm hide-md" href="#booking">
              {t("nav.book")} <Icon name="arrow" size={14} stroke={2.2} flip={dir === "rtl"} />
            </a>
            <button className="btn btn-glass btn-sm show-md" onClick={() => setOpen(true)} style={{ padding: 9 }}>
              <Icon name="menu" size={16} />
            </button>
          </div>
        </div>
      </div>

      {open && (
        <div style={{
          position: "fixed", inset: 0, background: "var(--bg)", zIndex: 200,
          padding: 24, overflow: "auto",
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <Logo height={28} />
            <button className="btn btn-glass btn-sm" onClick={() => setOpen(false)} style={{ padding: 9 }}>
              <Icon name="x" size={16} />
            </button>
          </div>
          <nav style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 48 }}>
            {links.map(([label, href]) => (
              <a key={label} href={href} onClick={() => setOpen(false)}
                 className="display" style={{ fontSize: 36, color: "var(--ink)" }}>{label}</a>
            ))}
            <div style={{ display: "flex", gap: 10, marginTop: 24 }}>
              <LangToggle /><ThemeToggle />
            </div>
            <a className="btn btn-primary btn-lg" href="#booking" onClick={() => setOpen(false)} style={{ marginTop: 12, justifyContent: "center" }}>
              {t("nav.book")} <Icon name="arrow" size={16} stroke={2.2} flip={dir === "rtl"} />
            </a>
          </nav>
        </div>
      )}
    </header>
  );
};

/* ─────────── HERO ─────────── */
const Hero = () => {
  const { t, dir } = useI18n();

  return (
    <section id="top" style={{ paddingTop: 64, paddingBottom: 0, position: "relative" }}>
      <div className="container" style={{ textAlign: "center" }}>

        {/* Eyebrow */}
        <div style={{ display: "inline-flex", justifyContent: "center", marginBottom: 24 }}>
          <span className="eyebrow" style={{
            padding: "8px 14px", borderRadius: 999,
            background: "var(--btn-glass-bg)", border: "1px solid var(--btn-glass-border)",
            backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)",
          }}>{t("hero.eyebrow")}</span>
        </div>

        {/* Headline */}
        <h1 className="display hero-headline" style={{
          fontSize: "clamp(48px, 8.5vw, 132px)",
          margin: 0, color: "var(--ink)",
          maxWidth: 1100, marginInline: "auto",
        }}>
          {t("hero.h1.a")}<br />
          {/* For EN we want italic "running quietly"; for AR italics don't really exist, so we color-shift the accent */}
          <HeroHeadlineB />
        </h1>

        {/* Lede + CTAs */}
        <p className="hero-lede" style={{
          fontSize: "clamp(15px, 1.5vw, 19px)", lineHeight: 1.55, color: "var(--ink-2)",
          margin: "32px auto 0", maxWidth: 640, textWrap: "pretty",
        }}>{t("hero.lede")}</p>

        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginTop: 32 }}>
          <a href="#packages" className="btn btn-primary btn-lg">
            {t("hero.cta.primary")} <Icon name="arrow" size={16} stroke={2.2} flip={dir === "rtl"} />
          </a>
          <a href="#contact" className="btn btn-glass btn-lg">{t("hero.cta.secondary")}</a>
        </div>

        {/* Booking glass card */}
        <div id="booking" style={{ marginTop: 64 }}>
          <BookingWidget />
        </div>

        {/* Trust strip */}
        <div style={{ marginTop: 96, marginBottom: 48 }}>
          <div style={{ marginBottom: 20 }}>
            <span className="eyebrow" style={{ justifyContent: "center" }}>{t("hero.trusted")}</span>
          </div>
          <Marquee speed={60}>
            {["EMAAR", "DAMAC", "MERAAS", "ALDAR", "NAKHEEL", "SOBHA", "AZIZI", "DUBAI HOLDING"].map((c) => (
              <span key={c} className="display" style={{ fontSize: 24, color: "var(--ink-3)", fontWeight: 600, letterSpacing: ".02em" }}>
                {c}
              </span>
            ))}
          </Marquee>
        </div>
      </div>
    </section>
  );
};

const HeroHeadlineB = () => {
  const { t, lang } = useI18n();
  const full = t("hero.h1.b");
  const italic = t("hero.h1.italic");
  if (lang === "ar") {
    // For Arabic, accent the italic word with red
    const parts = full.split(italic);
    return <>{parts[0]}<span style={{ color: "var(--red)" }}>{italic}</span>{parts[1] ?? ""}</>;
  }
  // English: italic serif treatment
  const parts = full.split(italic);
  return <>{parts[0]}<span className="serif-italic" style={{ color: "var(--ink-2)" }}>{italic}</span>{parts[1] ?? ""}</>;
};

/* ─────────── BOOKING WIDGET ─────────── */
const BookingWidget = () => {
  const { t, dir } = useI18n();
  const [tab, setTab] = useState("amc");
  const [service, setService] = useState("");
  const [area, setArea] = useState("");
  const [when, setWhen] = useState("");

  const services = [
    t("s.ac.name"), t("s.plumbing.name"), t("s.elec.name"),
    t("s.pest.name"), t("s.clean.name"), t("s.handy.name"),
  ];
  const areas = [
    "Palm Jumeirah", "Dubai Marina", "Downtown Dubai", "Business Bay",
    "Al Barsha", "JVC", "Arabian Ranches", "Yas Island",
  ];
  const whens = [
    {en:"Today · Afternoon", ar:"اليوم · بعد الظهر"},
    {en:"Tomorrow · Morning", ar:"غداً · صباحاً"},
    {en:"Tomorrow · Afternoon", ar:"غداً · بعد الظهر"},
    {en:"This week — pick a slot", ar:"هذا الأسبوع — اختر موعداً"},
  ];

  const tabs = [
    ["amc", t("book.tab.amc"), "calendar"],
    ["svc", t("book.tab.svc"), "handyman"],
    ["sos", t("book.tab.sos"), "bolt"],
  ];

  const ctaLabel = tab === "amc" ? t("book.cta.amc") : tab === "svc" ? t("book.cta.svc") : t("book.cta.sos");
  const footerLeft = t("book.footer.normal");
  const footerRight = tab === "sos" ? t("book.footer.sos") : t("book.footer.avail");

  return (
    <div className="glass glass-strong sheen" style={{ overflow: "hidden", textAlign: "start" }}>
      {/* Tab strip */}
      <div className="booking-tabs" style={{
        display: "flex", padding: 6, gap: 4,
        borderBottom: "1px solid var(--hairline)",
      }}>
        {tabs.map(([id, label, icon]) => (
          <button key={id} onClick={() => setTab(id)} style={{
            flex: 1, padding: "12px 14px", borderRadius: 18,
            display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
            background: tab === id ? "var(--btn-glass-bg-hover)" : "transparent",
            border: "1px solid " + (tab === id ? "var(--btn-glass-border)" : "transparent"),
            color: tab === id ? "var(--ink)" : "var(--ink-3)",
            fontSize: 13.5, fontWeight: 500,
            transition: "background .2s ease, color .2s ease",
            boxShadow: tab === id ? "inset 0 1px 0 var(--glass-highlight)" : "none",
          }}>
            <Icon name={icon} size={14} stroke={1.8} />
            <span>{label}</span>
          </button>
        ))}
      </div>

      {/* Form fields */}
      <div style={{
        display: "grid",
        gridTemplateColumns: tab === "sos" ? "1.4fr 1fr auto" : "1.3fr 1fr 1fr auto",
        gap: 0,
      }} className="booking-form">
        <BookingField label={t("book.service")} icon="handyman">
          <select value={service} onChange={(e) => setService(e.target.value)} style={fieldInput}>
            <option value="">{tab === "sos" ? (dir==="rtl"?"اختر نوع المشكلة":"What's wrong?") : (dir==="rtl"?"اختر خدمة":"Choose a service")}</option>
            {services.map((s) => <option key={s}>{s}</option>)}
          </select>
        </BookingField>
        <BookingField label={t("book.area")} icon="pin">
          <select value={area} onChange={(e) => setArea(e.target.value)} style={fieldInput}>
            <option value="">{dir==="rtl"?"المنطقة":"Pick area"}</option>
            {areas.map((a) => <option key={a}>{a}</option>)}
          </select>
        </BookingField>
        {tab !== "sos" && (
          <BookingField label={t("book.when")} icon="clock">
            <select value={when} onChange={(e) => setWhen(e.target.value)} style={fieldInput}>
              <option value="">{dir==="rtl"?"اختر موعداً":"Pick slot"}</option>
              {whens.map((w, i) => <option key={i}>{w[dir==="rtl"?"ar":"en"]}</option>)}
            </select>
          </BookingField>
        )}
        <div style={{ padding: 10, display: "flex", alignItems: "center" }}>
          <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>
            {ctaLabel}
            <Icon name="arrow" size={16} stroke={2.2} flip={dir === "rtl"} />
          </button>
        </div>
      </div>

      <div style={{
        padding: "12px 22px", fontSize: 12, color: "var(--ink-3)",
        borderTop: "1px solid var(--hairline)",
        display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8,
        fontFamily: "var(--mono)",
      }}>
        <span>{footerLeft}</span>
        <span>{footerRight}</span>
      </div>
    </div>
  );
};

const fieldInput = {
  background: "transparent", border: 0, color: "var(--ink)",
  fontFamily: "var(--sans)", fontSize: 14.5, fontWeight: 500,
  padding: "10px 0", outline: "none", width: "100%",
  appearance: "none", WebkitAppearance: "none",
};

const BookingField = ({ label, icon, children }) => (
  <div style={{
    padding: "14px 22px", borderInlineEnd: "1px solid var(--hairline)",
  }}>
    <div className="mono" style={{
      fontSize: 10.5, textTransform: "uppercase", letterSpacing: ".08em",
      color: "var(--ink-3)", marginBottom: 4,
      display: "flex", alignItems: "center", gap: 6,
    }}>
      <Icon name={icon} size={12} stroke={2} color="var(--ink-3)" />
      {label}
    </div>
    {children}
  </div>
);

/* ─────────── SERVICES ─────────── */
const Services = () => {
  const { t, dir } = useI18n();
  const items = [
    { icon: "ac",        slug: "ac",        from: 150 },
    { icon: "plumbing",  slug: "plumbing",  from: 120 },
    { icon: "electrical",slug: "elec",      from: 130 },
    { icon: "pest",      slug: "pest",      from: 80 },
    { icon: "cleaning",  slug: "clean",     from: 200 },
    { icon: "handyman",  slug: "handy",     from: 100 },
    { icon: "civil",     slug: "civil",     from: null },
    { icon: "landscape", slug: "land",      from: 250 },
  ];

  return (
    <section id="services" className="section">
      <div className="container">
        <SectionHead
          eyebrow={t("svc.eyebrow")}
          titleA={t("svc.title.a")}
          titleB={t("svc.title.b")}
          right={t("svc.right")}
        />

        <div style={{
          marginTop: 56,
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16,
        }} className="srv-grid">
          {items.map((s, i) => (
            <ServiceCard key={s.slug} index={i + 1} {...s} />
          ))}
        </div>

        <div style={{
          marginTop: 28, display: "flex", justifyContent: "flex-end",
        }}>
          <a href="#packages" className="btn btn-glass">
            {t("svc.allRates")} <Icon name="arrow" size={16} stroke={2} flip={dir === "rtl"} />
          </a>
        </div>
      </div>
    </section>
  );
};

const ServiceCard = ({ icon, slug: k, from, index }) => {
  const { t } = useI18n();
  const [hover, setHover] = useState(false);
  const name = t(`s.${k}.name`);
  const desc = t(`s.${k}.desc`);
  const price = from
    ? <>{t("s.from")} <span style={{ color: "var(--ink)" }}>AED {from}</span>{t("s.perVisit")}</>
    : <>{t("s.quoted")}</>;

  return (
    <div
      className="glass sheen"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: 24, minHeight: 220,
        display: "flex", flexDirection: "column",
        transition: "transform .25s ease, background .3s ease, border-color .3s ease",
        transform: hover ? "translateY(-2px)" : "translateY(0)",
        background: hover ? "var(--glass-grad-strong)" : "var(--glass-grad)",
        borderColor: hover ? "var(--glass-border-strong)" : "var(--glass-border)",
        cursor: "pointer",
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div style={{
          width: 44, height: 44, borderRadius: 12,
          background: hover
            ? "linear-gradient(180deg, var(--red-soft), var(--red))"
            : "var(--btn-glass-bg)",
          border: "1px solid " + (hover ? "rgba(255,255,255,0.25)" : "var(--btn-glass-border)"),
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          color: hover ? "#fff" : "var(--ink)",
          boxShadow: "inset 0 1px 0 var(--glass-highlight)",
          transition: "background .25s ease",
        }}>
          <Icon name={icon} size={22} stroke={1.6} />
        </div>
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>
          {String(index).padStart(2, "0")}
        </span>
      </div>

      <h3 className="display" style={{
        fontSize: 22, margin: "20px 0 8px", color: "var(--ink)", fontWeight: 600,
      }}>{name}</h3>
      <p style={{
        fontSize: 13.5, lineHeight: 1.5, color: "var(--ink-2)",
        margin: "0 0 16px", textWrap: "pretty",
      }}>{desc}</p>
      <div style={{ marginTop: "auto", fontSize: 12, color: "var(--ink-3)", fontFamily: "var(--mono)" }}>
        {price}
      </div>
    </div>
  );
};

/* ─────────── AMC PACKAGES ─────────── */
const AMCPackages = () => {
  const { t, dir } = useI18n();

  const [propType, setPropType] = useState("villa");
  const [size, setSize] = useState("3BR");
  const [acUnits, setAcUnits] = useState(4);

  const typeMult = { apartment: 0.9, villa: 1.25, office: 1.1, warehouse: 1.4 }[propType];
  const sizeMult = { "Studio": 0.6, "1BR": 0.75, "2BR": 0.9, "3BR": 1.05, "4BR+": 1.25 }[size];
  const acFactor = 1 + Math.max(0, acUnits - 2) * 0.08;
  const calc = (base) => Math.round((base * typeMult * sizeMult * acFactor) / 50) * 50;

  const packages = [
    {
      slug: "basic", base: 2800,
      items: [
        ["amc.item.acService", "amc.freq.2yr"],
        ["amc.item.plumbInspect", "amc.freq.1yr"],
        ["amc.item.elecInspect", "amc.freq.1yr"],
        ["amc.item.pest", "amc.freq.2yr"],
        ["amc.item.emergency", "amc.freq.247"],
      ],
    },
    {
      slug: "premium", base: 4500, featured: true,
      items: [
        ["amc.item.acService", "amc.freq.4yr"],
        ["amc.item.plumbing", "amc.freq.2yr"],
        ["amc.item.electrical", "amc.freq.2yr"],
        ["amc.item.pest", "amc.freq.4yr"],
        ["amc.item.handyman", "amc.freq.2yr"],
        ["amc.item.deepClean", "amc.freq.1yr"],
        ["amc.item.emergency", "amc.freq.priority"],
      ],
    },
    {
      slug: "commercial", base: 6200,
      items: [
        ["amc.item.hvac", "amc.freq.monthly"],
        ["amc.item.mep", "amc.freq.quarterly"],
        ["amc.item.drainage", "amc.freq.quarterly"],
        ["amc.item.pest", "amc.freq.bimonthly"],
        ["amc.item.cleanRota", "amc.freq.config"],
        ["amc.item.supervisor", "amc.freq.assigned"],
      ],
    },
  ];

  return (
    <section id="packages" className="section">
      <div className="container">
        <SectionHead
          eyebrow={t("amc.eyebrow")}
          titleA={t("amc.title.a")}
          titleB={t("amc.title.b")}
          right={t("amc.right")}
        />

        {/* Property selector */}
        <div className="glass amc-selector-grid" style={{
          marginTop: 48, padding: 24,
          display: "grid", gap: 32,
          alignItems: "center",
        }}>
          <Selector
            label={t("amc.propType")}
            value={propType}
            onChange={setPropType}
            options={[
              ["apartment", t("amc.pt.apartment")],
              ["villa",     t("amc.pt.villa")],
              ["office",    t("amc.pt.office")],
              ["warehouse", t("amc.pt.wh")],
            ]}
          />
          <Selector
            label={t("amc.size")}
            value={size}
            onChange={setSize}
            options={[["Studio","Studio"],["1BR","1BR"],["2BR","2BR"],["3BR","3BR"],["4BR+","4BR+"]]}
          />
          <div>
            <div className="mono" style={selectorLabelStyle}>{t("amc.acUnits")}</div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 8 }}>
              <button onClick={() => setAcUnits(Math.max(1, acUnits - 1))} style={stepperBtn}>
                <Icon name="minus" size={14} stroke={2.2} />
              </button>
              <span className="display" style={{ fontSize: 28, color: "var(--ink)", minWidth: 28, textAlign: "center" }}>{acUnits}</span>
              <button onClick={() => setAcUnits(Math.min(20, acUnits + 1))} style={stepperBtn}>
                <Icon name="plus" size={14} stroke={2.2} />
              </button>
            </div>
          </div>
          <div>
            <div className="mono" style={{ ...selectorLabelStyle, color: "var(--red)" }}>● {t("amc.liveLabel")}</div>
            <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 8, lineHeight: 1.45 }}>
              {t("amc.liveBody")}
            </div>
          </div>
        </div>

        {/* Package cards */}
        <div style={{
          marginTop: 16,
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16,
        }} className="amc-grid">
          {packages.map((p) => (
            <PackageCard key={p.slug} {...p} price={calc(p.base)} />
          ))}
        </div>

        {/* Custom builder */}
        <div className="glass glass-tinted sheen" style={{
          marginTop: 16, padding: "24px 28px",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          flexWrap: "wrap", gap: 16,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <div style={{
              width: 56, height: 56, borderRadius: 14,
              background: "linear-gradient(180deg, var(--red-soft), var(--red))",
              boxShadow: "inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 22px -8px rgba(255,58,46,0.6)",
              display: "flex", alignItems: "center", justifyContent: "center",
              color: "#fff", fontFamily: "var(--mono)", fontWeight: 700, fontSize: 22,
            }}>+</div>
            <div>
              <div className="display" style={{ fontSize: 22, color: "var(--ink)", fontWeight: 600 }}>{t("amc.builder.title")}</div>
              <div style={{ fontSize: 13.5, color: "var(--ink-2)", marginTop: 4, maxWidth: 480 }}>
                {t("amc.builder.body")}
              </div>
            </div>
          </div>
          <a href="#" className="btn btn-glass">
            {t("amc.builder.cta")} <Icon name="arrow" size={16} stroke={2} flip={dir === "rtl"} />
          </a>
        </div>
      </div>
    </section>
  );
};

const selectorLabelStyle = {
  fontSize: 10.5, textTransform: "uppercase", letterSpacing: ".08em",
  color: "var(--ink-3)", fontWeight: 600,
};
const stepperBtn = {
  width: 32, height: 32, borderRadius: 10,
  border: "1px solid var(--btn-glass-border)",
  background: "var(--btn-glass-bg)", color: "var(--ink)",
  display: "inline-flex", alignItems: "center", justifyContent: "center",
  boxShadow: "inset 0 1px 0 var(--glass-highlight)",
};

const Selector = ({ label, value, onChange, options }) => (
  <div>
    <div className="mono" style={selectorLabelStyle}>{label}</div>
    <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 8 }}>
      {options.map(([val, lbl]) => {
        const active = value === val;
        return (
          <button key={val} onClick={() => onChange(val)} style={{
            padding: "7px 12px", borderRadius: 999,
            fontSize: 12.5, fontWeight: 500,
            border: "1px solid " + (active ? "transparent" : "var(--btn-glass-border)"),
            background: active
              ? "linear-gradient(180deg, var(--red-soft), var(--red))"
              : "var(--btn-glass-bg)",
            color: active ? "#fff" : "var(--ink-2)",
            boxShadow: active
              ? "inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 14px -6px rgba(255,58,46,0.5)"
              : "inset 0 1px 0 var(--glass-highlight)",
            transition: "background .2s ease, color .2s ease, box-shadow .2s ease",
          }}>{lbl}</button>
        );
      })}
    </div>
  </div>
);

const PackageCard = ({ slug: k, price, items, featured }) => {
  const { t, dir } = useI18n();
  const name = t(`amc.pkg.${k}`);
  const tag = t(`amc.pkg.${k}.tag`);
  return (
    <div
      className={`glass sheen ${featured ? "glass-strong" : ""}`}
      style={{
        padding: 28, position: "relative",
        display: "flex", flexDirection: "column",
        outline: featured ? "1px solid rgba(255,58,46,0.4)" : "none",
        boxShadow: featured
          ? "inset 0 1px 0 var(--glass-highlight), 0 30px 60px -20px rgba(255,58,46,0.35)"
          : "var(--glass-shadow)",
      }}
    >
      {featured && (
        <div style={{
          position: "absolute", top: 16, insetInlineEnd: 16,
          background: "linear-gradient(180deg, var(--red-soft), var(--red))",
          color: "#fff", padding: "5px 11px", fontSize: 10.5, fontWeight: 700,
          fontFamily: "var(--mono)", letterSpacing: ".06em", textTransform: "uppercase",
          borderRadius: 999, boxShadow: "inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 14px -6px rgba(255,58,46,0.5)",
        }}>{t("amc.recommended")}</div>
      )}

      <div className="mono" style={{
        fontSize: 10.5, textTransform: "uppercase", letterSpacing: ".08em",
        color: "var(--ink-3)",
      }}>{tag}</div>

      <h3 className="display" style={{
        fontSize: 30, margin: "8px 0 24px", color: "var(--ink)", fontWeight: 600,
      }}>{name}</h3>

      <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 4 }}>
        <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>AED</span>
        <span className="display" style={{
          fontSize: 56, fontWeight: 700, letterSpacing: "-0.04em",
          color: "var(--ink)",
        }}>{price.toLocaleString(dir === "rtl" ? "ar-EG" : "en-US")}</span>
      </div>
      <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginBottom: 24 }}>
        {t("amc.perYear")}
      </div>

      <ul style={{ listStyle: "none", padding: 0, margin: "0 0 24px", display: "flex", flexDirection: "column", gap: 10 }}>
        {items.map(([kKey, fKey]) => (
          <li key={kKey} style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            fontSize: 13.5, paddingBottom: 10,
            borderBottom: "1px dashed var(--hairline)",
          }}>
            <span style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--ink)" }}>
              <Icon name="check" size={14} stroke={2.4} color="var(--red)" />
              {t(kKey)}
            </span>
            <span className="mono" style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{t(fKey)}</span>
          </li>
        ))}
      </ul>

      <a href="#" className={featured ? "btn btn-primary" : "btn btn-glass"} style={{ marginTop: "auto", justifyContent: "center" }}>
        {t("amc.buy")} {name} <Icon name="arrow" size={16} stroke={2} flip={dir === "rtl"} />
      </a>
    </div>
  );
};

/* ─────────── PLATFORM ─────────── */
const Platform = () => {
  const { t } = useI18n();
  const tiles = [
    { slug: "app",   icon: "home" },
    { slug: "tech",  icon: "handyman" },
    { slug: "admin", icon: "shield" },
    { slug: "mgmt",  icon: "star" },
  ];
  return (
    <section id="platform" className="section">
      <div className="container">
        <SectionHead
          eyebrow={t("plat.eyebrow")}
          titleA={t("plat.title.a")}
          titleB={t("plat.title.b")}
          right={t("plat.right")}
        />

        <div style={{
          marginTop: 48,
          display: "grid",
          gridTemplateColumns: "1.1fr 1fr",
          gap: 16,
        }} className="plat-grid">
          {/* Big feature card */}
          <div className="glass sheen" style={{
            padding: 32, display: "flex", flexDirection: "column", minHeight: 480,
            position: "relative", overflow: "hidden",
          }}>
            <div className="mono" style={{
              fontSize: 10.5, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: ".08em",
            }}>{t("plat.feature.app")}</div>
            <h3 className="display" style={{ fontSize: 32, color: "var(--ink)", margin: "10px 0 12px", fontWeight: 600 }}>
              {t("plat.feature.app")}
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--ink-2)", margin: "0 0 24px", maxWidth: 420, textWrap: "pretty" }}>
              {t("plat.feature.app.body")}
            </p>
            <PhoneMock />
          </div>

          <div style={{ display: "grid", gridTemplateRows: "repeat(3, 1fr)", gap: 16 }}>
            {tiles.slice(1).map((tile) => (
              <div key={tile.slug} className="glass sheen" style={{
                padding: 24, display: "flex", gap: 18, alignItems: "flex-start",
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12, flexShrink: 0,
                  background: "var(--btn-glass-bg)", border: "1px solid var(--btn-glass-border)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  color: "var(--ink)",
                  boxShadow: "inset 0 1px 0 var(--glass-highlight)",
                }}>
                  <Icon name={tile.icon} size={20} stroke={1.6} />
                </div>
                <div>
                  <h4 className="display" style={{ fontSize: 19, color: "var(--ink)", margin: "0 0 6px", fontWeight: 600 }}>
                    {t(`plat.feature.${tile.slug}`)}
                  </h4>
                  <p style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--ink-2)", margin: 0, textWrap: "pretty" }}>
                    {t(`plat.feature.${tile.slug}.body`)}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const PhoneMock = () => {
  const { t, dir } = useI18n();
  return (
    <div className="phone-mock-wrap" style={{
      marginTop: "auto", marginInline: "auto",
      width: 240, height: 460, borderRadius: 38,
      background: "linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.4))",
      padding: 8, boxShadow: "0 30px 60px -20px rgba(0,0,0,0.5)",
      border: "1px solid var(--hairline-2)",
      flexShrink: 0,
    }}>
      <div style={{
        background: "var(--bg)", height: "100%", borderRadius: 30,
        overflow: "hidden", display: "flex", flexDirection: "column",
        border: "1px solid var(--hairline)",
      }}>
        <div style={{
          padding: "12px 18px 6px", fontFamily: "var(--mono)", fontSize: 10,
          color: "var(--ink-2)", display: "flex", justifyContent: "space-between",
        }}>
          <span>9:41</span><span>● ● ●</span>
        </div>
        <div style={{ padding: "12px 18px" }}>
          <div className="mono" style={{ fontSize: 9.5, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: ".08em" }}>
            Villa 12 · Palm Jumeirah
          </div>
          <div className="display" style={{ fontSize: 22, color: "var(--ink)", marginTop: 4, fontWeight: 600 }}>
            {dir === "rtl" ? "صباح الخير،" : "Good morning,"}<br />Mohammed.
          </div>
        </div>

        <div className="glass" style={{ margin: "8px 14px", padding: 12, borderRadius: 14 }}>
          <div className="mono" style={{ fontSize: 9, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: ".06em" }}>
            Premium AMC
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 4 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink)" }}>{t("amc.item.acService")}</div>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-2)" }}>2 / 4</div>
          </div>
          <div style={{ height: 4, background: "var(--hairline-2)", marginTop: 6, borderRadius: 999 }}>
            <div style={{ height: "100%", width: "50%", background: "var(--red)", borderRadius: 999 }} />
          </div>
        </div>

        <div className="glass glass-tinted" style={{
          margin: "8px 14px", padding: 12, borderRadius: 14,
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11 }}>
            <span style={{ fontWeight: 600, color: "var(--ink)" }}>SR-2026-04521</span>
            <span className="mono" style={{ color: "var(--red)" }}>● EN ROUTE</span>
          </div>
          <div style={{ fontSize: 12, marginTop: 4, color: "var(--ink-2)" }}>AC Service · Team: Ali & Rashed</div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", marginTop: 4 }}>ETA 25 MIN</div>
        </div>

        <div style={{ flex: 1 }} />

        <div style={{
          margin: "0 14px 18px", padding: "10px 12px", borderRadius: 12,
          background: "linear-gradient(180deg, var(--red-soft), var(--red))",
          color: "#fff", display: "flex", justifyContent: "space-between", alignItems: "center",
          fontSize: 12, fontWeight: 600,
          boxShadow: "inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 18px -6px rgba(255,58,46,0.5)",
        }}>
          <span>{dir === "rtl" ? "🆘 طلب طارئ" : "🆘 Emergency request"}</span>
          <Icon name="arrow" size={14} stroke={2.4} flip={dir === "rtl"} />
        </div>
      </div>
    </div>
  );
};

/* ─────────── WHY / STATS / ISO ─────────── */
const WhyCESPRO = () => {
  const { t } = useI18n();
  const stats = [
    [t("why.stat.1.num"), t("why.stat.1.lbl")],
    [t("why.stat.2.num"), t("why.stat.2.lbl")],
    [t("why.stat.3.num"), t("why.stat.3.lbl")],
    [t("why.stat.4.num"), t("why.stat.4.lbl")],
  ];
  const isos = [
    ["ISO 9001",  t("why.cert.qm")],
    ["ISO 14001", t("why.cert.env")],
    ["ISO 45001", t("why.cert.ohs")],
    ["ISO 55001", t("why.cert.asset")],
  ];

  return (
    <section id="about" className="section">
      <div className="container">
        <div style={{
          display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "start",
        }} className="why-grid">
          <div>
            <span className="eyebrow">{t("why.eyebrow")}</span>
            <h2 className="display" style={{
              fontSize: "clamp(36px, 5vw, 64px)", margin: "16px 0 20px", color: "var(--ink)",
            }}>{t("why.title")}</h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--ink-2)", margin: 0, maxWidth: 520, textWrap: "pretty" }}>
              {t("why.body")}
            </p>

            <div className="glass" style={{
              marginTop: 36, padding: 0, overflow: "hidden",
              display: "grid", gridTemplateColumns: "1fr 1fr",
            }}>
              {stats.map(([num, lbl], i) => (
                <div key={lbl} style={{
                  padding: 24,
                  borderInlineEnd: i % 2 === 0 ? "1px solid var(--hairline)" : "none",
                  borderBottom: i < 2 ? "1px solid var(--hairline)" : "none",
                }}>
                  <div className="display" style={{
                    fontSize: 40, fontWeight: 700, letterSpacing: "-0.03em",
                    color: "var(--ink)",
                  }}>{num}</div>
                  <div className="mono" style={{
                    fontSize: 11.5, color: "var(--ink-3)",
                    textTransform: "uppercase", letterSpacing: ".06em", marginTop: 4,
                  }}>{lbl}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="glass sheen" style={{ padding: 28 }}>
            <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: ".08em" }}>
              Certifications
            </div>
            <h3 className="display" style={{ fontSize: 26, color: "var(--ink)", margin: "10px 0 24px", fontWeight: 600 }}>
              {t("why.cert.title")}
            </h3>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              {isos.map(([code, desc]) => (
                <div key={code} className="glass" style={{ padding: 18, borderRadius: 16 }}>
                  <div className="display" style={{ fontSize: 18, color: "var(--red)", fontWeight: 700 }}>{code}</div>
                  <div style={{ fontSize: 12.5, color: "var(--ink-2)", marginTop: 4 }}>{desc}</div>
                </div>
              ))}
            </div>
            <div style={{
              marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--hairline)",
              fontSize: 13, color: "var(--ink-2)", display: "flex", alignItems: "flex-start", gap: 10,
            }}>
              <Icon name="shield" size={18} stroke={1.5} color="var(--red)" />
              <span>{t("why.cert.footer")}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ─────────── TESTIMONIALS ─────────── */
const Testimonials = () => {
  const { t } = useI18n();
  const items = [1, 2, 3].map((n) => ({
    quote: t(`test.${n}.q`),
    author: t(`test.${n}.a`),
    role: t(`test.${n}.r`),
  }));
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow={t("test.eyebrow")}
          titleA={t("test.title.a")}
          titleB={t("test.title.b")}
          right={t("test.right")}
        />
        <div style={{
          marginTop: 56,
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16,
        }} className="t-grid">
          {items.map((it, i) => (
            <div key={i} className="glass sheen" style={{
              padding: 28, display: "flex", flexDirection: "column", minHeight: 260,
            }}>
              <div style={{ display: "flex", gap: 2, marginBottom: 16 }}>
                {Array.from({length:5}).map((_, k) => (
                  <Icon key={k} name="star" size={15} color="var(--red)" stroke={0} />
                ))}
              </div>
              <p className="display" style={{
                fontSize: 19, margin: "0 0 24px", lineHeight: 1.3,
                fontWeight: 500, color: "var(--ink)",
              }}>“{it.quote}”</p>
              <div style={{ marginTop: "auto", paddingTop: 20, borderTop: "1px solid var(--hairline)" }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink)" }}>{it.author}</div>
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 2, textTransform: "uppercase", letterSpacing: ".05em" }}>{it.role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ─────────── APP CTA ─────────── */
const AppCTA = () => {
  const { t } = useI18n();
  return (
    <section className="section" style={{ paddingBottom: 0 }}>
      <div className="container">
        <div className="glass glass-strong sheen cta-grid" style={{
          padding: "56px", display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 56,
          alignItems: "center",
        }}>
          <div>
            <span className="eyebrow">{t("app.eyebrow")}</span>
            <h2 className="display" style={{
              fontSize: "clamp(36px, 4.5vw, 56px)", margin: "16px 0 20px", color: "var(--ink)",
            }}>
              {t("app.title.a")}<br />{t("app.title.b")}
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--ink-2)", margin: "0 0 28px", maxWidth: 480, textWrap: "pretty" }}>
              {t("app.body")}
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href="#" className="btn btn-primary"><Icon name="download" size={16} stroke={2} /> {t("app.ios")}</a>
              <a href="#" className="btn btn-glass"><Icon name="download" size={16} stroke={2} /> {t("app.android")}</a>
              <a href="#" className="btn btn-glass">{t("app.web")}</a>
            </div>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 20, letterSpacing: ".04em", textTransform: "uppercase" }}>
              {t("app.parity")}
            </div>
          </div>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <PhoneMock />
          </div>
        </div>
      </div>
    </section>
  );
};

/* ─────────── FAQ ─────────── */
const FAQ = () => {
  const { t } = useI18n();
  const [open, setOpen] = useState(0);
  const qs = [1,2,3,4,5,6].map((n) => ({ q: t(`faq.q${n}`), a: t(`faq.a${n}`) }));
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow={t("faq.eyebrow")}
          titleA={t("faq.title")}
          right={t("faq.right")}
        />
        <div className="glass" style={{ marginTop: 48, padding: "8px 28px", borderRadius: 24 }}>
          {qs.map((item, i) => (
            <div key={i} style={{ borderBottom: i < qs.length - 1 ? "1px solid var(--hairline)" : "none" }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center",
                padding: "22px 4px", background: "transparent", border: 0,
                textAlign: "start", color: "var(--ink)",
                fontFamily: "var(--display)", fontSize: 20, fontWeight: 500,
              }}>
                <span style={{ paddingInlineEnd: 16 }}>{item.q}</span>
                <span style={{
                  transform: open === i ? "rotate(45deg)" : "rotate(0)",
                  transition: "transform .2s ease",
                  width: 28, height: 28, borderRadius: 999,
                  background: "var(--btn-glass-bg)", border: "1px solid var(--btn-glass-border)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  flexShrink: 0,
                }}>
                  <Icon name="plus" size={14} stroke={2} />
                </span>
              </button>
              <div style={{
                maxHeight: open === i ? 240 : 0, overflow: "hidden",
                transition: "max-height .3s ease",
              }}>
                <p style={{
                  fontSize: 15, lineHeight: 1.6, color: "var(--ink-2)",
                  margin: "0 0 22px", maxWidth: 720, textWrap: "pretty",
                }}>{item.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ─────────── BIG CTA ─────────── */
const BigCTA = () => {
  const { t, dir } = useI18n();
  return (
    <section className="section" id="contact" style={{ paddingTop: 56 }}>
      <div className="container">
        <div className="glass glass-tinted sheen bigcta" style={{
          padding: "72px 56px", position: "relative", overflow: "hidden",
        }}>
          {/* extra ambient orb behind */}
          <div aria-hidden style={{
            position: "absolute", insetInlineEnd: -120, top: -120,
            width: 360, height: 360, borderRadius: "50%",
            background: "radial-gradient(circle, var(--red) 0%, transparent 70%)",
            filter: "blur(40px)", opacity: 0.5, pointerEvents: "none",
          }} />
          <span className="eyebrow">{t("cta.eyebrow")}</span>
          <h2 className="display" style={{
            fontSize: "clamp(40px, 6vw, 88px)",
            margin: "20px 0 24px", color: "var(--ink)", maxWidth: 900,
          }}>{t("cta.title")}</h2>
          <p style={{ fontSize: 18, lineHeight: 1.5, color: "var(--ink-2)", maxWidth: 560, margin: "0 0 36px", textWrap: "pretty" }}>
            {t("cta.body")}
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="#" className="btn btn-primary btn-lg">{t("cta.primary")} <Icon name="arrow" size={16} stroke={2.2} flip={dir==="rtl"} /></a>
            <a href="tel:800237776" className="btn btn-glass btn-lg"><Icon name="phone" size={14} stroke={2} /> 800 CESPRO</a>
            <a href="#" className="btn btn-glass btn-lg"><Icon name="chat" size={16} stroke={1.8} /> {t("cta.chat")}</a>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ─────────── FOOTER ─────────── */
const Footer = () => {
  const { t } = useI18n();
  const cols = [
    { title: t("ft.col.services"), links: ["AC Maintenance","Plumbing","Electrical","Pest Control","Deep Cleaning","Handyman","Civil & MEP","Landscaping"] },
    { title: t("ft.col.packages"), links: [t("amc.pkg.basic"), t("amc.pkg.premium"), t("amc.pkg.commercial"), t("amc.builder.title"), "Rate card"] },
    { title: t("ft.col.company"),  links: ["About CESPRO","Projects","Clients","Careers","Chenoth Employment","Blog"] },
    { title: t("ft.col.support"),  links: ["Customer Portal","Book a service","Emergency","Terms & Conditions","Privacy Policy"] },
  ];
  return (
    <footer style={{
      borderTop: "1px solid var(--hairline)",
      paddingTop: 64, paddingBottom: 32,
    }}>
      <div className="container">
        <div style={{
          display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr 1fr", gap: 32,
        }} className="ft-grid">
          <div>
            <Logo height={30} />
            <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--ink-2)", margin: "16px 0 20px", maxWidth: 340 }}>
              {t("ft.about")}
            </p>
            <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
              <a href="tel:800237776" className="mono" style={{ fontSize: 13, color: "var(--ink)", fontWeight: 600 }}>800 CESPRO</a>
              <span style={{ color: "var(--ink-4)" }}>·</span>
              <a href="mailto:hello@cespro.ae" className="mono" style={{ fontSize: 13, color: "var(--ink-2)" }}>hello@cespro.ae</a>
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.title}>
              <h4 className="mono" style={{
                fontSize: 11, textTransform: "uppercase", letterSpacing: ".08em",
                color: "var(--ink-3)", margin: "0 0 16px", fontWeight: 600,
              }}>{c.title}</h4>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {c.links.map((l) => (
                  <li key={l}><a href="#" style={{ fontSize: 13.5, color: "var(--ink-2)" }}>{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 56, paddingTop: 24, borderTop: "1px solid var(--hairline)",
          display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16,
          fontSize: 12, color: "var(--ink-3)",
        }}>
          <span className="mono">{t("ft.rights")}</span>
          <div style={{ display: "flex", gap: 12 }}><LangToggle /><ThemeToggle /></div>
        </div>
      </div>
    </footer>
  );
};

/* ─────────── CHAT BUBBLE ─────────── */
const ChatBubble = () => {
  const { t, dir } = useI18n();
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(!open)} aria-label="Open AI chat" style={{
        position: "fixed", bottom: 24, insetInlineEnd: 24, zIndex: 40,
        width: 56, height: 56, borderRadius: "50%",
        background: "linear-gradient(180deg, var(--red-soft), var(--red))",
        color: "#fff", border: "1px solid rgba(255,255,255,0.25)",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.4), 0 16px 36px -8px rgba(255,58,46,0.5)",
      }}>
        <Icon name={open ? "x" : "chat"} size={20} stroke={1.8} />
      </button>

      {open && (
        <div className="glass glass-strong sheen" style={{
          position: "fixed", bottom: 96, insetInlineEnd: 24, zIndex: 40,
          width: 320, borderRadius: 20,
        }}>
          <div style={{
            padding: "14px 18px", borderBottom: "1px solid var(--hairline)",
            display: "flex", justifyContent: "space-between", alignItems: "center",
          }}>
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: "var(--ink)" }}>{dir==="rtl"?"المساعد الذكي":"CESPRO AI Assistant"}</div>
              <div className="mono" style={{ fontSize: 10, color: "var(--red)", textTransform: "uppercase", letterSpacing: ".06em", marginTop: 2 }}>● Online</div>
            </div>
          </div>
          <div style={{ padding: 18, fontSize: 13.5, lineHeight: 1.5, color: "var(--ink-2)" }}>
            {dir==="rtl"
              ? "👋 مرحباً! يمكنني مساعدتك في اختيار الباقة، حجز زيارة، أو إرسال فريق طوارئ."
              : "👋 Hi! I can help you choose an AMC, book a visit, or get an emergency team dispatched."}
          </div>
          <div style={{ padding: "0 14px 14px", display: "flex", flexDirection: "column", gap: 8 }}>
            {(dir==="rtl"
              ? ["ما الذي تشمله الباقة الفاخرة؟","احجز صيانة مكيف غداً","لدي تسرب مياه — طارئ"]
              : ["What does Premium AMC include?","Book an AC service tomorrow","I have a water leak — emergency"]
            ).map((q) => (
              <button key={q} style={{
                padding: "10px 12px", fontSize: 12.5,
                background: "var(--btn-glass-bg)", border: "1px solid var(--btn-glass-border)",
                color: "var(--ink)", borderRadius: 12,
                textAlign: dir === "rtl" ? "right" : "left",
              }}>{q}</button>
            ))}
          </div>
        </div>
      )}
    </>
  );
};

Object.assign(window, {
  Nav, Hero, BookingWidget, Services, AMCPackages, Platform,
  WhyCESPRO, Testimonials, AppCTA, FAQ, BigCTA, Footer, ChatBubble,
});