/* global React, ReactDOM */

// Wrapper that provides i18n context via state and forces rerender on lang/theme change
function AppRoot() {
  const i18n = useI18n();
  // Mirror to window for non-rerendering callers (Tweaks etc)
  window.__i18n = i18n;

  return (
    <>
      <NavBar i18n={i18n} />
      <main>
        <SectionHero />
        <SectionTrust />
        {/* <SectionFeatures/> */}
        <SectionDeepdive />
        <SectionQuran />
        <SectionPrayer />
        <SectionReviews />
        <SectionStats />
        <SectionFaq />
        <SectionFooter />
      </main>
    </>
  );
}

function NavBar({ i18n }) {
  const [isDrawerOpen, setDrawerOpen] = useState(false);
  const closeDrawer = () => setDrawerOpen(false);
  const navItems = [
    {
      href: "#quran",
      label: i18n.t("nav.quran"),
      icon: (
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.8"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M6 3.5h8a4 4 0 014 4V19a3 3 0 00-3-3H6z" />
          <path d="M6 3.5v13.5a2 2 0 002 2h7" />
        </svg>
      ),
    },
    {
      href: "#showcase",
      label: i18n.t("nav.app"),
      icon: (
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.8"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <rect x="7" y="2.5" width="10" height="19" rx="2.5" />
          <path d="M10 5.5h4M10.5 18.5h3" />
        </svg>
      ),
    },
    {
      href: "#reviews",
      label: i18n.t("nav.reviews"),
      icon: (
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.8"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M5 5.5h14v9H8l-3 3z" />
          <path d="M9 9h6M9 12h4" />
        </svg>
      ),
    },
    {
      href: "#faq",
      label: i18n.t("nav.faq"),
      icon: (
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.8"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <circle cx="12" cy="12" r="9" />
          <path d="M9.4 9.8a2.8 2.8 0 015.2 1.3c0 1.9-2.1 2.2-2.1 3.6" />
          <circle cx="12" cy="16.8" r=".8" fill="currentColor" stroke="none" />
        </svg>
      ),
    },
  ];

  useEffect(() => {
    const body = document.body;
    const nav = document.getElementById("nav");
    body.classList.toggle("is-nav-open", isDrawerOpen);
    if (nav) nav.classList.toggle("is-menu-open", isDrawerOpen);
    return () => {
      body.classList.remove("is-nav-open");
      if (nav) nav.classList.remove("is-menu-open");
    };
  }, [isDrawerOpen]);

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

  useEffect(() => {
    const mq = window.matchMedia("(min-width: 769px)");
    const onChange = (e) => {
      if (e.matches) setDrawerOpen(false);
    };
    if (mq.addEventListener) mq.addEventListener("change", onChange);
    else mq.addListener(onChange);
    return () => {
      if (mq.removeEventListener) mq.removeEventListener("change", onChange);
      else mq.removeListener(onChange);
    };
  }, []);

  return (
    <>
      <header className="nav" id="nav">
        <div className="nav__wrap">
          <button
            className={"nav__menu-btn" + (isDrawerOpen ? " is-active" : "")}
            onClick={() => setDrawerOpen((v) => !v)}
            aria-label="Menu"
            aria-controls="navDrawer"
            aria-expanded={isDrawerOpen ? "true" : "false"}
          >
            <span className="nav__menu-icon" aria-hidden="true">
              <span></span>
              <span></span>
              <span></span>
            </span>
          </button>
          <a href="#" className="nav__brand" aria-label="Wahy Albayan">
            <img
              src="assets/modren-logo.png"
              alt="Wahy Albayan"
              className="nav__logo"
            />
          </a>
          <nav className="nav__links" aria-label="Primary">
            {/* <a href="#features">{i18n.t("nav.features")}</a> */}
            {navItems.map((item) => (
              <a key={item.href} href={item.href}>
                {item.label}
              </a>
            ))}
          </nav>
          <div className="nav__cta">
            <ThemeToggle i18n={i18n} />
            <LanguageMenu i18n={i18n} />
            <a href="#download" className="btn btn--primary btn--sm">
              <svg
                viewBox="0 0 24 24"
                width="14"
                height="14"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
              >
                <path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" />
              </svg>
              {i18n.t("nav.download")}
            </a>
          </div>
          <div className="nav__mobile-actions">
            <a href="#download" className="nav__mobile-download">
              <svg
                viewBox="0 0 24 24"
                width="15"
                height="15"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M12 3v10" />
                <path d="M8.5 10.5L12 14l3.5-3.5" />
                <path d="M5 20h14" />
              </svg>
              <span>{i18n.t("nav.download")}</span>
            </a>
          </div>
        </div>
        <div className="nav__progress" id="navProgress"></div>
      </header>
      <div
        className={"nav__drawer-layer" + (isDrawerOpen ? " is-open" : "")}
        aria-hidden={isDrawerOpen ? "false" : "true"}
      >
        <button
          className="nav__drawer-backdrop"
          onClick={closeDrawer}
          aria-label="Close menu"
        ></button>
        <aside
          className="nav__drawer"
          id="navDrawer"
          role="dialog"
          aria-modal="true"
          aria-label="Navigation drawer"
        >
          <div className="nav__drawer-head">
            <p className="nav__drawer-kicker">{i18n.t("hero.subtitle")}</p>
            <button
              className="nav__drawer-close"
              onClick={closeDrawer}
              aria-label="Close menu"
            >
              <svg
                viewBox="0 0 24 24"
                width="18"
                height="18"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
              >
                <path d="M6 6l12 12M18 6L6 18" />
              </svg>
            </button>
          </div>
          <nav className="nav__drawer-links" aria-label="Mobile Primary">
            {navItems.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="nav__drawer-link"
                onClick={closeDrawer}
              >
                <span className="nav__drawer-link-icon" aria-hidden="true">
                  {item.icon}
                </span>
                <span>{item.label}</span>
              </a>
            ))}
          </nav>
          <div className="nav__drawer-foot">
            <div className="nav__drawer-tools">
              <ThemeToggle i18n={i18n} />
              <LanguageMenu i18n={i18n} />
            </div>
            <a
              href="#download"
              className="btn btn--primary nav__drawer-download"
              onClick={closeDrawer}
            >
              <svg
                viewBox="0 0 24 24"
                width="14"
                height="14"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
              >
                <path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" />
              </svg>
              {i18n.t("nav.download")}
            </a>
          </div>
        </aside>
      </div>
    </>
  );
}

const root = document.getElementById("hero-mount");
ReactDOM.createRoot(root).render(<AppRoot />);

// Clear placeholder mounts
[
  "trust-mount",
  "features-mount",
  "deepdive-mount",
  "quran-mount",
  "showcase-mount",
  "audio-mount",
  "prayer-mount",
  "reviews-mount",
  "stats-mount",
  "faq-mount",
  "download-mount",
  "footer-mount",
  "nav-static",
].forEach((id) => {
  const el = document.getElementById(id);
  if (el) el.remove();
});

const tweaksRoot = document.getElementById("tweaks-mount");
if (tweaksRoot) ReactDOM.createRoot(tweaksRoot).render(<Tweaks />);