// 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;

// -------------------------- 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="#0E3A3F"
        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.tech"), "#tech"],
    [t("nav.gallery"), "#avant-apres"],
    [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 gap-2.5">
          <span className="grid h-9 w-9 place-items-center rounded-full bg-teal text-ivory">
            <span className="font-serif text-base leading-none">Y</span>
          </span>
          <span className="hidden flex-col leading-tight sm:flex">
            <span className="font-serif text-[15px] tracking-tight text-teal">{t("header.name")}</span>
            <span className="text-[10px] uppercase tracking-[0.28em] text-ink/55">{t("header.subtitle")}</span>
          </span>
        </a>

        <nav aria-label="Navigation principale" className="hidden items-center gap-7 text-[13px] text-ink/75 lg:flex">
          {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="tel:+212524000000" 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="#E2EAE3" />
            <stop offset="100%" stopColor="#C9D6CE" stopOpacity="0" />
          </radialGradient>
          <linearGradient id="brass" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#D4B98A" />
            <stop offset="100%" stopColor="#B89968" />
          </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="#B89968" 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="#0E3A3F" 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="#D4B98A" />
          <stop offset="100%" stopColor="#B89968" />
        </linearGradient>
        <linearGradient id="tealFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#13494F" />
          <stop offset="100%" stopColor="#0A2A2E" />
        </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="#0E3A3F"
        opacity="0.65"
      />
      <path d="M70 70c8-6 18-6 24 2" stroke="#FAF7F2" 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-sage to-sage-soft">
            <svg viewBox="0 0 400 500" className="absolute inset-0 h-full w-full" aria-hidden="true">
              <defs>
                <linearGradient id="portraitBg" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#C9D6CE" />
                  <stop offset="100%" stopColor="#0E3A3F" stopOpacity="0.35" />
                </linearGradient>
              </defs>
              <rect width="400" height="500" fill="url(#portraitBg)" />
              <circle cx="200" cy="190" r="78" fill="#0E3A3F" opacity="0.7" />
              <path d="M80 500c0-70 54-120 120-120s120 50 120 120z" fill="#0E3A3F" opacity="0.7" />
            </svg>
            <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">YEA</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>
  );
}

// -------------------------- 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 CASE_KEYS = ["case1", "case2", "case3"];

