"use client"

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

const adminTeam = [
  { name: 'Chris Chrome', ext: '1000', image: '/chris.webp', discord: '@chrischrome', role: 'Head Admin' },
  { name: 'ashton', ext: '1007', image: '/ashton.webp', discord: '@ashtoncarlson', role: 'Head Admin' },
  { name: 'Cayden', ext: '1001', image: '/cayden.webp', discord: '@freepbx', role: 'Admin' },
  { name: 'Faux Lemons', ext: '1011', image: '/faux_lemons.webp', discord: '@faux_lemons', role: 'Admin' },
  { name: 'rocord', ext: '1010', image: '/rocord.webp', discord: '@rocord', role: 'Admin' },
  { name: 'Maddix', ext: '1005', image: '/maddix.webp', discord: '@maddix6859', role: 'Admin' },
  { name: 'Theliftoperator', ext: '1134', image: '/theliftoperator.webp', discord: '@theliftoperator', role: 'Admin' },
]

const modTeam = [
  { name: 'Vince', ext: '4001', image: '/vince.webp', discord: '@maybvince', role: 'Moderator' },
  { name: 'Nik', ext: '1008', image: '/nottimwakefield.webp', discord: '@nottimwakefield', role: 'Moderator' },
  { name: 'Ryan', ext: '1135', image: '/ryan.webp', discord: '@ryann_207', role: 'Moderator' },
]

function TeamMember({ name, ext, image, discord, role }) {
  return (
    <Card className="group relative bg-gray-950/50 text-white border-gray-800 transition-all duration-500 ease-out transform hover:-translate-y-2 hover:border-blue-500/50 hover:shadow-2xl hover:shadow-blue-500/10 overflow-hidden">
      {/* Animated background */}
      <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
      
      <CardHeader className="relative flex flex-row items-center gap-4 space-y-0 pb-4">
        <div className="relative">
          <Avatar className="h-16 w-16 border-2 border-gray-700 group-hover:border-blue-500/50 transition-all duration-300 group-hover:scale-105">
            <AvatarImage src={image} alt={name} className="group-hover:scale-110 transition-transform duration-300" />
            <AvatarFallback className="bg-gray-800 text-white text-lg font-semibold">
              {name[0]}
            </AvatarFallback>
          </Avatar>
        </div>
        
        <div className="flex-1 min-w-0">
          <CardTitle className="text-white group-hover:text-blue-100 transition-colors duration-300 text-lg">
            {name}
          </CardTitle>
          <div className="flex items-center gap-2 mt-1">
            <Badge variant="outline" className="text-xs bg-gray-800/50 border-gray-600 text-gray-300">
              {role}
            </Badge>
          </div>
          <div className="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300 mt-1">
            {discord}
          </div>
        </div>
      </CardHeader>
      
      <CardContent className="relative pt-0">
        <div className="flex items-center justify-between">
          <div className="text-sm font-mono text-blue-400 bg-blue-900/20 border border-blue-600/30 rounded-full px-3 py-1.5 inline-block group-hover:bg-blue-900/40 group-hover:border-blue-500/50 transition-all duration-300">
            x{ext}
          </div>
          <div className="text-xs text-gray-500 group-hover:text-gray-400 transition-colors duration-300">
            Extension
          </div>
        </div>
      </CardContent>

      {/* Hover glow effect */}
      <div className="absolute inset-0 rounded-lg bg-gradient-to-r from-blue-500/0 via-blue-500/0 to-blue-500/0 group-hover:from-blue-500/5 group-hover:via-transparent group-hover:to-blue-500/5 transition-all duration-500 pointer-events-none" />
    </Card>
  )
}

export default function Team() {
  return (
    <section id="team" className="relative py-32 overflow-hidden">
      <div className="container relative">
        <div className="text-center max-w-3xl mx-auto mb-16 px-4">
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6 bg-gradient-to-r from-white via-purple-100 to-white bg-clip-text text-transparent pb-2">
            Meet the Team
          </h2>
          <p className="text-lg sm:text-xl text-gray-300 leading-relaxed">
            The dedicated people who keep LiteNet running smoothly and help our community grow.
          </p>
        </div>

        <div className="space-y-16">
          {/* Administration Team */}
          <div>
            <div className="flex items-center justify-center mb-8">
              <div className="flex items-center gap-4">
                <h3 className="text-xl sm:text-2xl font-semibold text-center text-gray-200 bg-gradient-to-r from-blue-400 to-blue-300 bg-clip-text text-transparent pb-2">
                  Administration Team
                </h3>
              </div>
            </div>
            <div className="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
              {adminTeam.map((member, index) => (
                <div 
                  key={member.ext}
                  style={{
                    animationDelay: `${index * 100}ms`,
                    animation: 'fadeInUp 0.8s ease-out forwards'
                  }}
                >
                  <TeamMember {...member} />
                </div>
              ))}
            </div>
          </div>

          {/* Moderation Team */}
          <div>
            <div className="flex items-center justify-center mb-8">
              <div className="flex items-center gap-4">
                <h3 className="text-xl sm:text-2xl font-semibold text-center text-gray-200 bg-gradient-to-r from-purple-400 to-purple-300 bg-clip-text text-transparent pb-2">
                  Moderation Team
                </h3>
              </div>
            </div>
            <div className="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
              {modTeam.map((member, index) => (
                <div 
                  key={member.ext}
                  style={{
                    animationDelay: `${(index + adminTeam.length) * 100}ms`,
                    animation: 'fadeInUp 0.8s ease-out forwards'
                  }}
                >
                  <TeamMember {...member} />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style jsx>{`
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
      `}</style>
    </section>
  )
}