// Layout.jsx — header, nav, footer, router, language toggle

const ROUTES = [
  "home",
  "agenda",
  "travel",
  "stay",
  "montalcino",
  "gallery",
  "faq",
];

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

function Diamond() {
  return (
    <div className="rule" aria-hidden="true">
      <span className="line"></span>
      <span className="diamond"></span>
      <span className="line"></span>
    </div>
  );
}

function PageHead({ chapter, title, sub }) {
  return (
    <header className="page-head">
      <div className="page-chapter">{chapter}</div>
      <h1 className="page-title">{title}</h1>
      {sub ? <p className="page-sub">{sub}</p> : null}
      <Diamond />
    </header>
  );
}

function LangToggle() {
  const { lang, setLang } = useT();
  return (
    <div className="lang-toggle" role="group" aria-label="Language">
      <button
        type="button"
        aria-pressed={lang === "it"}
        onClick={() => setLang("it")}
      >
        IT
      </button>
      <span className="sep">/</span>
      <button
        type="button"
        aria-pressed={lang === "en"}
        onClick={() => setLang("en")}
      >
        EN
      </button>
    </div>
  );
}

function NavMenuButton({ open, onClick, labelOpen, labelClose }) {
  return (
    <button
      type="button"
      className="nav-menu-btn"
      aria-label={open ? labelClose : labelOpen}
      aria-expanded={open}
      aria-controls="site-nav-panel"
      onClick={onClick}
    >
      <span className="nav-menu-icon" aria-hidden="true">
        <span />
        <span />
        <span />
      </span>
    </button>
  );
}

function SiteHeader() {
  const { t } = useT();
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    document.body.classList.toggle("nav-open", menuOpen);
    return () => document.body.classList.remove("nav-open");
  }, [menuOpen]);

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") setMenuOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  return (
    <header className="site-header">
      <div
        className="site-header-inner"
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <div className="kicker">{t("estTuscany")}</div>
        <div className="monogram">
          <a href="#/home" aria-label="Home">
            Sara &amp; Lorenzo
          </a>
        </div>
        <div className="site-header-actions">
          <LangToggle />
          <NavMenuButton
            open={menuOpen}
            onClick={() => setMenuOpen((v) => !v)}
            labelOpen={t("nav.openMenu")}
            labelClose={t("nav.closeMenu")}
          />
        </div>
      </div>
      <SiteNav open={menuOpen} onClose={() => setMenuOpen(false)} />
    </header>
  );
}

const NAV_ITEMS = [
  { id: "home", key: "nav.home" },
  { id: "agenda", key: "nav.agenda" },
  { id: "travel", key: "nav.travel" },
  { id: "stay", key: "nav.stay" },
  { id: "montalcino", key: "nav.montalcino" },
  { id: "gallery", key: "nav.gallery" },
  { id: "faq", key: "nav.faq" },
];

function SiteNav({ open, onClose }) {
  const { t } = useT();
  const route = useRoute();

  React.useEffect(() => {
    onClose();
  }, [route]);

  return (
    <>
      <button
        type="button"
        className={`nav-backdrop${open ? " is-open" : ""}`}
        aria-hidden={!open}
        tabIndex={open ? 0 : -1}
        onClick={onClose}
      />
      <nav
        id="site-nav-panel"
        className={`site-nav${open ? " is-open" : ""}`}
        aria-label="Primary"
      >
        <div className="site-nav-inner">
          {NAV_ITEMS.map((it) => (
            <a
              key={it.id}
              href={`#/${it.id}`}
              className={route === it.id ? "active" : ""}
              onClick={onClose}
            >
              {t(it.key)}
            </a>
          ))}
        </div>
      </nav>
    </>
  );
}

function SiteFooter() {
  const { t, lang } = useT();
  return (
    <footer className="site-footer" style={{ margin: "auto", width: "100%" }}>
      <div className="monogram" style={{ margin: "auto", textAlign: "center" }}>
        Sara &amp; Lorenzo
      </div>
      <div className="small">{t("footer.date")}</div>
    </footer>
  );
}

Object.assign(window, {
  useRoute,
  Diamond,
  PageHead,
  LangToggle,
  SiteHeader,
  SiteNav,
  SiteFooter,
  ROUTES,
});