// LOGIN + SIGNUP — brand-voiced
const { useState, useEffect } = React;
const { Link, Btn } = window;
const Logo = window.Logo;

function Login() {
  const [email, setEmail] = useState("");
  const [pw, setPw] = useState("");
  return (
    <main className="page-enter" style={{ background: "var(--ink)", color: "var(--cream)", minHeight: "100vh" }}>
      <AuthFrame
        side={<AuthAside />}
        title={<>Bon retour<em style={{ color: "var(--acid)" }}>.</em></>}
        sub="La plateforme est exactement là où vous l'avez laissée. Nous n'avons rien déplacé."
        cta={["Se connecter", () => alert("Connexion effectuée (simulation)")]}
        switchTo={["Pas de compte ?", "Essayer la plateforme pendant 14 jours", "/signup"]}
      >
        <FormField label="E-mail professionnel"><input className="lx-input" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="vous@entreprise.com" /></FormField>
        <FormField label="Mot de passe"><input className="lx-input" type="password" value={pw} onChange={e => setPw(e.target.value)} placeholder="••••••••••••" /></FormField>
        <div className="flex justify-between" style={{ marginTop: 18, alignItems: "center" }}>
          <label style={{ display: "inline-flex", alignItems: "center", gap: 10, color: "rgba(242,237,228,0.7)" }}>
            <input type="checkbox" style={{ accentColor: "oklch(88% 0.21 128)" }} /> <span className="body">Se souvenir de cet appareil</span>
          </label>
          <a href="#" className="ilink mono" style={{ color: "var(--acid)" }}>Mot de passe oublié</a>
        </div>
      </AuthFrame>
    </main>
  );
}

function Signup() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [company, setCompany] = useState("");
  return (
    <main className="page-enter" style={{ background: "var(--ink)", color: "var(--cream)", minHeight: "100vh" }}>
      <AuthFrame
        side={<AuthAside variant="signup" />}
        title={<>14 jours. <em style={{ color: "var(--acid)" }}>Sans carte.</em></>}
        sub="Toute la plateforme, chaque module, les intégrations, vos données. Annulez à tout moment avant le 14e jour et nous oublierons même nous être rencontrés."
        cta={["Démarrer l'essai", () => alert("Essai démarré (simulation)")]}
        switchTo={["Déjà sur Clyvonna ?", "Se connecter", "/login"]}
      >
        <FormField label="Votre nom"><input className="lx-input" value={name} onChange={e => setName(e.target.value)} placeholder="Marine Sosa" /></FormField>
        <FormField label="E-mail professionnel"><input className="lx-input" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="marine@votre-entreprise.com" /></FormField>
        <FormField label="Nom de l'entreprise"><input className="lx-input" value={company} onChange={e => setCompany(e.target.value)} placeholder="Votre entreprise" /></FormField>
        <div className="mono" style={{ color: "rgba(242,237,228,0.55)", marginTop: 18 }}>
          En démarrant un essai, vous acceptez nos <Link to="/legal/terms" className="ilink">conditions générales</Link> et notre (très courte) <Link to="/legal/privacy" className="ilink">politique de confidentialité</Link>.
        </div>
      </AuthFrame>
    </main>
  );
}

function AuthFrame({ side, title, sub, children, cta, switchTo }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: "100vh" }}>
      {side}
      <div style={{ padding: "140px 80px 80px", display: "flex", flexDirection: "column", justifyContent: "center", borderLeft: "1px solid rgba(242,237,228,0.15)" }}>
        <div style={{ maxWidth: 480 }}>
          <h1 className="serif" style={{ fontSize: "clamp(48px, 6vw, 100px)", lineHeight: 0.94, letterSpacing: "-0.02em", color: "var(--cream)" }}>{title}</h1>
          <p className="body-lg" style={{ marginTop: 18, color: "rgba(242,237,228,0.78)" }}>{sub}</p>
          <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 20 }}>
            {children}
          </div>
          <button onClick={cta[1]} className="btn btn-acid" style={{ marginTop: 32, padding: "16px 28px", fontSize: 16 }}>{cta[0]} →</button>
          <div className="hairline" style={{ background: "rgba(242,237,228,0.18)", margin: "32px 0" }} />
          <div className="flex justify-between items-center" style={{ flexWrap: "wrap", gap: 16 }}>
            <span className="mono" style={{ color: "rgba(242,237,228,0.55)" }}>{switchTo[0]}</span>
            <Link to={switchTo[2]} className="ilink mono" style={{ color: "var(--acid)" }}>↳ {switchTo[1]}</Link>
          </div>
        </div>
      </div>
    </div>
  );
}

function FormField({ label, children }) {
  return (
    <div>
      <div className="lx-label" style={{ color: "rgba(242,237,228,0.55)", marginBottom: 6 }}>{label}</div>
      {children}
    </div>
  );
}

function AuthAside({ variant = "login" }) {
  return (
    <div style={{ padding: "140px 80px 60px", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 30% 30%, rgba(167, 230, 0, 0.08), transparent 60%)" }} />
      <div style={{ position: "relative" }}>
        <Logo inverted />
        <div style={{ marginTop: 80 }}>
          <span className="mono" style={{ color: "var(--acid)" }}>● EN DIRECT SUR LA PLATEFORME</span>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 28 }}>
            {[
              ["Marque A — Café", "Revue d'activité hebdomadaire · 11h00 CT", "rgba(242,237,228,0.7)"],
              ["Studio B — Cycles", "Bilan du test geo-lift", "rgba(242,237,228,0.7)"],
              ["Client Santé", "Mise à jour MMM T4 terminée", "var(--acid)"],
              ["Studio D — Outdoor", "Synthèse hebdo des canaux propriétaires", "rgba(242,237,228,0.7)"],
            ].map(([c, t, color]) => (
              <div key={c} style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 16, padding: "14px 20px", background: "rgba(242,237,228,0.04)", borderRadius: 4, borderLeft: `2px solid ${color}` }}>
                <span className="serif" style={{ fontSize: 18, color: "var(--cream)" }}>{c}</span>
                <span className="mono" style={{ color: "rgba(242,237,228,0.65)", fontSize: 10, alignSelf: "center" }}>{t}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ marginTop: 80 }}>
          <p className="serif italic" style={{ fontSize: 32, lineHeight: 1.2, color: "var(--cream)", maxWidth: 480 }}>
            {variant === "signup"
              ? "« Nous avons essayé quatre outils « martech » avant celui-ci. C'est le seul qui ait survécu à notre équipe finance. »"
              : "« Les tableaux de bord seuls ont remplacé un plan d'embauche de 180 000 $. »"}
          </p>
          <div className="mono" style={{ marginTop: 18, color: "rgba(242,237,228,0.6)" }}>
            {variant === "signup" ? "↳ Responsable Croissance, client confidentiel (Outdoor)" : "↳ VP Croissance, client confidentiel (SaaS Santé)"}
          </div>
        </div>
      </div>
    </div>
  );
}

window.Login = Login;
window.Signup = Signup;