// app/page.tsx
import Image from "next/image";
import Button from "@/components/ui/Button"; // Use the reusable button
import {
  FaCogs,
  FaProjectDiagram,
  FaCode,
  FaUsers,
  FaBuilding,
  FaCar,
  FaLaptopCode,
} from "react-icons/fa"; // Import icons

export default function HomePage() {
  return (
    <>
      {/* Hero Section */}
      <section className="relative h-[70vh] md:h-[85vh] flex items-center justify-center text-center bg-dark text-light overflow-hidden">
        {/* Background Video/Image Placeholder */}
        {/* TODO: Replace with actual <video> or Next/Image */}
        <div className="absolute inset-0 z-0 opacity-30">
          <Image
            src="/hero-bg.jpg" // Add a placeholder image in /public
            alt="Digital transformation background"
            layout="fill"
            objectFit="cover"
            quality={75}
          />
          {/* OR a video element:
          <video
            autoPlay
            loop
            muted
            playsInline
            className="w-full h-full object-cover"
            poster="/placeholder-hero-bg.jpg" // Poster image
          >
            <source src="/your-video.mp4" type="video/mp4" />
            Your browser does not support the video tag.
          </video> */}
        </div>
        {/* Overlay */}
        <div className="absolute inset-0 bg-gradient-to-b from-black/50 to-black/80 z-10"></div>

        {/* Content */}
        <div className="relative z-20 container mx-auto px-6">
          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-4 leading-tight text-primary animate-fade-in-up">
            Where Innovation <br className="hidden md:block" /> Meets
            Excellence.
          </h1>
          <p className="text-lg md:text-xl max-w-3xl mx-auto mb-8 text-gray-300 animate-fade-in-up animation-delay-300">
            Welcome to Owethu Managed Services. We deliver cutting-edge IT
            solutions, empowering businesses to thrive in the ever-evolving
            digital landscape with unmatched industry expertise.
          </p>
          <Button
            href="/about"
            size="lg"
            className="animate-fade-in-up animation-delay-600"
          >
            Learn More →
          </Button>
        </div>
      </section>

      {/* Core Services Section */}
      <section className="py-20 md:py-28 bg-light-gray">
        <div className="container mx-auto px-6 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4 text-dark">
            Core Services
          </h2>
          <p className="text-lg text-gray-600 mb-12 md:mb-16 max-w-2xl mx-auto">
            Tailored solutions designed to drive growth, optimize productivity,
            and solve your most complex business challenges.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
            {/* Service Card 1: Resource Augmentation */}
            <div className="bg-light p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 text-left">
              <FaCogs className="text-primary text-4xl mb-4" />
              <h3 className="text-xl font-semibold mb-3 text-dark">
                Resource Augmentation
              </h3>
              <p className="text-gray-600">
                Access top-tier IT talent seamlessly integrated with your team.
                Skilled professionals for short-term projects or long-term
                engagements.
              </p>
            </div>
            {/* Service Card 2: Project Management */}
            <div className="bg-light p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 text-left">
              <FaProjectDiagram className="text-primary text-4xl mb-4" />
              <h3 className="text-xl font-semibold mb-3 text-dark">
                Project Management
              </h3>
              <p className="text-gray-600">
                Expert management ensuring on-time, within-budget delivery with
                superior results, risk mitigation, and maximum efficiency.
              </p>
            </div>
            {/* Service Card 3: Product Development */}
            <div className="bg-light p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 text-left">
              <FaCode className="text-primary text-4xl mb-4" />
              <h3 className="text-xl font-semibold mb-3 text-dark">
                Product Development
              </h3>
              <p className="text-gray-600">
                Creating innovative, scalable digital products from concept to
                deployment to enhance efficiency and foster business growth.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Client Logos Section */}
      <section className="py-16 md:py-20 bg-light">
        <div className="container mx-auto px-6 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-12 text-dark">
            Trusted By Industry Leaders
          </h2>
          {/* TODO: Implement Auto-Sliding Panel (e.g., using Swiper.js or react-slick) */}
          <div className="flex flex-wrap justify-center items-center gap-10 md:gap-16 opacity-70">
            {/* Placeholder Logos - Replace with actual client logos */}
            <FaBuilding
              title="Financial Services Client"
              className="text-5xl text-gray-500 hover:text-primary transition-colors"
            />
            <FaCar
              title="Automotive Client"
              className="text-5xl text-gray-500 hover:text-primary transition-colors"
            />
            <FaLaptopCode
              title="Tech Industry Client"
              className="text-5xl text-gray-500 hover:text-primary transition-colors"
            />
            <FaUsers
              title="Generic Client 1"
              className="text-5xl text-gray-500 hover:text-primary transition-colors"
            />
            <FaBuilding
              title="Generic Client 2"
              className="text-5xl text-gray-500 hover:text-primary transition-colors"
            />
          </div>
          <p className="mt-8 text-gray-500 italic">
            Showcasing key clients across financial services, automotive, and
            tech industries.
            {/* (Auto-sliding panel coming soon!) */}
          </p>
        </div>
      </section>

      {/* Call to Action (Optional but good practice) */}
      <section className="bg-primary text-dark py-16">
        <div className="container mx-auto px-6 text-center">
          <h2 className="text-3xl font-bold mb-4">Ready to Innovate?</h2>
          <p className="text-lg mb-8 max-w-xl mx-auto">
            Let&apos;s discuss how OMS can help transform your business with
            cutting-edge technology solutions.
          </p>
          <Button href="/contact" variant="secondary" size="lg">
            Get In Touch
          </Button>
        </div>
      </section>
    </>
  );
}