/* EnableUnion — layout (topbar, header/nav, footer, logo, cookie banner) */

const { useState, useEffect, useMemo } = React;

/* ───────────── tiny hash router ───────────── */

function useRoute() {
  const get = () => {
    const h = window.location.hash || "#/";
    return h.replace(/^#/, "") || "/";
  };
  const [route, setRoute] = useState(get);
  useEffect(() => {
    const on = () => {
      setRoute(get());
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  return route;
}

function NavLink({ to, current, children, ...rest }) {
  const active = current === to || (to !== "/" && current.startsWith(to));
  return (
    <a
      href={"#" + to}
      aria-current={active ? "page" : undefined}
      {...rest}
    >
      {children}
    </a>
  );
}

/* ───────────── logo ───────────── */

function Logo({ inFooter }) {
  return (
    <a className="logo" href="#/" aria-label="EnableUnion">
      <span
        className="logo__mark"
        dangerouslySetInnerHTML={{ __html: (window.LOGOS && window.LOGOS.round) || "" }}
      />
      <span className="logo__text">
        <span className="logo__name">EnableUnion</span>
        <span className="logo__sub">SASU · MMXXVI</span>
      </span>
    </a>
  );
}

/* ───────────── topbar ───────────── */

function TopBar({ t, lang, setLang }) {
  return (
    <div className="topbar">
      <div className="topbar__inner">
        <div className="topbar__left">
          <span className="topbar__dot" />
          <span>{t.topbar_left}</span>
        </div>
        <div className="topbar__right">
          <span>{t.topbar_right}</span>
          <div className="lang-switch" role="group" aria-label="Language">
            <button
              type="button"
              aria-pressed={lang === "fr"}
              onClick={() => setLang("fr")}
            >FR</button>
            <button
              type="button"
              aria-pressed={lang === "en"}
              onClick={() => setLang("en")}
            >EN</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ───────────── header / nav ───────────── */

function Header({ t, route }) {
  return (
    <header className="site-header">
      <div className="container site-header__inner">
        <Logo />
        <nav className="nav" aria-label="Primary">
          <NavLink to="/" current={route}>{t.nav.home}</NavLink>
          <NavLink to="/about" current={route}>{t.nav.about}</NavLink>
          <NavLink to="/products" current={route}>{t.nav.products}</NavLink>
          <NavLink to="/contact" current={route}>{t.nav.contact}</NavLink>
        </nav>
      </div>
    </header>
  );
}

/* ───────────── crest ornament ───────────── */

function Crest({ letter }) {
  return (
    <div
      className="crest"
      aria-hidden="true"
      dangerouslySetInnerHTML={{ __html: (window.LOGOS && window.LOGOS.round) || "" }}
    />
  );
}

/* ───────────── footer ───────────── */

function Footer({ t }) {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="site-footer__top">
          <div className="site-footer__brand">
            <a className="logo" href="#/" aria-label="EnableUnion">
              <span
                className="logo__mark"
                dangerouslySetInnerHTML={{ __html: (window.LOGOS && window.LOGOS.round) || "" }}
              />
              <span className="logo__text">
                <span className="logo__name">EnableUnion</span>
                <span className="logo__sub">SASU · MMXXVI</span>
              </span>
            </a>
            <p>{t.footer.tagline}</p>
          </div>
          <div>
            <h4>{t.footer.h_company}</h4>
            <ul>
              <li><a href="#/about">{t.footer.links.about}</a></li>
              <li><a href="#/contact">{t.footer.links.contact}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t.footer.h_products}</h4>
            <ul>
              <li><a href="#/products">{t.footer.links.bloomoo}</a></li>
              <li><a href="#/products">{t.footer.links.lastribe}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t.footer.h_legal}</h4>
            <ul>
              <li><a href="#/legal">{t.footer.links.legal}</a></li>
              <li><a href="#/privacy">{t.footer.links.privacy}</a></li>
              <li><a href="#/terms">{t.footer.links.terms}</a></li>
              <li><a href="#/cookies">{t.footer.links.cookies}</a></li>
            </ul>
          </div>
        </div>
        <div className="site-footer__bottom">
          <span>{t.footer.copyright}</span>
          <span>{t.footer.siren}</span>
        </div>
      </div>
    </footer>
  );
}

/* ───────────── cookie banner ───────────── */

function CookieBanner({ t }) {
  const KEY = "eu_cookie_seen_v1";
  const [shown, setShown] = useState(false);
  useEffect(() => {
    try {
      if (!localStorage.getItem(KEY)) setShown(true);
    } catch (e) {}
  }, []);
  if (!shown) return null;
  const dismiss = () => {
    try { localStorage.setItem(KEY, "1"); } catch (e) {}
    setShown(false);
  };
  return (
    <div className="cookie-banner" role="dialog" aria-label="Cookies">
      <p>
        {t.cookie_banner.text}{" "}
        <a href="#/cookies">{t.cookie_banner.learn} →</a>
      </p>
      <div className="cookie-banner__actions">
        <button className="btn btn--primary" onClick={dismiss}>
          {t.cookie_banner.ok}
        </button>
      </div>
    </div>
  );
}

/* expose */
Object.assign(window, {
  useRoute, NavLink, Logo, TopBar, Header, Crest, Footer, CookieBanner,
});