import Image from "next/image";
import Link from "next/link";
import { Metadata } from "next";
import {
  FaArrowRight,
  FaBriefcase,
  FaCogs,
  FaHandshake,
  FaLaptopCode,
  FaProjectDiagram,
  FaUsers,
  FaWrench,
  FaShippingFast,
} from "react-icons/fa";
import { COLORS } from "@/constants"; // Assuming COLORS constant is available

// SEO Metadata
export const metadata: Metadata = {
  title: "IT Services & Solutions | OMS South Africa",
  description:
    "Explore IT services by Owethu Managed Services (OMS): Custom Software Development, IT Resource Augmentation, and the OBSE Bank Statement Extractor. Partner with us for innovative solutions.",
  keywords: [
    "IT services South Africa",
    "custom software development",
    "IT resource augmentation",
    "managed IT services",
    "OBSE",
    "CVEvolve",
    "bank statement extractor",
    "bank statement automation",
    "fintech solutions",
    "IT consulting",
    "OMS",
    "Owethu Managed Services",
    "Centurion",
    "Gauteng",
  ],
  openGraph: {
    title: "Comprehensive IT Services & Solutions | OMS South Africa",
    description:
      "OMS offers tailored IT solutions including custom development, resource augmentation, and specialized products like OBSE.",
    url: "https://oms.africa/services", // Update with the final URL
    images: [
      {
        url: "/images/oms-services-og.png", // Replace with an appropriate OG image URL
        width: 1200,
        height: 630,
        alt: "OMS IT Services",
      },
    ],
    locale: "en_ZA",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Comprehensive IT Services & Solutions | OMS South Africa",
    description:
      "Partner with OMS for expert IT services, from custom builds to resource scaling.",
    // images: ['/images/oms-services-twitter.png'], // Replace if needed
  },
};

// Data for Service Areas
const serviceAreas = [
  {
    title: "Custom Software Development & Consulting",
    icon: FaLaptopCode,
    description:
      "We design, build, and implement bespoke software solutions tailored to your unique business challenges and objectives. Our consulting services help align technology with your strategic goals.",
    imageUrl: "/images/team.svg", // Reusing image from About
    link: "/contact?subject=Custom Development Inquiry", // Link to contact or a future dedicated page
    linkText: "Discuss Your Project",
  },
  {
    title: "IT Resource Augmentation",
    icon: FaUsers,
    description:
      "Scale your team effectively with our flexible resource augmentation model. Access skilled IT professionals (BAs, Testers, Developers, Designers) on demand or via managed milestone-based projects.",
    imageUrl: "/images/team-collaborative.png", // Reusing image from Resource Augmentation
    link: "/services/resource-augmentation",
    linkText: "Explore Augmentation",
  },
  {
    title: "OBSE - Bank Statement Extractor",
    icon: FaShippingFast,
    description:
      "Automate bank statement processing with OBSE. Our intelligent OCR solution extracts data accurately and quickly, enhancing efficiency, reducing risk, and speeding up financial assessments.",
    imageUrl: "/images/obse.svg", // Reusing image from OBSE
    link: "/obse",
    linkText: "Learn About OBSE",
  },
];

const ourApproachItems = [
  {
    icon: FaProjectDiagram,
    title: "Strategic Alignment",
    description: "Understanding your goals to ensure solutions deliver value.",
  },
  {
    icon: FaHandshake,
    title: "Client-Centric Collaboration",
    description: "Working as true partners, involving you throughout.",
  },
  {
    icon: FaCogs,
    title: "Agile & Adaptive Delivery",
    description: "Flexible methodologies for faster, relevant results.",
  },
  {
    icon: FaWrench,
    title: "Technical Excellence",
    description: "Building robust, scalable, and maintainable solutions.",
  },
];

