// Sign In page — sends buyers to their Gumroad library.

function SignInApp() {
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{ "themeColor": "navy" } /*EDITMODE-END*/);
  useLucideIcons([tweaks]);
  useTweakBodyClasses(tweaks);

  return (
    <>
      <SiteNav active="signin" />
      <div className="auth-page">
        <aside className="auth-art">
          <div>
            <div className="auth-art-eyebrow">{t("signin.welcomeEyebrow")}</div>
            <h2>{t("signin.artTitle")}</h2>
            <p>{t("signin.artBody")}</p>
            <div className="auth-art-checks">
              <div className="auth-art-check"><i data-lucide="check"></i> {t("signin.check1")}</div>
              <div className="auth-art-check"><i data-lucide="check"></i> {t("signin.check2")}</div>
              <div className="auth-art-check"><i data-lucide="check"></i> {t("signin.check3")}</div>
            </div>
          </div>
          <div style={{ fontSize: 12, color: "rgba(255,255,255,0.55)", fontFamily: "var(--font-mono)" }}>
            {t("signin.authBy")}
          </div>
        </aside>
        <div className="auth-form-wrap">
          <div className="auth-form">
            <h1>{t("signin.title")}</h1>
            <p className="auth-form-sub">{t("signin.sub")}</p>

            <a href={SITE.GUMROAD_LIBRARY} target="_blank" rel="noopener noreferrer" className="btn btn--primary btn--lg btn--block">
              {t("signin.continueBtn")} <i data-lucide="external-link"></i>
            </a>

            <div style={{ marginTop: 20, padding: 16, background: "var(--color-surface-alt)", border: "1px solid var(--border-subtle)", borderRadius: 6, display: "flex", gap: 12, alignItems: "flex-start" }}>
              <i data-lucide="info" style={{ width: 16, height: 16, color: "var(--color-primary)", flexShrink: 0, marginTop: 2 }}></i>
              <div style={{ fontSize: 13, lineHeight: 1.55, color: "var(--fg-2)" }}>
                {t("signin.infoNote")}
              </div>
            </div>

            <div className="auth-divider">{t("signin.divider")}</div>

            <a href="enroll.html" className="btn btn--outline btn--lg btn--block">
              {t("signin.enrollBtn")}
            </a>

            <div className="auth-foot">
              {t("signin.helpPre")}<a href="mailto:info@pmosimplified.com" className="auth-link">{t("signin.helpLink")}</a>
            </div>
          </div>
        </div>
      </div>
      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio label="Primary color"
        value={tweaks.themeColor}
        onChange={(v) => setTweak("themeColor", v)}
        options={[
        { value: "navy", label: "Navy" },
        { value: "graphite", label: "Graphite" },
        { value: "emerald", label: "Emerald" },
        { value: "gold", label: "Gold" }]
        } />
      </TweaksPanel>
    </>);

}

window.SignInApp = SignInApp;