// Bellia — Login (variante A : split panneau gauche / formulaire droit)

const LoginScreen = ({ onLogin }) => {
  const [email, setEmail] = React.useState('yannis@cantine-corner.fr');
  const [pwd, setPwd] = React.useState('••••••••••••');
  const [showPwd, setShowPwd] = React.useState(false);
  const [remember, setRemember] = React.useState(true);

  const submit = (e) => { e.preventDefault(); onLogin(); };

  return (
    <div style={{ minHeight: '100vh', background: C.bg, padding: 24, display: 'flex', gap: 24, fontFamily: 'Inter, sans-serif' }}>
      {/* ============ PANNEAU GAUCHE ============ */}
      <div style={{
        flex: '1 1 52%', minWidth: 420, background: `linear-gradient(160deg, ${C.orangeWh} 0%, ${C.cardSoft} 70%)`,
        borderRadius: 28, padding: '40px 44px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        position: 'relative', overflow: 'hidden',
      }}>
        {/* décor doux */}
        <div style={{ position: 'absolute', right: -180, top: -120, width: 460, height: 460, borderRadius: 999, background: C.orangeSft, opacity: 0.55, filter: 'blur(0.5px)' }} />
        <div style={{ position: 'absolute', right: -40, bottom: -200, width: 380, height: 380, borderRadius: 999, background: C.cream, opacity: 0.7 }} />

        <div style={{ position: 'relative', zIndex: 2 }}><Logo size={34} /></div>

        <div style={{ position: 'relative', zIndex: 2, maxWidth: 520 }}>
          <Pill kind="accent" style={{ marginBottom: 22 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: C.orangeDp, display: 'inline-block' }} />
            Pour les restaurateurs exigeants
          </Pill>
          <h1 style={{
            fontSize: 46, fontWeight: 700, color: C.ink, margin: 0, lineHeight: 1.08,
            letterSpacing: -1.2, textWrap: 'pretty',
          }}>
            Vos restaurants,<br/>en clair.<br/>
            <span style={{ color: C.orangeDp, fontStyle: 'italic', fontWeight: 600 }}>Sans quitter la cuisine.</span>
          </h1>
          <p style={{ fontSize: 15, color: C.mute, marginTop: 18, maxWidth: 440, lineHeight: 1.55 }}>
            Bellia centralise vos chiffres, vos équipes et vos automatisations IA — pour les indépendants et les groupes jusqu'à 30 restaurants.
          </p>
        </div>

        {/* Aperçu produit subtil — carte flottante */}
        <div style={{ position: 'relative', zIndex: 2 }}>
          <div style={{
            background: C.card, border: `1px solid ${C.line}`, borderRadius: 22, padding: 20,
            maxWidth: 420, boxShadow: '0 30px 60px -40px rgba(36,27,18,0.25)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 32, height: 32, borderRadius: 10, background: C.orangeWh, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name="sparkles" size={16} color={C.orangeDp} />
                </div>
                <div>
                  <div style={{ fontSize: 12, color: C.mute, fontWeight: 500 }}>Bellia IA · ce matin</div>
                  <div style={{ fontSize: 13, color: C.ink, fontWeight: 600 }}>Votre clôture est prête</div>
                </div>
              </div>
              <Pill kind="ok">Validé</Pill>
            </div>
            <div style={{ marginTop: 14, display: 'flex', alignItems: 'baseline', gap: 10 }}>
              <div style={{ fontSize: 32, fontWeight: 700, color: C.ink, fontVariantNumeric: 'tabular-nums', letterSpacing: -0.5 }}>{eur(MONTH_TOTAL)}</div>
              <Pill kind="ok" size="sm" icon={<Icon name="trendUp" size={10} />}>+8,1 %</Pill>
            </div>
            <div style={{ marginTop: 8, fontSize: 11, color: C.mute }}>CA TTC · mai 2026</div>
            <div style={{ marginTop: 14, height: 44 }}>
              <Sparkline data={SALES_30} accent={C.orange} height={44} />
            </div>
          </div>

          <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 18 }}>
            <div style={{ fontSize: 11, color: C.mute, fontWeight: 600, letterSpacing: 0.5 }}>FONT CONFIANCE</div>
            <div style={{ display: 'flex', gap: 22 }}>
              {['Cantine Corner', 'Maison Loup', 'Petite Table', 'Brasserie Sud'].map(n => (
                <span key={n} style={{ fontSize: 13, color: C.ink2, fontWeight: 600, fontFamily: 'Georgia, serif', fontStyle: 'italic' }}>{n}</span>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* ============ PANNEAU DROIT — FORMULAIRE ============ */}
      <div style={{ flex: '1 1 48%', background: C.card, border: `1px solid ${C.line}`, borderRadius: 28, padding: '40px 56px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 10 }}>
          <span style={{ fontSize: 12, color: C.mute }}>Pas encore de compte ?</span>
          <a href="#" style={{ fontSize: 12, color: C.orangeDp, fontWeight: 600, textDecoration: 'none', borderBottom: `1px solid ${C.orangeSft}`, paddingBottom: 1 }}>Commencer l'essai gratuit</a>
        </div>

        <form onSubmit={submit} style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: 400, margin: '0 auto', width: '100%' }}>
          <h2 style={{ fontSize: 30, fontWeight: 700, color: C.ink, margin: 0, letterSpacing: -0.6 }}>Bon retour</h2>
          <p style={{ fontSize: 14, color: C.mute, marginTop: 8 }}>Connectez-vous à votre espace Bellia.</p>

          <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Field label="Adresse email" icon={<Icon name="mail" size={16} color={C.mute} />}>
              <input
                type="email" value={email} onChange={e => setEmail(e.target.value)}
                style={inputStyle}
                autoComplete="email"
              />
            </Field>

            <Field label="Mot de passe" icon={<Icon name="lock" size={16} color={C.mute} />} action={
              <a href="#" style={{ fontSize: 11, color: C.orangeDp, fontWeight: 600, textDecoration: 'none' }}>Oublié ?</a>
            }>
              <div style={{ position: 'relative' }}>
                <input
                  type={showPwd ? 'text' : 'password'} value={pwd} onChange={e => setPwd(e.target.value)}
                  style={{ ...inputStyle, paddingRight: 42 }}
                  autoComplete="current-password"
                />
                <button type="button" onClick={() => setShowPwd(v => !v)} aria-label={showPwd ? 'Masquer le mot de passe' : 'Afficher le mot de passe'} style={{
                  position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', background: 'transparent',
                  border: 'none', cursor: 'pointer', padding: 6, color: C.mute, display: 'flex',
                }}>
                  <Icon name={showPwd ? 'eyeOff' : 'eye'} size={16} />
                </button>
              </div>
            </Field>

            <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', userSelect: 'none' }}>
              <button type="button" onClick={() => setRemember(v => !v)} aria-checked={remember} role="checkbox" style={{
                width: 18, height: 18, borderRadius: 6, border: `1.5px solid ${remember ? C.orange : C.line}`,
                background: remember ? C.orange : C.card, display: 'flex', alignItems: 'center', justifyContent: 'center',
                cursor: 'pointer', padding: 0, flexShrink: 0,
              }}>
                {remember && <Icon name="check" size={12} color="#fff" stroke={3} />}
              </button>
              <span style={{ fontSize: 12, color: C.ink2 }}>Garder ma session ouverte sur cet appareil</span>
            </label>
          </div>

          <div style={{ marginTop: 26, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <Btn type="submit" kind="primary" size="lg" full iconAfter={<Icon name="arrowR" size={16} />}>Se connecter</Btn>

            <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '4px 0' }}>
              <div style={{ flex: 1, height: 1, background: C.line }} />
              <span style={{ fontSize: 10, color: C.mute2, fontWeight: 600, letterSpacing: 1 }}>OU</span>
              <div style={{ flex: 1, height: 1, background: C.line }} />
            </div>

            <Btn kind="ghost" size="lg" full icon={<GoogleG />} onClick={onLogin}>Continuer avec Google</Btn>
          </div>

          <div style={{ marginTop: 28, padding: 14, borderRadius: 14, background: C.cardWash, border: `1px dashed ${C.line}`, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <Icon name="shield" size={16} color={C.orangeDp} style={{ marginTop: 1 }} />
            <div style={{ fontSize: 11, color: C.mute, lineHeight: 1.5 }}>
              Connexion sécurisée · données hébergées en France · conforme RGPD.
            </div>
          </div>
        </form>
      </div>
    </div>
  );
};

const inputStyle = {
  width: '100%', height: 48, borderRadius: 14, border: `1px solid ${C.line}`,
  background: C.card, padding: '0 14px 0 38px', fontSize: 14, color: C.ink,
  fontFamily: 'inherit', outline: 'none', transition: 'border-color .15s ease, box-shadow .15s ease',
};

const Field = ({ label, icon, children, action }) => (
  <div>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 7 }}>
      <label style={{ fontSize: 12, color: C.ink2, fontWeight: 600 }}>{label}</label>
      {action}
    </div>
    <div style={{ position: 'relative' }}>
      <div style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none', display: 'flex' }}>{icon}</div>
      {children}
    </div>
  </div>
);

const GoogleG = () => (
  <svg width="16" height="16" viewBox="0 0 48 48" style={{ display: 'inline-block' }}>
    <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.6-6 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.5 29.3 4.5 24 4.5 13.2 4.5 4.5 13.2 4.5 24S13.2 43.5 24 43.5 43.5 34.8 43.5 24c0-1.2-.1-2.3-.4-3.5z"/>
    <path fill="#FF3D00" d="m6.3 14.7 6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.5 29.3 4.5 24 4.5c-7.5 0-14 4.3-17.7 10.2z"/>
    <path fill="#4CAF50" d="M24 43.5c5.2 0 9.9-2 13.4-5.2l-6.2-5.2c-2 1.4-4.5 2.4-7.2 2.4-5.3 0-9.7-3.3-11.3-8l-6.5 5C9.9 39.2 16.4 43.5 24 43.5z"/>
    <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.3-2.3 4.3-4.3 5.7l6.2 5.2c-.4.4 6.8-5 6.8-14.9 0-1.2-.1-2.3-.4-3.5z"/>
  </svg>
);

window.LoginScreen = LoginScreen;