const API = import.meta.env.VITE_API_URL;

/* Animated background shapes — generated once, stable positions */
const DIAMONDS = [
  { left: '8%',  top: '15%', size: 14, dur: '9s',  delay: '0s' },
  { left: '22%', top: '60%', size: 10, dur: '13s', delay: '2s' },
  { left: '55%', top: '25%', size: 18, dur: '11s', delay: '0.5s' },
  { left: '72%', top: '70%', size: 12, dur: '8s',  delay: '3s' },
  { left: '88%', top: '35%', size: 16, dur: '14s', delay: '1s' },
  { left: '38%', top: '80%', size: 8,  dur: '10s', delay: '4s' },
  { left: '64%', top: '12%', size: 11, dur: '12s', delay: '1.5s' },
];

const RINGS = [
  { left: '15%', top: '40%', size: 60, dur: '7s',  delay: '0s' },
  { left: '80%', top: '20%', size: 44, dur: '9s',  delay: '2.5s' },
  { left: '50%', top: '65%', size: 80, dur: '11s', delay: '1s' },
];

const SCANLINES = [
  { top: '30%', width: '160px', left: '5%',  dur: '8s',  delay: '0s' },
  { top: '55%', width: '120px', left: '75%', dur: '10s', delay: '3s' },
  { top: '20%', width: '200px', left: '40%', dur: '12s', delay: '1.5s' },
];

export default function Login() {
  return (
    <>
      {/* Animated background */}
      <div className="arena-bg">
        <div className="arena-grain" />
        <div className="arena-shapes">
          {DIAMONDS.map((d, i) => (
            <div
              key={i}
              className="shape shape--diamond"
              style={{
                left: d.left,
                top: d.top,
                width: d.size,
                height: d.size,
                animationDuration: d.dur,
                animationDelay: d.delay,
              }}
            />
          ))}
          {RINGS.map((r, i) => (
            <div
              key={i}
              className="shape shape--ring"
              style={{
                left: r.left,
                top: r.top,
                width: r.size,
                height: r.size,
                animationDuration: r.dur,
                animationDelay: r.delay,
              }}
            />
          ))}
          {SCANLINES.map((s, i) => (
            <div
              key={i}
              className="shape shape--line"
              style={{
                top: s.top,
                left: s.left,
                width: s.width,
                animationDuration: s.dur,
                animationDelay: s.delay,
              }}
            />
          ))}
        </div>
      </div>

      {/* Page content */}
      <main className="page login">
        <p className="login__eyebrow">Ontario Standardized Tests</p>

        <div className="login__hero">
          <h1 className="login__title">
            <span>Ranked</span>
            EQAO
          </h1>
          <p className="login__tagline">
            Compete. Practice. <em>Dominate</em> your grade.
          </p>
        </div>

        <div className="grade-badges">
          {[
            { id: 'G3', label: 'Grade 3' },
            { id: 'G6', label: 'Grade 6' },
            { id: 'G9', label: 'Grade 9' },
          ].map(({ id, label }) => (
            <div key={id} className="grade-badge">
              <span className="grade-badge__rank">{id}</span>
              <span className="grade-badge__label">{label}</span>
            </div>
          ))}
        </div>

        <div className="login__cta">
          <a href={`${API}/auth/google`} className="btn-google">
            <GoogleIcon />
            Sign in with Google
          </a>
          <p className="login__fine">Free · No credit card required</p>
        </div>

        <footer className="login__footer">
          Ranked EQAO · Built for Ontario Students
        </footer>
      </main>
    </>
  );
}

function GoogleIcon() {
  return (
    <svg className="btn-google__icon" viewBox="0 0 24 24" aria-hidden="true">
      <path
        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
        fill="#4285F4"
      />
      <path
        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
        fill="#34A853"
      />
      <path
        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
        fill="#FBBC05"
      />
      <path
        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
        fill="#EA4335"
      />
    </svg>
  );
}
