"use client"

import { Phone, Users, VoicemailIcon, Radio, MoreHorizontal, Network, Bot, LayoutDashboard } from 'lucide-react'
import Link from 'next/link'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

const features = [
  {
    name: 'Free Dial-in and Out',
    description: 'Call using +1 (610) LITENET / +1 (610) 548 3638',
    icon: Phone,
    color: 'blue',
  },
  {
    name: 'Conference Rooms',
    description: 'Host or join conference calls with multiple participants',
    icon: Users,
    color: 'green',
  },
  {
    name: 'Voicemail',
    description: 'Set up your own private voicemail and receive messages from anyone',
    icon: VoicemailIcon,
    color: 'purple',
  },
  {
    name: 'Intercom and Paging',
    description: 'Easily communicate with other extensions and page groups',
    icon: Radio,
    color: 'orange',
  },
  {
    name: <>Access to <Link href="https://astrocom.tel/" className="font-semibold underline underline-offset-4 text-blue-300 hover:text-blue-200 transition-colors">AstroCom</Link></>,
    description: <>Dial directly to AstroCom straight from your LiteNet extension!</>,
    icon: Network,
    color: 'cyan',
  },
  {
    name: 'Discord Bot',
    description: 'Quickly create your own extension, manage page groups, and view Call Detail Records',
    icon: Bot,
    color: 'indigo',
  },
  {
    name: 'Web Dashboard',
    description: 'Log in to the Web Dashboard to manage your account and settings',
    icon: LayoutDashboard,
    color: 'pink',
  },
  {
    name: 'And More!',
    description: 'We\'re always adding new features to LiteNet!',
    icon: MoreHorizontal,
    color: 'gray',
  },
]

const colorClasses = {
  blue: 'bg-blue-600/20 border-blue-600/30 text-blue-400 group-hover:bg-blue-600/30',
  green: 'bg-green-600/20 border-green-600/30 text-green-400 group-hover:bg-green-600/30',
  purple: 'bg-purple-600/20 border-purple-600/30 text-purple-400 group-hover:bg-purple-600/30',
  orange: 'bg-orange-600/20 border-orange-600/30 text-orange-400 group-hover:bg-orange-600/30',
  cyan: 'bg-cyan-600/20 border-cyan-600/30 text-cyan-400 group-hover:bg-cyan-600/30',
  indigo: 'bg-indigo-600/20 border-indigo-600/30 text-indigo-400 group-hover:bg-indigo-600/30',
  pink: 'bg-pink-600/20 border-pink-600/30 text-pink-400 group-hover:bg-pink-600/30',
  gray: 'bg-gray-600/20 border-gray-600/30 text-gray-400 group-hover:bg-gray-600/30',
}

export default function Features() {
  return (
    <section id="features" className="relative py-32 overflow-hidden">
      <div className="container relative">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-white mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent pb-2">
            Everything You Need
          </h2>
          <p className="text-xl text-gray-300 leading-relaxed">
            A comprehensive suite of features for a complete PBX experience, designed to keep you connected with your community.
          </p>
        </div>

        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
          {features.map((feature, index) => (
            <Card 
              key={feature.name} 
              className="group relative bg-gray-950/50 border-gray-800 hover:border-gray-700 transition-all duration-500 ease-out transform hover:-translate-y-2 hover:shadow-2xl hover:shadow-blue-500/10 overflow-hidden"
              style={{
                animationDelay: `${index * 100}ms`,
                animation: 'fadeInUp 0.8s ease-out forwards'
              }}
            >
              {/* Animated background gradient */}
              <div className="absolute inset-0 bg-gradient-to-br from-transparent via-blue-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
              
              <CardHeader className="flex flex-row items-center gap-4 pb-4 relative">
                <div className={`rounded-xl p-3 border transition-all duration-300 ${colorClasses[feature.color]}`}>
                  <feature.icon className="h-7 w-7 transition-transform duration-300 group-hover:scale-110" />
                </div>
                <CardTitle className="text-lg text-white group-hover:text-blue-100 transition-colors duration-300">
                  {feature.name}
                </CardTitle>
              </CardHeader>
              
              <CardContent className="relative">
                <p className="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300 leading-relaxed">
                  {feature.description}
                </p>
              </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>
          ))}
        </div>
      </div>

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