// Components for Aluco-LED Enseigne vitrine site
const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;

/* ----- Company info (single source of truth) ----- */
const COMPANY = {
  name: "Aluco-LED Enseigne",
  tagline: "We Make Difference",
  phone: "+216 93 990 935",
  email: "alucoled.enseigne@gmail.com",
  address: "Mornaguia, Manouba, Tunisie",
  hours: { fr: "Lun–Sam · 09:00–18:00", en: "Mon–Sat · 09:00–18:00", ar: "الإثنين–السبت · 09:00–18:00" },
  facebook: "https://www.facebook.com/alucoledtunisie",
  instagram: "https://www.instagram.com/alucoled_enseigne/",
  whatsapp: "https://wa.me/21693990935",
  yearsExp: 11,
  projectsDone: 500,
  filesProcessed: "2K",
  warrantyMonths: 12
};

/* ----- Language context ----- */
const LangContext = createContext({ lang: "fr", setLang: () => {} });
const useLang = () => useContext(LangContext);

function LangProvider({ children }) {
  const [lang, setLangState] = useState(() => {
    try { return localStorage.getItem("alucoled.lang") || "fr"; } catch (e) { return "fr"; }
  });
  const setLang = (l) => {
    setLangState(l);
    try { localStorage.setItem("alucoled.lang", l); } catch (e) {}
  };
  useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
    document.body.classList.toggle("lang-ar", lang === "ar");
  }, [lang]);
  return (
    <LangContext.Provider value={{ lang, setLang }}>
      {children}
    </LangContext.Provider>
  );
}

/* ----- Theme context ----- */
const ThemeContext = createContext({ theme: "light", setTheme: () => {}, toggleTheme: () => {} });
const useTheme = () => useContext(ThemeContext);

function ThemeProvider({ children }) {
  const [theme, setThemeState] = useState(() => {
    try { return localStorage.getItem("alucoled.theme") || "light"; } catch (e) { return "light"; }
  });
  const setTheme = (t) => {
    setThemeState(t);
    try { localStorage.setItem("alucoled.theme", t); } catch (e) {}
  };
  const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light");
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
  }, [theme]);
  return (
    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

/* ----- t() helper that picks the current language and interpolates ----- */
function useT() {
  const { lang } = useLang();
  return (key, vars) => {
    const dict = window.TRANSLATIONS[lang] || window.TRANSLATIONS.fr;
    const raw = dict[key];
    if (raw == null) return key;
    if (typeof raw !== "string") return raw; // arrays, objects, etc.
    if (!vars) return raw;
    return raw.replace(/\{(\w+)\}/g, (_, k) => vars[k] != null ? vars[k] : "");
  };
}

/* Pick a localized string from a value that may be either a plain string
   or an object { fr, en, ar }. Falls back gracefully. */
function pickLang(val, lang) {
  if (val == null) return "";
  if (typeof val === "string") return val;
  return val[lang] || val.fr || val.en || Object.values(val)[0] || "";
}

/* ----- Icons (line, monoweight) ----- */
const Icon = ({ name, size = 24, stroke = 1.5 }) => {
  const props = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: stroke,
    strokeLinecap: "round",
    strokeLinejoin: "round"
  };
  switch (name) {
    case "arrow":
      return <svg {...props}><path d="M5 12h14M13 6l6 6-6 6" /></svg>;
    case "arrow-down":
      return <svg {...props}><path d="M12 5v14M6 13l6 6 6-6" /></svg>;
    case "menu":
      return <svg {...props}><path d="M4 7h16M4 17h16" /></svg>;
    case "close":
      return <svg {...props}><path d="M6 6l12 12M18 6L6 18" /></svg>;
    case "led-letters":
      return (
        <svg {...props}>
          <path d="M3 18V6h4a3 3 0 010 6H3" />
          <path d="M11 6h6M11 12h4M11 18h6" />
          <circle cx="20" cy="18" r="1.5" fill="currentColor" stroke="none" />
        </svg>
      );
    case "lightbox":
      return (
        <svg {...props}>
          <rect x="3" y="6" width="18" height="12" rx="1" />
          <path d="M7 6V4M17 6V4M3 12h18" />
        </svg>
      );
    case "neon":
      return (
        <svg {...props}>
          <path d="M3 16c2-4 5-4 7 0s5 4 7 0M3 8c2-4 5-4 7 0" />
          <circle cx="20" cy="8" r="1" fill="currentColor" stroke="none" />
        </svg>
      );
    case "screen":
      return (
        <svg {...props}>
          <rect x="3" y="4" width="18" height="13" rx="1" />
          <path d="M8 21h8M12 17v4" />
          <path d="M7 9l3 2-3 2M13 12h4" />
        </svg>
      );
    case "facade":
      return (
        <svg {...props}>
          <path d="M3 21V8l9-5 9 5v13" />
          <path d="M9 21v-7h6v7M3 14h18" />
        </svg>
      );
    case "print":
      return (
        <svg {...props}>
          <path d="M6 9V3h12v6M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2" />
          <rect x="6" y="14" width="12" height="7" />
        </svg>
      );
    case "vehicle":
      return (
        <svg {...props}>
          <path d="M3 16V11l2-5h12l3 5v5" />
          <path d="M3 16h18M6 16v2M18 16v2" />
          <circle cx="8" cy="16" r="1.5" />
          <circle cx="16" cy="16" r="1.5" />
        </svg>
      );
    case "billboard":
      return (
        <svg {...props}>
          <rect x="2" y="4" width="20" height="11" rx="1" />
          <path d="M8 15l-2 6M16 15l2 6M10 21h4" />
        </svg>
      );
    case "phone":
      return <svg {...props}><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.36 1.9.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0122 16.92z" /></svg>;
    case "mail":
      return <svg {...props}><rect x="2" y="4" width="20" height="16" rx="2" /><path d="M22 6l-10 7L2 6" /></svg>;
    case "pin":
      return <svg {...props}><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0118 0z" /><circle cx="12" cy="10" r="3" /></svg>;
    case "check":
      return <svg {...props}><path d="M5 12l5 5L20 6" /></svg>;
    case "image":
      return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="1.5" /><path d="M21 15l-5-5L5 21" /></svg>;
    case "sun":
      return <svg {...props}><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" /></svg>;
    case "moon":
      return <svg {...props}><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" /></svg>;
    default:
      return null;
  }
};

