// ─── Landing + Auth screens ────────────────────────────────────

function Landing({ t, goto, lang }) {
  // Live ticker — fake events
  const events = useMemo(() => {
    const cities = ["Paris", "Berlin", "London", "NYC", "Tokyo", "Lisbon", "Lyon", "Madrid", "Amsterdam", "Singapore", "Dubai", "São Paulo"];
    const verbs = lang === "fr"
      ? ["pitch deck généré", "campagne lancée", "PR mergée", "lead qualifié", "facture émise", "ticket résolu", "veille publiée", "API déployée"]
      : ["pitch deck shipped", "campaign launched", "PR merged", "lead qualified", "invoice issued", "ticket resolved", "watch published", "API deployed"];
    const samples = window.AGENTS.slice().sort(() => Math.random() - 0.5).slice(0, 14);
    return samples.map((a, i) => ({
      agent: `#${String(a.n).padStart(2, "0")} ${a.name[lang]}`,
      verb: verbs[i % verbs.length],
      city: cities[i % cities.length],
    }));
  }, [lang]);

  return (
    <div className="landing">
      {/* HERO */}
      <section className="hero">
        <div className="grid-bg"></div>
        <div className="container hero-inner">
          <div className="kicker">{t.landing.kicker}</div>
          <h1 className="display" style={{ marginTop: 16 }}>
            <span className="ghost">{t.landing.h1_pre}</span><br/>
            <span>{t.landing.h1_a}</span>{" "}
            <span>{t.landing.h1_b}</span>{" "}
            <span className="em">{t.landing.h1_c}</span>
          </h1>
          <p className="sub">{t.landing.sub}</p>
          <div className="hero-cta">
            <button className="btn btn-primary btn-xl" onClick={() => goto("onboarding")}>
              {t.landing.cta_primary} <Icon.arrow/>
            </button>
            <button className="btn btn-ghost btn-xl" onClick={() => goto("projects")}>
              {t.landing.cta_secondary}
            </button>
          </div>
          <div className="hero-meta">
            <div className="stat"><strong>68</strong>{lang === "fr" ? "agents IA" : "AI agents"}</div>
            <div className="stat"><strong>412</strong>{lang === "fr" ? "projets actifs" : "active projects"}</div>
            <div className="stat"><strong>19</strong>{lang === "fr" ? "pays" : "countries"}</div>
            <div className="stat"><strong>24/7</strong>{lang === "fr" ? "exécution autonome" : "autonomous execution"}</div>
          </div>
        </div>
      </section>

      {/* LIVE TICKER */}
      <section className="ticker">
        <div className="ticker-track">
          {[...events, ...events].map((e, i) => (
            <span key={i} className="ticker-item">
              <span className="dot"></span>
              <span className="agent">{e.agent}</span>
              <span>·</span>
              <span>{e.verb}</span>
              <span>·</span>
              <span className="city">{e.city}</span>
            </span>
          ))}
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="steps">
        <div className="container">
          <div className="kicker">{t.landing.how_title}</div>
          <h2 style={{ marginTop: 12, fontSize: "clamp(32px, 4vw, 48px)" }}>
            {lang === "fr"
              ? <>Trois minutes pour <span style={{ color: "var(--muted-2)" }}>nous briefer.</span><br/>Le reste, on s'en occupe.</>
              : <>Three minutes to <span style={{ color: "var(--muted-2)" }}>brief us.</span><br/>The rest, we handle.</>
            }
          </h2>
          <div className="steps-grid">
            {[
              { num: "01", t: t.landing.step1_t, b: t.landing.step1_b, g: "✎" },
              { num: "02", t: t.landing.step2_t, b: t.landing.step2_b, g: "₿" },
              { num: "03", t: t.landing.step3_t, b: t.landing.step3_b, g: "▶" },
            ].map(s => (
              <div className="step-card" key={s.num}>
                <div className="num">STEP {s.num}</div>
                <h3>{s.t}</h3>
                <p>{s.b}</p>
                <span className="glyph">{s.g}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CATEGORIES OVERVIEW */}
      <section className="cats-section">
        <div className="container">
          <div className="kicker">{t.landing.cats_title}</div>
          <h2 style={{ marginTop: 12, fontSize: "clamp(32px, 4vw, 48px)", maxWidth: 740 }}>
            {t.landing.cats_sub}
          </h2>
          <div className="cats-grid">
            {window.AGENT_CATEGORIES.map(c => {
              const agents = window.AGENTS_BY_CAT[c.id];
              return (
                <div className="cat-tile" key={c.id}>
                  <span className="icon">{c.icon}</span>
                  <span className="name">{c[lang]}</span>
                  <span className="count">{agents.length} {lang === "fr" ? "agents" : "agents"}</span>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <div className="container foot">{t.landing.foot}</div>
    </div>
  );
}

// ── AUTH ────────────────────────────────────────────────────────
function Auth({ t, goto, lang }) {
  const [mode, setMode] = useState("login"); // "login" | "signup"
  const [email, setEmail] = useState("");
  const [pw, setPw] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [info, setInfo] = useState("");
  const isSignup = mode === "signup";

  // animated agent stream
  const streamItems = useMemo(() => {
    const samples = window.AGENTS.slice().sort(() => Math.random() - 0.5).slice(0, 6);
    const verbs = lang === "fr"
      ? ["déployé", "publié", "envoyé", "généré", "validé", "indexé"]
      : ["deployed", "published", "sent", "generated", "validated", "indexed"];
    return samples.map((a, i) => ({
      n: String(a.n).padStart(2, "0"),
      name: a.name[lang],
      verb: verbs[i % verbs.length],
      time: `${String(Math.floor(Math.random() * 12)).padStart(2,"0")}:${String(Math.floor(Math.random()*60)).padStart(2,"0")}`,
    }));
  }, [lang, mode]);

  const submit = async (e) => {
    e.preventDefault();
    setError(""); setInfo("");
    if (!email || !pw) {
      setError(lang === "fr" ? "Email et mot de passe requis." : "Email and password are required.");
      return;
    }
    if (isSignup && pw.length < 8) {
      setError(lang === "fr" ? "Mot de passe : 8 caractères minimum." : "Password must be at least 8 characters.");
      return;
    }
    setBusy(true);
    try {
      if (isSignup) {
        const { data, error: err } = await window.sb.auth.signUp({
          email, password: pw,
          options: { emailRedirectTo: window.location.origin + "/" },
        });
        if (err) throw err;
        if (data.session) {
          goto("onboarding");
        } else {
          setInfo(lang === "fr"
            ? "Vérifiez votre boîte mail pour confirmer votre adresse, puis revenez vous connecter."
            : "Check your inbox to confirm your email, then come back to sign in.");
        }
      } else {
        const { error: err } = await window.sb.auth.signInWithPassword({ email, password: pw });
        if (err) throw err;
        goto("projects");
      }
    } catch (err) {
      setError(err.message || (lang === "fr" ? "Erreur inconnue." : "Unknown error."));
    } finally {
      setBusy(false);
    }
  };

  const ssoGoogle = async () => {
    setError(""); setInfo("");
    setBusy(true);
    try {
      const { error: err } = await window.sb.auth.signInWithOAuth({
        provider: "google",
        options: { redirectTo: window.location.origin + "/" },
      });
      if (err) throw err;
    } catch (err) {
      setError(err.message || "Google sign-in failed.");
      setBusy(false);
    }
  };

  return (
    <div className="auth-screen">
      <aside className="auth-side">
        <div>
          <div className="kicker">{lang === "fr" ? "pendant que vous dormez" : "while you sleep"}</div>
          <h2 style={{ marginTop: 16 }}>
            {lang === "fr" ? <>Vos 68 agents <span style={{ color: "var(--accent)" }}>n'arrêtent jamais.</span></> : <>Your 68 agents <span style={{ color: "var(--accent)" }}>never stop.</span></>}
          </h2>
          <p className="sub">
            {lang === "fr"
              ? "Connectez-vous pour reprendre la main sur Clausio. 23 nouvelles tâches depuis votre dernière visite."
              : "Sign in to take Clausio back. 23 new tasks since your last visit."}
          </p>
        </div>

        <div className="agent-stream">
          {streamItems.map((s, i) => (
            <div className="row-log" key={i}>
              <span className="t">{s.time}</span>
              <span className="ag">#{s.n}</span>
              <span style={{ flex: 1 }}>{s.name}</span>
              <span className="t">{s.verb}</span>
              <span style={{ color: "var(--accent)" }}>✓</span>
            </div>
          ))}
        </div>
      </aside>

      <div className="auth-form-side">
        <form className="auth-form" onSubmit={submit}>
          <div>
            <h2 style={{ fontSize: 32 }}>{isSignup ? t.auth.signup_title : t.auth.title}</h2>
            <p className="muted" style={{ marginTop: 6 }}>{isSignup ? t.auth.signup_sub : t.auth.sub}</p>
          </div>

          <button type="button" className="btn btn-ghost" style={{ width: "100%" }} disabled={busy} onClick={ssoGoogle}>
            <svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M21.35 11.1H12v2.83h5.4c-.24 1.45-1.66 4.27-5.4 4.27-3.25 0-5.9-2.69-5.9-6s2.65-6 5.9-6c1.85 0 3.09.79 3.8 1.47l2.59-2.5C16.93 3.65 14.71 2.7 12 2.7 6.97 2.7 2.9 6.77 2.9 11.8s4.07 9.1 9.1 9.1c5.25 0 8.73-3.69 8.73-8.88 0-.6-.07-1.05-.16-1.52z"/></svg>
            {t.auth.sso}
          </button>

          <div className="row-or">{t.auth.or}</div>

          <div className="field">
            <label>{t.auth.email}</label>
            <input type="email" placeholder="vous@entreprise.com" value={email} onChange={e => setEmail(e.target.value)} autoFocus />
          </div>
          <div className="field">
            <label>{t.auth.password}</label>
            <input type="password" placeholder="••••••••••" value={pw} onChange={e => setPw(e.target.value)} />
          </div>

          {error && (
            <div style={{ padding: "10px 12px", borderRadius: 8, background: "rgba(255,90,31,.12)", border: "1px solid rgba(255,90,31,.4)", color: "#ff5a1f", fontSize: 13 }}>
              {error}
            </div>
          )}
          {info && (
            <div style={{ padding: "10px 12px", borderRadius: 8, background: "rgba(200,255,61,.10)", border: "1px solid rgba(200,255,61,.35)", color: "var(--accent)", fontSize: 13 }}>
              {info}
            </div>
          )}

          <button type="submit" className="btn btn-primary btn-lg" style={{ width: "100%" }} disabled={busy}>
            {busy
              ? (lang === "fr" ? "…" : "…")
              : (isSignup ? t.auth.submit_signup : t.auth.submit_login)}
            <Icon.arrow/>
          </button>

          <div className="switch-link">
            <button type="button" onClick={() => setMode(isSignup ? "login" : "signup")} style={{ color: "var(--muted)" }}>
              {isSignup ? t.auth.switch_to_login : t.auth.switch_to_signup}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { Landing, Auth });