import Image from "next/image";
import Link from "next/link";
import { FadeIn, SlideInLeft, SlideInRight, ScaleIn, StaggerContainer, StaggerItem, HoverScale, PageTransition } from "@/components/Motion";

export default function Services() {
  // Service categories data from info.txt
  const serviceCategories = [
    {
      title: "Web Hosting & CMS Solutions",
      description: "Professional hosting and content management system implementations",
      services: [
        "WordPress - Industry-leading CMS for blogs and business websites",
        "Joomla - Flexible CMS for complex content structures",
        "Drupal - Enterprise-grade CMS for large organizations",
        "Moodle - Specialized learning management system",
        "Custom hosting solutions with expert support"
      ],
      technologies: "WordPress • Joomla • Drupal • Moodle",
      image: "/images/webhosting2.jpg"
    },
    {
      title: "Custom Web Development",
      description: "Modern web applications built with cutting-edge frameworks",
      services: [
        "Laravel - PHP framework for robust web applications",
        ".NET - Enterprise solutions with Microsoft technology",
        "Node.js/Express - Fast and scalable JavaScript backend",
        "Next.js & React - Modern frontend development",
        "Django & Flask - Python-based web solutions"
      ],
      technologies: "Laravel • .NET • Node.js • Next.js • Django • Flask",
      image: "/images/customsystems.jpg"
    },
    {
      title: "Mobile App Development",
      description: "Cross-platform and native mobile applications",
      services: [
        "React Native - Cross-platform apps with native performance",
        "Flutter - Beautiful and fast mobile applications",
        "Native iOS and Android development",
        "Progressive Web Apps (PWA)",
        "Mobile app maintenance and updates"
      ],
      technologies: "React Native • Flutter • iOS • Android • PWA",
      image: "/images/mobiledev.jpg"
    },
    {
      title: "Managed VPS Services",
      description: "Professional server management and hosting solutions",
      services: [
        "Linux VPS - Ubuntu, CentOS, and Debian servers",
        "Windows Server VPS - Professional Windows hosting",
        "Forex VPS - Low-latency trading solutions",
        "Cloud VPS - Scalable cloud hosting",
        "Managed security and backups"
      ],
      technologies: "Linux • Windows Server • Cloud • DevOps",
      image: "/images/forex1.jpg"
    }
  ];

  return (
    <PageTransition>
      <div className="flex flex-col w-full">
        {/* Hero Section */}
        <FadeIn>
          <section className="relative bg-gray-900 text-white py-16 md:py-24">
            <div className="absolute inset-0 z-0 opacity-30">
              <Image 
                src="/images/website.jpg" 
                alt="IT Services Background" 
                fill 
                style={{objectFit: 'cover'}} 
                priority 
              />
            </div>
            <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
              <div className="max-w-3xl">
                <SlideInLeft delay={0.2}>
                  <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">Our Services</h1>
                </SlideInLeft>
                <SlideInLeft delay={0.4}>
                  <p className="text-lg md:text-xl mb-8">Comprehensive IT solutions tailored to your business needs</p>
                </SlideInLeft>
              </div>
            </div>
          </section>
        </FadeIn>

        {/* Services Categories */}
        <FadeIn delay={0.3}>
          <section className="py-16 bg-white dark:bg-gray-900">
            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
              <div className="text-center mb-12">
                <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">What We Offer</h2>
                <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Explore our range of professional IT services</p>
              </div>
              
              <div className="space-y-16">
                {serviceCategories.map((category, index) => (
                  <FadeIn key={index} delay={0.2 * index}>
                    <div className={`flex flex-col ${index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row'} gap-8 items-center`}>
                      <div className="w-full md:w-1/2 h-64 md:h-96 relative rounded-lg overflow-hidden shadow-lg">
                        <Image 
                          src={category.image} 
                          alt={category.title} 
                          fill 
                          style={{objectFit: 'cover'}} 
                        />
                      </div>
                      <div className="w-full md:w-1/2 space-y-4">
                        <SlideInLeft delay={0.3 + (0.1 * index)}>
                          <h3 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">{category.title}</h3>
                          <p className="text-lg text-gray-600 dark:text-gray-300">{category.description}</p>
                        </SlideInLeft>
                        
                        <ScaleIn delay={0.4 + (0.1 * index)}>
                          <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md">
                            <h4 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Services Include:</h4>
                            <StaggerContainer>
                              <ul className="space-y-2">
                                {category.services.map((service, i) => (
                                  <StaggerItem key={i}>
                                    <li className="flex items-start">
                                      <svg className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                                      </svg>
                                      <span className="text-gray-700 dark:text-gray-300">{service}</span>
                                    </li>
                                  </StaggerItem>
                                ))}
                              </ul>
                            </StaggerContainer>
                          </div>
                        </ScaleIn>
                        
                        <SlideInLeft delay={0.5 + (0.1 * index)}>
                          <div className="pt-4">
                            <p className="text-sm font-medium text-gray-500 dark:text-gray-400">Technologies:</p>
                            <p className="text-gray-700 dark:text-gray-300">{category.technologies}</p>
                          </div>
                        </SlideInLeft>
                      </div>
                    </div>
                  </FadeIn>
                ))}
              </div>
            </div>
          </section>
        </FadeIn>

        {/* Call to Action */}
        <FadeIn delay={0.5}>
          <section className="py-16 bg-blue-600 text-white">
            <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
              <h2 className="text-3xl md:text-4xl font-bold mb-6">Ready to Get Started?</h2>
              <p className="text-xl mb-8 max-w-2xl mx-auto">Contact us today to discuss your project requirements</p>
              <HoverScale>
                <Link href="/contact" className="bg-white text-blue-600 hover:bg-gray-100 font-semibold py-3 px-8 rounded-md transition duration-300 inline-block">
                  Contact Us
                </Link>
              </HoverScale>
            </div>
          </section>
        </FadeIn>
      </div>
    </PageTransition>
  );
}