// Sections — header, hero, about, soins, tech, before/after, testimonials, FAQ, location, CTA, footer.
// All copy goes through useT() to support FR / AR / EN.

const { motion, AnimatePresence, useScroll, useTransform } = window.Motion;

const SITE = {
  name: "Elite Dental Care",
  doctor: "Dr. Moustahfid Sara",
  initials: "SM",
  phoneDisplay: "05-20-94-94-64",
  mobileDisplay: "06-63-34-18-19",
  phoneHref: "tel:+212520949464",
  mobileHref: "tel:+212663341819",
  whatsappHref: "https://wa.me/212663341819",
  email: "elitedentalcare.casa@gmail.com",
  emailHref: "mailto:elitedentalcare.casa@gmail.com",
  mapsHref: "https://www.google.com/maps/search/?api=1&query=Avenue%20Med%20Taieb%20Naciri%2C%20Elite%20Square%2C%20Bureau%2020%2C%20Oulfa%2C%20Casablanca",
  mapsEmbed: "https://www.google.com/maps?q=Avenue%20Med%20Taieb%20Naciri%2C%20Elite%20Square%2C%20Bureau%2020%2C%20Oulfa%2C%20Casablanca&output=embed",
  instagramHref: "https://www.instagram.com/elitedentalcare.casa/",
  linkedinHref: "https://www.linkedin.com/in/sara-moustahfid/",
  vctrumHref: "https://vctrum.ca",
  portrait: "assets/dr-sara-moustahfid.jpeg",
  logo: "assets/elite-dental-care-logo.png",
  cabinetPhotos: [
    "assets/cabinet-dr-sara-1.jpeg",
    "assets/cabinet-dr-sara-2.jpeg",
  ],
};

// -------------------------- shared --------------------------
const fadeUp = {
  initial: { opacity: 0, y: 30 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, margin: "-80px" },
  transition: { duration: 0.7, ease: [0.22, 0.61, 0.36, 1] },
};

const stagger = (delay = 0) => ({
  initial: { opacity: 0, y: 24 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, margin: "-60px" },
  transition: { duration: 0.55, ease: [0.22, 0.61, 0.36, 1], delay },
});

const SectionLabel = ({ children, dark = false }) => (
  <div className={`inline-flex items-center gap-3 text-[11px] uppercase tracking-[0.28em] ${dark ? "text-ivory/60" : "text-teal/70"}`}>
    <span className={`h-px w-8 ${dark ? "bg-brass/60" : "bg-teal/40"}`} />
    {children}
  </div>
);

const PrimaryBtn = ({ children, href = "#contact", className = "", ...p }) => (
  <a
    href={href}
    className={`inline-flex items-center justify-center gap-2 rounded-full bg-brass px-6 py-3 text-sm font-medium tracking-wide text-ivory transition hover:bg-[#a8884f] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brass ${className}`}
    {...p}
  >
    {children}
  </a>
);

const GhostBtn = ({ children, href = "#cabinet", className = "", ...p }) => (
  <a
    href={href}
    className={`inline-flex items-center justify-center gap-2 rounded-full border border-teal/30 px-6 py-3 text-sm font-medium tracking-wide text-teal transition hover:bg-teal hover:text-ivory ${className}`}
    {...p}
  >
    {children}
  </a>
);

// -------------------------- Smile arc (scroll-draw) --------------------------
function SmileArc() {
  const { scrollYProgress } = useScroll();
  const pathLength = useTransform(scrollYProgress, [0, 0.95], [0, 1]);
  return (
    <svg
      aria-hidden="true"
      className="pointer-events-none fixed inset-x-0 top-0 z-40 h-12 w-full"
      viewBox="0 0 1440 60"
      preserveAspectRatio="none"
    >
      <motion.path
        key="smile-arc"
        d="M 0 6 Q 720 64 1440 6"
        fill="none"
        stroke="#102E4A"
        strokeWidth="1.5"
        strokeLinecap="round"
        style={{ pathLength }}
      />
    </svg>
  );
}

// -------------------------- Header --------------------------
function LangSwitcher({ compact = false }) {
  const { lang, setLang } = useLang();
  const t = useT();
  return (
    <div role="group" aria-label={t("header.langGroup")} className={`items-center rounded-full border border-teal/15 p-0.5 ${compact ? "flex" : "hidden md:flex"}`}>
      {["FR", "AR", "EN"].map((l) => (
        <button
          key={l}
          onClick={() => setLang(l)}
          aria-pressed={lang === l}
          className={`rounded-full px-2.5 py-1 text-[11px] font-medium tracking-wide transition ${
            lang === l ? "bg-teal text-ivory" : "text-ink/55 hover:text-teal"
          }`}
        >
          {l}
        </button>
      ))}
    </div>
  );
}

function Header({ onOpenMenu }) {
  const t = useT();
  const nav = [
    [t("nav.cabinet"), "#cabinet"],
    [t("nav.soins"), "#soins"],
    [t("nav.results"), "#avant-apres"],
    [t("nav.tech"), "#tech"],
    [t("nav.reviews"), "#avis"],
    [t("nav.contact"), "#contact"],
  ];
  return (
    <header className="sticky top-0 z-30 border-b border-teal/10 bg-ivory/80 backdrop-blur-md">
      <div className="mx-auto flex max-w-7xl items-center justify-between gap-6 px-5 py-4 lg:px-10">
        <a href="#top" className="group flex items-center">
          <img
            src={SITE.logo}
            alt={`${t("header.subtitle")} — ${t("header.name")}`}
            className="h-12 w-auto max-w-[190px] object-contain sm:h-14 sm:max-w-[250px]"
          />
        </a>

        <nav aria-label="Navigation principale" className="hidden items-center gap-5 text-[12.5px] text-ink/75 lg:flex xl:gap-7 xl:text-[13px]">
          {nav.map(([label, href]) => (
            <a key={href} href={href} className="transition hover:text-teal">{label}</a>
          ))}
        </nav>

        <div className="flex items-center gap-3">
          <LangSwitcher />
          <a href={SITE.phoneHref} className="hidden items-center gap-1.5 text-[13px] text-teal hover:underline xl:flex">
            <IconPhone size={16} />
            {t("header.phone")}
          </a>
          <PrimaryBtn href="#contact" className="hidden sm:inline-flex">{t("header.book")}</PrimaryBtn>
          <button
            onClick={onOpenMenu}
            aria-label={t("header.menuOpen")}
            className="grid h-10 w-10 place-items-center rounded-full border border-teal/15 text-teal lg:hidden"
          >
            <IconMenu size={20} />
          </button>
        </div>
      </div>
    </header>
  );
}

