/* ============================================================
   EOLODENT — common components & hooks
   ============================================================ */
const { useState, useEffect, useRef, useCallback } = React;

/* ---------- hooks ---------- */
function useStore() {
  const [, force] = useState(0);
  useEffect(() => EoloStore.subscribe(() => force((n) => n + 1)), []);
  return EoloStore;
}
function useT() {
  const [, force] = useState(0);
  useEffect(() => EoloI18n.subscribe(() => force((n) => n + 1)), []);
  return EoloI18n.t.bind(EoloI18n);
}
function useHash() {
  const [hash, setHash] = useState(window.location.hash || "#/");
  useEffect(() => {
    const on = () => setHash(window.location.hash || "#/");
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  return hash;
}
function navigate(path) {
  window.location.hash = path;
  window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
}

/* ---------- scroll reveal ---------- */
function Reveal({ children, delay = 0, tag = "div", className = "", ...rest }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } },
      { threshold: 0.12 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = tag;
  return (
    <Tag ref={ref} className={`fade-up ${seen ? "in" : ""} ${className}`} style={{ animationDelay: `${delay}ms` }} {...rest}>
      {children}
    </Tag>
  );
}

/* ---------- Photo slot ---------- */
function PhotoSlot({ id, note, shape = "rounded", radius = 16, style, className = "", placeholder = "Arrastra una foto" }) {
  return (
    <div className={`photoslot ${className}`} style={{ position: "relative", ...style }}>
      <image-slot id={id} shape={shape} radius={String(radius)} placeholder={placeholder}
        src={id ? "images/" + id + ".png" : undefined}
        style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
      {note ? <span className="photo-note"><Icon name="camera" size={13} />{note}</span> : null}
    </div>
  );
}

/* ---------- Icons ---------- */
function Icon({ name, size = 22, stroke = 1.7, className = "" }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor",
    strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", className };
  const I = {
    tooth: <path d="M12 5.5C9.5 3 5.5 3.2 4.2 6c-1.2 2.6.3 6 1 9 .4 1.8.7 4 2 4 1.2 0 1.4-2 1.8-3.4.3-1 .6-2.1 3-2.1s2.7 1.1 3 2.1c.4 1.4.6 3.4 1.8 3.4 1.3 0 1.6-2.2 2-4 .7-3 2.2-6.4 1-9C18.5 3.2 14.5 3 12 5.5Z" />,
    "tooth-root": <><path d="M12 5C9.8 3 6.5 3.3 5.4 5.7c-1 2.2.2 5 1 7.5" /><path d="M12 5c2.2-2 5.5-1.7 6.6.7 1 2.2-.2 5-1 7.5" /><path d="M8.5 14.5 7.5 20" /><path d="M12 14.5V20" /><path d="M15.5 14.5l1 5.5" /></>,
    braces: <><rect x="3" y="9" width="18" height="6" rx="2" /><path d="M7 9v6M12 9v6M17 9v6" /><path d="M3 12h18" /></>,
    implant: <><path d="M12 3c-2 0-3 1.5-3 3.5S10 10 12 10s3-1.5 3-3.5S14 3 12 3Z" /><path d="M11 10l-1 11M13 10l1 11" /><path d="M9.5 14h5M9 18h6" /></>,
    surgery: <><path d="M12 4C9.5 2.5 6 3 5 5.5 4 8 5.5 11 6.2 13.5 6.7 15.3 7 18 8 18s1.2-2 1.5-3.2c.2-.8.5-1.8 2.5-1.8" /><circle cx="16.5" cy="15.5" r="3.5" /><path d="M16.5 13.5v4M14.5 15.5h4" /></>,
    "mini-implant": <><path d="M12 4v9" /><path d="M9 6.5 12 4l3 2.5" /><circle cx="12" cy="16.5" r="3.5" /></>,
    gums: <><path d="M4 14c0-4 3.6-7 8-7s8 3 8 7" /><path d="M4 14c2 0 2 3 4 3s2-3 4-3 2 3 4 3 2-3 4-3" /><path d="M9 9.5V7M15 9.5V7" /></>,
    clean: <><path d="M5 21l1-9h12l1 9" /><path d="M9 12V6a3 3 0 0 1 6 0v6" /><path d="M8.5 16.5c2 1 5 1 7 0" /></>,
    xray: <><rect x="4" y="3" width="16" height="18" rx="2" /><path d="M9 8c1 0 1.5 1 3 1s2-1 3-1" /><path d="M9 8v4M12 9v4M15 8v4" /></>,
    filling: <><path d="M12 4C9.5 2.5 6 3 5 5.5 4 8 5.5 11 6.2 14 6.7 16 7 19 8 19s1.3-2.4 1.6-3.8c.3-1.2.7-2.2 2.4-2.2s2.1 1 2.4 2.2C16.7 16.6 17 19 18 19s1.3-3 1.8-5C20.5 11 22 8 21 5.5 20 3 16.5 2.5 14 4" /><path d="M9 8l3 3 3-3" /></>,
    camera: <><path d="M3 8a2 2 0 0 1 2-2h2l1.2-2h7.6L17 6h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><circle cx="12" cy="12.5" r="3" /></>,
    clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
    shield: <><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z" /><path d="M9 12l2 2 4-4" /></>,
    map: <><path d="M12 21s-6-5.3-6-10a6 6 0 1 1 12 0c0 4.7-6 10-6 10Z" /><circle cx="12" cy="11" r="2.2" /></>,
    phone: <path d="M5 4h3l1.5 4-2 1.5a11 11 0 0 0 5 5l1.5-2 4 1.5V21a1 1 0 0 1-1 1A16 16 0 0 1 4 6a1 1 0 0 1 1-2Z" />,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" /></>,
    car: <><path d="M5 13l1.5-4.5A2 2 0 0 1 8.4 7h7.2a2 2 0 0 1 1.9 1.5L19 13" /><rect x="3" y="13" width="18" height="5" rx="1.5" /><circle cx="7.5" cy="18.5" r="1.3" /><circle cx="16.5" cy="18.5" r="1.3" /></>,
    arrow: <path d="M5 12h14M13 6l6 6-6 6" />,
    check: <path d="M5 12.5 10 17l9-10" />,
    star: <path d="m12 3 2.5 5.5L20 9.4l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-.9z" />,
    facebook: <path d="M14 8.5h2V5.5h-2.3C11.4 5.5 10 7 10 9.2V11H8v3h2v6h3v-6h2.2l.5-3H13V9.2c0-.5.4-.7.9-.7Z" fill="currentColor" stroke="none" />,
    instagram: <><rect x="3.5" y="3.5" width="17" height="17" rx="5" /><circle cx="12" cy="12" r="3.6" /><circle cx="17" cy="7" r="1" fill="currentColor" stroke="none" /></>,
    whatsapp: <path d="M12 3a9 9 0 0 0-7.7 13.6L3 21l4.5-1.2A9 9 0 1 0 12 3Zm0 2a7 7 0 1 1-3.6 13l-.4-.2-2.4.6.6-2.3-.2-.4A7 7 0 0 1 12 5Zm-2.3 3c-.2 0-.5.1-.7.4-.2.3-.8.8-.8 2s.8 2.3 1 2.5c.1.2 1.6 2.6 4 3.5 2 .8 2.4.6 2.8.6.4 0 1.4-.6 1.6-1.1.2-.6.2-1 .1-1.1l-.6-.3c-.3-.1-1.4-.7-1.6-.8-.2 0-.4-.1-.5.2l-.7.8c-.1.2-.3.2-.5.1-.3-.1-1.1-.4-2-1.2-.8-.7-1.3-1.5-1.4-1.7-.1-.3 0-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5 0-.2 0-.4 0-.5l-.7-1.7c-.2-.4-.4-.4-.6-.4Z" fill="currentColor" stroke="none" />,
    menu: <><path d="M4 7h16M4 12h16M4 17h16" /></>,
    x: <path d="M6 6l12 12M18 6 6 18" />,
    user: <><circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 3.5-6 8-6s8 2 8 6" /></>,
    calendar: <><rect x="3.5" y="5" width="17" height="16" rx="2.5" /><path d="M3.5 9.5h17M8 3v4M16 3v4" /></>,
    grid: <><rect x="3.5" y="3.5" width="7" height="7" rx="1.5" /><rect x="13.5" y="3.5" width="7" height="7" rx="1.5" /><rect x="3.5" y="13.5" width="7" height="7" rx="1.5" /><rect x="13.5" y="13.5" width="7" height="7" rx="1.5" /></>,
    edit: <><path d="M4 20h4L19 9l-4-4L4 16z" /><path d="M14 6l4 4" /></>,
    trash: <><path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13h10l1-13" /></>,
    plus: <path d="M12 5v14M5 12h14" />,
    search: <><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></>,
    logout: <><path d="M15 4h3a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3" /><path d="M10 12H3m4-4-4 4 4 4" /></>,
    chart: <><path d="M4 20V10M10 20V4M16 20v-7M22 20H2" /></>,
    money: <><rect x="3" y="6" width="18" height="12" rx="2" /><circle cx="12" cy="12" r="2.5" /><path d="M6 9v6M18 9v6" /></>,
    sparkle: <path d="M12 3l1.8 4.7L18.5 9l-4.7 1.3L12 15l-1.8-4.7L5.5 9l4.7-1.3z" />,
    heart: <path d="M12 20s-7-4.3-7-9.5A4 4 0 0 1 12 7a4 4 0 0 1 7 3.5C19 15.7 12 20 12 20Z" />,
  };
  return <svg {...p}>{I[name] || I.tooth}</svg>;
}

/* ---------- Logo ---------- */
function Logo({ light = false, size = 38, onClick }) {
  const col = light ? "#fff" : "#1a1a6e";
  return (
    <a href="#/" className={`logo ${light ? "logo--light" : ""}`} onClick={(e) => { e.preventDefault(); navigate("#/"); onClick && onClick(); }}>
      <svg className="logo__mark" width={size} height={size} viewBox="0 0 48 48" fill="none">
        <path d="M24 11C19.5 6 10.5 6.3 8 12c-2.4 5.4.6 12 2 17 .9 3.6 1.3 7 3.4 7 2 0 2.4-3.2 3-5.6.5-1.9 1-3.9 7.6-3.9" stroke={col} strokeWidth="2.4" strokeLinecap="round" />
        <path d="M24 11c4.5-5 13.5-4.7 16 1 2.4 5.4-.6 12-2 17-.9 3.6-1.3 7-3.4 7-2 0-2.4-3.2-3-5.6-.5-1.9-1-3.9-7.6-3.9" stroke={col} strokeWidth="2.4" strokeLinecap="round" />
      </svg>
      <span className="logo__txt">
        <span className="logo__name">Eolodent</span>
        <span className="logo__sub">Clínica Dental</span>
      </span>
    </a>
  );
}

/* ---------- Header ---------- */
function Header() {
  const t = useT();
  const hash = useHash();
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const [, force] = useState(0);
  useEffect(() => EoloI18n.subscribe(() => force((n) => n + 1)), []);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", on); on();
    return () => window.removeEventListener("scroll", on);
  }, []);
  const links = [
    ["#/", "nav.inicio"], ["#/servicios", "nav.servicios"], ["#/sucursales", "nav.sucursales"],
    ["#/blog", "nav.blog"], ["#/agenda", "nav.agenda"], ["#/admin", "nav.admin"],
  ];
  const isActive = (h) => (h === "#/" ? hash === "#/" || hash === "" : hash.startsWith(h));
  const go = (h) => (e) => { e.preventDefault(); navigate(h); setOpen(false); };
  const lang = EoloI18n.lang;
  return (
    <>
      <div className="topbar">
        <a href="tel:5548281475">
          <span className="pulse"><span className="dot"></span>{t("topbar")}</span>
          <span>· Llama al <strong>55 4828 1475</strong></span>
        </a>
      </div>
      <header className={`header ${scrolled ? "scrolled" : ""}`}>
        <div className="wrap header__inner">
          <Logo />
          <nav className="nav">
            {links.map(([h, k]) => (
              <a key={h} href={h} onClick={go(h)} className={isActive(h) ? "active" : ""}>{t(k)}</a>
            ))}
          </nav>
          <div className="lang-toggle desktop">
            <button className={lang === "es" ? "on" : ""} onClick={() => EoloI18n.set("es")}>ES</button>
            <button className={lang === "en" ? "on" : ""} onClick={() => EoloI18n.set("en")}>EN</button>
          </div>
          <a href="#/agenda" onClick={go("#/agenda")} className="btn btn--cyan btn--sm header-cta">{t("cta.agendar.short")}</a>
          <button className="burger" onClick={() => setOpen(true)} aria-label="Menú"><span></span><span></span><span></span></button>
        </div>
      </header>
      <div className={`mobile-nav ${open ? "open" : ""}`}>
        <button className="close" onClick={() => setOpen(false)}>&times;</button>
        {links.map(([h, k]) => <a key={h} href={h} onClick={go(h)}>{t(k)}</a>)}
        <div style={{ marginTop: 28, display: "flex", gap: 10 }}>
          <a href="#/agenda" onClick={go("#/agenda")} className="btn btn--cyan">{t("cta.agendar")}</a>
        </div>
        <div className="lang-toggle" style={{ marginTop: 24 }}>
          <button className={lang === "es" ? "on" : ""} onClick={() => EoloI18n.set("es")}>ES</button>
          <button className={lang === "en" ? "on" : ""} onClick={() => EoloI18n.set("en")}>EN</button>
        </div>
      </div>
    </>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  const t = useT();
  const store = useStore();
  const branches = store.get("branches");
  const go = (h) => (e) => { e.preventDefault(); navigate(h); };
  return (
    <footer className="footer">
      <div className="wrap footer__grid">
        <div className="footer__brand">
          <Logo light />
          <p className="footer__tag eo-accent">{t("footer.tag")}</p>
          <p className="footer__desc">{t("footer.desc")}</p>
          <div className="footer__social">
            <a href="https://www.facebook.com/eolodent" target="_blank" rel="noopener" aria-label="Facebook"><Icon name="facebook" size={18} /></a>
            <a href="https://www.instagram.com/eolodent_clinica/" target="_blank" rel="noopener" aria-label="Instagram"><Icon name="instagram" size={18} /></a>
            <a href="https://wa.me/525548281475" target="_blank" rel="noopener" aria-label="WhatsApp"><Icon name="whatsapp" size={18} /></a>
          </div>
        </div>
        <div className="footer__col">
          <h4>{t("footer.nav")}</h4>
          <a href="#/servicios" onClick={go("#/servicios")}>{t("nav.servicios")}</a>
          <a href="#/sucursales" onClick={go("#/sucursales")}>{t("nav.sucursales")}</a>
          <a href="#/blog" onClick={go("#/blog")}>{t("nav.blog")}</a>
          <a href="#/agenda" onClick={go("#/agenda")}>{t("nav.agenda")}</a>
          <a href="#/admin" onClick={go("#/admin")}>{t("nav.admin")}</a>
        </div>
        <div className="footer__col">
          <h4>{t("footer.contact")}</h4>
          {branches.map((b) => (
            <div key={b.id} className="footer__branch">
              <strong>{b.name}</strong>
              <span>{b.phones[0]}</span>
            </div>
          ))}
          <a href="mailto:clinicadental@eolodent.com" className="footer__mail">clinicadental@eolodent.com</a>
        </div>
      </div>
      <div className="wrap footer__bottom">{t("footer.rights")}</div>
    </footer>
  );
}

Object.assign(window, { useStore, useT, useHash, navigate, Reveal, PhotoSlot, Icon, Logo, Header, Footer });