// ============================================================
//  LOGIN — Sélection compte de démonstration
// ============================================================

const Login = () => {
  const { t, setRole, setPage } = useApp();
  const accounts = [
    { key: "admin", icon: "settings", color: "red", title: t.roles.admin, desc: "Accès complet : dashboard, validation, gestion des membres, export CSV.", btn: t.login.asAdmin },
    { key: "member", icon: "users", color: "green", title: t.roles.member, desc: "Trombinoscope complet, fiches détaillées, opportunités, mise à jour de profil.", btn: t.login.asMember },
    { key: "visitor", icon: "eye", color: "blue", title: t.roles.visitor, desc: "Page d'accueil publique et présentation générale de l'AJC.", btn: t.login.asVisitor }
  ];
  const enter = (k) => { setRole(k); setPage(k === "admin" ? "dash" : k === "member" ? "trombi" : "home"); };
  return (
    <Section className="py-12 md:py-16 max-w-4xl mx-auto">
      <div className="text-center mb-10">
        <LogoAJC size={56}/>
        <h1 className="font-display text-4xl md:text-5xl font-semibold text-ajc-blueDk mt-5">{t.login.title}</h1>
        <p className="mt-2 text-ajc-mute">{t.login.lead}</p>
      </div>
      <div className="grid md:grid-cols-3 gap-5">
        {accounts.map(a => {
          const colors = {
            red:   { bg: "from-ajc-red to-red-700 text-white", btn: "danger" },
            green: { bg: "from-ajc-green to-emerald-700 text-white", btn: "primary" },
            blue:  { bg: "from-ajc-blue to-ajc-blueDk text-white", btn: "secondary" }
          };
          const c = colors[a.color];
          return (
            <div key={a.key} className="bg-white rounded-2xl border border-ajc-blue/10 overflow-hidden shadow-card flex flex-col">
              <div className={"bg-gradient-to-br p-6 relative overflow-hidden " + c.bg}>
                <div className="absolute inset-0 cross-watermark opacity-25"></div>
                <Icon name={a.icon} size={32} className="relative"/>
                <h3 className="font-display text-2xl font-semibold mt-4 relative">{a.title}</h3>
              </div>
              <div className="p-5 flex-1 flex flex-col">
                <p className="text-sm text-ajc-ink/80 leading-relaxed flex-1">{a.desc}</p>
                <button onClick={() => enter(a.key)}
                  className={"mt-4 inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition " +
                    (a.color === "red" ? "bg-ajc-red text-white hover:bg-red-700" :
                     a.color === "green" ? "bg-ajc-green text-white hover:bg-emerald-700" :
                     "bg-ajc-blue text-white hover:bg-ajc-blue2")}>
                  {a.btn} <Icon name="arrowRight" size={14}/>
                </button>
              </div>
            </div>
          );
        })}
      </div>
      <div className="mt-10 text-center text-xs text-ajc-mute">
        Prototype de démonstration — Les comptes ci-dessus sont fictifs et permettent d'explorer les trois rôles.
      </div>
    </Section>
  );
};

window.Login = Login;