/* Shell: header, language switcher, mobile menu, footer, overlays */

const NAV = ["products", "inspiration", "about", "contact"];

function LangSwitch() {
  const { route, t } = useApp();
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const h = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    const k = e => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("click", h); document.addEventListener("keydown", k);
    return () => { document.removeEventListener("click", h); document.removeEventListener("keydown", k); };
  }, []);
  return (
    <div className="lang" ref={ref}>
      <button className="lang-btn" aria-haspopup="true" aria-expanded={open} onClick={() => setOpen(o => !o)}
        aria-label={t("nav.lang") + ": " + translate(route.lang, "meta.name")}>
        {Ico.globe()} <span className="lname">{translate(route.lang, "meta.name")}</span>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
      </button>
      {open && (
        <ul className="lang-menu">
          {window.LANGS.map(l => (
            <li key={l}>
              <a href={hrefFor(l, route.page, route.slug)} hrefLang={l} lang={l}
                aria-current={l === route.lang ? "true" : undefined} onClick={() => setOpen(false)}>
                {translate(l, "meta.name")} <small>{l}</small>
              </a>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function Header() {
  const { t, route, quote, menu, setMenu } = useApp();
  useEffect(() => setMenu(false), [route.page, route.lang, route.slug]);
  useEffect(() => {
    if (!menu) return;
    const k = e => e.key === "Escape" && setMenu(false);
    document.addEventListener("keydown", k);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", k); document.body.style.overflow = ""; };
  }, [menu]);
  const n = quote.items.length;
  return (
    <header className="hdr">
      <div className="wrap hdr-in">
        <a className="brand" href={hrefFor(route.lang, "home")} aria-label="Meriç Seramik — Edirne">
          <LogoMark />
          <span className="brand-word"><b>MERİÇ SERAMİK</b><span>EDİRNE</span></span>
        </a>
        <nav className="nav" aria-label="Ana menü">
          {NAV.map(p => <Link key={p} page={p} aria-current={route.page === p || (p === "products" && (route.page === "category" || route.page === "product")) ? "page" : undefined}>{t("nav." + p)}</Link>)}
        </nav>
        <div className="hdr-tools">
          <LangSwitch />
          <a className="list-btn" href={hrefFor(route.lang, "quote")} aria-label={`${t("nav.list")} (${n})`}>
            {Ico.list()} <span className="ltxt">{t("nav.list")}</span>
            <span className={"count" + (n ? "" : " zero")}>{n}</span>
          </a>
          <a className="btn btn-primary btn-sm" href={hrefFor(route.lang, "quote")}>{t("nav.quote")}</a>
          <button className="menu-btn" aria-label={t("nav.menu")} aria-expanded={menu} onClick={() => setMenu(true)}>{Ico.menu()}</button>
        </div>
      </div>
      {menu && ReactDOM.createPortal(
        <div className="sheet" role="dialog" aria-modal="true" aria-label={t("nav.menu")} onClick={e => { if (e.target.closest("a")) setMenu(false); }}>
          <div className="sheet-top">
            <span className="brand"><LogoMark /><span className="brand-word"><b>MERİÇ SERAMİK</b><span>EDİRNE</span></span></span>
            <button className="icon-btn" onClick={() => setMenu(false)} aria-label={t("nav.close")} autoFocus>{Ico.close()}</button>
          </div>
          <nav aria-label={t("nav.menu")}>
            <Link page="home">{t("nav.home")} {Ico.arrow(20)}</Link>
            {NAV.map(p => <Link key={p} page={p}>{t("nav." + p)} {Ico.arrow(20)}</Link>)}
            <div className="sheet-sub">
              {window.CATEGORIES.map(c => <a key={c.id} href={hrefFor(route.lang, "category", c.id)} aria-current={route.page === "category" && route.slug === c.id ? "page" : undefined}>{window.SEO_CONTENT[route.lang].cats[c.id].h1}</a>)}
            </div>
            <Link page="quote">{t("nav.list")} <span className={"count" + (n ? "" : " zero")}>{n}</span></Link>
          </nav>
          <div className="sheet-lang" role="group" aria-label={t("nav.lang")}>
            {window.LANGS.map(l => (
              <a key={l} href={hrefFor(l, route.page, route.slug)} hrefLang={l} lang={l} aria-current={l === route.lang ? "true" : undefined}>
                {translate(l, "meta.name")}
              </a>
            ))}
          </div>
          <div className="sheet-cta">
            <a className="btn btn-primary btn-block" href={hrefFor(route.lang, "quote")}>{t("nav.quote")}</a>
            <WaButton className="btn btn-line btn-block" />
          </div>
        </div>, document.body
      )}
    </header>
  );
}

/* Mobile bottom navigation (≤1020px) */
const BN_ICO = {
  home: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true"><path d="M4 11l8-6 8 6v9H4z"/><path d="M10 20v-5h4v5"/></svg>,
  products: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true"><rect x="4" y="4" width="7" height="7"/><rect x="13" y="4" width="7" height="7"/><rect x="4" y="13" width="7" height="7"/><rect x="13" y="13" width="7" height="7"/></svg>,
  inspiration: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true"><rect x="3.5" y="5" width="17" height="14"/><path d="M3.5 16l5-4 4 3 3-2 5 4"/></svg>,
  quote: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true"><path d="M6 3.5h9l3 3v14H6z"/><path d="M9 10h6M9 14h6M9 18h3"/></svg>,
  menu: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
};
function BottomNav() {
  const { t, route, quote, menu, setMenu } = useApp();
  const n = quote.items.length;
  const isOn = p => !menu && (route.page === p || (p === "products" && (route.page === "category" || route.page === "product")));
  const Item = ({ p, label, badge }) => (
    <a href={hrefFor(route.lang, p)} className="bn-item" aria-current={isOn(p) ? "page" : undefined}>
      <span className="bn-ico">{BN_ICO[p]}{badge > 0 && <span className="bn-badge">{badge}</span>}</span>
      <span className="bn-lbl">{label}</span>
    </a>
  );
  return (
    <nav className="bnav" aria-label={t("nav.menu")}>
      <Item p="home" label={t("bn.home")} />
      <Item p="products" label={t("nav.products")} />
      <Item p="inspiration" label={t("bn.inspiration")} />
      <Item p="quote" label={t("bn.quote")} badge={n} />
      <button type="button" className="bn-item" aria-expanded={menu} aria-pressed={menu} onClick={() => setMenu(m => !m)}>
        <span className="bn-ico">{menu ? Ico.close(22) : BN_ICO.menu}</span>
        <span className="bn-lbl">{menu ? t("nav.close") : t("nav.menu")}</span>
      </button>
    </nav>
  );
}

/* Suggest browser language once; never redirect. */
function LangSuggest() {
  const { route } = useApp();
  const [show, setShow] = useState(false);
  const [sug, setSug] = useState(null);
  useEffect(() => {
    if (localStorage.getItem("ms_sg_dismiss")) return;
    const nav = (navigator.languages || [navigator.language || ""]).map(x => x.slice(0, 2).toLowerCase());
    const match = nav.find(x => window.LANGS.includes(x));
    if (match && match !== route.lang) { setSug(match); setShow(true); }
  }, []);
  useEffect(() => { if (sug === route.lang) setShow(false); }, [route.lang]);
  if (!show || !sug) return null;
  const close = () => { localStorage.setItem("ms_sg_dismiss", "1"); setShow(false); };
  return (
    <div className="suggest" role="region" aria-label="Language suggestion" lang={sug}>
      <div className="wrap">
        <span>{translate(sug, "sg.text")}</span>
        <button className="yes" onClick={() => { close(); go(sug, route.page, route.slug); }}>{translate(sug, "sg.yes")}</button>
        <button className="no" onClick={close}>{translate(sug, "sg.no")}</button>
      </div>
    </div>
  );
}

function Footer() {
  const { t, route, openCookies } = useApp();
  return (
    <footer className="dark">
      <section className="cta-band" aria-labelledby="cta-h">
        <div className="wrap">
          <div>
            <h2 id="cta-h" className="h-1">{t("cta.title")}</h2>
            <p>{t("cta.text")}</p>
          </div>
          <div className="btn-row">
            <a className="btn btn-primary" href={hrefFor(route.lang, "quote")}>{t("cta.btn")} {Ico.arrow()}</a>
            <WaButton className="btn btn-outline-light" />
          </div>
        </div>
      </section>
      <div className="foot">
        <div className="wrap">
          <div className="foot-grid">
            <div className="foot-brand">
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <LogoMark id="logo-mark" />
                <b>MERİÇ SERAMİK</b>
              </div>
              <p>{t("foot.tag")}</p>
              <div className="foot-lang" role="group" aria-label={t("nav.lang")}>
                {window.LANGS.map(l => (
                  <a key={l} href={hrefFor(l, route.page, route.slug)} hrefLang={l} lang={l} aria-current={l === route.lang ? "true" : undefined}>{translate(l, "meta.name")}</a>
                ))}
              </div>
            </div>
            <div>
              <h4>{t("foot.explore")}</h4>
              <ul>
                <li><Link page="products">{t("nav.products")}</Link></li>
                {window.CATEGORIES.map(c => <li key={c.id}><a href={hrefFor(route.lang, "category", c.id)}>{window.SEO_CONTENT[route.lang].cats[c.id].h1}</a></li>)}
                <li><Link page="inspiration">{t("nav.inspiration")}</Link></li>
                <li><Link page="quote">{t("q.title")}</Link></li>
              </ul>
            </div>
            <div>
              <h4>{t("foot.company")}</h4>
              <ul>
                <li><Link page="about">{t("nav.about")}</Link></li>
                <li><Link page="contact">{t("nav.contact")}</Link></li>
                <li><Link page="privacy">{t("foot.privacy")}</Link></li>
                <li><Link page="admin" style={{ color: "#9C958B" }}>{t("foot.admin")}</Link></li>
              </ul>
            </div>
            <div>
              <h4>{t("foot.follow")}</h4>
              <ul>
                <li><a href={window.SITE.instagram} target="_blank" rel="noopener">Instagram · {window.SITE.instagramHandle}</a></li>
                {window.SITE.phone && <li><a href={"tel:" + window.SITE.phone}>{window.SITE.phoneDisplay}</a></li>}
                {window.SITE.hours && window.SITE.hours.map(r => <li key={r.days} style={{ color: "#9C958B", fontSize: 14 }}>{t("hr." + r.days)}: {r.open} – {r.close}</li>)}
                <li><span style={{ color: "#9C958B", fontSize: 14 }}>Nilüfer Cd. 28/2, İstasyon<br />22100 Edirne Merkez / Edirne</span></li>
              </ul>
            </div>
          </div>
          <div className="foot-bottom">
            <span>© 2026 Meriç Seramik. {t("foot.rights")}</span>
            <span>{t("foot.demo")}</span>
            <button onClick={openCookies}>{t("foot.cookies")}</button>
          </div>
        </div>
      </div>
    </footer>
  );
}

function WaButton({ className, msg, label, children }) {
  const { t, openWa } = useApp();
  const m = msg || t("wa.general");
  const url = waUrl(m);
  const content = children || <>{Ico.chat()} {label || t("visit.wa")}</>;
  if (url) return <a className={className} href={url} target="_blank" rel="noopener">{content}</a>;
  return <button type="button" className={className} onClick={() => openWa(m)}>{content}</button>;
}

function WaFab() {
  const { t } = useApp();
  return (
    <WaButton className="wa-fab">
      <span className="wa-dot">{Ico.chat(14)}</span><span className="wa-label">WhatsApp</span>
    </WaButton>
  );
}

function WaModal({ msg, onClose }) {
  const { t } = useApp();
  useEffect(() => { const k = e => e.key === "Escape" && onClose(); document.addEventListener("keydown", k); return () => document.removeEventListener("keydown", k); }, []);
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" role="dialog" aria-modal="true" aria-labelledby="wa-h" onClick={e => e.stopPropagation()}>
        <div className="modal-head"><h2 id="wa-h" className="h-3">{t("wa.title")}</h2>
          <button className="icon-btn" onClick={onClose} aria-label={t("nav.close")} autoFocus>{Ico.close()}</button></div>
        <div className="msg-bubble">{msg}</div>
        <div className="alert alert-demo">{Ico.info()}<span>{t("wa.demo")}</span></div>
        <button className="btn btn-dark" disabled style={{ cursor: "not-allowed" }}>{Ico.chat()} {t("wa.open")}</button>
      </div>
    </div>
  );
}

function Cookie({ onDone }) {
  const { t, route } = useApp();
  return (
    <div className="cookie" role="region" aria-label="Cookies">
      <div className="wrap">
        <p>{t("ck.text")} <a href={hrefFor(route.lang, "privacy")}>{t("ck.more")}</a></p>
        <div className="btn-row">
          <button className="btn btn-line btn-sm" onClick={() => onDone("essential")}>{t("ck.reject")}</button>
          <button className="btn btn-dark btn-sm" onClick={() => onDone("all")}>{t("ck.accept")}</button>
        </div>
      </div>
    </div>
  );
}

function Toast({ data, onClose }) {
  const { t, route } = useApp();
  useEffect(() => { const id = setTimeout(onClose, 3800); return () => clearTimeout(id); }, [data]);
  return (
    <div className="toast" role="status" aria-live="polite">
      <span>{data.text}</span>
      {data.link && <a href={hrefFor(route.lang, "quote")}>{t("d.view.list")} →</a>}
    </div>
  );
}

Object.assign(window, { BottomNav, Header, LangSuggest, Footer, WaButton, WaFab, WaModal, Cookie, Toast });