/* ----- Nav ----- */
function Nav() {
  const t = useT();
  const { lang, setLang } = useLang();
  const { theme, toggleTheme } = useTheme();
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const closeMenu = () => setMenuOpen(false);

  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""} ${menuOpen ? "menu-open" : ""}`}>
      <div className="container nav-inner">
        <a href="#top" className="nav-brand" onClick={closeMenu}>
          <img src="assets/logo_aluco.jpg" alt="Aluco-LED" className="nav-brand-logo" />
          <div className="nav-brand-text">
            ALUCO
            <span className="dots">
              <i style={{ "--c": "var(--led-r)" }}></i>
              <i style={{ "--c": "var(--led-g)" }}></i>
              <i style={{ "--c": "var(--led-b)" }}></i>
            </span>
            <span className="nav-brand-suffix">LED</span>
          </div>
        </a>
        <div className="nav-links">
          <a href="#services">{t("nav_services")}</a>
          <a href="#projects">{t("nav_projects")}</a>
          <a href="#process">{t("nav_process")}</a>
          <a href="#materials">{t("nav_materials")}</a>
          <a href="#contact">{t("nav_contact")}</a>
        </div>
        <div className="nav-cta">
          <div className="lang-switch">
            {[{ id: "fr", l: "FR" }, { id: "en", l: "EN" }, { id: "ar", l: "AR" }].map(o => (
              <button
                key={o.id}
                className={lang === o.id ? "active" : ""}
                onClick={() => setLang(o.id)}
                aria-label={`Switch to ${o.l}`}
              >{o.l}</button>
            ))}
          </div>
          <button
            className="theme-toggle"
            onClick={toggleTheme}
            aria-label={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
          >
            <Icon name={theme === "light" ? "moon" : "sun"} size={16} />
          </button>
          <a href="#contact" className="btn btn-primary nav-devis" style={{ padding: "10px 22px" }}>
            {t("nav_devis")} <Icon name="arrow" size={14} />
          </a>
          <button
            className="menu-toggle"
            onClick={() => setMenuOpen(o => !o)}
            aria-label="Menu"
            aria-expanded={menuOpen}
          >
            <Icon name={menuOpen ? "close" : "menu"} size={18} />
          </button>
        </div>
      </div>

      <div className={`mobile-drawer ${menuOpen ? "open" : ""}`} onClick={closeMenu}>
        <div className="mobile-drawer-inner" onClick={(e) => e.stopPropagation()}>
          <a href="#services" onClick={closeMenu}>{t("nav_services")}</a>
          <a href="#projects" onClick={closeMenu}>{t("nav_projects")}</a>
          <a href="#process" onClick={closeMenu}>{t("nav_process")}</a>
          <a href="#materials" onClick={closeMenu}>{t("nav_materials")}</a>
          <a href="#contact" onClick={closeMenu}>{t("nav_contact")}</a>
          <div className="mobile-drawer-controls">
            <div className="lang-switch drawer-lang">
              {[{ id: "fr", l: "FR" }, { id: "en", l: "EN" }, { id: "ar", l: "AR" }].map(o => (
                <button
                  key={o.id}
                  className={lang === o.id ? "active" : ""}
                  onClick={() => setLang(o.id)}
                  aria-label={`Switch to ${o.l}`}
                >{o.l}</button>
              ))}
            </div>
            <button
              className="theme-toggle drawer-theme"
              onClick={toggleTheme}
              aria-label={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
            >
              <Icon name={theme === "light" ? "moon" : "sun"} size={16} />
            </button>
          </div>
          <a href="#contact" onClick={closeMenu} className="btn btn-primary mobile-drawer-cta">
            {t("nav_devis")} <Icon name="arrow" size={14} />
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ----- Hero ----- */
const HERO_SLIDES = [
  "Newers/dolcevita1.jpg",
  "Newers/concentrix1.jpg",
  "Newers/jac1.jpg",
  "Newers/fitlab1.jpeg",
  "Newers/fsegt1.jpeg",
  "Newers/medickalab1.jpeg",
  "Newers/biosafe1.jpeg",
  "Newers/agil1.jpeg",
];

function Hero() {
  const t = useT();
  const [active, setActive] = useState(0);
  const slidesCount = HERO_SLIDES.length;

  useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % slidesCount), 5500);
    return () => clearInterval(id);
  }, [slidesCount]);

  return (
    <section id="top" className="hero">
      <div className="hero-slides">
        {HERO_SLIDES.map((src, i) => (
          <div
            key={src}
            className={`hero-slide ${i === active ? "active" : ""}`}
            style={{ backgroundImage: `url("${src}")` }}
            aria-hidden="true"
          />
        ))}
      </div>
      <div className="hero-overlay" aria-hidden="true"></div>

      <span className="eyebrow hero-eyebrow">{t("hero_eyebrow", { years: COMPANY.yearsExp })}</span>

      <div className="container hero-inner">
        <div className="hero-copy">
          <h1 className="h-display">
            <span className="row">{t("hero_h1_1")}</span>
            <span className="row outline">{t("hero_h1_2")}</span>
            <span className="row">{t("hero_h1_3a")} <span className="accent-r">{t("hero_h1_3b")}</span></span>
          </h1>
          <p className="hero-sub">{t("hero_sub")}</p>
          <div className="hero-cta">
            <a href="#contact" className="btn btn-primary">
              {t("hero_cta_devis")} <Icon name="arrow" size={14} />
            </a>
            <a href="#projects" className="btn">
              {t("hero_cta_proj")}
            </a>
          </div>
        </div>
      </div>

      <div className="hero-dots" aria-label="Hero slides">
        {HERO_SLIDES.map((_, i) => (
          <button
            key={i}
            className={i === active ? "active" : ""}
            onClick={() => setActive(i)}
            aria-label={`Slide ${i + 1}`}
          />
        ))}
      </div>

      <a href="#services" className="hero-scroll" aria-label="Scroll down">
        <Icon name="arrow-down" size={18} />
      </a>
    </section>
  );
}

/* ----- Marquee ----- */
function Marquee() {
  const t = useT();
  const items = t("marquee");
  const list = Array.isArray(items) ? [...items, ...items] : [];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {list.map((s, i) => <span key={i}>{s}</span>)}
      </div>
    </div>
  );
}

/* ----- Services ----- */
const SERVICE_ICONS = [
  { icon: "led-letters", led: "r" },
  { icon: "lightbox",    led: "b" },
  { icon: "facade",      led: "y" },
  { icon: "billboard",   led: "g" },
  { icon: "print",       led: "r" },
  { icon: "neon",        led: "b" },
  { icon: "screen",      led: "g" }
];

function Services() {
  const t = useT();
  const head = t("svc_h");
  const services = t("svc");

  return (
    <section id="services" className="services">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t("svc_eyebrow")}</span>
            <h2 className="section-h" style={{ marginTop: 18 }}>
              {Array.isArray(head) && head.map((line, i) => (
                <React.Fragment key={i}>{line}{i < head.length - 1 && <br/>}</React.Fragment>
              ))}
            </h2>
          </div>
          <p className="lead">{t("svc_lead")}</p>
        </div>

        <div className="services-grid">
          {Array.isArray(services) && services.map((s, i) => (
            <div className="service" data-led={SERVICE_ICONS[i].led} key={i}>
              <span className="service-num">{String(i + 1).padStart(2, "0")} / {String(services.length).padStart(2, "0")}</span>
              <div className="service-icon">
                <Icon name={SERVICE_ICONS[i].icon} size={48} stroke={1.25} />
                <span
                  className="service-icon-dot"
                  style={{ position: "absolute", top: -2, right: -2, width: 8, height: 8, borderRadius: "50%" }}
                ></span>
              </div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <span className="service-arrow">
                {t("svc_details")} <Icon name="arrow" size={14} />
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- Projects (real photos, loaded from realisations/manifest.js) ----- */
const PROJECTS = (window.PROJECT_MANIFEST || []).map((p, i) => ({
  ...p,
  id: i,
  srcs: Array.isArray(p.srcs) && p.srcs.length ? p.srcs : (p.src ? [p.src] : []),
}));
const FILTERS = window.PROJECT_CATEGORIES || [{ id: "all", label: { fr: "Tout", en: "All", ar: "الكل" } }];
const PROJECTS_INITIAL = 6;

function Projects() {
  const t = useT();
  const { lang } = useLang();
  const [filter, setFilter] = useState("all");
  const [lightbox, setLightbox] = useState(null);
  const [photoIdx, setPhotoIdx] = useState(0);
  const [shown, setShown] = useState(PROJECTS_INITIAL);

  const counts = useMemo(() => {
    const map = { all: PROJECTS.length };
    FILTERS.forEach(f => {
      if (f.id !== "all") map[f.id] = PROJECTS.filter(p => p.cat === f.id).length;
    });
    return map;
  }, []);

  const matching = filter === "all" ? PROJECTS : PROJECTS.filter(p => p.cat === filter);
  const filtered = matching.slice(0, shown);
  const remaining = matching.length - shown;
  const hasMore = remaining > 0;
  const isExpanded = shown >= matching.length && matching.length > PROJECTS_INITIAL;

  const onFilter = (id) => { setFilter(id); setShown(PROJECTS_INITIAL); };
  const showMore = () => setShown(s => s + PROJECTS_INITIAL);
  const showLess = () => setShown(PROJECTS_INITIAL);

  const openLightbox = (p) => { setLightbox(p); setPhotoIdx(0); };
  const closeLightbox = () => setLightbox(null);
  const photoCount = lightbox ? lightbox.srcs.length : 0;
  const nextPhoto = (e) => { e && e.stopPropagation(); setPhotoIdx(i => (i + 1) % photoCount); };
  const prevPhoto = (e) => { e && e.stopPropagation(); setPhotoIdx(i => (i - 1 + photoCount) % photoCount); };

  useEffect(() => {
    if (!lightbox) return;
    const onKey = (e) => {
      if (e.key === "Escape") closeLightbox();
      else if (e.key === "ArrowRight" && photoCount > 1) nextPhoto();
      else if (e.key === "ArrowLeft"  && photoCount > 1) prevPhoto();
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [lightbox, photoCount]);

  const projHead = t("proj_h");

  return (
    <section id="projects" className="projects">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t("proj_eyebrow", { n: PROJECTS.length })}</span>
            <h2 className="section-h" style={{ marginTop: 18 }}>
              {Array.isArray(projHead) && projHead.map((line, i) => (
                <React.Fragment key={i}>{line}{i < projHead.length - 1 && <br/>}</React.Fragment>
              ))}
            </h2>
          </div>
          <p className="lead">{t("proj_lead")}</p>
        </div>

        <div className="filter-row">
          {FILTERS.map(f => (
            <button
              key={f.id}
              className={`filter-btn ${filter === f.id ? "active" : ""}`}
              onClick={() => onFilter(f.id)}
            >
              {pickLang(f.label, lang)}
              <span className="count">/ {counts[f.id] || 0}</span>
            </button>
          ))}
        </div>

        <div className="projects-grid">
          {filtered.map(p => (
            <article className="project" key={p.id} onClick={() => openLightbox(p)}>
              <div className="project-img">
                <img src={p.srcs[0]} alt={pickLang(p.title, lang)} loading="lazy" />
                {p.srcs.length > 1 && (
                  <span className="project-count" aria-label={`${p.srcs.length} photos`}>
                    <Icon name="image" size={12} /> {p.srcs.length}
                  </span>
                )}
              </div>
            </article>
          ))}
        </div>

        {(hasMore || isExpanded) && (
          <div className="projects-more">
            {hasMore ? (
              <button type="button" className="btn-more" onClick={showMore}>
                {t("proj_more")}
                <span className="more-count">{t("proj_remaining", { n: remaining })}</span>
                <Icon name="arrow-down" size={16} />
              </button>
            ) : (
              <button type="button" className="btn-more" onClick={showLess} aria-expanded="true">
                {t("proj_less")} <Icon name="arrow-down" size={16} />
              </button>
            )}
          </div>
        )}
      </div>

      {lightbox && (
        <div className="lightbox-overlay" onClick={closeLightbox}>
          <button className="lightbox-close" onClick={closeLightbox} aria-label="Close">
            <Icon name="close" size={20} />
          </button>
          <div className="lightbox-content" onClick={e => e.stopPropagation()}>
            <div className="lightbox-stage">
              <img src={lightbox.srcs[photoIdx]} alt={pickLang(lightbox.title, lang)} />
              {photoCount > 1 && (
                <>
                  <button className="lightbox-nav lightbox-prev" onClick={prevPhoto} aria-label="Previous">
                    <Icon name="arrow-down" size={20} />
                  </button>
                  <button className="lightbox-nav lightbox-next" onClick={nextPhoto} aria-label="Next">
                    <Icon name="arrow-down" size={20} />
                  </button>
                  <span className="lightbox-counter">{photoIdx + 1} / {photoCount}</span>
                </>
              )}
            </div>
            {photoCount > 1 && (
              <div className="lightbox-thumbs">
                {lightbox.srcs.map((s, i) => (
                  <button
                    key={i}
                    className={`lightbox-thumb ${i === photoIdx ? "active" : ""}`}
                    onClick={(e) => { e.stopPropagation(); setPhotoIdx(i); }}
                    aria-label={`Photo ${i + 1}`}
                  >
                    <img src={s} alt="" loading="lazy" />
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>
      )}
    </section>
  );
}

/* ----- Process ----- */
function Process() {
  const t = useT();
  const head = t("proc_h");
  const steps = t("proc_steps");
  const leds = ["r", "g", "b", "r"];

  return (
    <section id="process" className="process">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t("proc_eyebrow")}</span>
            <h2 className="section-h" style={{ marginTop: 18 }}>
              {Array.isArray(head) && head.map((line, i) => (
                <React.Fragment key={i}>{line}{i < head.length - 1 && <br/>}</React.Fragment>
              ))}
            </h2>
          </div>
          <p className="lead">{t("proc_lead")}</p>
        </div>

        <div className="process-steps">
          {Array.isArray(steps) && steps.map((s, i) => (
            <div className="process-step" key={i}>
              <div className="step-num">
                {String(i + 1).padStart(2, "0")}
                <span className={`led ${leds[i]} pulse`}></span>
              </div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- Materials ----- */
function Materials() {
  const t = useT();
  const head = t("mat_h");
  const materials = t("materials");
  const [active, setActive] = useState(0);

  if (!Array.isArray(materials)) return null;
  const m = materials[active] || materials[0];

  return (
    <section id="materials" className="materials">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t("mat_eyebrow")}</span>
            <h2 className="section-h" style={{ marginTop: 18 }}>
              {Array.isArray(head) && head.map((line, i) => (
                <React.Fragment key={i}>{line}{i < head.length - 1 && <br/>}</React.Fragment>
              ))}
            </h2>
          </div>
          <p className="lead">{t("mat_lead")}</p>
        </div>

        <div className="materials-layout">
          <div className="materials-list">
            {materials.map((mat, i) => (
              <React.Fragment key={i}>
                <div
                  className={`mat ${active === i ? "active" : ""}`}
                  onMouseEnter={() => setActive(i)}
                  onClick={() => setActive(i)}
                >
                  <span className="mat-num">M.{String(i + 1).padStart(2, "0")}</span>
                  <span className="mat-name">{mat.name}</span>
                  <span className="mat-arrow">→</span>
                </div>
                {active === i && (
                  <div className="mat-mobile-preview">
                    <div className="mat-mobile-photo">
                      <MaterialSwatch index={i} />
                    </div>
                    <p className="mat-mobile-desc">{mat.desc}</p>
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>

          <div className="mat-preview">
            <div className="mat-preview-inner" style={{ flexDirection: "column", gap: 16 }}>
              <MaterialSwatch index={active} />
              <div style={{ position: "absolute", top: 16, left: 16, fontFamily: "var(--mono)", fontSize: 10, color: "var(--gray)", letterSpacing: "0.15em" }}>
                M.{String(active + 1).padStart(2, "0")} / {String(m.name).toUpperCase()}
              </div>
              <div style={{ position: "absolute", bottom: 24, left: 24, right: 24, fontFamily: "var(--body)", fontSize: 13, color: "var(--gray-2)", letterSpacing: 0, textTransform: "none" }}>
                {m.desc}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const MATERIAL_PHOTOS = [
  "materiaux/alucobond.png",
  "materiaux/aluminuim.png",
  "materiaux/plexiglass.png",
  null, // Modules LED → SVG
  null, // Néon flex LED → SVG
  "materiaux/acier et inox.png",
  "materiaux/vinyle.png",
];

function MaterialSwatch({ index }) {
  const photo = MATERIAL_PHOTOS[index];
  if (photo) {
    return (
      <img
        key={index}
        src={encodeURI(photo)}
        alt=""
        className="mat-photo"
        loading="lazy"
      />
    );
  }
  const svgVariants = {
    3: (
      <svg key="3" viewBox="0 0 200 250" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0 }}>
        <rect width="200" height="250" fill="#0d0d0d" />
        {Array.from({ length: 14 }).map((_, r) => Array.from({ length: 11 }).map((_, c) => {
          const colors = ["#e6262a", "#1ec449", "#1f6fe6"];
          const colorIdx = (r * 11 + c) % 3;
          const lit = (r + c) % 5 === 0;
          return <circle key={`${r}-${c}`} cx={10 + c * 18} cy={10 + r * 18} r="2.6" fill={lit ? colors[colorIdx] : "#222"} style={{ filter: lit ? `drop-shadow(0 0 4px ${colors[colorIdx]})` : "none" }} />;
        }))}
      </svg>
    ),
    4: (
      <svg key="4" viewBox="0 0 200 250" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0 }}>
        <rect width="200" height="250" fill="#0d0d0d" />
        <path d="M30 60 Q100 0 170 60 T170 180 T30 180" fill="none" stroke="#e6262a" strokeWidth="6" strokeLinecap="round" style={{ filter: "drop-shadow(0 0 8px #e6262a)" }} opacity="0.9" />
        <path d="M30 60 Q100 0 170 60 T170 180 T30 180" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" opacity="0.6" />
      </svg>
    ),
  };
  return svgVariants[index] || null;
}

/* ----- Stats ----- */
function useCountUp(target, durationMs = 1400, startTrigger) {
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!startTrigger) return;
    let start;
    const step = (ts) => {
      if (!start) start = ts;
      const p = Math.min((ts - start) / durationMs, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(target * eased));
      if (p < 1) requestAnimationFrame(step);
    };
    requestAnimationFrame(step);
  }, [target, durationMs, startTrigger]);
  return val;
}

function Stats() {
  const t = useT();
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        setSeen(true);
        obs.disconnect();
      }
    }, { threshold: 0.3 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const a = useCountUp(COMPANY.projectsDone, 1400, seen);
  const b = useCountUp(COMPANY.yearsExp, 1400, seen);
  const c = useCountUp(2, 1400, seen);
  const d = useCountUp(COMPANY.warrantyMonths, 1400, seen);

  return (
    <section className="stats" ref={ref}>
      <div className="container">
        <div className="stats-grid">
          <div>
            <div className="stat-num">{a}<span className="plus">+</span></div>
            <div className="stat-label">{t("stat_proj")}</div>
          </div>
          <div>
            <div className="stat-num">{b}<span className="plus">{t("stat_years")}</span></div>
            <div className="stat-label">{t("stat_exp")}</div>
          </div>
          <div>
            <div className="stat-num">{c}<span className="plus">K</span></div>
            <div className="stat-label">{t("stat_files")}</div>
          </div>
          <div>
            <div className="stat-num">{d}<span className="plus">{t("stat_months")}</span></div>
            <div className="stat-label">{t("stat_warr")}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----- Clients (real client logos from old site) ----- */
const CLIENT_LOGOS = [
  "realisations/clients/concentrix.avif",
  "realisations/clients/MB.jpg",
  "realisations/clients/agil.jpg",
  "realisations/clients/fsegt.png",
  "realisations/clients/ixina.png",
  "realisations/clients/jac.jpg",
  "realisations/clients/rabta.jpg",
  "realisations/clients/zitouna_univ.jpg",
  "realisations/clients/1.webp",
  "realisations/clients/2.webp",
  "realisations/clients/4.webp",
  "realisations/clients/5.webp",
  "realisations/clients/6.webp",
  "realisations/clients/7.webp",
  "realisations/clients/8.webp",
  "realisations/clients/9.webp",
];

function Clients() {
  const t = useT();
  const head = t("cli_h");
  const renderLogos = (keyPrefix) =>
    CLIENT_LOGOS.map((src, i) => (
      <div className="client-logo" key={`${keyPrefix}-${i}`}>
        <img src={src} alt={`Client ${i + 1}`} loading="lazy" />
      </div>
    ));
  return (
    <section className="clients">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t("cli_eyebrow")}</span>
            <h2 className="section-h" style={{ marginTop: 18 }}>
              {Array.isArray(head) && head.map((line, i) => (
                <React.Fragment key={i}>{line}{i < head.length - 1 && <br/>}</React.Fragment>
              ))}
            </h2>
          </div>
          <p className="lead">{t("cli_lead", { n: COMPANY.projectsDone })}</p>
        </div>

        <div className="clients-marquee">
          <div className="clients-marquee-row clients-marquee-rtl">
            <div className="clients-marquee-track">
              {renderLogos("r1a")}
              {renderLogos("r1b")}
            </div>
          </div>
          <div className="clients-marquee-row clients-marquee-ltr">
            <div className="clients-marquee-track">
              {renderLogos("r2a")}
              {renderLogos("r2b")}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----- Quote / Contact ----- */
function Quote() {
  const t = useT();
  const { lang } = useLang();
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    services: [], surface: "", delay: "", name: "", company: "", email: "", phone: "", city: "", notes: ""
  });
  const [errors, setErrors] = useState({});

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const toggleService = (s) => {
    setData(d => ({
      ...d,
      services: d.services.includes(s) ? d.services.filter(x => x !== s) : [...d.services, s]
    }));
  };

  const validateStep = () => {
    const e = {};
    if (step === 0) {
      if (data.services.length === 0) e.services = t("q_s1_err");
    }
    if (step === 1) {
      if (!data.surface) e.surface = t("q_s2_err_size");
      if (!data.delay) e.delay = t("q_s2_err_delay");
    }
    if (step === 2) {
      if (!data.name.trim()) e.name = t("q_s3_err_name");
      if (!data.email.trim() || !/^\S+@\S+\.\S+$/.test(data.email)) e.email = t("q_s3_err_email");
      if (!data.phone.trim() || data.phone.replace(/\D/g, "").length < 8) e.phone = t("q_s3_err_phone");
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const buildMailto = () => {
    const subject = t("mail_subject", { name: data.name + (data.company ? ` (${data.company})` : "") });
    const lines = [
      t("mail_intro"),
      "",
      t("mail_section_client"),
      `${t("mail_lbl_name")}     : ${data.name}`,
      `${t("mail_lbl_company")}  : ${data.company || "—"}`,
      `${t("mail_lbl_email")}    : ${data.email}`,
      `${t("mail_lbl_phone")}    : ${data.phone}`,
      `${t("mail_lbl_city")}     : ${data.city || "—"}`,
      "",
      t("mail_section_project"),
      `${t("mail_lbl_services")} : ${data.services.join(", ")}`,
      `${t("mail_lbl_size")}     : ${data.surface}`,
      `${t("mail_lbl_delay")}    : ${data.delay}`,
      "",
      t("mail_section_notes"),
      data.notes || "—"
    ];
    return `mailto:${COMPANY.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(lines.join("\n"))}`;
  };

  const next = () => { if (validateStep()) setStep(s => s + 1); };
  const back = () => setStep(s => Math.max(0, s - 1));
  const submit = () => {
    if (!validateStep()) return;
    window.location.href = buildMailto();
    setStep(3);
  };

  const services = t("q_services");
  const delays = t("q_delays");

  return (
    <section id="contact" className="quote">
      <div className="container quote-grid">
        <div className="quote-copy">
          <span className="eyebrow">{t("q_eyebrow")}</span>
          <h2><span className="accent">{t("q_h_accent")}</span> {t("q_h_rest")}</h2>
          <p>{t("q_p")}</p>

          <div className="quote-contacts">
            <div className="qc">
              <span className="qc-label">{t("q_lbl_tel")}</span>
              <a className="qc-val" href={`tel:${COMPANY.phone.replace(/\s+/g, "")}`}>{COMPANY.phone}</a>
            </div>
            <div className="qc">
              <span className="qc-label">{t("q_lbl_email")}</span>
              <a className="qc-val" href={`mailto:${COMPANY.email}`}>{COMPANY.email}</a>
            </div>
            <div className="qc">
              <span className="qc-label">{t("q_lbl_addr")}</span>
              <span className="qc-val">{COMPANY.address}</span>
            </div>
            <div className="qc">
              <span className="qc-label">{t("q_lbl_hours")}</span>
              <span className="qc-val">{COMPANY.hours[lang] || COMPANY.hours.fr}</span>
            </div>
            <div className="qc">
              <span className="qc-label">{t("q_lbl_social")}</span>
              <span className="qc-val">
                <a href={COMPANY.facebook} target="_blank" rel="noopener noreferrer">Facebook</a>
                {" · "}
                <a href={COMPANY.instagram} target="_blank" rel="noopener noreferrer">Instagram</a>
                {" · "}
                <a href={COMPANY.whatsapp} target="_blank" rel="noopener noreferrer">WhatsApp</a>
              </span>
            </div>
          </div>
        </div>

        <div className="form-card">
          {step < 3 && (
            <>
              <div className="form-progress">
                {[0, 1, 2].map(i => (
                  <i key={i} className={i < step ? "done" : i === step ? "active" : ""}></i>
                ))}
              </div>
              <div className="form-step-label">{t("q_step", { i: step + 1 })}</div>
            </>
          )}

          {step === 0 && (
            <div className="form-step">
              <h3>{t("q_s1_h")}</h3>
              <div className={`field ${errors.services ? "error" : ""}`}>
                <div className="svc-chips">
                  {Array.isArray(services) && services.map(s => (
                    <button key={s} type="button"
                      className={`chip ${data.services.includes(s) ? "active" : ""}`}
                      onClick={() => toggleService(s)}
                    >{s}</button>
                  ))}
                </div>
                {errors.services && <span className="err-msg">{errors.services}</span>}
              </div>
              <div className="form-actions" style={{ justifyContent: "flex-end" }}>
                <button type="button" className="btn btn-primary" onClick={next}>
                  {t("q_next")} <Icon name="arrow" size={14} />
                </button>
              </div>
            </div>
          )}

          {step === 1 && (
            <div className="form-step">
              <h3>{t("q_s2_h")}</h3>
              <div className={`field ${errors.surface ? "error" : ""}`}>
                <label>{t("q_s2_lbl_size")}</label>
                <input type="text" placeholder={t("q_s2_ph_size")} value={data.surface} onChange={e => update("surface", e.target.value)} />
                {errors.surface && <span className="err-msg">{errors.surface}</span>}
              </div>
              <div className={`field ${errors.delay ? "error" : ""}`}>
                <label>{t("q_s2_lbl_delay")}</label>
                <div className="svc-chips">
                  {Array.isArray(delays) && delays.map(d => (
                    <button key={d} type="button"
                      className={`chip ${data.delay === d ? "active" : ""}`}
                      onClick={() => update("delay", d)}
                    >{d}</button>
                  ))}
                </div>
                {errors.delay && <span className="err-msg">{errors.delay}</span>}
              </div>
              <div className="field">
                <label>{t("q_s2_lbl_notes")}</label>
                <textarea rows="3" placeholder={t("q_s2_ph_notes")} value={data.notes} onChange={e => update("notes", e.target.value)} />
              </div>
              <div className="form-actions">
                <button type="button" className="btn" onClick={back}>{t("q_back")}</button>
                <button type="button" className="btn btn-primary" onClick={next}>{t("q_next")} <Icon name="arrow" size={14} /></button>
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="form-step">
              <h3>{t("q_s3_h")}</h3>
              <div className="field-row">
                <div className={`field ${errors.name ? "error" : ""}`}>
                  <label>{t("q_s3_lbl_name")}</label>
                  <input type="text" value={data.name} onChange={e => update("name", e.target.value)} />
                  {errors.name && <span className="err-msg">{errors.name}</span>}
                </div>
                <div className="field">
                  <label>{t("q_s3_lbl_company")}</label>
                  <input type="text" value={data.company} onChange={e => update("company", e.target.value)} />
                </div>
              </div>
              <div className="field-row">
                <div className={`field ${errors.email ? "error" : ""}`}>
                  <label>{t("q_s3_lbl_email")}</label>
                  <input type="email" value={data.email} onChange={e => update("email", e.target.value)} />
                  {errors.email && <span className="err-msg">{errors.email}</span>}
                </div>
                <div className={`field ${errors.phone ? "error" : ""}`}>
                  <label>{t("q_s3_lbl_phone")}</label>
                  <input type="tel" value={data.phone} onChange={e => update("phone", e.target.value)} />
                  {errors.phone && <span className="err-msg">{errors.phone}</span>}
                </div>
              </div>
              <div className="field">
                <label>{t("q_s3_lbl_city")}</label>
                <input type="text" value={data.city} onChange={e => update("city", e.target.value)} />
              </div>
              <div className="form-actions">
                <button type="button" className="btn" onClick={back}>{t("q_back")}</button>
                <button type="button" className="btn btn-primary" onClick={submit}>
                  {t("q_send")} <Icon name="arrow" size={14} />
                </button>
              </div>
            </div>
          )}

          {step === 3 && (
            <div className="form-success">
              <span className="led g pulse" style={{ display: "inline-block" }}></span>
              <h3>{t("q_success_h")}</h3>
              <p>{t("q_success_p", { name: (data.name.split(" ")[0] || "") })}</p>
              <p style={{ fontSize: 13, color: "var(--gray)", marginTop: 8 }}>
                {t("q_success_fallback")}
                <br/>
                <a href={`mailto:${COMPANY.email}`} style={{ color: "var(--fg)" }}>{COMPANY.email}</a>
                {" · "}
                <a href={`tel:${COMPANY.phone.replace(/\s+/g, "")}`} style={{ color: "var(--fg)" }}>{COMPANY.phone}</a>
              </p>
              <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <a className="btn btn-primary" href={buildMailto()}>
                  {t("q_resend")} <Icon name="arrow" size={14} />
                </a>
                <a className="btn" href={COMPANY.whatsapp} target="_blank" rel="noopener noreferrer">
                  WhatsApp
                </a>
                <button className="btn" onClick={() => { setStep(0); setData({ services: [], surface: "", delay: "", name: "", company: "", email: "", phone: "", city: "", notes: "" }); }}>
                  {t("q_new")}
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ----- Footer ----- */
function Footer() {
  const t = useT();
  const { lang } = useLang();
  const studio = t("foot_studio");
  const services = t("svc");
  const studioHrefs = ["#projects", "#process", "#materials", "#contact"];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <h2>
              ALUCO
              <span className="led r" style={{ marginLeft: 4 }}></span>
              <span className="led g" style={{ marginLeft: 2 }}></span>
              <span className="led b" style={{ marginLeft: 2 }}></span>
              <span style={{ marginLeft: 8 }}>LED</span>
            </h2>
            <p>{t("foot_brand_p")}</p>
            <p style={{ marginTop: 14, fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.06em", color: "var(--gray)" }}>
              {COMPANY.tagline.toUpperCase()}
            </p>
          </div>
          <div>
            <h5>{t("foot_h_services")}</h5>
            <ul>
              {Array.isArray(services) && services.slice(0, 6).map((s, i) => (
                <li key={i}><a href="#services">{s.title}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h5>{t("foot_h_studio")}</h5>
            <ul>
              {Array.isArray(studio) && studio.map((label, i) => (
                <li key={i}><a href={studioHrefs[i] || "#"}>{label}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h5>{t("foot_h_contact")}</h5>
            <ul>
              <li><a href={`tel:${COMPANY.phone.replace(/\s+/g, "")}`}>{COMPANY.phone}</a></li>
              <li><a href={`mailto:${COMPANY.email}`}>{COMPANY.email}</a></li>
              <li>{COMPANY.address}</li>
              <li>{COMPANY.hours[lang] || COMPANY.hours.fr}</li>
            </ul>
            <div style={{ marginTop: 14, display: "flex", gap: 14 }}>
              <a href={COMPANY.facebook} target="_blank" rel="noopener noreferrer">Facebook</a>
              <a href={COMPANY.instagram} target="_blank" rel="noopener noreferrer">Instagram</a>
              <a href={COMPANY.whatsapp} target="_blank" rel="noopener noreferrer">WhatsApp</a>
            </div>
          </div>
        </div>
        <div className="footer-bot">
          <span>{t("foot_copy", { year: new Date().getFullYear(), name: COMPANY.name })}</span>
          <span>{t("foot_made")} · <span className="led r" style={{ width: 6, height: 6, verticalAlign: 1 }}></span> <span className="led g" style={{ width: 6, height: 6, verticalAlign: 1 }}></span> <span className="led b" style={{ width: 6, height: 6, verticalAlign: 1 }}></span></span>
        </div>
      </div>
    </footer>
  );
}

/* ----- App ----- */
function App() {
  useEffect(() => {
    const dot = document.getElementById("cursor-glow");
    if (!dot) return;
    const onMove = (e) => {
      dot.style.left = e.clientX + "px";
      dot.style.top = e.clientY + "px";
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  return (
    <ThemeProvider>
    <LangProvider>
      <div id="cursor-glow" className="cursor-glow"></div>
      <Nav />
      <Hero />
      <Marquee />
      <Services />
      <Stats />
      <Process />
      <Materials />
      <Clients />
      <Projects />
      <Quote />
      <Footer />
    </LangProvider>
    </ThemeProvider>
  );
}

Object.assign(window, { App });