import { useState, useEffect } from "react";
import type { FormEvent } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { useAuthStore } from "../../stores/authStore";
import { Loader2, Mail, Lock, Target, Clock, BarChart2 } from "lucide-react";

interface LocationState {
  from?: { pathname: string };
}

const STYLES = `
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  .lg-root {
    min-height: 100vh;
    display: flex;
    font-family: 'Nunito', sans-serif;
    background: #fffbf4;
  }

  /* ─── LEFT PANEL ─── */
  .lg-left {
    position: relative;
    width: 50%;
    min-height: 100vh;
    background: linear-gradient(160deg, #060d1f 0%, #0f2044 40%, #0e3476 75%, #1a56c4 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 3.5rem;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* Animated grid */
  .lg-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(99,179,255,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99,179,255,0.06) 1px, transparent 1px);
    background-size: 52px 52px;
    animation: gridScroll 25s linear infinite;
  }
  @keyframes gridScroll {
    from { background-position: 0 0; }
    to   { background-position: 52px 52px; }
  }

  /* Radial glow spots */
  .lg-glow {
    position: absolute; pointer-events: none; border-radius: 50%;
    filter: blur(60px);
  }
  .lg-glow-1 { width: 380px; height: 380px; background: #1d4ed8; opacity: 0.35; top: -120px; right: -80px; animation: glowPulse 8s ease-in-out infinite; }
  .lg-glow-2 { width: 280px; height: 280px; background: #0ea5e9; opacity: 0.2;  bottom: -60px; left: -60px;  animation: glowPulse 10s ease-in-out infinite 2s; }
  .lg-glow-3 { width: 200px; height: 200px; background: #f97316; opacity: 0.12; top: 55%; left: 55%; animation: glowPulse 12s ease-in-out infinite 1s; }
  @keyframes glowPulse {
    0%,100% { transform: scale(1);   opacity: 0.2; }
    50%      { transform: scale(1.2); opacity: 0.35; }
  }

  /* ── Floating score card ── */
  .lg-score-card {
    position: absolute;
    top: 9%; right: 6%;
    width: 162px;
    background: linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px;
    padding: 1.1rem 1.2rem 1rem;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
    animation: floatA 6s ease-in-out infinite;
    z-index: 2;
  }
  @keyframes floatA {
    0%,100% { transform: translateY(0) rotate(-1.5deg); }
    50%      { transform: translateY(-14px) rotate(0.5deg); }
  }
  .lg-score-tag {
    font-size: 0.58rem; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase; color: #7dd3fc; margin-bottom: 0.5rem;
    display: flex; align-items: center; gap: 0.3rem;
  }
  .lg-score-tag::before { content:''; width:6px;height:6px;border-radius:50%;background:#34d399;display:inline-block;box-shadow:0 0 6px #34d399; }
  .lg-score-num {
    font-size: 2.2rem; font-weight: 900; color: white; line-height: 1; margin-bottom: 0.2rem;
    text-shadow: 0 2px 12px rgba(99,179,255,0.4);
  }
  .lg-score-delta {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.7rem; font-weight: 700; color: #4ade80;
    display: flex; align-items: center; gap: 0.2rem; margin-bottom: 0.75rem;
  }
  .lg-bars {
    display: flex; align-items: flex-end; gap: 3px; height: 40px;
  }
  .lg-bar {
    flex: 1; border-radius: 3px 3px 0 0;
    animation: barGrow 1s cubic-bezier(0.34,1.56,0.64,1) both;
    transform-origin: bottom;
  }
  @keyframes barGrow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
  }

  /* ── Streak pill ── */
  .lg-streak {
    position: absolute;
    bottom: 12%; left: 5%;
    background: linear-gradient(135deg, rgba(249,115,22,0.18), rgba(239,68,68,0.1));
    border: 1px solid rgba(249,115,22,0.4);
    border-radius: 100px;
    padding: 0.65rem 1.2rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(249,115,22,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
    display: flex; align-items: center; gap: 0.65rem;
    animation: floatB 7s ease-in-out infinite 1s;
    z-index: 2;
  }
  @keyframes floatB {
    0%,100% { transform: translateY(0) rotate(1deg); }
    50%      { transform: translateY(-10px) rotate(-0.5deg); }
  }
  .lg-streak-fire { font-size: 1.5rem; filter: drop-shadow(0 0 8px #f97316); }
  .lg-streak-text strong { display:block; font-size:0.85rem; font-weight:900; color:white; }
  .lg-streak-text span { font-family:'Nunito Sans',sans-serif; font-size:0.68rem; font-weight:600; color:#fed7aa; }

  /* ── Questions badge ── */
  .lg-q-badge {
    position: absolute;
    bottom: 28%; right: 5%;
    background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(99,102,241,0.1));
    border: 1px solid rgba(139,92,246,0.4);
    border-radius: 16px;
    padding: 0.7rem 1.05rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(139,92,246,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
    animation: floatA 9s ease-in-out infinite 0.5s;
    z-index: 2;
  }
  .lg-q-badge p { font-family:'Nunito Sans',sans-serif; font-size:0.68rem; font-weight:700; color:#c4b5fd; margin-bottom:0.15rem; }
  .lg-q-badge strong { font-size:1.35rem; font-weight:900; color:white; display:block; text-shadow:0 0 20px rgba(167,139,250,0.5); }

  /* ── Accuracy ring ── */
  .lg-ring-wrap {
    position: absolute;
    top: 52%; left: 6%;
    width: 80px; height: 80px;
    animation: floatB 10s ease-in-out infinite 0.8s;
    z-index: 2;
  }
  .lg-ring-svg { width: 80px; height: 80px; transform: rotate(-90deg); }
  .lg-ring-bg   { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 5; }
  .lg-ring-fill { fill: none; stroke: #34d399; stroke-width: 5; stroke-linecap: round;
    stroke-dasharray: 188; stroke-dashoffset: 18;
    animation: ringFill 1.8s ease both 0.3s; }
  @keyframes ringFill {
    from { stroke-dashoffset: 188; }
    to   { stroke-dashoffset: 18; }
  }
  .lg-ring-label {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .lg-ring-label strong { font-size: 0.95rem; font-weight: 900; color: white; line-height: 1; }
  .lg-ring-label span { font-family:'Nunito Sans',sans-serif; font-size: 0.52rem; font-weight: 700; color: #7dd3fc; text-transform: uppercase; letter-spacing: 0.05em; }

  /* Scattered glitter dots */
  .lg-glitter { position: absolute; border-radius: 50%; pointer-events: none; animation: glitterFloat 8s ease-in-out infinite; }
  @keyframes glitterFloat {
    0%,100% { transform: translateY(0) scale(1); opacity: 0.5; }
    50%      { transform: translateY(-16px) scale(1.3); opacity: 0.9; }
  }

  /* Stars */
  .lg-star { position: absolute; pointer-events: none; animation: starTwinkle 2.5s ease-in-out infinite; color: #fde68a; }
  @keyframes starTwinkle {
    0%,100% { opacity: 0.4; transform: scale(0.9) rotate(0deg); }
    50%      { opacity: 1;   transform: scale(1.4) rotate(20deg); }
  }

  /* Thin decorative rings */
  .lg-deco-ring {
    position: absolute; border-radius: 50%; pointer-events: none;
    border: 1.5px solid rgba(255,255,255,0.07);
    animation: decoSpin 40s linear infinite;
  }
  @keyframes decoSpin { to { transform: rotate(360deg); } }

  /* Panel content */
  .lg-panel-content {
    position: relative; z-index: 3;
    display: flex; flex-direction: column;
    align-items: flex-start; gap: 2rem;
    width: 100%;
  }

  .lg-panel-logo { display: flex; align-items: center; gap: 0.75rem; }
  .lg-panel-logo-badge {
    width: 46px; height: 46px; border-radius: 13px;
    background: linear-gradient(135deg, #f97316, #ef4444);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 0 rgba(0,0,0,0.3), 0 8px 20px rgba(249,115,22,0.45);
    font-size: 1.3rem;
  }
  .lg-panel-logo-text { font-size: 1.35rem; font-weight: 900; color: white; letter-spacing: -0.02em; }

  .lg-panel-headline { display: flex; flex-direction: column; gap: 0.6rem; }
  .lg-panel-headline h2 {
    font-size: 2.6rem; font-weight: 900; line-height: 1.1;
    color: white; letter-spacing: -0.035em;
    text-shadow: 0 4px 24px rgba(0,0,0,0.3);
  }
  .lg-panel-headline h2 span {
    background: linear-gradient(90deg, #fbbf24 0%, #f97316 60%, #ef4444 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 16px rgba(249,115,22,0.4));
  }
  .lg-panel-headline p {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.92rem; font-weight: 600; color: #93c5fd; line-height: 1.65;
  }

  /* Stats row */
  .lg-stats { display: flex; gap: 0.75rem; width: 100%; }
  .lg-stat {
    flex: 1;
    background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 18px; padding: 0.9rem 0.85rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
    display: flex; flex-direction: column; gap: 0.2rem;
    animation: statSlide 0.5s ease both;
  }
  .lg-stat:nth-child(1) { animation-delay: 0.1s; }
  .lg-stat:nth-child(2) { animation-delay: 0.2s; }
  .lg-stat:nth-child(3) { animation-delay: 0.3s; }
  @keyframes statSlide {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .lg-stat-icon { width: 28px; height: 28px; border-radius: 8px; display:flex;align-items:center;justify-content:center; margin-bottom:0.3rem; }
  .lg-stat strong { font-size: 1.3rem; font-weight: 900; color: white; line-height: 1; }
  .lg-stat span { font-family:'Nunito Sans',sans-serif; font-size:0.64rem; font-weight:600; color:#93c5fd; }

  /* Social proof */
  .lg-social { display: flex; align-items: center; gap: 0.75rem; }
  .lg-avs { display: flex; }
  .lg-av {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid #0f2044; margin-left: -8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 800; color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  .lg-av:first-child { margin-left: 0; }
  .lg-social p { font-family:'Nunito Sans',sans-serif; font-size:0.75rem; font-weight:700; color:#93c5fd; }
  .lg-social p strong { color:#fbbf24; }

  /* ─── RIGHT PANEL ─── */
  .lg-right {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 3rem 4rem;
    position: relative; overflow: hidden;
  }
  .lg-bg-dot { position:absolute;border-radius:50%;pointer-events:none;opacity:0.09;animation:bgFloat 10s ease-in-out infinite; }
  @keyframes bgFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }

  .lg-form-wrap {
    position: relative; z-index: 1;
    width: 100%; max-width: 400px;
    display: flex; flex-direction: column; gap: 2rem;
    animation: formPop 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  @keyframes formPop {
    from { opacity:0; transform:translateY(22px) scale(0.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
  }

  .lg-form-header { display:flex;flex-direction:column;gap:0.4rem; }
  .lg-form-header h1 { font-size:2rem;font-weight:900;color:#1e1b4b;letter-spacing:-0.03em;line-height:1.2; }
  .lg-form-header p { font-family:'Nunito Sans',sans-serif;font-size:0.88rem;font-weight:600;color:#9ca3af; }

  .lg-fields { display:flex;flex-direction:column;gap:1.1rem; }
  .lg-field { display:flex;flex-direction:column;gap:0.4rem; }
  .lg-label { font-size:0.7rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:#6b7280;padding-left:0.2rem; }
  .lg-input-wrap { position:relative; }
  .lg-input-icon { position:absolute;left:0.9rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#9ca3af;transition:color 0.2s; }
  .lg-input {
    width:100%;padding:0.9rem 1rem 0.9rem 2.65rem;
    background:#f9fafb;border:2.5px solid #f3f4f6;border-radius:14px;
    font-family:'Nunito Sans',sans-serif;font-size:0.9rem;font-weight:600;color:#1e1b4b;
    outline:none;transition:all 0.2s;box-sizing:border-box;
  }
  .lg-input:focus { background:white;border-color:#93c5fd;box-shadow:0 0 0 3.5px rgba(59,130,246,0.1); }
  .lg-input:disabled { opacity:0.5;cursor:not-allowed; }
  .lg-input::placeholder { color:#d1d5db; }

  .lg-remember { display:flex;align-items:center;gap:0.5rem;padding:0 0.1rem; }
  .lg-checkbox { width:17px;height:17px;border-radius:5px;accent-color:#3b82f6;cursor:pointer;flex-shrink:0; }
  .lg-remember-label { font-family:'Nunito Sans',sans-serif;font-size:0.8rem;font-weight:600;color:#6b7280;cursor:pointer; }

  .lg-error {
    background:#fff1f2;border:2px solid #fecdd3;border-radius:14px;padding:0.8rem 1rem;
    font-family:'Nunito Sans',sans-serif;font-size:0.82rem;font-weight:700;color:#e11d48;
    display:flex;align-items:center;gap:0.5rem;
  }

  .lg-success {
    background:#f0fdf4;border:2px solid #bbf7d0;border-radius:14px;padding:0.8rem 1rem;
    font-family:'Nunito Sans',sans-serif;font-size:0.82rem;font-weight:700;color:#15803d;
    display:flex;align-items:center;gap:0.5rem;
    animation: formPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  }

  .lg-btn {
    width:100%;padding:1rem;background:#f97316;color:white;border:none;border-radius:100px;cursor:pointer;
    font-family:'Nunito',sans-serif;font-size:1rem;font-weight:900;
    display:flex;align-items:center;justify-content:center;gap:0.5rem;
    box-shadow:0 6px 0 #c2560e,0 10px 24px rgba(249,115,22,0.28);
    transition:transform 0.1s,box-shadow 0.1s;
  }
  .lg-btn:hover  { transform:translateY(-2px);box-shadow:0 8px 0 #c2560e,0 14px 28px rgba(249,115,22,0.32); }
  .lg-btn:active { transform:translateY(3px);box-shadow:0 3px 0 #c2560e; }
  .lg-btn:disabled { background:#e5e7eb;color:#9ca3af;cursor:not-allowed;box-shadow:0 4px 0 #d1d5db; }
  .lg-btn:disabled:hover { transform:none;box-shadow:0 4px 0 #d1d5db; }

  .lg-spinner { animation:spin 0.8s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }

  .lg-footer { text-align:center;font-family:'Nunito Sans',sans-serif;font-size:0.75rem;font-weight:600;color:#9ca3af; }
  .lg-signup-footer { text-align:center;font-family:'Nunito Sans',sans-serif;font-size:0.8rem;font-weight:600;color:#9ca3af; }
  .lg-link { color:#f97316;font-weight:800;text-decoration:none;cursor:pointer; }
  .lg-link:hover { color:#ea6c00; }

  @media (max-width: 860px) {
    .lg-left { display:none; }
    .lg-right { padding:2rem 1.5rem; }
  }
`;