function SmileShape({ tone = "before" }) {
  const before = (<><stop offset="0%" stopColor="#E7DDC9" /><stop offset="100%" stopColor="#C7B89B" /></>);
  const after = (<><stop offset="0%" stopColor="#FAF7F2" /><stop offset="100%" stopColor="#E2EAE3" /></>);
  return (
    <svg viewBox="0 0 600 400" className="h-full w-full" aria-hidden="true" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id={`bg-${tone}`} x1="0" y1="0" x2="0" y2="1">
          {tone === "before" ? before : after}
        </linearGradient>
        <linearGradient id={`tooth-${tone}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={tone === "before" ? "#D9C9A8" : "#FFFFFF"} />
          <stop offset="100%" stopColor={tone === "before" ? "#A88E66" : "#EFEAE0"} />
        </linearGradient>
      </defs>
      <rect width="600" height="400" fill={`url(#bg-${tone})`} />
      <path d="M80 200 Q300 80 520 200 Q300 360 80 200 Z" fill={tone === "before" ? "#8B4644" : "#A85A58"} opacity="0.85" />
      <path d="M120 200 Q300 130 480 200 Q300 280 120 200 Z" fill="#2A0F10" />
      {[...Array(10)].map((_, i) => {
        const x = 150 + i * 30;
        const h = tone === "before" ? 38 + ((i * 7) % 10) : 44;
        const w = tone === "before" ? 24 + ((i * 3) % 5) : 26;
        const skew = tone === "before" ? (i % 2 === 0 ? -3 : 2) : 0;
        return (
          <g key={i} transform={`rotate(${skew} ${x} 200)`}>
            <rect x={x - w / 2} y={188} width={w} height={h} rx="6" fill={`url(#tooth-${tone})`} />
          </g>
        );
      })}
      {tone === "after" && (
        <g fill="#FAF7F2">
          <path d="M420 175 l3 6 6 3 -6 3 -3 6 -3 -6 -6 -3 6 -3z" />
        </g>
      )}
    </svg>
  );
}

function BeforeAfter() {
  const t = useT();
  const { lang } = useLang();
  const [idx, setIdx] = React.useState(0);
  const [pos, setPos] = React.useState(50);
  const containerRef = React.useRef(null);

  const setFromClientX = (clientX) => {
    const rect = containerRef.current.getBoundingClientRect();
    const p = ((clientX - rect.left) / rect.width) * 100;
    setPos(Math.max(0, Math.min(100, p)));
  };

  const onPointerDown = (e) => {
    e.currentTarget.setPointerCapture(e.pointerId);
    setFromClientX(e.clientX);
  };
  const onPointerMove = (e) => {
    if (e.buttons !== 1) return;
    setFromClientX(e.clientX);
  };

  return (
    <section id="avant-apres" className="mx-auto max-w-7xl px-5 py-24 lg:px-10 lg:py-32">
      <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">
        <div
          ref={containerRef}
          onPointerDown={onPointerDown}
          onPointerMove={onPointerMove}
          className="relative aspect-[16/10] w-full select-none overflow-hidden rounded-[28px] border border-teal/10 bg-teal/5 touch-none"
          role="slider"
          aria-valuemin={0}
          aria-valuemax={100}
          aria-valuenow={Math.round(pos)}
          aria-label={t("ba.sliderLabel")}
        >
          <div className="absolute inset-0"><SmileShape tone="after" /></div>
          <div className="absolute inset-0" style={{ clipPath: `inset(0 ${100 - pos}% 0 0)` }}>
            <SmileShape tone="before" />
          </div>
          <div className="absolute left-4 top-4 rounded-full bg-ink/55 px-3 py-1 text-[11px] uppercase tracking-widest text-ivory backdrop-blur rtl:left-auto rtl:right-4">{t("ba.before")}</div>
          <div className="absolute right-4 top-4 rounded-full bg-brass px-3 py-1 text-[11px] uppercase tracking-widest text-ivory backdrop-blur rtl:right-auto rtl:left-4">{t("ba.after")}</div>

          <div className="absolute inset-y-0 w-px bg-ivory/90" style={{ left: `${pos}%` }}>
            <div className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2">
              <div className="grid h-12 w-12 place-items-center rounded-full bg-ivory text-teal shadow-[0_10px_30px_-10px_rgba(14,58,63,0.6)]">
                <div className="flex items-center gap-0.5">
                  <IconChevron size={16} style={{ transform: "rotate(90deg)" }} />
                  <IconChevron size={16} style={{ transform: "rotate(-90deg)" }} />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="mt-6 flex flex-wrap items-center justify-between gap-5">
          <div>
            <div className="font-serif text-lg text-teal">{t(`ba.${CASE_KEYS[idx]}.label`)}</div>
            <div className="text-[13.5px] text-ink/60">{t(`ba.${CASE_KEYS[idx]}.desc`)}</div>
          </div>
          <div className="flex items-center gap-2">
            {CASE_KEYS.map((c, i) => (
              <button
                key={c}
                onClick={() => { setIdx(i); setPos(50); }}
                aria-label={`${t("ba.thumbLabel")} ${i + 1}`}
                aria-pressed={idx === i}
                className={`h-14 w-20 overflow-hidden rounded-xl border transition ${idx === i ? "border-brass ring-2 ring-brass/30" : "border-teal/15 opacity-70 hover:opacity-100"}`}
              >
                <SmileShape tone={idx === i ? "after" : "before"} />
              </button>
            ))}
          </div>
        </div>
      </motion.div>
    </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">
            <IconStar size={18} className="text-brass" />
            <span className="font-serif text-2xl text-teal">4,9</span>
            <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(5)].map((_, j) => <IconStar 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">
                  <IconGoogle size={12} /> Google
                </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="#E2EAE3" />
      <rect x="40" y="60" width="180" height="120" rx="6" fill="#C9D6CE" />
      <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="#C9D6CE" />
      <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="#C9D6CE" />
      <path d="M0 200 L600 200" stroke="#FAF7F2" strokeWidth="14" />
      <path d="M0 250 L600 250" stroke="#FAF7F2" strokeWidth="3" strokeDasharray="6 6" />
      <path d="M300 0 L300 480" stroke="#FAF7F2" strokeWidth="14" />
      <path d="M300 0 L300 480" stroke="#FAF7F2" strokeWidth="3" strokeDasharray="6 6" />
      <path d="M0 60 Q200 90 600 50" stroke="#FAF7F2" strokeWidth="6" fill="none" opacity="0.7" />
      <g transform="translate(300 220)">
        <circle r="44" fill="#0E3A3F" opacity="0.12" />
        <circle r="26" fill="#0E3A3F" 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="#0E3A3F" />
        <circle cy="-8" r="9" fill="#B89968" />
      </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="tel:+212524000000"><IconPhone size={16} /> {t("header.phone")}</PrimaryBtn>
            <GhostBtn href="mailto:contact@cabinet-elamrani.ma"><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]">
            <MapIllustration />
          </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">
            <div 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>
            </div>
          </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: "tel:+212524000000" },
            { label: t("cta.whatsapp"), sub: t("cta.whatsappSub"), icon: IconWhatsApp, href: "https://wa.me/212600000000" },
            { label: t("cta.form"), sub: t("cta.formSub"), icon: IconArrow, href: "#" },
          ].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 navItems = [
    [t("nav.cabinet"), "#cabinet"],
    [t("nav.soins"), "#soins"],
    [t("nav.tech"), "#tech"],
    [t("nav.gallery"), "#avant-apres"],
    [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>
            <div className="flex items-center gap-2.5">
              <span className="grid h-9 w-9 place-items-center rounded-full bg-teal text-ivory">
                <span className="font-serif text-base leading-none">Y</span>
              </span>
              <div className="leading-tight">
                <div className="font-serif text-[15px] text-teal">{t("header.name")}</div>
                <div className="text-[10px] uppercase tracking-[0.28em] text-ink/55">{t("header.subtitle")}</div>
              </div>
            </div>
            <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>{t("footer.copyright")}</span>
          <div className="flex items-center gap-2">
            <a href="#" aria-label="Instagram" 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="#" aria-label="Facebook" className="grid h-9 w-9 place-items-center rounded-full border border-teal/15 text-teal hover:bg-teal hover:text-ivory"><IconFacebook size={16} /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// -------------------------- Floating UI --------------------------
function WhatsAppBubble() {
  const t = useT();
  return (
    <a
      href="https://wa.me/212600000000"
      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.tech"), "#tech"],
    [t("nav.gallery"), "#avant-apres"],
    [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, Soins, Tech, BeforeAfter,
  Testimonials, FAQ, Localisation, FinalCTA, Footer,
  WhatsAppBubble, MobileRdvPill, MobileMenu, LangSwitcher,
});