/* SeaVin — Login & Signup (combined) */

/* Policy password (registrazione e cambio password): min 8 caratteri e niente
   password troppo comuni. Lunghezza > complessità obbligatoria (linee NIST/Garante). */
const COMMON_PW = ["password","password1","12345678","123456789","1234567890","qwertyui","qwerty123","11111111","00000000","iloveyou","abc12345","adminadmin","seavin123","letmein12"];
function pwEval(pw) {
  pw = pw || "";
  if (!pw) return { ok: false, score: 0, label: "", reason: "empty" };
  if (COMMON_PW.includes(pw.toLowerCase())) return { ok: false, score: 1, label: "", reason: "common" };
  if (pw.length < 8) return { ok: false, score: 1, label: "", reason: "short" };
  let s = 1;
  if (pw.length >= 10) s++;
  if (pw.length >= 14) s++;
  if ((/[a-z]/.test(pw) && /[A-Z]/.test(pw)) || /\d/.test(pw) || /[^A-Za-z0-9]/.test(pw)) s++;
  s = Math.min(4, s);
  return { ok: true, score: s, label: ["", "debole", "discreta", "buona", "ottima"][s] };
}
function pwErrorMsg(pe, it) {
  if (pe.reason === "common") return it ? "Password troppo comune: scegline un'altra" : "Password too common";
  return it ? "Almeno 8 caratteri" : "At least 8 characters";
}
function PwMeter({ pw, it }) {
  const e = pwEval(pw);
  const barColor = ["#D2DEEB", "#c0492f", "#c9852a", "#2e6e82", "#1e7a45"][e.ok ? e.score : 1];
  const labelIt = ["", "debole", "discreta", "buona", "ottima"];
  const labelEn = ["", "weak", "fair", "good", "strong"];
  return (
    <div style={{ marginTop: 8 }}>
      <div style={{ display: "flex", gap: 4 }}>
        {[1, 2, 3, 4].map(i => (
          <div key={i} style={{ flex: 1, height: 4, borderRadius: 2, background: (e.ok && i <= e.score) ? barColor : "var(--rule)" }}/>
        ))}
      </div>
      <div style={{ fontSize: 12, marginTop: 5, color: e.ok ? "var(--ink-mute)" : "#c0492f" }}>
        {e.ok ? (it ? `Robustezza: ${labelIt[e.score]}` : `Strength: ${labelEn[e.score]}`) : pwErrorMsg(e, it)}
      </div>
    </div>
  );
}

