import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { LogIn, Info, QrCode, ShieldCheck, ChevronRight, X } from 'lucide-react';

export const Landing: React.FC = () => {
  const navigate = useNavigate();
  const [showInfo, setShowInfo] = useState(false);

  return (
    <div className="min-h-screen bg-dark text-white flex flex-col relative overflow-hidden font-sans">
      {/* Background Elements */}
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0">
        <div className="absolute top-[-10%] right-[-10%] w-96 h-96 bg-orange-500/20 rounded-full blur-3xl animate-pulse"></div>
        <div className="absolute bottom-[-10%] left-[-10%] w-96 h-96 bg-yellow-500/10 rounded-full blur-3xl animate-pulse" style={{animationDelay: '1s'}}></div>
      </div>

      {/* Main Content */}
      <div className="flex-1 flex flex-col items-center justify-center p-6 relative z-10">
        
        {/* Logo Section */}
        <div className="mb-8 relative group cursor-pointer" onClick={() => navigate('/login')}>
          <div className="absolute inset-0 bg-gradient-to-br from-orange-600 to-yellow-400 rounded-full blur opacity-75 group-hover:opacity-100 transition-opacity duration-500"></div>
          <div className="relative w-24 h-24 bg-gradient-to-br from-yellow-400 to-orange-600 rounded-full flex items-center justify-center shadow-2xl transform group-hover:scale-105 transition-transform duration-300">
             <span className="font-oswald text-4xl font-bold text-black">S</span>
          </div>
        </div>

        {/* Title Section */}
        <div className="text-center mb-10 space-y-2">
          <h1 className="font-oswald text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 via-orange-400 to-red-500 drop-shadow-sm tracking-wide">
            SISWA JUWARA SPANSIX
          </h1>
          <p className="text-slate-400 text-sm md:text-base tracking-widest uppercase font-semibold">
            SMP Negeri 6 Pasuruan
          </p>
          <div className="h-1 w-20 bg-gradient-to-r from-orange-500 to-yellow-500 mx-auto rounded-full mt-4"></div>
        </div>

        {/* Menu Grid */}
        <div className="w-full max-w-md grid gap-4">
          
          {/* Button Login */}
          <button 
            onClick={() => navigate('/login')}
            className="group relative overflow-hidden bg-card border border-gray-700 hover:border-orange-500/50 p-4 rounded-2xl flex items-center gap-4 transition-all duration-300 hover:shadow-lg hover:shadow-orange-500/10"
          >
            <div className="bg-gradient-to-br from-orange-500 to-yellow-500 w-12 h-12 rounded-xl flex items-center justify-center text-black shadow-lg group-hover:scale-110 transition-transform duration-300">
              <LogIn size={24} strokeWidth={2.5} />
            </div>
            <div className="text-left flex-1">
              <h3 className="font-oswald text-lg text-white group-hover:text-orange-400 transition-colors">LOGIN APLIKASI</h3>
              <p className="text-xs text-slate-500">Masuk sebagai Guru / Admin</p>
            </div>
            <ChevronRight className="text-slate-600 group-hover:text-orange-500 group-hover:translate-x-1 transition-all" />
          </button>

           {/* Button Info */}
           <button 
            onClick={() => setShowInfo(true)}
            className="group relative overflow-hidden bg-card border border-gray-700 hover:border-blue-500/50 p-4 rounded-2xl flex items-center gap-4 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/10"
          >
            <div className="bg-gradient-to-br from-blue-500 to-cyan-400 w-12 h-12 rounded-xl flex items-center justify-center text-black shadow-lg group-hover:scale-110 transition-transform duration-300">
              <Info size={24} strokeWidth={2.5} />
            </div>
            <div className="text-left flex-1">
              <h3 className="font-oswald text-lg text-white group-hover:text-blue-400 transition-colors">INFORMASI</h3>
              <p className="text-xs text-slate-500">Tentang Siswa Juwara</p>
            </div>
            <ChevronRight className="text-slate-600 group-hover:text-blue-500 group-hover:translate-x-1 transition-all" />
          </button>

        </div>

        {/* Footer Text */}
        <div className="mt-12 text-center max-w-xs mx-auto">
          <p className="text-xs text-slate-500 leading-relaxed">
            "Sistem WA Autorespon, Jurnal Digital dan Absensi Siswa untuk membentuk siswa berkarakter"
          </p>
        </div>
      </div>

      {/* Footer Copyright */}
      <div className="p-4 text-center border-t border-gray-800/50 bg-black/20 backdrop-blur-sm">
        <p className="text-[10px] text-slate-600 font-mono">
          © 2025 TIM IT SPANSIX. All Rights Reserved.
        </p>
      </div>

      {/* Info Modal */}
      {showInfo && (
        <div className="fixed inset-0 z-50 flex items-center justify-center px-4 bg-black/90 backdrop-blur-md animate-in fade-in duration-200">
          <div className="bg-card border border-gray-700 max-w-lg w-full rounded-2xl shadow-2xl p-8 relative animate-in zoom-in-95 duration-200">
            <button 
              onClick={() => setShowInfo(false)}
              className="absolute top-4 right-4 text-slate-400 hover:text-white transition-colors bg-white/5 p-2 rounded-full"
            >
              <X size={20} />
            </button>
            
            <div className="mb-6 text-center">
              <div className="inline-block p-3 bg-gradient-to-br from-orange-500 to-yellow-500 rounded-full text-black mb-4">
                 <ShieldCheck size={32} />
              </div>
              <h3 className="font-oswald text-2xl font-bold text-white">
                TENTANG APLIKASI
              </h3>
            </div>
            
            <div className="space-y-4 font-sans text-slate-300 text-sm leading-relaxed text-justify">
              <p>
                Program <span className="font-bold text-accent">“SISWA JUWARA SPANSIX”</span> adalah inovasi digital SMP Negeri 6 Pasuruan.
              </p>
              <ul className="list-disc pl-5 space-y-2 text-slate-400">
                <li>Integrasi presensi QR Code real-time.</li>
                <li>Jurnal guru digital terintegrasi.</li>
                <li>Notifikasi WhatsApp otomatis ke orang tua.</li>
                <li>Rekapitulasi karakter dan kedisiplinan siswa.</li>
              </ul>
            </div>
            
            <div className="mt-8 pt-6 border-t border-gray-700 flex justify-center">
              <button
                onClick={() => setShowInfo(false)}
                className="bg-accent text-black font-bold px-8 py-3 rounded-lg hover:bg-yellow-400 transition-all font-oswald w-full"
              >
                TUTUP
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};