// Trainin Center — Page « Connexion » (/connexion/)
// Réutilise tc-system + NavBar/Footer (tc-sections).
// Redirige vers l'espace Learnybox pour l'authentification.

const isMobCx = (d) => d === 'mobile';

// Page passerelle : redirige vers l'espace Learnybox pour l'authentification.
// Learnybox gère lui-même la connexion (email/mdp) et la session.
const CX_ESPACE_URL   = 'https://espace.trainin-center.com/formation/home/';
const CX_RESET_URL    = 'https://espace.trainin-center.com/reset/';
const CX_CONTACT_URL  = './contact.html#formulaire';

// ── Icône clé / espace ──────────────────────────────────────
function CxIcon() {
  return (
    <div style={{
      width: 64, height: 64, borderRadius: 18,
      background: TC.sageMist,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      marginBottom: 28,
    }}>
      <svg width="30" height="30" viewBox="0 0 24 24" fill="none">
        <rect x="3" y="11" width="18" height="11" rx="2" stroke={TC.sageDeep} strokeWidth="1.6"/>
        <path d="M7 11V7a5 5 0 0110 0v4" stroke={TC.sageDeep} strokeWidth="1.6" strokeLinecap="round"/>
        <circle cx="12" cy="16.5" r="1.5" fill={TC.sageDeep}/>
      </svg>
    </div>
  );
}

// ── Page ────────────────────────────────────────────────────
function ConnexionPage({ device }) {
  const m = isMobCx(device);

  return (
    <div style={{ background: TC.white, width: '100%', fontFamily: fontSans, color: TC.ink }}>
      <NavBar device={device} />

      {/* Hero centré */}
      <section style={{
        background: TC.off,
        minHeight: m ? 'auto' : 480,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: m ? '60px 22px 64px' : '72px 24px 80px',
        position: 'relative', overflow: 'hidden',
      }}>
        {/* fond décoratif */}
        <div style={{
          position: 'absolute', top: m ? -100 : -200, right: m ? -120 : -180,
          width: m ? 340 : 640, height: m ? 340 : 640, borderRadius: '50%',
          background: `radial-gradient(circle, ${TC.sageSoft} 0%, ${TC.off} 65%)`,
          pointerEvents: 'none',
        }} />

        <div style={{
          position: 'relative', width: '100%',
          maxWidth: m ? 480 : 620,
          background: TC.white,
          borderRadius: m ? 20 : 28,
          border: `1px solid ${TC.hair}`,
          padding: m ? '36px 24px 40px' : '68px 68px 72px',
          boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 20px 60px -20px rgba(26,31,28,0.16)',
          display: 'flex', flexDirection: 'column', alignItems: 'flex-start',
        }}>
          <CxIcon />

          <div style={{
            fontFamily: fontMono, fontSize: 10.5, letterSpacing: 1.4,
            textTransform: 'uppercase', color: TC.sageDeep, marginBottom: 14,
          }}>
            Espace élève
          </div>

          <h1 style={{
            fontFamily: fontSans, fontSize: m ? 26 : 32, fontWeight: 500,
            letterSpacing: -1, lineHeight: 1.1, color: TC.ink,
            margin: '0 0 14px', textWrap: 'balance',
          }}>
            Accédez à votre{' '}
            <span style={{ fontFamily: fontSerif, fontStyle: 'italic', fontWeight: 400, color: TC.sageDeep }}>
              espace formation
            </span>
          </h1>

          <p style={{
            fontFamily: fontSans, fontSize: m ? 14.5 : 15.5, lineHeight: 1.6,
            color: TC.ink2, margin: '0 0 28px', letterSpacing: -0.05,
          }}>
            Connectez-vous à votre espace élève pour retrouver vos formations,
            vos modules et vos contenus pédagogiques Trainin Center.
          </p>

          {/* CTA principal — passerelle vers Learnybox (gère email/mdp + session) */}
          <a
            href={CX_ESPACE_URL}
            data-cta="learnybox:login"
            style={{
              width: '100%', height: 54,
              background: TC.sage, color: TC.white,
              border: 'none', borderRadius: 999, cursor: 'pointer',
              fontFamily: fontSans, fontSize: 16, fontWeight: 600, letterSpacing: -0.2,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              textDecoration: 'none',
              boxShadow: '0 1px 2px rgba(0,0,0,0.06), 0 8px 22px rgba(90,145,105,0.28)',
              transition: 'background 0.2s',
            }}
          >
            Accéder à mon espace formation
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 7h8M8 4l3 3-3 3" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>

          {/* Lien mot de passe oublié */}
          <div style={{ width: '100%', display: 'flex', justifyContent: 'center', marginTop: 14 }}>
            <a
              href={CX_RESET_URL}
              style={{
                fontFamily: fontSans, fontSize: 13.5, color: TC.sageDeep,
                textDecoration: 'underline', textDecorationColor: 'rgba(61,95,71,0.35)',
                textUnderlineOffset: 3, letterSpacing: -0.1,
              }}
            >
              Mot de passe oublié&nbsp;?
            </a>
          </div>

          {/* Séparateur */}
          <div style={{
            width: '100%', display: 'flex', alignItems: 'center', gap: 14,
            margin: '26px 0',
          }}>
            <div style={{ flex: 1, height: 1, background: TC.hair }} />
            <span style={{ fontFamily: fontMono, fontSize: 10, letterSpacing: 1, textTransform: 'uppercase', color: TC.ink3 }}>ou</span>
            <div style={{ flex: 1, height: 1, background: TC.hair }} />
          </div>

          {/* CTA secondaire */}
          <a
            href={CX_CONTACT_URL}
            data-cta="goto:contact"
            style={{
              width: '100%', height: 50,
              background: 'transparent', color: TC.ink,
              border: `1.5px solid ${TC.hair}`, borderRadius: 999, cursor: 'pointer',
              fontFamily: fontSans, fontSize: 15, fontWeight: 500, letterSpacing: -0.15,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              textDecoration: 'none',
            }}
          >
            Nous contacter
          </a>

          {/* Réassurance */}
          <div style={{
            width: '100%', display: 'flex', alignItems: 'flex-start', gap: 9,
            marginTop: 22, paddingTop: 22, borderTop: `1px solid ${TC.hair}`,
          }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, marginTop: 1 }}>
              <path d="M12 2L3 7v5c0 5.25 3.75 10.15 9 11.25C17.25 22.15 21 17.25 21 12V7L12 2z" stroke={TC.sage} strokeWidth="1.6" strokeLinejoin="round"/>
              <path d="M9 12l2 2 4-4" stroke={TC.sage} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            <span style={{
              fontFamily: fontSans, fontSize: 12.5, lineHeight: 1.55,
              color: TC.ink3, letterSpacing: -0.02,
            }}>
              La connexion et la gestion de votre compte sont assurées par{' '}
              <strong style={{ color: TC.ink2, fontWeight: 500 }}>Learnybox</strong>.
              Vos identifiants restent strictement confidentiels.
            </span>
          </div>
        </div>
      </section>

      <Footer device={device} />
    </div>
  );
}

Object.assign(window, { ConnexionPage });