"use client";

import { useEffect, useState } from "react";

export default function Home() {
  const [time, setTime] = useState(300);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((t) => {
        if (t <= 0) return 0;
        return t - 1;
      });
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  const minutes = Math.floor(time / 60);
  const seconds = time % 60;

  return (
    <main className="min-h-screen text-white flex items-center justify-center p-6">

      {/* Background */}
      <div className="fixed inset-0 -z-10">
        <div className="absolute w-[500px] h-[500px] bg-purple-600 opacity-20 blur-[150px] top-[-100px]" />
        <div className="absolute w-[400px] h-[400px] bg-orange-500 opacity-20 blur-[150px] bottom-[-100px] right-[-100px]" />
      </div>

      <div className="grid md:grid-cols-2 gap-6 max-w-6xl w-full">

        {/* LEFT */}
        <div className="glass p-8 flex flex-col justify-between">

          <div>
            <h1 className="text-4xl font-bold neon-text mb-4">
              Nexo-V
            </h1>

            <p className="opacity-70 mb-6">
              Sicheres Verifizierungsportal für Discord Communities.
            </p>

            <div className="grid grid-cols-2 gap-4">
              <div className="glass p-4">
                🔐 Secure Login
              </div>
              <div className="glass p-4">
                🌐 VPN Check
              </div>
              <div className="glass p-4">
                🚫 Anti Abuse
              </div>
              <div className="glass p-4">
                ⚡ Instant Access
              </div>
            </div>
          </div>

          <div className="mt-6">
            <p className="text-sm opacity-50">
              OAuth2 basiert • Discord Integration
            </p>
          </div>

        </div>

        {/* RIGHT */}
        <div className="glass p-6 flex flex-col gap-4">

          <h2 className="text-xl font-bold">
            Discord verifizieren
          </h2>

          {/* TIMER */}
          <div className="glass p-4">
            <p className="text-sm opacity-50">Session läuft ab in</p>
            <h3 className="text-2xl font-bold">
              {minutes}:{seconds.toString().padStart(2, "0")}
            </h3>

            <div className="h-2 bg-white/10 mt-2 rounded">
              <div
                className="h-2 bg-orange-400 rounded"
                style={{ width: `${(time / 300) * 100}%` }}
              />
            </div>
          </div>

          {/* NOTICE */}
          <div className="bg-yellow-500/10 border border-yellow-500/20 p-3 rounded text-sm">
            ⚠️ Browser kann „nicht sicher“ anzeigen — normal bei HTTP
          </div>

          {/* CONSENT */}
          <div className="glass p-4 text-sm">
            <p className="mb-2 font-bold">Zustimmung</p>
            <ul className="space-y-1 opacity-70">
              <li>• Discord ID wird verarbeitet</li>
              <li>• IP wird geprüft (VPN)</li>
              <li>• Anti Abuse Schutz</li>
            </ul>
          </div>

          {/* BUTTONS */}
          <a
            href="/auth/member"
            className="btn btn-primary text-center"
          >
            🎮 Mit Discord verifizieren
          </a>

          <a
            href="https://tos.nexo-v.com"
            className="btn btn-outline text-center"
          >
            📜 Nutzungsbedingungen
          </a>

        </div>

      </div>

    </main>
  );
}