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 About() {
  // Features data from info.txt
  const features = [
    {
      title: "Innovation",
      description: "We stay ahead of the curve with cutting-edge technologies and modern development practices.",
      icon: "/images/innovation2.jpg"
    },
    {
      title: "Experience",
      description: "Our team brings years of expertise in web, mobile, and cloud development solutions.",
      icon: "/images/dev.jpg"
    },
    {
      title: "Quality",
      description: "We deliver robust, scalable, and high-performance solutions that exceed expectations.",
      icon: "/images/innovation.jpg"
    },
    {
      title: "Support",
      description: "24/7 technical support and maintenance to ensure your systems run smoothly.",
      icon: "/images/support.jpg"
    }
  ];

  // Team members data from info.txt
  const team = [
    {
      name: "John Doe",
      role: "CEO & Founder",
      bio: "15+ years of experience in tech leadership and innovation.",
      image: "/images/webapps.jpg"
    },
    {
      name: "Jane Smith",
      role: "Lead Developer",
      bio: "Expert in full-stack development and cloud architecture.",
      image: "/images/websiedesign.jpg"
    },
    {
      name: "Mike Johnson",
      role: "Design Director",
      bio: "Award-winning UI/UX designer with a passion for user-centric design.",
      image: "/images/coding3.jpg"
    },
    {
      name: "Sarah Wilson",
      role: "Project Manager",
      bio: "Certified PMP with extensive experience in agile methodologies.",
      image: "/images/hosting.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/coding3.jpg" 
                alt="About Us 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">About YznApps</h1>
                </SlideInLeft>
                <SlideInLeft delay={0.4}>
                  <p className="text-lg md:text-xl mb-8">We're a team of passionate IT professionals dedicated to delivering exceptional technology solutions</p>
                </SlideInLeft>
              </div>
            </div>
          </section>
        </FadeIn>

        {/* Company Overview */}
        <FadeIn delay={0.2}>
          <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="flex flex-col md:flex-row gap-12 items-center">
                <div className="w-full md:w-1/2 h-64 md:h-96 relative rounded-lg overflow-hidden shadow-lg">
                  <Image 
                    src="/images/webdevelopment.jpg" 
                    alt="YznApps Team" 
                    fill 
                    style={{objectFit: 'cover'}} 
                  />
                </div>
                <div className="w-full md:w-1/2 space-y-6">
                  <SlideInRight delay={0.3}>
                    <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">Our Story</h2>
                  </SlideInRight>
                  <SlideInRight delay={0.4}>
                    <p className="text-lg text-gray-600 dark:text-gray-300">
                      YznApps was founded with a simple mission: to provide businesses with innovative, reliable, and scalable IT solutions. 
                      Over the years, we've grown from a small team of developers to a comprehensive IT service provider, helping businesses 
                      of all sizes transform their digital presence and operations.
                    </p>
                  </SlideInRight>
                  <SlideInRight delay={0.5}>
                    <p className="text-lg text-gray-600 dark:text-gray-300">
                      We believe in building long-term relationships with our clients, understanding their unique challenges, and delivering 
                      solutions that drive real business value. Our team combines technical expertise with industry knowledge to ensure that 
                      every project we undertake exceeds expectations.
                    </p>
                  </SlideInRight>
                </div>
              </div>
            </div>
          </section>
        </FadeIn>

        {/* Core Values/Features */}
        <FadeIn delay={0.3}>
          <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 Core Values</h2>
                <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">The principles that guide everything we do</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">
                        <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>

        {/* Team Section */}
        <FadeIn delay={0.4}>
          <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">Meet Our Team</h2>
                <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">The experts behind our success</p>
              </div>
              <StaggerContainer className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                {team.map((member, 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">
                        <div className="h-64 relative">
                          <Image 
                            src={member.image} 
                            alt={member.name} 
                            fill 
                            style={{objectFit: 'cover'}} 
                          />
                        </div>
                        <div className="p-6">
                          <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-1">{member.name}</h3>
                          <p className="text-blue-600 dark:text-blue-400 font-medium mb-3">{member.role}</p>
                          <p className="text-gray-600 dark:text-gray-300">{member.bio}</p>
                        </div>
                      </div>
                    </HoverScale>
                  </StaggerItem>
                ))}
              </StaggerContainer>
            </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 Work With Us?</h2>
              <p className="text-xl mb-8 max-w-2xl mx-auto">Contact our team today to discuss how we can help with your IT needs</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 in Touch
                </Link>
              </HoverScale>
            </div>
          </section>
        </FadeIn>
      </div>
    </PageTransition>
  );
}