function Login() {
  const [cfg, setCfg] = useConfig({palette:"cream",theme:"light",typeset:"editorial",heroLayout:"split",tone:"reassuring",lang:"it"});
  const t = window.SEAVIN_I18N[cfg.lang];
  const it = cfg.lang === "it";

  /* If already logged in, bounce straight to next ?next=... or dashboard.
     Attende ready: così una cache "fantasma" (sessione scaduta/logout altrove) non
     rimbalza verso una pagina protetta prima che l'auth reale sia confermata. */
  useEffect(() => {
    const go = () => {
      if (window.SeaVAuth?.isRecoveryLanding) return; // resta sul form "nuova password"
      if (window.SeaVAuth?.currentUser()) {
        const n = new URLSearchParams(location.search).get("next") || "dashboard.html";
        location.replace(n);
      }
    };
    const r = window.SeaVAuth?.ready;
    if (r && r.then) r.then(go); else go();
  }, []);

  const params = new URLSearchParams(location.search);
  const initialMode = params.get("mode") === "signup" ? "signup" : "login";
  const next = params.get("next") || "dashboard.html";

  const [mode, setMode] = useState(initialMode);
  const [form, setForm] = useState({
    email: "", password: "", firstName: "", lastName: "",
    role: "buyer", // primo periodo: solo report, niente account perito — tutti gli account sono uguali
  });
  const [errors, setErrors] = useState({});
  const [busy, setBusy] = useState(false);
  const [notice, setNotice] = useState(null); // es. "controlla la tua email"
  const [recovery, setRecovery] = useState(() => !!(window.SeaVAuth && window.SeaVAuth.isRecoveryLanding)); // arrivo dal link "password dimenticata"

  /* Se l'utente apre il link di recupero password, Supabase apre una sessione
     di recupero: mostriamo il form per impostare la nuova password. */
  useEffect(() => {
    const off = window.SeaVAuth?.onPasswordRecovery
      ? window.SeaVAuth.onPasswordRecovery(() => { setRecovery(true); setErrors({}); setNotice(null); })
      : null;
    return () => { if (off) off(); };
  }, []);

  /* Motore auth attivo: "supabase" (account reali) o "legacy" (localStorage). */
  const authMode = (typeof window !== "undefined" && window.SeaVAuth?.mode) || "legacy";
  const absoluteNext = () => { try { return new URL(next, location.origin).href; } catch (e) { return location.origin + "/dashboard.html"; } };

  /* ---- Social sign-in (Google via GSI) ---- */
  const googleBtnRef = useRef(null);   /* hidden GSI slot */
  const googleCustomRef = useRef(null); /* our visible button */
  const cfg2 = window.SEAVIN_AUTH_CONFIG || {};
  const googleConfigured = cfg2.GOOGLE_CLIENT_ID && !cfg2.GOOGLE_CLIENT_ID.startsWith("REPLACE_WITH_");

  /* Wait for Google's GSI client, then render the official button.
     The button is themed/sized via GSI's `renderButton` API. */
  useEffect(() => {
    if (!googleConfigured || authMode !== "legacy") return; // in modalità Supabase Google passa da signInWithOAuth
    let raf, tries = 0;
    const tryRender = () => {
      tries++;
      if (window.google?.accounts?.id && googleBtnRef.current) {
        try {
          window.google.accounts.id.initialize({
            client_id: cfg2.GOOGLE_CLIENT_ID,
            callback: async (resp) => {
              try {
                await window.SeaVAuth.loginOrSignupWithProvider({
                  provider: "google",
                  idToken: resp.credential,
                  role: form.role,
                });
                location.href = next;
              } catch (e) {
                setErrors({ submit: it ? "Accesso Google non riuscito." : "Google sign-in failed." });
              }
            },
            auto_select: false,
            cancel_on_tap_outside: true,
            ux_mode: "popup",
          });
          /* Render the real GSI button hidden — we overlay our custom button on top */
          googleBtnRef.current.innerHTML = "";
          window.google.accounts.id.renderButton(googleBtnRef.current, {
            type: "standard",
            theme: "outline",
            size: "large",
            text: "continue_with",
            shape: "pill",
            logo_alignment: "left",
            locale: it ? "it" : "en",
            width: googleCustomRef.current
              ? Math.round(googleCustomRef.current.offsetWidth)
              : 400,
          });
          return;
        } catch (e) { /* swallow & retry */ }
      }
      if (tries < 40) raf = setTimeout(tryRender, 150);
    };
    tryRender();
    return () => raf && clearTimeout(raf);
  }, [mode, form.role, googleConfigured, next, it]);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const onSubmit = async (e) => {
    e.preventDefault();
    setErrors({});

    /* Recupero password: unico campo, imposta la nuova password sulla sessione di recupero. */
    if (recovery) {
      { const pe = pwEval(form.password); if (!pe.ok) { setErrors({ password: pwErrorMsg(pe, it) }); return; } }
      setBusy(true); setNotice(null);
      try {
        await window.SeaVAuth.updatePassword(form.password);
        location.replace("dashboard.html");
      } catch (err) {
        setErrors({ submit: it ? "Impossibile aggiornare la password. Richiedi un nuovo link." : "Couldn't update password. Request a new link." });
      } finally { setBusy(false); }
      return;
    }

    const errs = {};
    if (!/^\S+@\S+\.\S+$/.test(form.email)) errs.email = it ? "Email non valida" : "Invalid email";
    if (mode === "signup") { const pe = pwEval(form.password); if (!pe.ok) errs.password = pwErrorMsg(pe, it); }
    else if (!form.password) errs.password = it ? "Inserisci la password" : "Enter your password";
    if (mode === "signup" && !form.firstName.trim()) errs.firstName = it ? "Nome richiesto" : "First name required";
    if (Object.keys(errs).length) { setErrors(errs); return; }

    setBusy(true);
    setNotice(null);
    try {
      let res;
      if (mode === "signup") {
        res = await window.SeaVAuth.signup({
          email: form.email, password: form.password,
          firstName: form.firstName, lastName: form.lastName, role: form.role,
        });
      } else {
        res = await window.SeaVAuth.login({ email: form.email, password: form.password });
      }
      /* Supabase può richiedere la conferma via email prima di attivare la sessione. */
      if (res && res.needsConfirmation) {
        setNotice(it
          ? "Ti abbiamo inviato un'email di conferma. Aprila per attivare l'account, poi accedi."
          : "We sent you a confirmation email. Open it to activate your account, then log in.");
        setMode("login");
        return;
      }
      location.href = next;
    } catch (err) {
      const map = {
        EMAIL_TAKEN: it ? "Email già registrata. Accedi." : "Email already registered. Log in.",
        NO_USER:     it ? "Account non trovato. Registrati." : "Account not found. Sign up.",
        WRONG_PASS:  it ? "Email o password errate." : "Wrong email or password.",
        MISSING_FIELDS: it ? "Compila tutti i campi." : "Fill all fields.",
        EMAIL_NOT_CONFIRMED: it ? "Devi confermare l'email prima di accedere. Controlla la posta." : "Confirm your email before logging in. Check your inbox.",
        WEAK_PASS:   it ? "Password troppo debole (min. 8 caratteri)." : "Password too weak (min. 8 chars).",
        RATE_LIMIT:  it ? "Troppe registrazioni in poco tempo. Attendi qualche minuto e riprova." : "Too many sign-ups in a short time. Wait a few minutes and try again.",
      };
      setErrors({ submit: map[err.message] || (it ? "Errore. Riprova." : "Error. Try again.") });
    } finally {
      setBusy(false);
    }
  };

  /* Recupero password (solo modalità Supabase). */
  const onForgotPassword = async () => {
    setErrors({}); setNotice(null);
    if (!/^\S+@\S+\.\S+$/.test(form.email)) {
      setErrors({ email: it ? "Inserisci prima la tua email qui sopra" : "Enter your email above first" });
      return;
    }
    try {
      await window.SeaVAuth.resetPassword(form.email);
      setNotice(it
        ? "Se l'email è registrata, riceverai un link per reimpostare la password."
        : "If the email is registered, you'll get a reset link.");
    } catch (e) {
      setErrors({ submit: it ? "Impossibile inviare il link ora. Riprova." : "Couldn't send the link now. Try again." });
    }
  };

  return (
    <Page active="" cfg={cfg} setCfg={setCfg} t={t} minimal>
      <section className="auth cloud">
        <div className="shell auth__shell">

          {/* Left — editorial framing */}
          <div className="auth__left">
            <h1 className="auth__h">
              {mode === "signup"
                ? (<>{it ? "Crea il tuo" : "Create your"} <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>{it ? "account." : "account."}</em></>)
                : (<>{it ? "Bentornato" : "Welcome"} <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>{it ? "a bordo." : "back."}</em></>)}
            </h1>
            <p className="auth__lede">
              {it
                ? "Accedi per richiedere report SeaVin, conservare i documenti delle tue barche e seguire lo stato di ogni pratica."
                : "Sign in to request SeaVin reports, store boat documents and track every file."}
            </p>

            {/* Cartoon boat — bobs on stylized waves */}
            <div className="auth__scene" aria-hidden="true">
              <svg className="auth__scene-svg" viewBox="0 0 420 260" xmlns="http://www.w3.org/2000/svg">
                <circle className="auth__sun" cx="338" cy="58" r="22" />
                <g className="auth__cloud">
                  <ellipse cx="92" cy="56" rx="26" ry="11" />
                  <ellipse cx="118" cy="50" rx="20" ry="13" />
                  <ellipse cx="76" cy="60" rx="16" ry="10" />
                </g>
                <g className="auth__cloud auth__cloud--2">
                  <ellipse cx="282" cy="92" rx="22" ry="9" />
                  <ellipse cx="302" cy="87" rx="16" ry="10" />
                </g>
                <g className="auth__boat">
                  <line x1="210" y1="60" x2="210" y2="160" stroke="#1B2A3A" strokeWidth="3" strokeLinecap="round"/>
                  <path className="auth__flag" d="M210 62 L236 70 L210 78 Z" />
                  <path className="auth__sail" d="M213 70 Q258 110 213 158 Z" />
                  <path className="auth__jib" d="M207 80 Q175 120 207 158 Z" />
                  <path className="auth__hull" d="M140 160 L280 160 L258 196 L162 196 Z" />
                  <path className="auth__hull-stripe" d="M148 172 L272 172" />
                  <circle className="auth__port" cx="232" cy="183" r="4.5" />
                </g>
                <g className="auth__waves">
                  <path className="auth__wave auth__wave--back" d="M-40 210 Q40 196 120 210 T280 210 T440 210 T600 210 V260 H-40 Z" />
                  <path className="auth__wave auth__wave--front" d="M-40 222 Q40 236 120 222 T280 222 T440 222 T600 222 V260 H-40 Z" />
                </g>
              </svg>
            </div>
          </div>

          {/* Right — form card */}
          <div className="auth__right">
            <div className="auth__card">
              <div className="auth__card-head">
                <h2 className="auth__card-title">{recovery ? (it ? "Imposta nuova password" : "Set new password") : mode === "signup" ? (it ? "Registrati" : "Sign up") : (it ? "Accedi" : "Log in")}</h2>
                {recovery ? (
                  <p className="auth__card-sub">{it ? "Scegli una nuova password per il tuo account." : "Choose a new password for your account."}</p>
                ) : (
                  <p className="auth__card-sub">
                    {mode === "signup"
                      ? (<>{it ? "Hai già un account?" : "Already have an account?"} <button type="button" className="auth__switch" onClick={() => { setMode("login"); setErrors({}); }}>{it ? "Accedi" : "Log in"}</button></>)
                      : (<>{it ? "Nuovo su SeaVin?" : "New to SeaVin?"} <button type="button" className="auth__switch" onClick={() => { setMode("signup"); setErrors({}); }}>{it ? "Registrati" : "Sign up"}</button>{it ? ": è facile e veloce." : ": it's quick and easy."}</>)
                    }
                  </p>
                )}
              </div>

              {/* Google OAuth — single provider (nascosto durante il recupero password) */}
              {!recovery && (<>
              <div className="auth__oauth">
                {authMode === "supabase" ? (
                  /* Modalità Supabase: redirect a Google verificato lato server */
                  <button
                    type="button"
                    className="auth__oauth-btn auth__oauth-btn--google"
                    onClick={async () => {
                      setErrors({}); setNotice(null);
                      try { await window.SeaVAuth.loginWithGoogle(form.role, absoluteNext()); }
                      catch (e) { setErrors({ submit: it ? "Accesso Google non disponibile (abilitalo in Supabase → Auth → Providers)." : "Google sign-in unavailable (enable it in Supabase → Auth → Providers)." }); }
                    }}
                    aria-label={it ? "Continua con Google" : "Continue with Google"}
                  >
                    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" style={{flexShrink:0}}>
                      <path fill="#4285F4" d="M21.6 12.23c0-.66-.06-1.3-.17-1.92H12v3.63h5.39c-.23 1.24-.94 2.3-2 3v2.5h3.23c1.89-1.74 2.98-4.3 2.98-7.21Z"/>
                      <path fill="#34A853" d="M12 22c2.7 0 4.97-.9 6.62-2.43l-3.23-2.5c-.9.6-2.05.96-3.39.96-2.6 0-4.81-1.76-5.6-4.13H3.06v2.59A10 10 0 0 0 12 22Z"/>
                      <path fill="#FBBC05" d="M6.4 13.9A6 6 0 0 1 6.07 12c0-.66.11-1.3.32-1.9V7.51H3.06A10 10 0 0 0 2 12c0 1.62.39 3.15 1.06 4.49l3.34-2.59Z"/>
                      <path fill="#EA4335" d="M12 5.97c1.47 0 2.78.5 3.82 1.5l2.86-2.86C16.97 2.99 14.7 2 12 2A10 10 0 0 0 3.06 7.51l3.34 2.59C7.19 7.73 9.4 5.97 12 5.97Z"/>
                    </svg>
                    <span>{it ? "Continua con Google" : "Continue with Google"}</span>
                  </button>
                ) : googleConfigured ? (
                  /* Overlay: custom styled button sits on top; hidden GSI iframe below receives the click */
                  <div className="auth__oauth-google-wrap">
                    {/* Custom visible button */}
                    <button
                      ref={googleCustomRef}
                      type="button"
                      className="auth__oauth-btn auth__oauth-btn--google"
                      onClick={() => {
                        /* Click the real GSI button hidden underneath */
                        const gsi = googleBtnRef.current?.querySelector("div[role=button], iframe");
                        if (gsi) gsi.click();
                      }}
                      aria-label={it ? "Continua con Google" : "Continue with Google"}
                    >
                      <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" style={{flexShrink:0}}>
                        <path fill="#4285F4" d="M21.6 12.23c0-.66-.06-1.3-.17-1.92H12v3.63h5.39c-.23 1.24-.94 2.3-2 3v2.5h3.23c1.89-1.74 2.98-4.3 2.98-7.21Z"/>
                        <path fill="#34A853" d="M12 22c2.7 0 4.97-.9 6.62-2.43l-3.23-2.5c-.9.6-2.05.96-3.39.96-2.6 0-4.81-1.76-5.6-4.13H3.06v2.59A10 10 0 0 0 12 22Z"/>
                        <path fill="#FBBC05" d="M6.4 13.9A6 6 0 0 1 6.07 12c0-.66.11-1.3.32-1.9V7.51H3.06A10 10 0 0 0 2 12c0 1.62.39 3.15 1.06 4.49l3.34-2.59Z"/>
                        <path fill="#EA4335" d="M12 5.97c1.47 0 2.78.5 3.82 1.5l2.86-2.86C16.97 2.99 14.7 2 12 2A10 10 0 0 0 3.06 7.51l3.34 2.59C7.19 7.73 9.4 5.97 12 5.97Z"/>
                      </svg>
                      <span>{it ? "Continua con Google" : "Continue with Google"}</span>
                    </button>
                    {/* Hidden GSI slot — invisible but clickable */}
                    <div ref={googleBtnRef} className="auth__oauth-gsi-hidden" aria-hidden="true"/>
                  </div>
                ) : (
                  <button type="button" className="auth__oauth-btn" onClick={() => setErrors({submit: it ? "Google: imposta GOOGLE_CLIENT_ID in src/auth-config.js" : "Google: set GOOGLE_CLIENT_ID in src/auth-config.js"})}>
                    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
                      <path fill="#4285F4" d="M21.6 12.23c0-.66-.06-1.3-.17-1.92H12v3.63h5.39c-.23 1.24-.94 2.3-2 3v2.5h3.23c1.89-1.74 2.98-4.3 2.98-7.21Z"/>
                      <path fill="#34A853" d="M12 22c2.7 0 4.97-.9 6.62-2.43l-3.23-2.5c-.9.6-2.05.96-3.39.96-2.6 0-4.81-1.76-5.6-4.13H3.06v2.59A10 10 0 0 0 12 22Z"/>
                      <path fill="#FBBC05" d="M6.4 13.9A6 6 0 0 1 6.07 12c0-.66.11-1.3.32-1.9V7.51H3.06A10 10 0 0 0 2 12c0 1.62.39 3.15 1.06 4.49l3.34-2.59Z"/>
                      <path fill="#EA4335" d="M12 5.97c1.47 0 2.78.5 3.82 1.5l2.86-2.86C16.97 2.99 14.7 2 12 2A10 10 0 0 0 3.06 7.51l3.34 2.59C7.19 7.73 9.4 5.97 12 5.97Z"/>
                    </svg>
                    <span>{it ? "Continua con Google" : "Continue with Google"}</span>
                  </button>
                )}
              </div>

              {authMode === "legacy" && !googleConfigured && (
                <p className="auth__oauth-note">
                  {it
                    ? "Per attivare l'accesso social: imposta i Client ID in "
                    : "To enable social sign-in: set the Client IDs in "}
                  <code>src/auth-config.js</code>.
                </p>
              )}

              <div className="auth__divider">
                <span>{it ? "oppure con l'email" : "or with email"}</span>
              </div>
              </>)}

              <form onSubmit={onSubmit} noValidate className="auth__form">
                {!recovery && mode === "signup" && (
                  <div className="srv-row srv-row--2">
                    <Field
                      label={it ? "Nome" : "First name"}
                      value={form.firstName}
                      onChange={v => set("firstName", v)}
                      placeholder="Marco"
                      err={errors.firstName}
                      autoComplete="given-name"
                    />
                    <Field
                      label={it ? "Cognome (opz.)" : "Last name (opt.)"}
                      value={form.lastName}
                      onChange={v => set("lastName", v)}
                      placeholder="Lombardi"
                      autoComplete="family-name"
                    />
                  </div>
                )}

                {!recovery && (
                <Field
                  label="Email"
                  type="email"
                  value={form.email}
                  onChange={v => set("email", v)}
                  placeholder="mario@esempio.it"
                  err={errors.email}
                  autoComplete="email"
                />
                )}
                <Field
                  label={recovery ? (it ? "Nuova password" : "New password") : "Password"}
                  type="password"
                  value={form.password}
                  onChange={v => set("password", v)}
                  placeholder="••••••••"
                  err={errors.password}
                  autoComplete={mode === "signup" || recovery ? "new-password" : "current-password"}
                />

                {(mode === "signup" || recovery) && form.password && <PwMeter pw={form.password} it={it}/>}

                {notice && (
                  <span className="srv-note" style={{ display: "block", padding: "10px 12px", background: "var(--secondary-tint, #E2ECF5)", border: "1px solid var(--rule)", borderRadius: 6, fontSize: 13.5, color: "var(--ink-soft)", lineHeight: 1.5 }}>
                    {notice}
                  </span>
                )}
                {errors.submit && <span className="srv-err">{errors.submit}</span>}

                {!recovery && mode === "login" && authMode === "supabase" && (
                  <button type="button" className="auth__switch" style={{ alignSelf: "flex-start", fontSize: 13 }} onClick={onForgotPassword}>
                    {it ? "Password dimenticata?" : "Forgot password?"}
                  </button>
                )}

                <button type="submit" className="btn btn--accent auth__submit" disabled={busy}>
                  {busy
                    ? (it ? "Attendi…" : "Working…")
                    : recovery
                      ? (it ? "Aggiorna password" : "Update password") + " →"
                      : mode === "signup"
                        ? (it ? "Crea account" : "Create account") + " →"
                        : (it ? "Accedi" : "Log in") + " →"}
                </button>

                <p className="auth__legal">
                  {mode === "signup"
                    ? (it
                        ? "Registrandoti accetti i Termini e l'Informativa Privacy SeaVin."
                        : "By signing up you agree to SeaVin Terms and Privacy Policy.")
                    : (it
                        ? "Hai problemi ad accedere? Scrivi a hello@seavin.it"
                        : "Trouble signing in? Email hello@seavin.it")}
                </p>
              </form>
            </div>
          </div>
        </div>
      </section>
    </Page>
  );
}

/* Reuse Field (same pattern as the surveyor form) */
function Field({ label, value, onChange, placeholder, type = "text", err, autoComplete }) {
  const [show, setShow] = useState(false);
  const isPw = type === "password";
  const inputType = isPw && show ? "text" : type;
  return (
    <div className="srv-field" data-err={!!err}>
      <label className="srv-field__lbl">{label}</label>
      <div className={`srv-field__wrap ${err ? "srv-field__wrap--err" : ""}`} style={isPw ? { position: "relative" } : undefined}>
        <input
          type={inputType}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          autoComplete={autoComplete}
          className="srv-field__input"
          style={isPw ? { paddingRight: 46 } : undefined}
        />
        {isPw && (
          <button type="button" onClick={() => setShow(s => !s)} tabIndex={-1}
            aria-label={show ? "Nascondi password" : "Mostra password"} aria-pressed={show}
            style={{ position: "absolute", right: 4, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", justifyContent: "center", width: 38, height: 38, background: "transparent", border: 0, cursor: "pointer", color: "var(--ink-mute)", padding: 0 }}>
            {show ? (
              <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
            ) : (
              <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg>
            )}
          </button>
        )}
      </div>
      {err && <span className="srv-err">{err}</span>}
    </div>
  );
}

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