import React from 'react';
import { UserRole, Event } from '../types';

interface WelcomeScreenProps {
  onSelectRole: (role: UserRole) => void;
  events: Event[];
}

const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ onSelectRole, events }) => {
  const portals = [
    {
      id: 'STUDENT' as UserRole,
      title: 'Student Portal',
      description: 'Access events, track registrations, and manage your academic profile.',
      icon: 'fa-user-graduate',
      color: 'bg-[#004a99]',
      hoverColor: 'hover:border-[#004a99]',
      textColor: 'text-[#004a99]'
    },
    {
      id: 'COORDINATOR' as UserRole,
      title: 'Event Coordinator Portal',
      description: 'Create, manage, and coordinate campus events and announcements.',
      icon: 'fa-calendar-check',
      color: 'bg-orange-500',
      hoverColor: 'hover:border-orange-500',
      textColor: 'text-orange-500'
    },
    {
      id: 'ADMIN' as UserRole,
      title: 'Admin Portal',
      description: 'System-wide oversight, user management, and high-level analytics.',
      icon: 'fa-user-shield',
      color: 'bg-[#004a99]',
      hoverColor: 'hover:border-[#004a99]',
      textColor: 'text-[#004a99]'
    }
  ];

  return (
    <div className="min-h-screen w-full bg-white flex flex-col items-center justify-center p-6 relative overflow-hidden">
      {/* Background Decorative Elements */}
      <div className="absolute top-[-10%] left-[-10%] w-96 h-96 bg-[#004a99]/5 rounded-full blur-[100px] opacity-60"></div>
      <div className="absolute bottom-[-10%] right-[-10%] w-96 h-96 bg-orange-50 rounded-full blur-[100px] opacity-60"></div>

      <div className="relative z-10 w-full max-w-6xl">
        <div className="text-center mb-16 animate-in fade-in slide-in-from-top-10 duration-700">
          <img 
            src="https://www.facultyplus.com/wp-content/uploads/2020/11/Rit-logo.png" 
            alt="RIT Logo" 
            className="h-16 md:h-20 w-auto mx-auto mb-8"
          />
          <p className="text-slate-500 text-lg font-medium max-w-2xl mx-auto uppercase tracking-widest text-xs">
            Select your gateway to excellence. Connect, manage, and celebrate.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-8">
          {portals.map((portal, index) => (
            <div
              key={portal.id}
              onClick={() => onSelectRole(portal.id)}
              className={`group relative bg-white border-2 border-slate-100 rounded-[3rem] p-10 cursor-pointer transition-all duration-500 hover:-translate-y-4 hover:shadow-[0_40px_80px_-20px_rgba(0,0,0,0.1)] ${portal.hoverColor} animate-in fade-in slide-in-from-bottom-10`}
              style={{ animationDelay: `${index * 150}ms` }}
            >
              <div className={`w-20 h-20 ${portal.color} rounded-3xl flex items-center justify-center mb-8 shadow-lg group-hover:scale-110 transition-transform duration-500`}>
                <i className={`fas ${portal.icon} text-3xl text-white`}></i>
              </div>
              
              <h3 className="text-2xl font-black text-slate-900 uppercase tracking-tight mb-4 group-hover:text-orange-500 transition-colors">
                {portal.title}
              </h3>
              
              <p className="text-slate-500 text-sm font-medium leading-relaxed mb-8">
                {portal.description}
              </p>

              <div className={`flex items-center gap-3 text-xs font-black uppercase tracking-widest ${portal.textColor} group-hover:gap-5 transition-all`}>
                Enter Portal <i className="fas fa-arrow-right"></i>
              </div>

              {/* Decorative Corner */}
              <div className="absolute top-0 right-0 p-8 opacity-0 group-hover:opacity-10 transition-opacity">
                <i className={`fas ${portal.icon} text-8xl`}></i>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-20 text-center animate-in fade-in duration-1000 delay-500">
          <p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.5em]">
            © 2024 Rajalakshmi Institute of Technology • Academic Excellence
          </p>
        </div>
      </div>
    </div>
  );
};

export default WelcomeScreen;