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 Home() {
  // Statistics data
  const stats = [
    { value: "100+", label: "Projects Completed" },
    { value: "5+", label: "Expert Team Members" },
    { value: "15+", label: "Years Experience" },
    { value: "99%", label: "Client Satisfaction" },
  ];

  // Services overview
  const services = [
    {
      title: "Web Hosting and CMS",
      description: "Professional web hosting and ready CMS solutions for your business",
      icon: "/images/webhosting2.jpg",
      link: "/services"
    },
    {
      title: "Custom Web Development",
      description: "Modern web applications with cutting-edge technologies",
      icon: "/images/webapps.jpg",
      link: "/services"
    },
    {
      title: "Mobile App Development",
      description: "Cross-platform and native mobile applications",
      icon: "/images/mobiledev.jpg",
      link: "/services"
    },
    {
      title: "Managed VPS Services",
      description: "Professional server management and hosting solutions",
      icon: "/images/forex1.jpg",
      link: "/services"
    },
  ];

  // Features
  const features = [
    {
      title: "Cutting-Edge Tech",
      description: "We use the latest technologies to deliver modern, scalable solutions.",
      icon: "/images/tech.jpg"
    },
    {
      title: "Expert Team",
      description: "Our team of professionals brings years of leading industry experience.",
      icon: "/images/dev.jpg"
    },
    {
      title: "24/7 Support",
      description: "Round-the-clock technical support to ensure your systems run smoothly.",
      icon: "/images/support.jpg"
    },
    {
      title: "Tailored Solutions",
      description: "Custom solutions designed specifically for your business needs.",
      icon: "/images/coding.jpg"
    },
  ];

  // Testimonials
  const testimonials = [
    {
      quote: "YznApps transformed our online presence with a beautiful, functional website that perfectly represents our brand.",
      author: "Sarah Johnson",
      company: "TechStart Inc."
    },
    {
      quote: "The mobile app developed by YznApps helped us increase customer engagement by 200%. Highly recommended!",
      author: "Michael Chen",
      company: "GrowthBox"
    },
    {
      quote: "Their VPS hosting service is reliable, fast, and their support team is always available when we need them.",
      author: "David Williams",
      company: "DataFlow Systems"
    },
  ];

  return (
    <PageTransition>
      <div className="flex flex-col w-full">
        {/* Hero Section */}
        <FadeIn>
          <section className="relative bg-gray-900 text-white py-20 md:py-28">
            <div className="absolute inset-0 z-0 opacity-30">
              <Image 
                src="/images/herosectionimage.jpg" 
                alt="IT Solutions 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-4xl md:text-5xl lg:text-6xl font-bold mb-6">Professional IT Solutions for Your Business</h1>
                </SlideInLeft>
                <SlideInLeft delay={0.4}>
                  <p className="text-xl md:text-2xl mb-8">Web development, mobile apps, hosting, and VPS services tailored to your needs</p>
                </SlideInLeft>
                <SlideInLeft delay={0.6}>
                  <div className="flex flex-wrap gap-4">
                    <HoverScale>
                      <Link href="/services" className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-md transition duration-300">
                        Our Services
                      </Link>
                    </HoverScale>
                    <HoverScale>
                      <Link href="/contact" className="bg-transparent hover:bg-white/10 text-white font-semibold py-3 px-6 rounded-md border border-white transition duration-300">
                        Contact Us
                      </Link>
                    </HoverScale>
                  </div>
                </SlideInLeft>
              </div>
            </div>
          </section>
        </FadeIn>

        {/* Statistics Section */}
        <FadeIn delay={0.2}>
          <section className="py-16 bg-gray-50 dark:bg-gray-800">
            <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">Our Impact in Numbers</h2>
                <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">We've helped businesses of all sizes achieve their technology goals</p>
              </div>
              <StaggerContainer className="grid grid-cols-2 md:grid-cols-4 gap-8">
                {stats.map((stat, index) => (
                  <StaggerItem key={index}>
                    <ScaleIn delay={index * 0.1}>
                      <div className="text-center p-6 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition duration-300">
                        <div className="text-3xl md:text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2">{stat.value}</div>
                        <div className="text-gray-600 dark:text-gray-300">{stat.label}</div>
                      </div>
                    </ScaleIn>
                  </StaggerItem>
                ))}
              </StaggerContainer>
            </div>
          </section>
        </FadeIn>

        {/* Services Section */}
        <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">Our Services</h2>
                <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Comprehensive IT solutions to help your business thrive</p>
              </div>
              <StaggerContainer className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                {services.map((service, index) => (
                  <StaggerItem key={index}>
                    <HoverScale>
                      <div className="bg-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300 h-full">
                        <div className="h-48 relative">
                          <Image 
                            src={service.icon} 
                            alt={service.title} 
                            fill 
                            style={{objectFit: 'cover'}} 
                          />
                        </div>
                        <div className="p-6">
                          <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{service.title}</h3>
                          <p className="text-gray-600 dark:text-gray-300 mb-4">{service.description}</p>
                          <Link href={service.link} className="text-blue-600 dark:text-blue-400 font-medium hover:underline">
                            Learn more →
                          </Link>
                        </div>
                      </div>
                    </HoverScale>
                  </StaggerItem>
                ))}
              </StaggerContainer>
              <div className="text-center mt-10">
                <HoverScale>
                  <Link href="/services" className="inline-block bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-md transition duration-300">
                    View All Services
                  </Link>
                </HoverScale>
              </div>
            </div>
          </section>
        </FadeIn>

        {/* Features Section */}
        <FadeIn delay={0.4}>
          <section className="py-16 bg-gray-50 dark:bg-gray-800">
            <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">Why Choose Us</h2>
                <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">What sets us apart from the competition</p>
              </div>
              <StaggerContainer className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                {features.map((feature, index) => (
                  <StaggerItem key={index}>
                    <ScaleIn delay={index * 0.1}>
                      <div className="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300 h-full">
                        <div className="h-40 relative">
                          <Image 
                            src={feature.icon} 
                            alt={feature.title} 
                            fill 
                            style={{objectFit: 'cover'}} 
                          />
                        </div>
                        <div className="p-6">
                          <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{feature.title}</h3>
                          <p className="text-gray-600 dark:text-gray-300">{feature.description}</p>
                        </div>
                      </div>
                    </ScaleIn>
                  </StaggerItem>
                ))}
              </StaggerContainer>
            </div>
          </section>
        </FadeIn>

        {/* Testimonials Section */}
        <FadeIn delay={0.5}>
          <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 Our Clients Say</h2>
                <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Don't just take our word for it</p>
              </div>
              <StaggerContainer className="grid grid-cols-1 md:grid-cols-3 gap-8">
                {testimonials.map((testimonial, index) => (
                  <StaggerItem key={index}>
                    <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md">
                      <svg className="h-8 w-8 text-blue-600 dark:text-blue-400 mb-4" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
                      </svg>
                      <p className="text-gray-600 dark:text-gray-300 mb-4 italic">{testimonial.quote}</p>
                      <div className="font-medium text-gray-900 dark:text-white">{testimonial.author}</div>
                      <div className="text-sm text-gray-500 dark:text-gray-400">{testimonial.company}</div>
                    </div>
                  </StaggerItem>
                ))}
              </StaggerContainer>
            </div>
          </section>
        </FadeIn>

        {/* Call to Action */}
        <FadeIn delay={0.6}>
          <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 Transform Your Business?</h2>
              <p className="text-xl mb-8 max-w-2xl mx-auto">Contact us today to discuss how our IT solutions can help you achieve your goals</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">
                  Get Started
                </Link>
              </HoverScale>
            </div>
          </section>
        </FadeIn>
      </div>
    </PageTransition>
  );
}