const BAR_HEIGHTS = [30, 50, 42, 75, 55, 88, 65];
const BAR_COLORS = [
  "#60a5fa",
  "#60a5fa",
  "#7dd3fc",
  "#38bdf8",
  "#60a5fa",
  "#7dd3fc",
  "#38bdf8",
];

const AV_COLORS = [
  "linear-gradient(135deg,#3b82f6,#1d4ed8)",
  "linear-gradient(135deg,#f97316,#ef4444)",
  "linear-gradient(135deg,#22c55e,#15803d)",
  "linear-gradient(135deg,#a855f7,#7c3aed)",
  "linear-gradient(135deg,#eab308,#ca8a04)",
];
const AV_INITIALS = ["SK", "NR", "TM", "AB", "PL"];

export const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const navigate = useNavigate();
  const location = useLocation();

  const {
    login,
    isAuthenticated,
    isLoading,
    error,
    clearError,
    registrationMessage,
  } = useAuthStore();
  const from =
    (location.state as LocationState)?.from?.pathname || "/student/home";

  useEffect(() => {
    if (isAuthenticated) navigate("/student/home", { replace: true });
  }, [isAuthenticated, navigate]);
  useEffect(() => {
    return () => clearError();
  }, [clearError]);

  const handleSubmit = async (e: FormEvent<HTMLButtonElement>) => {
    e.preventDefault();
    clearError();
    const success = await login({ email, password });
    if (success) navigate(from, { replace: true });
  };

  if (isAuthenticated) return null;

  return (
    <div className="lg-root">
      <style>{STYLES}</style>

      {/* ── LEFT PANEL ── */}
      <div className="lg-left">
        {/* Background layers */}
        <div className="lg-grid" />
        <div className="lg-glow lg-glow-1" />
        <div className="lg-glow lg-glow-2" />
        <div className="lg-glow lg-glow-3" />

        {/* Decorative spinning rings */}
        {[
          { s: 260, t: "38%", l: "58%", mt: -130, ml: -130 },
          {
            s: 380,
            t: "42%",
            l: "54%",
            mt: -190,
            ml: -190,
            dir: "reverse" as const,
          },
        ].map((r, i) => (
          <div
            key={i}
            className="lg-deco-ring"
            style={
              {
                width: r.s,
                height: r.s,
                top: r.t,
                left: r.l,
                marginTop: r.mt,
                marginLeft: r.ml,
                animationDirection: r.dir ?? "normal",
                animationDuration: `${35 + i * 10}s`,
              } as React.CSSProperties
            }
          />
        ))}

        {/* Floating score card */}
        <div className="lg-score-card">
          <p className="lg-score-tag">SAT Score</p>
          <p className="lg-score-num">1480</p>
          <p className="lg-score-delta">▲ +120 pts this month</p>
          <div className="lg-bars">
            {BAR_HEIGHTS.map((h, i) => (
              <div
                key={i}
                className="lg-bar"
                style={{
                  height: `${h}%`,
                  background: BAR_COLORS[i],
                  animationDelay: `${i * 0.08}s`,
                }}
              />
            ))}
          </div>
        </div>

        {/* Accuracy ring */}
        <div className="lg-ring-wrap">
          <svg className="lg-ring-svg" viewBox="0 0 80 80">
            <circle className="lg-ring-bg" cx="40" cy="40" r="30" />
            <circle className="lg-ring-fill" cx="40" cy="40" r="30" />
          </svg>
          <div className="lg-ring-label">
            <strong>94%</strong>
            <span>Accuracy</span>
          </div>
        </div>

        {/* Streak pill */}
        <div className="lg-streak">
          <span className="lg-streak-fire">🔥</span>
          <div className="lg-streak-text">
            <strong>14-day streak!</strong>
            <span>Keep it going</span>
          </div>
        </div>

        {/* Questions badge */}
        <div className="lg-q-badge">
          <p>Questions solved</p>
          <strong>2,847</strong>
        </div>

        {/* Glitter dots */}
        {[
          { s: 10, c: "#60a5fa", t: "13%", l: "58%", d: "0s", dur: "9s" },
          { s: 7, c: "#fbbf24", t: "70%", l: "70%", d: "1s", dur: "11s" },
          { s: 12, c: "#34d399", t: "38%", l: "7%", d: "0.4s", dur: "8s" },
          { s: 5, c: "#f472b6", t: "82%", l: "35%", d: "1.8s", dur: "13s" },
          { s: 8, c: "#a78bfa", t: "20%", l: "36%", d: "0.9s", dur: "10s" },
          { s: 6, c: "#fb923c", t: "62%", l: "80%", d: "1.3s", dur: "7s" },
        ].map((d, i) => (
          <div
            key={i}
            className="lg-glitter"
            style={
              {
                width: d.s,
                height: d.s,
                background: d.c,
                top: d.t,
                left: d.l,
                animationDelay: d.d,
                animationDuration: d.dur,
              } as React.CSSProperties
            }
          />
        ))}

        {/* Stars */}
        {[
          { t: "8%", l: "16%", s: "1.1rem", d: "0s" },
          { t: "22%", l: "74%", s: "0.85rem", d: "0.7s" },
          { t: "55%", l: "20%", s: "0.95rem", d: "1.4s" },
          { t: "86%", l: "58%", s: "0.75rem", d: "0.3s" },
          { t: "44%", l: "88%", s: "1rem", d: "1.0s" },
        ].map((s, i) => (
          <span
            key={i}
            className="lg-star"
            style={
              {
                top: s.t,
                left: s.l,
                fontSize: s.s,
                animationDelay: s.d,
              } as React.CSSProperties
            }
          >
            ★
          </span>
        ))}

        {/* Panel content */}
        <div className="lg-panel-content">
          <div className="lg-panel-logo">
            <div className="lg-panel-logo-badge">📚</div>
            <span className="lg-panel-logo-text">EdBridge</span>
          </div>

          <div className="lg-panel-headline">
            <h2>
              Welcome
              <br />
              back,
              <br />
              <span>champion.</span>
            </h2>
            <p>
              Your SAT goals are waiting.
              <br />
              Pick up right where you left off.
            </p>
          </div>

          <div className="lg-stats">
            {[
              {
                icon: <Target size={14} color="#fff" />,
                bg: "linear-gradient(135deg,#3b82f6,#1d4ed8)",
                val: "94%",
                label: "Accuracy",
              },
              {
                icon: <Clock size={14} color="#fff" />,
                bg: "linear-gradient(135deg,#f97316,#ef4444)",
                val: "47m",
                label: "Daily study",
              },
              {
                icon: <BarChart2 size={14} color="#fff" />,
                bg: "linear-gradient(135deg,#22c55e,#15803d)",
                val: "+180",
                label: "Score gain",
              },
            ].map((s, i) => (
              <div className="lg-stat" key={i}>
                <div className="lg-stat-icon" style={{ background: s.bg }}>
                  {s.icon}
                </div>
                <strong>{s.val}</strong>
                <span>{s.label}</span>
              </div>
            ))}
          </div>

          <div className="lg-social">
            <div className="lg-avs">
              {AV_INITIALS.map((init, i) => (
                <div
                  key={i}
                  className="lg-av"
                  style={{ background: AV_COLORS[i] }}
                >
                  {init}
                </div>
              ))}
            </div>
            <p>
              <strong>2,400+</strong> students improved their scores
            </p>
          </div>
        </div>
      </div>

      {/* ── RIGHT PANEL ── */}
      <div className="lg-right">
        {[
          { s: 200, c: "#f97316", t: "4%", r: "4%", d: "0s", dur: "12s" },
          { s: 120, c: "#3b82f6", b: "8%", l: "2%", d: "1.5s", dur: "10s" },
          { s: 70, c: "#22c55e", t: "52%", r: "2%", d: "0.8s", dur: "8s" },
        ].map((d, i) => (
          <div
            key={i}
            className="lg-bg-dot"
            style={
              {
                width: d.s,
                height: d.s,
                background: d.c,
                top: (d as any).t,
                right: (d as any).r,
                bottom: (d as any).b,
                left: (d as any).l,
                animationDelay: d.d,
                animationDuration: d.dur,
              } as React.CSSProperties
            }
          />
        ))}

        <div className="lg-form-wrap">
          <div className="lg-form-header">
            <h1>Welcome back 👋</h1>
            <p>Sign in to continue your SAT prep</p>
          </div>

          <div className="lg-fields">
            <div className="lg-field">
              <label className="lg-label" htmlFor="email">
                Email
              </label>
              <div className="lg-input-wrap">
                <Mail size={15} className="lg-input-icon" />
                <input
                  id="email"
                  type="email"
                  className="lg-input"
                  placeholder="you@example.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  disabled={isLoading}
                />
              </div>
            </div>

            <div className="lg-field">
              <label className="lg-label" htmlFor="password">
                Password
              </label>
              <div className="lg-input-wrap">
                <Lock size={15} className="lg-input-icon" />
                <input
                  id="password"
                  type="password"
                  className="lg-input"
                  placeholder="••••••••"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  disabled={isLoading}
                />
              </div>
            </div>

            <div className="lg-remember">
              <input id="rememberMe" type="checkbox" className="lg-checkbox" />
              <label htmlFor="rememberMe" className="lg-remember-label">
                Keep me signed in
              </label>
            </div>

            {registrationMessage && (
              <div className="lg-success">
                <span>✅</span> {registrationMessage}
              </div>
            )}

            {error && (
              <div className="lg-error">
                <span>⚠️</span> {error}
              </div>
            )}

            <button
              className="lg-btn"
              onClick={handleSubmit}
              disabled={isLoading || !email || !password}
            >
              {isLoading ? (
                <>
                  <Loader2 size={18} className="lg-spinner" /> Signing in...
                </>
              ) : (
                "Sign In →"
              )}
            </button>
          </div>

          <p className="lg-footer">
            By signing in you agree to EdBridge's Terms & Privacy Policy.
          </p>
          <p className="lg-signup-footer">
            Don't have an account?{" "}
            <span className="lg-link" onClick={() => navigate("/register")}>
              Sign up
            </span>
          </p>
        </div>
      </div>
    </div>
  );
};