import { Header } from '@/components/header'
import { Footer } from '@/components/footer'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { CustomSolutionCTA } from '@/components/ui/custom-solution-cta'
import {
  Server,
  Database,
  Mail,
  Shield,
  Container,
  Cog,
  ArrowRight,
  Check,
  Users,
  Cloud,
} from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'

export default function ServicesPage() {
  // Simulating database fetch - in production this would be from API/database
  const services = [
    {
      id: 1,
      title: 'Cloud Instance',
      description: 'High-performance cloud servers with instant deployment and scalable resources',
      price: 'Starting at ₹200/day',
      imageUrl: '/assets/images/services/cloud-instance.jpg',
      features: ['Instant Deployment', 'Auto Scaling', 'Load Balancing', '99.99% Uptime SLA'],
      learnMoreUrl: '/services/cloud-instance',
      buyButtonUrl: '/services/cloud-instance',
      buyButtonText: 'Deploy Now',
      popular: false,
      icon: Cloud,
    },
    {
      id: 2,
      title: 'Kubernetes',
      description: 'Managed Kubernetes clusters with auto-scaling and enterprise-grade security',
      price: 'Starting at ₹4000/month',
      imageUrl: '/assets/images/services/kubernetes-edge.png',
      features: ['Auto-scaling', 'Load Balancing', 'CI/CD Ready', 'Built-in Monitoring'],
      learnMoreUrl: '/services/kubernetes',
      buyButtonUrl: '/services/kubernetes',
      buyButtonText: 'Create Cluster',
      popular: true,
      icon: Container,
    },
    {
      id: 3,
      title: 'Hosting Control Panel',
      description: 'Professional web hosting with cPanel, Plesk, or DirectAdmin',
      price: 'Starting at ₹500/month',
      imageUrl: '/assets/images/services/hosting-cp.jpg',
      features: ['cPanel/Plesk/DirectAdmin', 'One-Click Apps', 'SSL Certificates', 'Daily Backups'],
      learnMoreUrl: '/services/hosting-control-panel',
      buyButtonUrl: '/services/hosting-control-panel',
      buyButtonText: 'Get Started',
      popular: false,
      icon: Cog,
    },
    {
      id: 4,
      title: 'VPN Services',
      description: 'Secure WireGuard VPN with QR code setup and multiple locations',
      price: 'Starting at ₹300/month',
      imageUrl: '/assets/images/services/wiregurd-thumb.jpg',
      features: ['WireGuard Protocol', 'QR Code Setup', 'Multiple Locations', 'No Logs Policy'],
      learnMoreUrl: '/services/vpn',
      buyButtonUrl: '/services/vpn',
      buyButtonText: 'Setup VPN',
      popular: false,
      icon: Shield,
    },
    {
      id: 5,
      title: 'Human Developer',
      description: 'Skilled developers for your custom projects and requirements',
      price: 'Custom Quote',
      imageUrl: '/assets/images/services/human-developer.jpg',
      features: ['Expert Developers', 'Custom Solutions', 'Project Management', '24/7 Support'],
      learnMoreUrl: '/services/human-developer',
      buyButtonUrl: '/services/human-developer',
      buyButtonText: 'Hire Developer',
      popular: false,
      icon: Users,
    },
    {
      id: 6,
      title: 'VPS Hosting',
      description: 'Virtual private servers with full root access and dedicated resources',
      price: 'Starting at ₹800/month',
      imageUrl: '/assets/images/services/vps_thumb.jpg',
      features: ['Full Root Access', 'SSD Storage', 'Multiple OS Options', 'IPv6 Support'],
      learnMoreUrl: '/services/vps',
      buyButtonUrl: '/services/vps',
      buyButtonText: 'Order VPS',
      popular: false,
      icon: Server,
    },
  ]

  return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="container mx-auto px-4 pt-24 pb-16">
        {/* Page Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-4">Our Premium Services</h1>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            Tailored solutions to accelerate your business growth
          </p>
          <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto mt-6"></div>
        </div>

        {/* Services Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service) => {
            const Icon = service.icon
            return (
              <Card
                key={service.id}
                className={`relative overflow-hidden hover:shadow-lg transition-shadow ${service.popular ? 'ring-2 ring-primary' : ''}`}
              >
                {/* Most Popular Badge */}
                {service.popular && (
                  <div className="absolute top-4 right-4 z-10">
                    <span className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-3 py-1 rounded-full text-xs font-semibold">
                      Most Popular
                    </span>
                  </div>
                )}

                {/* Service Thumbnail */}
                <div className="h-48 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 flex items-center justify-center">
                  {service.imageUrl ? (
                    <div className="relative w-full h-full">
                      {/* Using div with background for now since images aren't available */}
                      <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-900">
                        <Icon className="w-16 h-16 text-primary opacity-20" />
                      </div>
                    </div>
                  ) : (
                    <Icon className="w-16 h-16 text-muted-foreground" />
                  )}
                </div>

                {/* Service Content */}
                <CardHeader className="text-center">
                  <CardTitle className="text-xl mb-2">{service.title}</CardTitle>
                  <div className="text-lg font-semibold text-primary mb-2">{service.price}</div>
                </CardHeader>

                <CardContent className="space-y-4">
                  <p className="text-sm text-muted-foreground text-center">{service.description}</p>

                  {/* Features List */}
                  <ul className="space-y-2">
                    {service.features.map((feature, idx) => (
                      <li key={idx} className="flex items-start gap-2">
                        <Check className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
                        <span className="text-sm text-muted-foreground">{feature}</span>
                      </li>
                    ))}
                  </ul>

                  {/* Action Buttons */}
                  <div className="flex gap-3 pt-4">
                    {service.learnMoreUrl && (
                      <Link href={service.learnMoreUrl} className="flex-1">
                        <Button variant="outline" className="w-full">
                          Learn More
                        </Button>
                      </Link>
                    )}
                    {service.buyButtonUrl && service.buyButtonText && (
                      <Link href={service.buyButtonUrl} className="flex-1">
                        <Button className="w-full">
                          {service.buyButtonText}
                          <ArrowRight className="w-4 h-4 ml-1" />
                        </Button>
                      </Link>
                    )}
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>

        {/* Additional Services Note */}
        <CustomSolutionCTA
          description="We offer tailored solutions for enterprise clients with specific requirements"
          buttonText="Contact Sales"
          buttonHref="/contact"
        />
      </div>
      <Footer />
    </div>
  )
}