export default function ServicesPage() {
  return (
    <div className="bg-white text-gray-800 overflow-x-hidden dark:bg-gray-900 dark:text-gray-200 font-poppins">
      {/* 1. Hero Section */}
      <section className="relative bg-gradient-to-r from-gray-800 via-gray-700 to-gray-900 text-white py-20 md:py-32">
        <div className="absolute inset-0 bg-black opacity-50 dark:opacity-70"></div>
        <div className="container mx-auto px-6 text-center relative z-10">
          <h1
            className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md"
            style={{ color: COLORS.primary }}
          >
            Tailored IT Services & Solutions
          </h1>
          <p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8">
            Owethu Managed Services empowers businesses through innovative
            technology solutions, strategic consulting, flexible resource
            augmentation, and specialized product offerings.
          </p>
          <Link
            href="#core-services"
            className="inline-flex items-center justify-center bg-gold-500 text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
            style={{ backgroundColor: COLORS.primary }}
          >
            Explore Our Services <FaArrowRight className="ml-2" />
          </Link>
        </div>
      </section>

      {/* 2. Core Service Areas Section */}
      <section
        id="core-services"
        className="py-16 md:py-24 bg-white dark:bg-gray-900"
      >
        <div className="container mx-auto px-6">
          <div className="text-center mb-12 md:mb-16">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
              Our Expertise, Your Advantage
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
              We offer a comprehensive suite of services designed to address
              your specific IT needs and drive business growth.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {serviceAreas.map((service) => (
              <div
                key={service.title}
                className="flex flex-col bg-gray-50 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:shadow-xl hover:-translate-y-1"
              >
                <div className="relative h-48 w-full">
                  <Image
                    src={service.imageUrl}
                    alt={`${service.title} illustration`}
                    layout="fill"
                    objectFit="contain" // Changed to contain for SVG/Illustrations
                    className="p-4 bg-gray-100 dark:bg-gray-700" // Added padding and bg
                  />
                </div>
                <div className="p-6 flex flex-col flex-grow">
                  <div className="flex items-center mb-3">
                    <service.icon
                      className="text-2xl mr-3 flex-shrink-0"
                      style={{ color: COLORS.primary }}
                    />
                    <h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white">
                      {service.title}
                    </h3>
                  </div>
                  <p className="text-gray-600 dark:text-gray-300 text-sm mb-4 flex-grow">
                    {service.description}
                  </p>
                  <Link
                    href={service.link}
                    className="inline-flex items-center mt-auto text-gold-600 dark:text-gold-400 hover:text-gold-700 dark:hover:text-gold-300 font-semibold transition-colors duration-300 text-sm"
                    style={{ color: COLORS.primary }}
                  >
                    {service.linkText} <FaArrowRight className="ml-2" />
                  </Link>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 3. Our Approach Section */}
      <section className="py-16 md:py-24 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700">
        <div className="container mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
              How We Deliver Excellence
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto font-poppins">
              Our methodology ensures collaboration, precision, and impactful
              results tailored to your project needs.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {ourApproachItems.map((item) => (
              <div
                key={item.title}
                className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md text-center transform transition duration-300 hover:-translate-y-2 hover:shadow-xl dark:hover:shadow-gold-500/20"
              >
                <item.icon
                  className="text-4xl text-gold-500 mx-auto mb-5"
                  style={{ color: COLORS.primary }}
                />
                <h4 className="text-xl font-semibold mb-3 font-poppins dark:text-white">
                  {item.title}
                </h4>
                <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm leading-relaxed">
                  {item.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 4. Industry Expertise Snippet (Optional) */}
      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6 text-center">
          <FaBriefcase
            className="text-5xl text-gold-500 mx-auto mb-4"
            style={{ color: COLORS.primary }}
          />
          <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
            Serving Diverse Industries
          </h2>
          <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto mb-8">
            We apply our technical expertise across various sectors,
            understanding the unique challenges and opportunities within each.
            Key areas include Financial Services, Automotive, Technology, and
            more.
          </p>
          <Link
            href="/about#industry-expertise" // Assuming you add an ID to the section in about page
            className="text-gold-600 dark:text-gold-400 hover:text-gold-700 dark:hover:text-gold-300 font-semibold transition-colors duration-300 inline-flex items-center"
            style={{ color: COLORS.primary }}
          >
            Learn More About Our Industry Focus{" "}
            <FaArrowRight className="ml-2" />
          </Link>
        </div>
      </section>

      {/* 5. Call to Action (CTA) Section */}
      <section
        className="py-16 md:py-24 bg-gold-500 text-gray-900"
        style={{ backgroundColor: COLORS.primary }}
      >
        <div className="container mx-auto px-6 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins">
            Let&apos;s Build Your Solution
          </h2>
          <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed mb-8 font-poppins text-gray-800">
            Ready to discuss how OMS can help you achieve your technology goals?
            Contact us today for a consultation.
          </p>
          <Link
            href="/contact"
            className="inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-md hover:bg-gray-900 dark:bg-gray-900 dark:hover:bg-black transition-colors duration-300"
          >
            Get in Touch
          </Link>
        </div>
      </section>
    </div>
  );
}