// -------------------------- Hero --------------------------
function ToothIllustration() {
  return (
    <motion.div
      animate={{ rotate: 360 }}
      transition={{ repeat: Infinity, duration: 40, ease: "linear" }}
      className="absolute inset-0"
      aria-hidden="true"
    >
      <svg viewBox="0 0 400 400" className="h-full w-full">
        <defs>
          <radialGradient id="g1" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#EEE8DC" />
            <stop offset="100%" stopColor="#D8D2C2" stopOpacity="0" />
          </radialGradient>
          <linearGradient id="brass" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#C1A16E" />
            <stop offset="100%" stopColor="#A98258" />
          </linearGradient>
        </defs>
        <circle cx="200" cy="200" r="180" fill="url(#g1)" />
        {[...Array(12)].map((_, i) => (
          <line
            key={i}
            x1="200" y1="20" x2="200" y2="40"
            stroke="#A98258" strokeOpacity="0.35" strokeWidth="1"
            transform={`rotate(${i * 30} 200 200)`}
          />
        ))}
        <circle cx="200" cy="200" r="140" fill="none" stroke="url(#brass)" strokeWidth="0.8" strokeDasharray="2 6" />
        <circle cx="200" cy="200" r="100" fill="none" stroke="#102E4A" strokeOpacity="0.25" strokeWidth="0.8" />
      </svg>
    </motion.div>
  );
}

function StaticToothCrest() {
  return (
    <svg viewBox="0 0 220 260" className="absolute inset-0 m-auto h-[58%] w-auto" aria-hidden="true">
      <defs>
        <linearGradient id="brassFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#C1A16E" />
          <stop offset="100%" stopColor="#A98258" />
        </linearGradient>
        <linearGradient id="tealFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#13494F" />
          <stop offset="100%" stopColor="#071A2B" />
        </linearGradient>
      </defs>
      <path
        d="M110 18c22-22 60-26 82-8 22 18 24 50 16 78-6 22-10 38-14 60-6 38-14 78-38 78-20 0-26-30-38-62-4-12-6-18-12-18s-8 6-12 18c-12 32-18 62-38 62-24 0-32-40-38-78-4-22-8-38-14-60-8-28-6-60 16-78 22-18 60-14 82 8z"
        fill="url(#tealFill)"
      />
      <path
        d="M110 38c16-16 44-20 60-6 16 14 18 38 12 60-4 16-8 28-12 44-4 20-6 38-16 38-8 0-12-16-20-40-6-16-10-22-24-22s-18 6-24 22c-8 24-12 40-20 40-10 0-12-18-16-38-4-16-8-28-12-44-6-22-4-46 12-60 16-14 44-10 60 6z"
        fill="#102E4A"
        opacity="0.65"
      />
      <path d="M70 70c8-6 18-6 24 2" stroke="#F8F4EA" strokeOpacity="0.25" strokeWidth="3" strokeLinecap="round" fill="none" />
      <circle cx="160" cy="120" r="4" fill="url(#brassFill)" />
    </svg>
  );
}

function Hero() {
  const t = useT();
  const { lang } = useLang();
  return (
    <section id="top" className="relative overflow-hidden">
      <div className="pointer-events-none absolute -left-40 top-10 h-[520px] w-[520px] rounded-full bg-sage/40 blur-3xl rtl:left-auto rtl:-right-40" aria-hidden="true" />
      <div className="pointer-events-none absolute right-[-200px] top-40 h-[420px] w-[420px] rounded-full bg-brass/15 blur-3xl rtl:right-auto rtl:-left-[200px]" aria-hidden="true" />

      <div className="relative mx-auto grid max-w-7xl gap-12 px-5 pb-24 pt-12 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16 lg:px-10 lg:pb-32 lg:pt-20">
        <motion.div {...fadeUp} className="flex flex-col justify-center">
          <SectionLabel>{t("hero.eyebrow")}</SectionLabel>
          <h1 className="mt-6 font-serif text-[44px] leading-[1.02] tracking-tight text-teal sm:text-6xl lg:text-[78px]">
            {t("hero.title1")}{" "}
            <em className="text-brass" style={{ fontStyle: "italic" }}>{t("hero.titleEm")}</em>
            {t("hero.title2")}
          </h1>
          <p className="mt-7 max-w-xl text-[17px] leading-relaxed text-ink/70">
            {t("hero.body")}
          </p>

          <div className="mt-10 flex flex-wrap items-center gap-3">
            <PrimaryBtn href="#contact">
              {t("hero.cta1")} <IconArrow size={16} className="rtl:rotate-180" />
            </PrimaryBtn>
            <GhostBtn href="#cabinet">{t("hero.cta2")}</GhostBtn>
          </div>

          <div className="mt-12 flex flex-wrap items-center gap-x-7 gap-y-3 text-[13px] text-ink/65">
            <span className="flex items-center gap-2"><span className="h-1.5 w-1.5 rounded-full bg-brass" />{t("hero.trust1")}</span>
            <span className="flex items-center gap-2"><span className="h-1.5 w-1.5 rounded-full bg-brass" />{t("hero.trust2")}</span>
            <span className="flex items-center gap-2">
              <IconStar size={14} className="text-brass" />
              {t("hero.trust3")}
            </span>
          </div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, scale: 0.96 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 1, ease: [0.22, 0.61, 0.36, 1] }}
          className="relative mx-auto aspect-square w-full max-w-[520px]"
        >
          <ToothIllustration />
          <StaticToothCrest />
          <motion.div
            animate={{ y: [0, -8, 0] }}
            transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
            className="absolute left-2 top-10 flex items-center gap-2 rounded-full bg-ivory px-3 py-1.5 text-[11px] text-teal shadow-[0_8px_24px_-12px_rgba(14,58,63,0.4)] rtl:left-auto rtl:right-2"
          >
            <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" /> {t("hero.openChip")}
          </motion.div>
          <motion.div
            animate={{ y: [0, 8, 0] }}
            transition={{ duration: 7, repeat: Infinity, ease: "easeInOut" }}
            className="absolute bottom-12 right-0 rounded-2xl bg-ivory p-3 pr-4 shadow-[0_10px_30px_-16px_rgba(14,58,63,0.4)] rtl:right-auto rtl:left-0 rtl:pl-4 rtl:pr-3"
          >
            <div className="flex items-center gap-2">
              <div className="grid h-8 w-8 place-items-center rounded-full bg-sage-soft text-teal">
                <IconSparkle size={16} />
              </div>
              <div className="leading-tight">
                <div className="text-[11px] uppercase tracking-widest text-ink/50">{t("hero.aesthetic")}</div>
                <div className="text-[12px] text-teal">{t("hero.facets")}</div>
              </div>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}

