// Main App — composes the landing page with i18n + theme providers

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";
  return (
    <>
      <nav className="nav">
        <div className="container nav-inner">
          <div className="brand">
            <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>
          </div>

          <div className="nav-links">
            <a href="#practice">{t("navPractice")}</a>
            <a href="#story">{t("navStory")}</a>
            <a href="#stories">{t("navStories")}</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>
  );
}

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "showTicker": true
}/*EDITMODE-END*/;

function Page() {
  const [tw, setTweak] = useTweaks(DEFAULTS);
  return (
    <>
      <div className="page-bg"/>
      <Nav/>
      <Hero/>
      {tw.showTicker && <AffirmationTicker/>}
      <div id="practice"><ProblemSection/></div>
      <HowItWorks/>
      <MoodSection/>
      <div id="stories"><Testimonials/></div>
      <div id="story"><FounderStory/></div>
      <div id="pricing"><FinalCTA/></div>
      <PageFooter/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Content">
          <TweakToggle
            label="Show affirmation ticker"
            value={tw.showTicker}
            onChange={v => setTweak("showTicker", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function App() {
  return (
    <I18nProvider>
      <ThemeProvider>
        <Page/>
      </ThemeProvider>
    </I18nProvider>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);