"use client"

import { useState, useEffect } from 'react'
import { Button } from './ui/button'
import { ChevronDown, Play, MessageCircle, Youtube, Users, Gamepad2, Server } from 'lucide-react'
import { connectToGameServer } from '../lib/mtaServer'
import { useTranslations } from 'next-intl'

export default function Hero() {
  const t = useTranslations('hero')
  const [hoveredPanel, setHoveredPanel] = useState<number | null>(null)
  const connectToServer = () => {
    connectToGameServer()
  }

  return (
    <section id="home" className="relative py-16 flex items-center justify-center overflow-hidden">
      {/* Background Image */}
      <div 
        className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-30"
        style={{
          backgroundImage: 'url(/images/background.webp)'
        }}
      />
      {/* Content */}
      <div className="relative z-20 w-full flex items-center justify-center">
        <div className="w-full max-w-7xl mx-auto px-4">

          {/* Vertical Panels Grid */}
          <div className="grid grid-cols-6 md:grid-cols-7 gap-4 md:gap-6 h-[420px] md:h-[550px]">
            {/* Panel 1 - Police Officer */}
            <div 
              className={`relative overflow-hidden rounded-2xl border border-gray-600/30 transition-all duration-500 ease-out cursor-pointer ${
                hoveredPanel === 0 || hoveredPanel === 3 ? 'flex-[2] scale-110' : 'flex-1 scale-100'
              }`}
              onMouseEnter={() => setHoveredPanel(0)}
              onMouseLeave={() => setHoveredPanel(null)}
            >
              {/* Background Image */}
              <div 
                className="absolute inset-0 bg-cover bg-center bg-no-repeat"
                style={{
                  backgroundImage: 'url(/images/policeofficer.webp)'
                }}
              />
              {/* Dark Black Overlay - Hidden when hovered */}
              <div className={`absolute inset-0 bg-black transition-all duration-300 ${hoveredPanel === 0 || hoveredPanel === 3 ? 'opacity-0' : 'opacity-70'}`} />
              <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/50 to-black/80" />
              <div className="absolute inset-0 bg-gradient-to-r from-[#0087FF]/20 to-transparent" />
              <div className="absolute bottom-4 left-3 right-3">
                <div className={`text-gray-400 text-sm font-bold transition-all duration-300 ${hoveredPanel === 0 || hoveredPanel === 3 ? 'opacity-100' : 'opacity-0'}`}>{t('becomeA')}</div>
                <div className={`text-white text-lg font-bold transition-all duration-300 ${hoveredPanel === 0 || hoveredPanel === 3 ? 'opacity-100' : 'opacity-0'}`}>{t('police')}</div>
              </div>
            </div>

            {/* Panel 2 - Mechanic */}
            <div 
              className={`relative overflow-hidden rounded-2xl border border-gray-600/30 transition-all duration-500 ease-out cursor-pointer ${
                hoveredPanel === 1 || hoveredPanel === 3 ? 'flex-[2] scale-110' : 'flex-1 scale-100'
              }`}
              onMouseEnter={() => setHoveredPanel(1)}
              onMouseLeave={() => setHoveredPanel(null)}
            >
              {/* Background Image */}
              <div 
                className="absolute inset-0 bg-cover bg-center bg-no-repeat"
                style={{
                  backgroundImage: 'url(/images/mechanic.webp)'
                }}
              />
              {/* Dark Black Overlay - Hidden when hovered */}
              <div className={`absolute inset-0 bg-black transition-all duration-300 ${hoveredPanel === 1 || hoveredPanel === 3 ? 'opacity-0' : 'opacity-70'}`} />
              <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/50 to-black/80" />
              <div className="absolute inset-0 bg-gradient-to-r from-[#0087FF]/10 to-transparent" />
              <div className="absolute bottom-4 left-3 right-3">
                <div className={`text-gray-400 text-sm font-bold transition-all duration-300 ${hoveredPanel === 1 || hoveredPanel === 3 ? 'opacity-100' : 'opacity-0'}`}>{t('becomeA')}</div>
                <div className={`text-white text-lg font-bold transition-all duration-300 ${hoveredPanel === 1 || hoveredPanel === 3 ? 'opacity-100' : 'opacity-0'}`}>{t('mechanic')}</div>
              </div>
            </div>

            {/* Panel 3 - Gangster */}
            <div 
              className={`relative overflow-hidden rounded-2xl border border-gray-600/30 transition-all duration-500 ease-out cursor-pointer ${
                hoveredPanel === 2 || hoveredPanel === 3 ? 'flex-[2] scale-110' : 'flex-1 scale-100'
              }`}
              onMouseEnter={() => setHoveredPanel(2)}
              onMouseLeave={() => setHoveredPanel(null)}
            >
              {/* Background Image */}
              <div 
                className="absolute inset-0 bg-cover bg-center bg-no-repeat"
                style={{
                  backgroundImage: 'url(/images/gangster.webp)'
                }}
              />
              {/* Dark Black Overlay - Hidden when hovered */}
              <div className={`absolute inset-0 bg-black transition-all duration-300 ${hoveredPanel === 2 || hoveredPanel === 3 ? 'opacity-0' : 'opacity-70'}`} />
              <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/50 to-black/80" />
              <div className="absolute inset-0 bg-gradient-to-r from-[#0087FF]/10 to-transparent" />
              <div className="absolute bottom-4 left-3 right-3">
                <div className={`text-gray-400 text-sm font-bold transition-all duration-300 ${hoveredPanel === 2 || hoveredPanel === 3 ? 'opacity-100' : 'opacity-0'}`}>{t('becomeA')}</div>
                <div className={`text-white text-lg font-bold transition-all duration-300 ${hoveredPanel === 2 || hoveredPanel === 3 ? 'opacity-100' : 'opacity-0'}`}>{t('gangster')}</div>
              </div>
            </div>

            {/* Panel 4 - PLAY NOW (Center) */}
            <div 
              className={`relative overflow-hidden rounded-2xl border border-gray-600/30 transition-all duration-500 ease-out cursor-pointer ${
                hoveredPanel === 3 ? 'flex-[2] scale-110' : 'flex-1 scale-100'
              }`}
              onMouseEnter={() => setHoveredPanel(3)}
              onMouseLeave={() => setHoveredPanel(null)}
              onClick={connectToServer}
            >
              {/* Background Image */}
              <div 
                className="absolute inset-0 bg-cover bg-center bg-no-repeat"
                style={{
                  backgroundImage: 'url(/images/playnow.webp)'
                }}
              />
              {/* Dark Black Overlay - Hidden when hovered */}
              <div className={`absolute inset-0 bg-black transition-all duration-300 ${hoveredPanel === 3 ? 'opacity-0' : 'opacity-70'}`} />
              <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#002647]/30 to-[#1E1E2E]/60" />
              <div className="absolute inset-0 flex flex-col items-center justify-center">
                <div className="play-now-content flex flex-col items-center justify-center h-full">
                  <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 16 16" className={`play-icon w-10 h-10 text-white mb-2 transition-all duration-300 ${hoveredPanel === 3 ? 'drop-shadow-[0_0_20px_rgba(255,255,255,0.8)]' : ''}`} xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"></path>
                  </svg>
                  <p className="play-text text-white text-lg font-bold tracking-wider">{t('play')}</p>
                  <p className="play-text text-white text-lg font-bold tracking-wider">{t('now')}</p>
                </div>
              </div>
            </div>

            {/* Panel 5 - Doctor */}
            <div 
              className={`relative overflow-hidden rounded-2xl border border-gray-600/30 transition-all duration-500 ease-out cursor-pointer ${
                hoveredPanel === 4 || hoveredPanel === 3 ? 'flex-[2] scale-110' : 'flex-1 scale-100'
              }`}
              onMouseEnter={() => setHoveredPanel(4)}
              onMouseLeave={() => setHoveredPanel(null)}
            >
              {/* Background Image */}
              <div 
                className="absolute inset-0 bg-cover bg-center bg-no-repeat"
                style={{
                  backgroundImage: 'url(/images/doctor.webp)'
                }}
              />
              {/* Dark Black Overlay - Hidden when hovered */}
              <div className={`absolute inset-0 bg-black transition-all duration-300 ${hoveredPanel === 4 || hoveredPanel === 3 ? 'opacity-0' : 'opacity-70'}`} />
              <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/50 to-black/80" />
              <div className="absolute inset-0 bg-gradient-to-r from-[#0087FF]/10 to-transparent" />
              <div className="absolute bottom-4 left-3 right-3">
                <div className={`text-gray-400 text-sm font-bold transition-all duration-300 ${hoveredPanel === 4 || hoveredPanel === 3 ? 'opacity-100' : 'opacity-0'}`}>{t('becomeA')}</div>
                <div className={`text-white text-lg font-bold transition-all duration-300 ${hoveredPanel === 4 || hoveredPanel === 3 ? 'opacity-100' : 'opacity-0'}`}>{t('doctor')}</div>
              </div>
            </div>

            {/* Panel 6 - Soldier */}
            <div 
              className={`relative overflow-hidden rounded-2xl border border-gray-600/30 transition-all duration-500 ease-out cursor-pointer ${
                hoveredPanel === 5 || hoveredPanel === 3 ? 'flex-[2] scale-110' : 'flex-1 scale-100'
              }`}
              onMouseEnter={() => setHoveredPanel(5)}
              onMouseLeave={() => setHoveredPanel(null)}
            >
              {/* Background Image */}
              <div 
                className="absolute inset-0 bg-cover bg-center bg-no-repeat"
                style={{
                  backgroundImage: 'url(/images/solider.webp)'
                }}
              />
              {/* Dark Black Overlay - Hidden when hovered */}
              <div className={`absolute inset-0 bg-black transition-all duration-300 ${hoveredPanel === 5 || hoveredPanel === 3 ? 'opacity-0' : 'opacity-70'}`} />
              <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/50 to-black/80" />
              <div className="absolute inset-0 bg-gradient-to-r from-[#0087FF]/10 to-transparent" />
              <div className="absolute bottom-4 left-3 right-3">
                <div className={`text-gray-400 text-sm font-bold transition-all duration-300 ${hoveredPanel === 5 || hoveredPanel === 3 ? 'opacity-100' : 'opacity-0'}`}>{t('becomeA')}</div>
                <div className={`text-white text-lg font-bold transition-all duration-300 ${hoveredPanel === 5 || hoveredPanel === 3 ? 'opacity-100' : 'opacity-0'}`}>{t('soldier')}</div>
              </div>
            </div>

            {/* Panel 7 - Businessman (only on larger screens) */}
            <div 
              className={`relative overflow-hidden rounded-2xl border border-gray-600/30 transition-all duration-500 ease-out cursor-pointer hidden md:block ${
                hoveredPanel === 6 || hoveredPanel === 3 ? 'flex-[2] scale-110' : 'flex-1 scale-100'
              }`}
              onMouseEnter={() => setHoveredPanel(6)}
              onMouseLeave={() => setHoveredPanel(null)}
            >
              {/* Background Image */}
              <div 
                className="absolute inset-0 bg-cover bg-center bg-no-repeat"
                style={{
                  backgroundImage: 'url(/images/BUSINESSMAN.webp)'
                }}
              />
              {/* Dark Black Overlay - Hidden when hovered */}
              <div className={`absolute inset-0 bg-black transition-all duration-300 ${hoveredPanel === 6 || hoveredPanel === 3 ? 'opacity-0' : 'opacity-70'}`} />
              <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/50 to-black/80" />
              <div className="absolute inset-0 bg-gradient-to-r from-[#0087FF]/10 to-transparent" />
              <div className="absolute bottom-4 left-3 right-3">
                <div className={`text-gray-400 text-sm font-bold transition-all duration-300 ${hoveredPanel === 6 || hoveredPanel === 3 ? 'opacity-100' : 'opacity-0'}`}>{t('becomeA')}</div>
                <div className={`text-white text-lg font-bold transition-all duration-300 ${hoveredPanel === 6 || hoveredPanel === 3 ? 'opacity-100' : 'opacity-0'}`}>{t('businessman')}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}