// -------------------------- About --------------------------
function About() {
  const t = useT();
  const credentials = [t("about.cred1"), t("about.cred2"), t("about.cred3"), t("about.cred4")];
  return (
    <section id="cabinet" className="relative mx-auto max-w-7xl px-5 py-24 lg:px-10 lg:py-32">
      <div className="grid gap-12 lg:grid-cols-[0.95fr_1.05fr] lg:gap-20">
        <motion.div {...fadeUp} className="relative">
          <div className="relative aspect-[4/5] w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#F3EEE3] to-sage-soft">
            <div className="absolute inset-0 grid place-items-center bg-gradient-to-br from-[#F7F1E4] to-sage-soft text-teal/20">
              <span className="font-serif text-8xl">{SITE.initials}</span>
            </div>
            <img
              src={SITE.portrait}
              alt={`${t("header.name")}, ${t("about.drRole")}`}
              className="absolute inset-0 h-full w-full object-cover object-[50%_16%]"
              loading="lazy"
            />
            <div className="absolute bottom-5 left-5 right-5 flex items-end justify-between rounded-2xl bg-ivory/90 px-4 py-3 backdrop-blur">
              <div className="leading-tight">
                <div className="font-serif text-lg text-teal">{t("header.name")}</div>
                <div className="text-[11px] uppercase tracking-widest text-ink/55">{t("about.drRole")}</div>
              </div>
              <span className="font-serif text-3xl text-brass">{SITE.initials}</span>
            </div>
          </div>
        </motion.div>

        <motion.div {...fadeUp} className="flex flex-col justify-center">
          <SectionLabel>{t("about.eyebrow")}</SectionLabel>
          <h2 className="mt-5 font-serif text-4xl leading-[1.05] tracking-tight text-teal sm:text-5xl">
            {t("about.title1")} <em className="text-brass" style={{ fontStyle: "italic" }}>{t("about.titleEm")}</em>{t("about.title2")}
          </h2>

          <div className="mt-7 space-y-5 text-[15.5px] leading-relaxed text-ink/75">
            <p>{t("about.p1")}</p>
            <p>{t("about.p2")}</p>
            <p>{t("about.p3")}</p>
          </div>

          <div className="mt-9">
            <div className="text-[11px] uppercase tracking-[0.28em] text-teal/70">{t("about.credsLabel")}</div>
            <div className="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4">
              {credentials.map((c, i) => (
                <div key={i} className="rounded-2xl border border-teal/10 bg-ivory p-4 text-[12.5px] leading-snug text-teal">
                  {c}
                </div>
              ))}
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

// -------------------------- Cabinet showcase --------------------------
function CabinetShowcase() {
  const t = useT();
  const features = [
    { icon: IconScan, title: t("cabinet.feature1.title"), text: t("cabinet.feature1.text") },
    { icon: IconShield, title: t("cabinet.feature2.title"), text: t("cabinet.feature2.text") },
    { icon: IconSparkle, title: t("cabinet.feature3.title"), text: t("cabinet.feature3.text") },
  ];

  return (
    <section id="cabinet-photos" className="relative overflow-hidden bg-sage-soft/45 py-24 lg:py-32">
      <div className="pointer-events-none absolute -right-32 top-16 h-80 w-80 rounded-full bg-brass/10 blur-3xl rtl:right-auto rtl:-left-32" aria-hidden="true" />
      <div className="mx-auto max-w-7xl px-5 lg:px-10">
        <motion.div {...fadeUp} className="flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <SectionLabel>{t("cabinet.eyebrow")}</SectionLabel>
            <h2 className="mt-5 max-w-3xl font-serif text-4xl leading-[1.05] tracking-tight text-teal sm:text-5xl">
              {t("cabinet.title")}
            </h2>
          </div>
          <p className="max-w-md text-[14.5px] leading-relaxed text-ink/65">{t("cabinet.intro")}</p>
        </motion.div>

        <div className="mt-14 grid gap-5 lg:grid-cols-[1.1fr_0.9fr] lg:gap-6">
          <motion.figure {...stagger(0)} className="group relative min-h-[520px] overflow-hidden rounded-[28px] border border-teal/10 bg-ivory shadow-[0_24px_70px_-48px_rgba(16,46,74,0.55)]">
            <img
              src={SITE.cabinetPhotos[0]}
              alt={t("cabinet.photo1.alt")}
              className="absolute inset-0 h-full w-full object-cover object-[50%_50%] transition duration-700 group-hover:scale-[1.03]"
              loading="lazy"
            />
            <div className="absolute inset-x-4 bottom-4 rounded-2xl bg-teal/88 p-4 text-ivory shadow-[0_18px_50px_-24px_rgba(7,26,43,0.8)] backdrop-blur-md">
              <div className="text-[10px] font-semibold uppercase tracking-[0.24em] text-white">{t("cabinet.photo1.kicker")}</div>
              <figcaption className="mt-1 font-serif text-2xl leading-tight text-ivory">{t("cabinet.photo1.title")}</figcaption>
              <p className="mt-2 text-[13px] leading-relaxed text-ivory/80">{t("cabinet.photo1.text")}</p>
            </div>
          </motion.figure>

          <div className="grid gap-5">
            <motion.figure {...stagger(0.08)} className="group relative min-h-[330px] overflow-hidden rounded-[28px] border border-teal/10 bg-ivory shadow-[0_24px_70px_-48px_rgba(16,46,74,0.55)]">
              <img
                src={SITE.cabinetPhotos[1]}
                alt={t("cabinet.photo2.alt")}
                className="absolute inset-0 h-full w-full object-cover object-[50%_50%] transition duration-700 group-hover:scale-[1.03]"
                loading="lazy"
              />
              <div className="absolute inset-x-4 bottom-4 rounded-2xl bg-teal/88 p-4 text-ivory shadow-[0_18px_50px_-24px_rgba(7,26,43,0.8)] backdrop-blur-md">
                <div className="text-[10px] font-semibold uppercase tracking-[0.24em] text-white">{t("cabinet.photo2.kicker")}</div>
                <figcaption className="mt-1 font-serif text-xl leading-tight text-ivory">{t("cabinet.photo2.title")}</figcaption>
                <p className="mt-2 text-[13px] leading-relaxed text-ivory/80">{t("cabinet.photo2.text")}</p>
              </div>
            </motion.figure>

            <motion.div {...stagger(0.14)} className="grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
              {features.map((feature, i) => {
                const Icon = feature.icon;
                return (
                  <div key={i} className="flex gap-4 rounded-2xl border border-teal/10 bg-ivory p-5">
                    <span className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-teal text-ivory">
                      <Icon size={19} />
                    </span>
                    <div>
                      <div className="font-serif text-lg leading-tight text-teal">{feature.title}</div>
                      <p className="mt-1.5 text-[13px] leading-relaxed text-ink/65">{feature.text}</p>
                    </div>
                  </div>
                );
              })}
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
}

// -------------------------- Soins --------------------------
const SOINS_KEYS = [
  { id: "generaux", icon: "IconTooth" },
  { id: "implants", icon: "IconImplant" },
  { id: "facettes", icon: "IconSparkle" },
  { id: "ortho", icon: "IconBraces" },
  { id: "blanchiment", icon: "IconBolt" },
  { id: "pedo", icon: "IconChild" },
  { id: "parodontie", icon: "IconLeaf" },
  { id: "urgences", icon: "IconShieldHeart" },
];

function Soins() {
  const t = useT();
  const [openId, setOpenId] = React.useState(null);
  const open = SOINS_KEYS.find((s) => s.id === openId);
  const OpenIcon = open ? window[open.icon] : null;

  return (
    <section id="soins" className="relative bg-gradient-to-b from-ivory via-sage-soft/40 to-ivory py-24 lg:py-32">
      <div className="mx-auto max-w-7xl px-5 lg:px-10">
        <motion.div {...fadeUp} className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <SectionLabel>{t("soins.eyebrow")}</SectionLabel>
            <h2 className="mt-5 max-w-2xl font-serif text-4xl leading-[1.05] tracking-tight text-teal sm:text-5xl">
              {t("soins.title")}
            </h2>
          </div>
          <p className="max-w-sm text-[14.5px] leading-relaxed text-ink/65">{t("soins.intro")}</p>
        </motion.div>

        <div className="mt-14 grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-4">
          {SOINS_KEYS.map((s, i) => {
            const Icon = window[s.icon];
            return (
              <motion.button
                layoutId={`card-${s.id}`}
                key={s.id}
                onClick={() => setOpenId(s.id)}
                {...stagger(i * 0.05)}
                whileHover={{ y: -4 }}
                transition={{ duration: 0.35, ease: [0.22, 0.61, 0.36, 1] }}
                className="group relative flex flex-col items-start gap-5 overflow-hidden rounded-3xl border border-teal/10 bg-ivory p-6 text-start transition hover:border-brass/30 hover:shadow-[0_18px_40px_-26px_rgba(14,58,63,0.45)] lg:p-7"
                aria-label={t(`soins.${s.id}.name`)}
              >
                <span className="grid h-12 w-12 place-items-center rounded-2xl bg-sage-soft text-teal transition group-hover:bg-teal group-hover:text-ivory">
                  <Icon size={22} />
                </span>
                <div>
                  <h3 className="font-serif text-[19px] leading-snug text-teal">{t(`soins.${s.id}.name`)}</h3>
                  <p className="mt-1.5 text-[13.5px] leading-relaxed text-ink/60">{t(`soins.${s.id}.short`)}</p>
                </div>
                <span className="mt-auto inline-flex items-center gap-1.5 text-[12px] font-medium text-brass">
                  {t("soins.learnMore")} <IconArrow size={14} className="rtl:rotate-180" />
                </span>
              </motion.button>
            );
          })}
        </div>

        <AnimatePresence>
          {open && (
            <motion.div
              className="fixed inset-0 z-50 flex items-center justify-center p-4"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setOpenId(null)}
            >
              <div className="absolute inset-0 bg-teal-deep/60 backdrop-blur-sm" />
              <motion.div
                layoutId={`card-${open.id}`}
                className="relative w-full max-w-xl rounded-3xl bg-ivory p-8 shadow-2xl"
                onClick={(e) => e.stopPropagation()}
                transition={{ duration: 0.4, ease: [0.22, 0.61, 0.36, 1] }}
              >
                <span className="grid h-12 w-12 place-items-center rounded-2xl bg-sage-soft text-teal">
                  <OpenIcon size={22} />
                </span>
                <h3 className="mt-5 font-serif text-3xl text-teal">{t(`soins.${open.id}.name`)}</h3>
                <p className="mt-4 leading-relaxed text-ink/75">{t(`soins.${open.id}.long`)}</p>
                <div className="mt-6 flex items-center justify-between">
                  <PrimaryBtn href="#contact">{t("soins.askAdvice")}</PrimaryBtn>
                  <button
                    onClick={() => setOpenId(null)}
                    className="grid h-10 w-10 place-items-center rounded-full border border-teal/15 text-teal"
                    aria-label={t("soins.close")}
                  >
                    <IconClose size={18} />
                  </button>
                </div>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </section>
  );
}

// -------------------------- Technologie --------------------------
function Tech() {
  const t = useT();
  const items = [
    { icon: IconScan, title: t("tech.item1.title"), text: t("tech.item1.text") },
    { icon: IconShield, title: t("tech.item2.title"), text: t("tech.item2.text") },
    { icon: IconCpu, title: t("tech.item3.title"), text: t("tech.item3.text") },
  ];
  return (
    <section id="tech" className="relative overflow-hidden bg-teal py-24 text-ivory lg:py-32">
      <div className="grain absolute inset-0 opacity-30" aria-hidden="true" />
      <div className="relative mx-auto max-w-7xl px-5 lg:px-10">
        <motion.div {...fadeUp}>
          <SectionLabel dark>{t("tech.eyebrow")}</SectionLabel>
          <h2 className="mt-5 max-w-3xl font-serif text-4xl leading-[1.05] tracking-tight sm:text-5xl">
            {t("tech.title")}
          </h2>
        </motion.div>

        <div className="mt-16 grid gap-6 md:grid-cols-3">
          {items.map((it, i) => {
            const Icon = it.icon;
            return (
              <motion.div
                key={i}
                {...stagger(i * 0.08)}
                className="rounded-3xl border border-ivory/10 bg-ivory/[0.04] p-7 backdrop-blur"
              >
                <span className="grid h-12 w-12 place-items-center rounded-2xl bg-brass/15 text-brass">
                  <Icon size={22} />
                </span>
                <h3 className="mt-6 font-serif text-2xl leading-snug">{it.title}</h3>
                <p className="mt-3 text-[14.5px] leading-relaxed text-ivory/70">{it.text}</p>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// -------------------------- Avant / Après --------------------------
const CLINICAL_CASES = [
  {
    key: "case1",
    before: "assets/clinical/web/case-01-before.jpg",
    after: "assets/clinical/web/case-01-after.jpg",
  },
  {
    key: "case2",
    before: "assets/clinical/web/case-02-before.jpg",
    after: "assets/clinical/web/case-02-after.jpg",
  },
  {
    key: "case3",
    before: "assets/clinical/web/case-03-before.jpg",
    after: "assets/clinical/web/case-03-after.jpg",
  },
];

function ClinicalPhoto({ src, alt, label, tone, onOpen, eager = false }) {
  return (
    <button
      type="button"
      onClick={onOpen}
      className="group relative block aspect-[4/3] w-full overflow-hidden bg-teal-deep text-start focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brass"
      aria-label={`${label} — ${alt}`}
    >
      <img
        src={src}
        alt={alt}
        loading={eager ? "eager" : "lazy"}
        decoding="async"
        className="h-full w-full object-contain transition duration-700 ease-out group-hover:scale-[1.015]"
      />
      <span className={`absolute top-4 rounded-full px-3 py-1.5 text-[10px] font-medium uppercase tracking-[0.2em] text-ivory shadow-sm backdrop-blur ${tone === "before" ? "left-4 bg-ink/65 rtl:left-auto rtl:right-4" : "right-4 bg-brass/90 rtl:right-auto rtl:left-4"}`}>
        {label}
      </span>
      <span className="absolute bottom-4 right-4 grid h-10 w-10 place-items-center rounded-full border border-ivory/30 bg-ink/45 text-ivory opacity-0 backdrop-blur transition group-hover:opacity-100 group-focus-visible:opacity-100 rtl:right-auto rtl:left-4">
        <IconExpand size={17} />
      </span>
    </button>
  );
}

function BeforeAfter() {
  const t = useT();
  const [idx, setIdx] = React.useState(0);
  const [mobilePhase, setMobilePhase] = React.useState("before");
  const [lightboxPhase, setLightboxPhase] = React.useState(null);
  const activeCase = CLINICAL_CASES[idx];

  React.useEffect(() => {
    if (!lightboxPhase) return undefined;
    const previousOverflow = document.body.style.overflow;
    const onKeyDown = (event) => {
      if (event.key === "Escape") setLightboxPhase(null);
      if (event.key === "ArrowLeft") setLightboxPhase("before");
      if (event.key === "ArrowRight") setLightboxPhase("after");
    };
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKeyDown);
    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener("keydown", onKeyDown);
    };
  }, [lightboxPhase]);

  const selectCase = (nextIndex) => {
    setIdx(nextIndex);
    setMobilePhase("before");
  };

  return (
    <section id="avant-apres" className="relative overflow-hidden bg-sage-soft/35 py-24 lg:py-32">
      <div className="grain absolute inset-0 opacity-35" aria-hidden="true" />
      <div className="relative mx-auto max-w-7xl px-5 lg:px-10">
        <motion.div {...fadeUp} className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <SectionLabel>{t("ba.eyebrow")}</SectionLabel>
            <h2 className="mt-5 max-w-2xl font-serif text-4xl leading-[1.05] tracking-tight text-teal sm:text-5xl">
              {t("ba.title")}
            </h2>
          </div>
          <p className="max-w-sm text-[14.5px] leading-relaxed text-ink/65">{t("ba.intro")}</p>
        </motion.div>

        <motion.div {...fadeUp} className="mt-12 overflow-hidden rounded-[28px] border border-teal/10 bg-ivory shadow-[0_30px_80px_-55px_rgba(7,26,43,0.65)]">
          <div className="flex flex-col gap-4 border-b border-teal/10 px-5 py-5 sm:flex-row sm:items-center sm:justify-between sm:px-7">
            <div className="flex items-center gap-4">
              <span className="grid h-11 w-11 place-items-center rounded-full bg-teal text-brass">
                <IconSparkle size={17} />
              </span>
              <div>
                <div className="font-serif text-xl text-teal">{t(`ba.${activeCase.key}.label`)}</div>
                <div className="mt-0.5 text-[12.5px] text-ink/55">{t(`ba.${activeCase.key}.desc`)}</div>
              </div>
            </div>

            <div className="flex rounded-full border border-teal/10 bg-sage-soft/70 p-1 sm:hidden" role="tablist" aria-label={t("ba.mobileTabs")}>
              {["before", "after"].map((phase) => (
                <button
                  key={phase}
                  type="button"
                  role="tab"
                  aria-selected={mobilePhase === phase}
                  onClick={() => setMobilePhase(phase)}
                  className={`flex-1 rounded-full px-5 py-2 text-[11px] font-medium uppercase tracking-[0.18em] transition ${mobilePhase === phase ? "bg-teal text-ivory shadow-sm" : "text-teal/65"}`}
                >
                  {t(`ba.${phase}`)}
                </button>
              ))}
            </div>
          </div>

          <div className="hidden grid-cols-2 divide-x divide-ivory/20 sm:grid rtl:divide-x-reverse">
            <ClinicalPhoto
              src={activeCase.before}
              alt={t(`ba.${activeCase.key}.beforeAlt`)}
              label={t("ba.before")}
              tone="before"
              onOpen={() => setLightboxPhase("before")}
              eager={idx === 0}
            />
            <ClinicalPhoto
              src={activeCase.after}
              alt={t(`ba.${activeCase.key}.afterAlt`)}
              label={t("ba.after")}
              tone="after"
              onOpen={() => setLightboxPhase("after")}
              eager={idx === 0}
            />
          </div>

          <div className="sm:hidden">
            <ClinicalPhoto
              src={activeCase[mobilePhase]}
              alt={t(`ba.${activeCase.key}.${mobilePhase}Alt`)}
              label={t(`ba.${mobilePhase}`)}
              tone={mobilePhase}
              onOpen={() => setLightboxPhase(mobilePhase)}
              eager={idx === 0}
            />
          </div>
        </motion.div>

        <motion.div {...fadeUp} className="mt-6 grid grid-cols-3 gap-2.5 sm:gap-4">
          {CLINICAL_CASES.map((clinicalCase, caseIndex) => (
            <button
              key={clinicalCase.key}
              type="button"
              onClick={() => selectCase(caseIndex)}
              aria-label={`${t("ba.thumbLabel")} — ${t(`ba.${clinicalCase.key}.label`)}`}
              aria-pressed={idx === caseIndex}
              className={`group overflow-hidden rounded-2xl border bg-ivory text-start transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brass ${idx === caseIndex ? "border-brass shadow-[0_12px_35px_-24px_rgba(7,26,43,0.75)] ring-2 ring-brass/20" : "border-teal/10 opacity-65 hover:opacity-100"}`}
            >
              <span className="grid h-16 grid-cols-2 overflow-hidden bg-teal-deep sm:h-24">
                <img src={clinicalCase.before} alt="" loading="lazy" className="h-full w-full object-cover" />
                <img src={clinicalCase.after} alt="" loading="lazy" className="h-full w-full object-cover" />
              </span>
              <span className="flex items-center justify-between gap-2 px-3 py-2.5 sm:px-4 sm:py-3">
                <span className="font-serif text-xs text-teal sm:text-base">{t(`ba.${clinicalCase.key}.label`)}</span>
                <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${idx === caseIndex ? "bg-brass" : "bg-teal/20"}`} />
              </span>
            </button>
          ))}
        </motion.div>

        <motion.div {...fadeUp} className="mt-7 flex items-start gap-3 rounded-2xl border border-teal/10 bg-ivory/65 px-5 py-4 text-[12.5px] leading-relaxed text-ink/60">
          <IconShield size={18} className="mt-0.5 shrink-0 text-brass" />
          <p>{t("ba.disclaimer")}</p>
        </motion.div>
      </div>

      <AnimatePresence>
        {lightboxPhase && (
          <motion.div
            className="fixed inset-0 z-[100] flex flex-col bg-teal-deep/95 p-4 text-ivory backdrop-blur-sm sm:p-8"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            role="dialog"
            aria-modal="true"
            aria-label={t("ba.lightboxLabel")}
            onClick={() => setLightboxPhase(null)}
          >
            <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 pb-4" onClick={(event) => event.stopPropagation()}>
              <div>
                <div className="text-[10px] uppercase tracking-[0.24em] text-brass">{t(`ba.${lightboxPhase}`)}</div>
                <div className="mt-1 font-serif text-xl">{t(`ba.${activeCase.key}.label`)}</div>
              </div>
              <button
                type="button"
                onClick={() => setLightboxPhase(null)}
                className="grid h-11 w-11 place-items-center rounded-full border border-ivory/20 transition hover:bg-ivory hover:text-teal"
                aria-label={t("ba.close")}
              >
                <IconClose size={19} />
              </button>
            </div>

            <motion.div
              key={`${activeCase.key}-${lightboxPhase}`}
              className="mx-auto flex min-h-0 w-full max-w-7xl flex-1 items-center justify-center"
              initial={{ opacity: 0, scale: 0.985 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.25 }}
              onClick={(event) => event.stopPropagation()}
            >
              <img
                src={activeCase[lightboxPhase]}
                alt={t(`ba.${activeCase.key}.${lightboxPhase}Alt`)}
                className="max-h-full max-w-full rounded-2xl object-contain shadow-2xl"
              />
            </motion.div>

            <div className="mx-auto flex w-full max-w-7xl justify-center gap-2 pt-4" onClick={(event) => event.stopPropagation()}>
              {["before", "after"].map((phase) => (
                <button
                  key={phase}
                  type="button"
                  onClick={() => setLightboxPhase(phase)}
                  className={`rounded-full px-5 py-2.5 text-[11px] font-medium uppercase tracking-[0.18em] transition ${lightboxPhase === phase ? "bg-brass text-ivory" : "border border-ivory/20 text-ivory/65 hover:text-ivory"}`}
                >
                  {t(`ba.${phase}`)}
                </button>
              ))}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  );
}

// -------------------------- Témoignages --------------------------
const REVIEW_KEYS = ["r1", "r2", "r3", "r4"];

function Testimonials() {
  const t = useT();
  return (
    <section id="avis" className="bg-sage-soft/50 py-24 lg:py-32">
      <div className="mx-auto max-w-7xl px-5 lg:px-10">
        <motion.div {...fadeUp} className="flex items-end justify-between gap-6">
          <div>
            <SectionLabel>{t("reviews.eyebrow")}</SectionLabel>
            <h2 className="mt-5 max-w-2xl font-serif text-4xl leading-[1.05] tracking-tight text-teal sm:text-5xl">
              {t("reviews.title")}
            </h2>
          </div>
          <div className="hidden items-center gap-2 sm:flex">
            <IconSparkle size={18} className="text-brass" />
          <img src={SITE.logo} alt={t("header.subtitle")} className="h-10 w-auto max-w-[170px] object-contain" />
            <span className="text-[12px] text-ink/60">{t("reviews.rating")}</span>
          </div>
        </motion.div>

        <div className="hide-scrollbar mt-12 flex snap-x snap-mandatory gap-5 overflow-x-auto pb-3 sm:gap-6">
          {REVIEW_KEYS.map((r, i) => (
            <motion.article
              key={r}
              {...stagger(i * 0.06)}
              className="flex w-[78%] min-w-[78%] snap-start flex-col rounded-3xl border border-teal/10 bg-ivory p-7 sm:w-[44%] sm:min-w-[44%] lg:w-[27%] lg:min-w-[27%]"
            >
              <div className="flex items-center justify-between">
                <div className="flex gap-0.5 text-brass">
                  {[...Array(3)].map((_, j) => <IconSparkle key={j} size={14} />)}
                </div>
                <span className="inline-flex items-center gap-1.5 rounded-full bg-sage-soft px-2.5 py-1 text-[10px] uppercase tracking-widest text-teal">
                  Elite Dental Care
                </span>
              </div>
              <p className="mt-5 font-serif text-[17px] italic leading-relaxed text-teal">&laquo;&nbsp;{t(`reviews.${r}.quote`)}&nbsp;&raquo;</p>
              <div className="mt-6 border-t border-teal/10 pt-4 text-[13px]">
                <div className="font-medium text-teal">{t(`reviews.${r}.name`)}</div>
                <div className="text-ink/55">{t(`reviews.${r}.treatment`)}</div>
              </div>
            </motion.article>
          ))}
        </div>
      </div>
    </section>
  );
}

// -------------------------- FAQ --------------------------
const FAQ_KEYS = [1, 2, 3, 4, 5, 6];

function FAQ() {
  const t = useT();
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="mx-auto max-w-5xl px-5 py-24 lg:px-10 lg:py-32">
      <motion.div {...fadeUp}>
        <SectionLabel>{t("faq.eyebrow")}</SectionLabel>
        <h2 className="mt-5 max-w-3xl font-serif text-4xl leading-[1.05] tracking-tight text-teal sm:text-5xl">
          {t("faq.title")}
        </h2>
      </motion.div>

      <motion.div {...fadeUp} className="mt-12 divide-y divide-teal/10 border-y border-teal/10">
        {FAQ_KEYS.map((n, i) => {
          const isOpen = open === i;
          return (
            <div key={n}>
              <button
                onClick={() => setOpen(isOpen ? -1 : i)}
                aria-expanded={isOpen}
                className="flex w-full items-center justify-between gap-6 py-6 text-start transition hover:text-teal"
              >
                <span className="font-serif text-[20px] leading-snug text-teal sm:text-2xl">{t(`faq.q${n}`)}</span>
                <motion.span
                  animate={{ rotate: isOpen ? 180 : 0 }}
                  transition={{ duration: 0.4, ease: [0.22, 0.61, 0.36, 1] }}
                  className="grid h-9 w-9 shrink-0 place-items-center rounded-full border border-teal/15 text-teal"
                >
                  <IconChevron size={16} />
                </motion.span>
              </button>
              <AnimatePresence initial={false}>
                {isOpen && (
                  <motion.div
                    initial={{ height: 0, opacity: 0 }}
                    animate={{ height: "auto", opacity: 1 }}
                    exit={{ height: 0, opacity: 0 }}
                    transition={{ duration: 0.45, ease: [0.22, 0.61, 0.36, 1] }}
                    className="overflow-hidden"
                  >
                    <p className="pb-7 pe-12 text-[15px] leading-relaxed text-ink/70">{t(`faq.a${n}`)}</p>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          );
        })}
      </motion.div>
    </section>
  );
}

// -------------------------- Localisation --------------------------
function MapIllustration() {
  return (
    <svg viewBox="0 0 600 480" className="h-full w-full" aria-hidden="true" preserveAspectRatio="xMidYMid slice">
      <rect width="600" height="480" fill="#EEE8DC" />
      <rect x="40" y="60" width="180" height="120" rx="6" fill="#D8D2C2" />
      <rect x="240" y="40" width="140" height="100" rx="6" fill="#D9E3DC" />
      <rect x="400" y="80" width="160" height="160" rx="6" fill="#D8D2C2" />
      <rect x="60" y="220" width="220" height="180" rx="6" fill="#D9E3DC" />
      <rect x="320" y="270" width="240" height="170" rx="6" fill="#D8D2C2" />
      <path d="M0 200 L600 200" stroke="#F8F4EA" strokeWidth="14" />
      <path d="M0 250 L600 250" stroke="#F8F4EA" strokeWidth="3" strokeDasharray="6 6" />
      <path d="M300 0 L300 480" stroke="#F8F4EA" strokeWidth="14" />
      <path d="M300 0 L300 480" stroke="#F8F4EA" strokeWidth="3" strokeDasharray="6 6" />
      <path d="M0 60 Q200 90 600 50" stroke="#F8F4EA" strokeWidth="6" fill="none" opacity="0.7" />
      <g transform="translate(300 220)">
        <circle r="44" fill="#102E4A" opacity="0.12" />
        <circle r="26" fill="#102E4A" opacity="0.18" />
        <path d="M0 -34 C18 -34 30 -22 30 -6 C30 14 0 38 0 38 C0 38 -30 14 -30 -6 C-30 -22 -18 -34 0 -34Z" fill="#102E4A" />
        <circle cy="-8" r="9" fill="#A98258" />
      </g>
    </svg>
  );
}

function Localisation() {
  const t = useT();
  const hours = [
    [t("loc.hours.weekdays"), t("loc.hours.weekdaysVal")],
    [t("loc.hours.sat"), t("loc.hours.satVal")],
    [t("loc.hours.sun"), t("loc.hours.sunVal")],
  ];
  return (
    <section id="contact" className="mx-auto max-w-7xl px-5 py-24 lg:px-10 lg:py-32">
      <motion.div {...fadeUp}>
        <SectionLabel>{t("loc.eyebrow")}</SectionLabel>
        <h2 className="mt-5 max-w-3xl font-serif text-4xl leading-[1.05] tracking-tight text-teal sm:text-5xl">
          {t("loc.title")}
        </h2>
      </motion.div>

      <div className="mt-14 grid gap-8 lg:grid-cols-[1fr_1.2fr] lg:gap-12">
        <motion.div {...fadeUp} className="rounded-3xl border border-teal/10 bg-ivory p-8 lg:p-10">
          <div className="text-[11px] uppercase tracking-[0.28em] text-teal/70">{t("loc.addressLabel")}</div>
          <p className="mt-3 font-serif text-2xl leading-snug text-teal">
            {t("loc.addressLine1")}<br />{t("loc.addressLine2")}
          </p>

          <div className="mt-8 flex items-center gap-2 text-[11px] uppercase tracking-[0.28em] text-teal/70">
            <IconClock size={14} /> {t("loc.hoursLabel")}
          </div>
          <dl className="mt-4 divide-y divide-teal/10 text-[14.5px]">
            {hours.map(([k, v]) => (
              <div key={k} className="flex items-center justify-between py-3">
                <dt className="text-ink/70">{k}</dt>
                <dd className="text-teal">{v}</dd>
              </div>
            ))}
          </dl>

          <div className="mt-8 grid grid-cols-2 gap-3 text-[13px]">
            <div className="rounded-2xl bg-sage-soft p-4 leading-snug text-teal">
              <div className="text-[10px] uppercase tracking-widest text-teal/70">{t("loc.parking")}</div>
              <div className="mt-1.5">{t("loc.parkingVal")}</div>
            </div>
            <div className="rounded-2xl bg-sage-soft p-4 leading-snug text-teal">
              <div className="text-[10px] uppercase tracking-widest text-teal/70">{t("loc.transport")}</div>
              <div className="mt-1.5">{t("loc.transportVal")}</div>
            </div>
          </div>

          <div className="mt-8 flex flex-wrap gap-3">
            <PrimaryBtn href={SITE.phoneHref}><IconPhone size={16} /> {t("header.phone")}</PrimaryBtn>
            <GhostBtn href={SITE.emailHref}><IconMail size={16} /> {t("loc.writeUs")}</GhostBtn>
          </div>
        </motion.div>

        <motion.div {...fadeUp} className="relative overflow-hidden rounded-3xl border border-teal/10">
          <div className="aspect-[5/4] w-full lg:aspect-auto lg:h-full lg:min-h-[520px]">
            <iframe
              title={t("loc.pinTitle")}
              src={SITE.mapsEmbed}
              className="h-full w-full border-0"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            />
          </div>
          <div className="absolute bottom-5 left-5 right-5 rounded-2xl bg-ivory/95 p-4 backdrop-blur sm:right-auto sm:max-w-sm rtl:sm:right-5 rtl:sm:left-auto">
            <a href={SITE.mapsHref} target="_blank" rel="noopener noreferrer" className="flex items-start gap-3">
              <div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-teal text-ivory">
                <IconMap size={18} />
              </div>
              <div className="leading-tight">
                <div className="font-serif text-lg text-teal">{t("loc.pinTitle")}</div>
                <div className="text-[12.5px] text-ink/60">{t("loc.pinSub")}</div>
              </div>
            </a>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

// -------------------------- Final CTA --------------------------
function FinalCTA() {
  const t = useT();
  return (
    <section className="relative overflow-hidden bg-brass">
      <div className="grain absolute inset-0 opacity-25" aria-hidden="true" />
      <div className="relative mx-auto max-w-6xl px-5 py-24 text-center lg:px-10 lg:py-32">
        <motion.div {...fadeUp} className="flex justify-center">
          <SectionLabel dark>{t("cta.eyebrow")}</SectionLabel>
        </motion.div>
        <motion.h2 {...fadeUp} className="mx-auto mt-6 max-w-3xl font-serif text-5xl leading-[1.02] tracking-tight text-ivory sm:text-6xl lg:text-7xl">
          {t("cta.title1")} <em className="text-teal" style={{ fontStyle: "italic" }}>{t("cta.titleEm")}</em> {t("cta.title2")}
        </motion.h2>
        <motion.p {...fadeUp} className="mx-auto mt-6 max-w-xl text-[16px] leading-relaxed text-ivory/85">
          {t("cta.body")}
        </motion.p>

        <motion.div {...fadeUp} className="mt-10 grid gap-3 sm:grid-cols-3 sm:gap-4">
          {[
            { label: t("cta.phone"), sub: t("cta.phoneSub"), icon: IconPhone, href: SITE.phoneHref },
            { label: t("cta.whatsapp"), sub: t("cta.whatsappSub"), icon: IconWhatsApp, href: SITE.whatsappHref },
            { label: t("cta.form"), sub: t("cta.formSub"), icon: IconArrow, href: `${SITE.emailHref}?subject=Demande%20de%20rendez-vous%20-%20Elite%20Dental%20Care` },
          ].map((c, i) => {
            const Icon = c.icon;
            return (
              <a
                key={i}
                href={c.href}
                className="group flex items-center justify-between gap-4 rounded-2xl bg-teal px-6 py-5 text-start text-ivory transition hover:bg-teal-deep"
              >
                <div>
                  <div className="font-serif text-xl">{c.label}</div>
                  <div className="text-[12.5px] text-ivory/70">{c.sub}</div>
                </div>
                <span className="grid h-10 w-10 place-items-center rounded-full bg-ivory/10 transition group-hover:bg-brass">
                  <Icon size={18} className={c.icon === IconArrow ? "rtl:rotate-180" : ""} />
                </span>
              </a>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
}

// -------------------------- Footer --------------------------
function Footer() {
  const t = useT();
  const copyrightParts = t("footer.copyright").split("Vctrum.ca");
  const navItems = [
    [t("nav.cabinet"), "#cabinet"],
    [t("nav.soins"), "#soins"],
    [t("nav.results"), "#avant-apres"],
    [t("nav.tech"), "#tech"],
    [t("nav.gallery"), "#cabinet-photos"],
    [t("nav.reviews"), "#avis"],
    [t("nav.faq"), "#faq"],
    [t("nav.contact"), "#contact"],
  ];
  return (
    <footer className="border-t border-teal/10 bg-ivory">
      <div className="mx-auto max-w-7xl px-5 py-16 lg:px-10">
        <div className="grid gap-10 lg:grid-cols-3 lg:gap-16">
          <div>
            <img
              src={SITE.logo}
              alt={`${t("header.subtitle")} — ${t("header.name")}`}
              className="h-16 w-auto max-w-[280px] object-contain"
            />
            <p className="mt-5 max-w-sm text-[13.5px] leading-relaxed text-ink/65">{t("footer.about")}</p>
          </div>

          <div>
            <div className="text-[11px] uppercase tracking-[0.28em] text-teal/70">{t("footer.navLabel")}</div>
            <ul className="mt-5 grid grid-cols-2 gap-y-2.5 text-[13.5px] text-ink/70">
              {navItems.map(([l, h]) => (
                <li key={h}><a href={h} className="hover:text-teal">{l}</a></li>
              ))}
            </ul>
          </div>

          <div>
            <div className="text-[11px] uppercase tracking-[0.28em] text-teal/70">{t("footer.legalLabel")}</div>
            <ul className="mt-5 space-y-2.5 text-[13.5px] text-ink/70">
              <li>{t("footer.legal1")}</li>
              <li>{t("footer.legal2")}</li>
              <li><a href="#" className="hover:text-teal">{t("footer.legalLinks")}</a> · <a href="#" className="hover:text-teal">{t("footer.privacy")}</a></li>
            </ul>
            <div className="mt-6 text-[11px] uppercase tracking-[0.28em] text-teal/70">{t("footer.hoursLabel")}</div>
            <p className="mt-3 text-[13.5px] text-ink/70">{t("footer.hoursVal")}<br />{t("footer.hoursVal2")}</p>
          </div>
        </div>

        <div className="mt-14 flex flex-col items-start justify-between gap-4 border-t border-teal/10 pt-6 text-[12px] text-ink/55 sm:flex-row sm:items-center">
          <span>
            {copyrightParts[0]}
            <a href={SITE.vctrumHref} target="_blank" rel="noopener noreferrer" className="font-medium text-teal hover:underline">Vctrum.ca</a>
            {copyrightParts[1] || ""}
          </span>
          <div className="flex items-center gap-2">
            <a href={SITE.instagramHref} target="_blank" rel="noopener noreferrer" aria-label="Instagram Elite Dental Care" className="grid h-9 w-9 place-items-center rounded-full border border-teal/15 text-teal hover:bg-teal hover:text-ivory"><IconInstagram size={16} /></a>
            <a href={SITE.linkedinHref} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn Sara Moustahfid" className="grid h-9 w-9 place-items-center rounded-full border border-teal/15 text-teal hover:bg-teal hover:text-ivory"><IconLinkedIn size={16} /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// -------------------------- Floating UI --------------------------
function WhatsAppBubble() {
  const t = useT();
  return (
    <a
      href={SITE.whatsappHref}
      aria-label={t("whatsapp.aria")}
      className="fixed bottom-6 right-5 z-40 grid h-14 w-14 place-items-center rounded-full bg-[#25D366] text-white shadow-[0_14px_30px_-12px_rgba(37,211,102,0.6)] transition hover:scale-105 rtl:right-auto rtl:left-5"
    >
      <IconWhatsApp size={26} />
    </a>
  );
}

function MobileRdvPill() {
  const t = useT();
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > window.innerHeight * 0.7);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <AnimatePresence>
      {show && (
        <motion.a
          href="#contact"
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 30 }}
          transition={{ duration: 0.35, ease: [0.22, 0.61, 0.36, 1] }}
          className="fixed bottom-6 left-1/2 z-40 inline-flex -translate-x-1/2 items-center gap-2 rounded-full bg-brass px-5 py-3 text-[13px] font-medium text-ivory shadow-[0_14px_30px_-12px_rgba(184,153,104,0.7)] sm:hidden"
        >
          {t("mobile.takeRdv")} <IconArrow size={14} className="rtl:rotate-180" />
        </motion.a>
      )}
    </AnimatePresence>
  );
}

function MobileMenu({ open, onClose }) {
  const t = useT();
  const nav = [
    [t("nav.cabinet"), "#cabinet"],
    [t("nav.soins"), "#soins"],
    [t("nav.results"), "#avant-apres"],
    [t("nav.tech"), "#tech"],
    [t("nav.reviews"), "#avis"],
    [t("nav.contact"), "#contact"],
  ];
  return (
    <AnimatePresence>
      {open && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-50 bg-ivory"
        >
          <div className="flex items-center justify-between border-b border-teal/10 px-5 py-4">
            <span className="font-serif text-teal">{t("mobile.menu")}</span>
            <div className="flex items-center gap-3">
              <LangSwitcher compact />
              <button onClick={onClose} aria-label={t("header.menuClose")} className="grid h-10 w-10 place-items-center rounded-full border border-teal/15 text-teal">
                <IconClose size={20} />
              </button>
            </div>
          </div>
          <nav className="flex flex-col gap-1 px-5 py-8">
            {nav.map(([l, h]) => (
              <a key={h} href={h} onClick={onClose} className="border-b border-teal/10 py-4 font-serif text-3xl text-teal">{l}</a>
            ))}
            <PrimaryBtn href="#contact" className="mt-8 self-start" onClick={onClose}>{t("header.book")}</PrimaryBtn>
          </nav>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

Object.assign(window, {
  SmileArc, Header, Hero, About, CabinetShowcase, Soins, Tech, BeforeAfter,
  Testimonials, FAQ, Localisation, FinalCTA, Footer,
  WhatsAppBubble, MobileRdvPill, MobileMenu, LangSwitcher,
});