// Shared top navigation + download modal (used by the landing and legal pages)

function Nav() {
  const t = useT();
  const { lang, setLang } = useLang();
  const { theme, setTheme } = useTheme();
  const [isDownloadOpen, setIsDownloadOpen] = React.useState(false);
  const webAppUrl = "https://app.lumgoals.com";

  React.useEffect(() => {
    const openDownloadModal = () => setIsDownloadOpen(true);
    window.addEventListener("lumgoals:open-download", openDownloadModal);
    return () => window.removeEventListener("lumgoals:open-download", openDownloadModal);
  }, []);
  return (
    <>
      <nav className="nav">
        <div className="container nav-inner">
          <a className='brand' href='/' aria-label='Lumgoals home'>
            <div className="logo-img-light">
              <img src="design/assets/lumgoals-icon-dark.png" alt="" style={{height:42, width:"auto"}}/>
              <img src="design/assets/lumgoals-wordmark.png" alt="Lumgoals" style={{height:24, width:"auto"}}/>
            </div>
            <div className="logo-img-dark">
              <img src="design/assets/lumgoals-icon-dark.png" alt="" style={{height:42, width:"auto"}}/>
              <img className="logo-wordmark-img" src="design/assets/lumgoals-wordmark.png" alt="Lumgoals" style={{height:24, width:"auto"}}/>
            </div>
          </a>

          <div className="nav-links">
            <a href="/#practice">{t("navPractice")}</a>
            <a href="/#story">{t("navStory")}</a>
            <a href="/#pricing">{t("navPricing")}</a>
          </div>

          <div className="toolbar">
            {/* Theme toggle */}
            <div className="toggle-pill" role="group" aria-label="Theme">
              <button className={theme === "light" ? "active" : ""}
                      onClick={() => setTheme("light")}
                      aria-label="Light theme">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="4"/>
                  <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
                </svg>
              </button>
              <button className={theme === "dark" ? "active" : ""}
                      onClick={() => setTheme("dark")}
                      aria-label="Dark theme">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                </svg>
              </button>
            </div>

            {/* Language toggle */}
            <div className="toggle-pill" role="group" aria-label="Language">
              <button className={lang === "en" ? "active" : ""}
                      onClick={() => setLang("en")}>EN</button>
              <button className={lang === "es" ? "active" : ""}
                      onClick={() => setLang("es")}>ES</button>
            </div>

            <button className="btn btn-primary nav-download-btn" onClick={() => setIsDownloadOpen(true)}>
              {t("navManifestToday")}
            </button>
            <a className="btn btn-webapp nav-webapp-btn" href={webAppUrl}>
              <GlobeIcon/>
              {t("navWebApp")}
            </a>
          </div>
        </div>
      </nav>
      {isDownloadOpen && (
        <DownloadModal
          webAppUrl={webAppUrl}
          onClose={() => setIsDownloadOpen(false)}
        />
      )}
    </>
  );
}

function GlobeIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="12" r="10"/>
      <path d="M2 12h20"/>
      <path d="M12 2a15.3 15.3 0 0 1 0 20"/>
      <path d="M12 2a15.3 15.3 0 0 0 0 20"/>
    </svg>
  );
}

function DownloadModal({ webAppUrl, onClose }) {
  const t = useT();
  React.useEffect(() => {
    const onKeyDown = event => {
      if (event.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [onClose]);

  return (
    <div className="download-modal-backdrop" role="presentation" onMouseDown={onClose}>
      <div className="download-modal glass" role="dialog" aria-modal="true" aria-labelledby="download-modal-title" onMouseDown={event => event.stopPropagation()}>
        <button className="download-modal-close" type="button" onClick={onClose} aria-label={t("modalClose")}>×</button>
        <div className="download-modal-kicker">{t("modalKicker")}</div>
        <h2 id="download-modal-title">{t("modalTitle")}</h2>
        <p>{t("modalBody")}</p>
        <div className="download-modal-actions">
          <a className="download-choice app-store-choice" href="#" aria-label={t("modalAppStore")}>
            <span className="download-choice-icon">
              <svg width="22" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M17.5 12.5c0-2.5 2-3.7 2.1-3.8-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.9-1.6.1-3.2 1-4 2.5-1.7 3-.4 7.4 1.3 9.8.8 1.2 1.8 2.5 3.1 2.4 1.2-.1 1.7-.8 3.2-.8s1.9.8 3.2.8c1.3-.0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.3-2.8-.1 0-2.5-1-2.6-3.8zm-2.5-7c.6-.8 1.1-1.9 1-3-.9 0-2 .6-2.7 1.4-.6.7-1.2 1.8-1 2.9 1 .1 2-.5 2.7-1.3z"/>
              </svg>
            </span>
            {t("modalAppStore")}
          </a>
          <a className="download-choice play-store-choice" href="#" aria-label={t("modalPlayStore")}>
            <span className="download-choice-icon">
              <svg width="22" height="26" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M3.6 1.7c-.4.4-.6 1-.6 1.8v17c0 .8.2 1.4.6 1.8l11-11-11-9.6z" fill="#7EB8F7"/>
                <path d="M18.4 8.6L14.6 12l3.8 3.4 2.6-1.5c1.5-.8 1.5-2.2 0-3.0l-2.6-1.5z" fill="#F5D78E"/>
                <path d="M3.6 22.3c.6.6 1.6.7 2.7.1l11.4-6.5L14.6 12 3.6 22.3z" fill="#E8C5D8"/>
                <path d="M3.6 1.7L14.6 12l3.1-3.8L6.3 1.6c-1.1-.6-2.1-.5-2.7.1z" fill="#B48CF2"/>
              </svg>
            </span>
            {t("modalPlayStore")}
          </a>
          <a className="download-choice webapp-choice" href={webAppUrl}>
            <span className="download-choice-icon"><GlobeIcon/></span>
            {t("modalWebApp")}
          </a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Nav, GlobeIcon, DownloadModal });