// /app/resource-augmentation/page.tsx (or wherever you place your page components)
import Image from "next/image";
import Link from "next/link";
import { Metadata } from "next";
import {
  FaArrowRight,
  FaBriefcase,
  FaCheckCircle,
  FaClipboardList, // For BA
  FaClock, // For Time & Material
  FaCode, // For Development (General)
  FaUsersCog, // For Managed Services/Teams
  FaPaintBrush, // For UX/UI Design
  FaProjectDiagram, // For Architecture/Milestones
  FaPuzzlePiece, // For Integration/Solutions
  FaRegHandshake, // For Partnership/Client Relations
  FaShieldAlt, // For Reliability/QA
  FaSitemap, // For Process/Architecture
  FaSyncAlt, // For Agile/Flexibility
  FaTasks, // For Project Management/Milestones
  FaVial, // For Testing
  FaUsers, // For Teams/Resources
  FaChartLine, // For Reporting/MI
  FaLightbulb, // For Innovation/Solutions
  FaPhone, // Contact
  FaEnvelope, // Contact
  FaTools, // General Capabilities
  FaLayerGroup, // Frameworks (SAFe, etc.)
  FaFileInvoiceDollar, // Cost/Pricing
  FaBusinessTime, // Experience/Past Projects
} from "react-icons/fa";
import { COLORS } from "@/constants"; // Assuming COLORS constant is available
import ContactForm from "@/components/ContactForm"; // Assuming ContactForm is available

// SEO Metadata
export const metadata: Metadata = {
  title: "IT Resource Augmentation & Managed Services | OMS South Africa",
  description:
    "Flexible IT resource augmentation by Owethu Managed Services (OMS). Access expert Business Analysts, Developers, Testers, UX/UI Designers, and more on-demand or via milestone-based projects. Centurion, Gauteng.",
  keywords: [
    "IT resource augmentation",
    "managed IT services",
    "IT staffing South Africa",
    "project resources",
    "IT project delivery",
    "Business Analyst",
    "Software Developer",
    "Test Analyst",
    "UX/UI Designer",
    "Process Engineer",
    "Salesforce Partner",
    "time and material IT",
    "milestone-based projects",
    "IT outsourcing",
    "flexible IT resources",
    "Centurion",
    "Gauteng",
    "OMS",
    "Owethu Managed Services",
    "black female owned IT",
  ],
  openGraph: {
    title: "Expert IT Resource Augmentation Services | OMS South Africa",
    description:
      "Scale your IT projects effectively with OMS's flexible resource augmentation and managed services.",
    url: "https://oms.cvevolve.com/resource-augmentation", // Update with the final URL
    images: [
      {
        // Replace with an appropriate OG image URL if you have one
        url: "/images/oms-resource-augmentation-og.png",
        width: 1200,
        height: 630,
        alt: "OMS IT Resource Augmentation Services",
      },
    ],
    locale: "en_ZA",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Expert IT Resource Augmentation Services | OMS South Africa",
    description:
      "Get skilled IT professionals on demand. OMS offers flexible resource augmentation in South Africa.",
    // images: ['/images/oms-resource-augmentation-twitter.png'], // Replace if needed
  },
};

// --- Data Structures from PDF ---

interface ServiceModel {
  icon: React.ElementType;
  title: string;
  description: string;
  details: string[];
  pricingModel: string;
}

const serviceModels: ServiceModel[] = [
  {
    icon: FaClock,
    title: "Resource Augmentation Model (Time & Material)",
    description:
      "Access skilled IT professionals on demand to supplement your existing team.",
    details: [
      "Provides required Technology and Human Resources.",
      "Client manages the project end-to-end.",
      "Ideal for adding specific skills or capacity quickly.",
      "Resources-on-Demand ensures no long-term FTE costs after project completion.",
    ],
    pricingModel: "Time-and-Material pricing structure.",
  },
  {
    icon: FaTasks,
    title: "Milestone-Based Model (Managed Service)",
    description:
      "OMS takes full responsibility for delivering specific IT project phases or entire projects.",
    details: [
      "Includes Project Planning & Management.",
      "Covers End-to-end Process Design (Requirements, BPD, Arch, UX/UI).",
      "Includes Data & MI Design (Architecture, Transformation, BI).",
      "Comprehensive Testing & QA (Strategy, Implementation, Management).",
      "OMS manages all deployed team members, deliverables, and velocity.",
    ],
    pricingModel:
      "Milestone-Based pricing, payable on delivery of key milestones.",
  },
];

interface Capability {
  role: string;
  icon: React.ElementType;
  description: string;
  skills: {
    level: string; // e.g., 'Senior', 'Intermediate', 'Junior'
    points: string[];
  }[]; // Simplified for web display
}

// Simplified representation of Page 4 for web display
const capabilities: Capability[] = [
  {
    role: "Business / System Analysts",
    icon: FaClipboardList,
    description:
      "Bridge the gap between business needs and technology solutions, defining requirements and processes.",
    skills: [
      {
        level: "Senior",
        points: [
          "Stakeholder engagement & management",
          "Lead other BAs",
          "Requirements/Backlog management",
          "Process Design",
          "Report in Steering committees",
        ],
      },
      {
        level: "Intermediate",
        points: [
          "Document requirements",
          "Design solutions with architects",
          "Stakeholder engagement",
        ],
      },
      {
        level: "Junior",
        points: ["Elicit requirements", "Document requirements", "UML Design"],
      },
    ],
  },
  {
    role: "Test Analysts (Manual & Automation)",
    icon: FaVial,
    description:
      "Ensure software quality and reliability through rigorous testing strategies and execution.",
    skills: [
      {
        level: "Senior",
        points: [
          "Lead Test Analysts",
          "Develop Test Strategy",
          "Manage Test Execution",
          "UAT Training",
          "Stakeholder Management",
          "Report in Steering committees",
        ],
      },
      {
        level: "Intermediate",
        points: [
          "Document Test Scenarios",
          "Write test scripts",
          "Manage Test Execution",
          "Report progress",
          "Execute manual/automated testing",
        ],
      },
      {
        level: "Junior",
        points: [
          "Document Test Scenarios",
          "Execute manual/automated testing",
          "Produce Test Data",
          "Defects tracking",
          "UAT Training",
        ],
      },
    ],
  },
  {
    role: "UX / UI / CX Designers",
    icon: FaPaintBrush,
    description:
      "Craft intuitive, engaging, and effective user experiences and interfaces.",
    skills: [
      {
        level: "Senior",
        points: [
          "Develop Design Led Strategy",
          "Lead other designers",
          "Define User Journeys",
          "Perform user experience testing",
          "Stakeholder engagement",
          "Produce UI prototypes",
        ],
      },
      {
        level: "Intermediate",
        points: [
          "Define User Journeys",
          "Perform user experience testing",
          "Produce design progress reports",
          "Execute designs for UI prototypes",
        ],
      },
      {
        level: "Junior",
        points: [
          "Define User Journeys",
          "Produce design progress reports",
          "Execute designs for UI prototypes",
        ],
      },
    ],
  },
  {
    role: "Process Engineers / Designers",
    icon: FaSitemap,
    description:
      "Analyze, design, and optimize business processes for efficiency and effectiveness.",
    skills: [
      {
        level: "Senior",
        points: [
          "Develop Process Design Strategy",
          "Manage and lead teams",
          "Define Target Operating Model",
          "Design ASIS/TOBE Processes",
          "Stakeholder management",
        ],
      },
      {
        level: "Intermediate",
        points: [
          "Design ASIS/TOBE Processes",
          "Stakeholder management",
          "Evaluate & remove inefficiencies",
          "Optimize current processes",
        ],
      },
      {
        level: "Junior",
        points: [
          "Design ASIS/TOBE Processes",
          "Validate & remove inefficiencies",
          "Optimize current processes",
        ],
      },
    ],
  },
  // Note: Developer roles are mentioned in 'About Us' but not detailed in the table. Add a general entry if desired.
  {
    role: "Software Developers & Architects",
    icon: FaCode, // Or FaProjectDiagram for Architects
    description:
      "Build, implement, and architect robust and scalable software solutions.",
    skills: [
      {
        level: "General",
        points: [
          "Expertise across various modern technologies (backend, frontend, integration)",
          "Solution architecture design",
          "Development lifecycle management",
          "API development and integration",
          "Database design and management",
        ],
      },
    ], // Keep generic as PDF doesn't detail levels here
  },
];

interface Benefit {
  icon: React.ElementType;
  title: string;
  description: string;
}

const augmentationBenefits: Benefit[] = [
  {
    icon: FaSyncAlt,
    title: "Ultimate Flexibility",
    description:
      "Scale your team up or down quickly based on project demands and budget.",
  },
  {
    icon: FaUsers,
    title: "Access to Expertise",
    description:
      "Gain immediate access to specialized IT skills that may not be available in-house.",
  },
  {
    icon: FaFileInvoiceDollar,
    title: "Cost-Effectiveness",
    description:
      "Reduce recruitment costs, overheads, and long-term commitments associated with FTEs.",
  },
  {
    icon: FaChartLine,
    title: "Increased Productivity",
    description:
      "Focus your core team on strategic initiatives while OMS resources handle specific tasks or projects.",
  },
  {
    icon: FaShieldAlt,
    title: "Reduced Hiring Burden",
    description:
      "Avoid the time-consuming process of sourcing, vetting, hiring, and onboarding new employees.",
  },
  {
    icon: FaTasks,
    title: "Focus on Core Business",
    description:
      "Outsource IT project execution or specific roles, allowing you to concentrate on your primary objectives.",
  },
  {
    icon: FaCheckCircle,
    title: "Quality Assurance",
    description:
      "Benefit from experienced professionals and managed delivery (in Milestone model) for high-quality outcomes.",
  },
  {
    icon: FaLightbulb,
    title: "Faster Project Delivery",
    description:
      "Accelerate project timelines by quickly filling skill gaps and adding capacity.",
  },
];

const methodologies = [
  { name: "Agile (SCRUM)", icon: FaSyncAlt },
  { name: "Scaled Agile (SAFe)", icon: FaLayerGroup },
  { name: "Waterfall", icon: FaProjectDiagram }, // Using ProjectDiagram as a proxy
];

const clientLogos = [
  { src: "/images/absa.png", alt: "Absa Bank Logo" }, // Replace with actual paths
  { src: "/images/sybrin.svg", alt: "Sybrin Logo" },
  { src: "/images/bcx.png", alt: "BCX Logo" },
  { src: "/images/sasol.png", alt: "Sasol Logo" },
];

// --- Page Component ---

export default function ResourceAugmentationPage() {
  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>
        {/* Optional: Add a subtle background pattern or image */}
        {/* <div className="absolute inset-0 bg-[url('/images/team-background.jpg')] bg-cover bg-center opacity-10"></div> */}
        <div className="container mx-auto px-6 text-center relative z-10">
          {/* Consider adding OMS Logo here if desired */}
          {/* <Image src="/oms-logo-white.png" alt="OMS Logo" width={150} height={50} className="mx-auto mb-6" /> */}
          <h1
            className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md"
            style={{ color: COLORS.primary }} // Use gold color
          >
            Flexible IT Resource Augmentation & Managed Services
          </h1>
          <p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8">
            Scale your IT capabilities effectively with Owethu Managed Services.
            Access expert resources on demand or entrust us with full project
            delivery through our flexible engagement models.
          </p>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
            <Link
              href="#service-models" // Link to the service models section
              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 Models <FaArrowRight className="ml-2" />
            </Link>
            <Link
              href="/contact?subject=Resource Augmentation Inquiry"
              className="inline-flex items-center text-gold-400 hover:text-gold-300 transition-colors duration-300 font-semibold"
              style={{ color: COLORS.primary }} // Use gold color for secondary CTA text too
            >
              Discuss Your Needs
            </Link>
          </div>
        </div>
      </section>

      {/* 2. The Need / Why Resource Augmentation? Section */}
      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
        <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">
              Bridge Your IT Skills Gap & Scale Efficiently
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
              Modern IT projects demand diverse skills and flexible capacity.
              Resource augmentation helps overcome common challenges faced by
              businesses today.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                icon: FaPuzzlePiece,
                title: "Skill Gaps",
                desc: "Struggling to find specialized IT talent for specific project needs or new technologies.",
              },
              {
                icon: FaChartLine,
                title: "Fluctuating Demand",
                desc: "Need to scale development or testing teams quickly for peak periods without long-term overhead.",
              },
              {
                icon: FaClock,
                title: "Project Delays",
                desc: "Lack of internal resources causing bottlenecks and delaying critical project timelines.",
              },
              {
                icon: FaFileInvoiceDollar,
                title: "Cost Control",
                desc: "Wanting to manage IT personnel costs effectively, avoiding expensive recruitment and full-time hires.",
              },
              {
                icon: FaBriefcase,
                title: "Focus on Core Business",
                desc: "Needing to free up internal teams to concentrate on strategic goals rather than specific project tasks.",
              },
              {
                icon: FaSyncAlt,
                title: "Need for Flexibility",
                desc: "Requiring adaptable staffing solutions that can change as project requirements evolve.",
              },
            ].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-1 hover:shadow-lg"
              >
                <item.icon
                  className="text-4xl text-red-500 dark:text-red-400 mx-auto mb-4" // Using red to signify challenges/needs
                />
                <h4 className="text-xl font-semibold mb-2 font-poppins dark:text-white">
                  {item.title}
                </h4>
                <p className="text-gray-600 dark:text-gray-300 text-sm">
                  {item.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 3. Our Solution: OMS Resource Augmentation */}
      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
                Your Strategic Partner for IT Talent
              </h2>
              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
                Owethu Managed Services (OMS) provides high-caliber IT
                professionals through flexible engagement models tailored to
                your specific project requirements and business objectives. As a
                100% Black female-owned organization based in Centurion,
                Gauteng, we are committed to excellence and delivering value.
              </p>
              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-semibold">
                Whether you need individual experts to augment your team or a
                fully managed service to deliver key project milestones, OMS
                offers the expertise and flexibility you need to succeed. We are
                also a Salesforce Partner, providing licenses, implementation,
                and managed services.
              </p>
              <Link
                href="/about" // Link to your main About Us page
                className="inline-flex items-center mt-4 text-gold-600 dark:text-gold-400 hover:text-gold-700 dark:hover:text-gold-300 font-semibold transition-colors duration-300"
                style={{ color: COLORS.primary }}
              >
                Learn More About OMS <FaArrowRight className="ml-2" />
              </Link>
            </div>
            <div className="relative h-64 md:h-80 rounded-lg overflow-hidden shadow-lg">
              {/* Placeholder Image - Replace with a relevant image (e.g., team collaboration, office) */}
              <Image
                src="/images/team-collaborative.png" // Replace with actual path
                alt="OMS Team Collaboration"
                layout="fill"
                objectFit="cover"
                className="bg-gray-200 dark:bg-gray-700"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
            </div>
          </div>
        </div>
      </section>

      {/* 4. Our Service Models Section */}
      <section
        id="service-models"
        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-12 md:mb-16">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
              Flexible Engagement Models
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
              Choose the approach that best suits your project needs, management
              style, and budget.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
            {serviceModels.map((model) => (
              <div
                key={model.title}
                className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md flex flex-col"
              >
                <div className="flex items-center mb-4">
                  <model.icon
                    className="text-3xl mr-3"
                    style={{ color: COLORS.primary }}
                  />
                  <h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white">
                    {model.title}
                  </h3>
                </div>
                <p className="text-gray-600 dark:text-gray-300 mb-4 text-sm flex-grow">
                  {model.description}
                </p>
                <ul className="space-y-2 mb-4">
                  {model.details.map((detail, index) => (
                    <li key={index} className="flex items-start text-sm">
                      <FaCheckCircle className="w-4 h-4 text-green-500 dark:text-green-400 mr-2 mt-0.5 flex-shrink-0" />
                      <span className="text-gray-700 dark:text-gray-300">
                        {detail}
                      </span>
                    </li>
                  ))}
                </ul>
                <p className="text-sm font-semibold text-gray-800 dark:text-gray-200 mt-auto pt-4 border-t border-gray-200 dark:border-gray-600">
                  {model.pricingModel}
                </p>
              </div>
            ))}
          </div>
          <p className="text-center text-md text-gray-700 dark:text-gray-300 mt-12 max-w-3xl mx-auto">
            OMS operates using both <span className="font-semibold">AGILE</span>{" "}
            and <span className="font-semibold">Waterfall</span> Frameworks,
            depending on client preference and project suitability.
          </p>
        </div>
      </section>

      {/* 5. Capabilities & Expertise Section */}
      <section 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">
            <FaTools
              className="text-5xl 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">
              Our Core Capabilities
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
              We provide skilled professionals across key IT disciplines at
              various experience levels (Junior, Intermediate, Senior).
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {capabilities.map((capability) => (
              <div
                key={capability.role}
                className="relative bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm border-t-4 dark:border-gold-400 transition-shadow hover:shadow-md"
                style={{ borderColor: COLORS.primary }}
              >
                <capability.icon
                  className="text-3xl mb-3"
                  style={{ color: COLORS.primary }}
                />
                <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
                  {capability.role}
                </h4>
                <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed mb-3">
                  {capability.description}
                </p>
                {/* Simplified skills display for the web page overview */}
                <h5 className="text-sm font-semibold mb-1 dark:text-gray-200">
                  Key Areas of Expertise:
                </h5>
                <ul className="list-disc list-inside space-y-1 text-xs text-gray-600 dark:text-gray-300">
                  {capability.skills[0].points.slice(0, 4).map(
                    (
                      point,
                      index // Show first few points from senior/general list
                    ) => (
                      <li key={index}>{point}</li>
                    )
                  )}
                  {capability.skills[0].points.length > 4 && (
                    <li>And more...</li>
                  )}
                </ul>
              </div>
            ))}
          </div>
          <p className="text-center text-md text-gray-700 dark:text-gray-300 mt-12 max-w-3xl mx-auto">
            Detailed capability breakdowns by seniority level (Junior,
            Intermediate, Senior) are available upon request.
          </p>
        </div>
      </section>

      {/* 6. Benefits of Partnering with OMS Section */}
      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
        <div className="container mx-auto px-6">
          <div className="text-center mb-12 md:mb-16">
            <FaRegHandshake
              className="text-5xl 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">
              Why Choose OMS for Resource Augmentation?
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
              Leverage our expertise and flexible models to gain a competitive
              advantage.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {augmentationBenefits.map((benefit) => (
              <div
                key={benefit.title}
                className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md text-center transform transition duration-300 hover:-translate-y-1 hover:shadow-lg"
              >
                <benefit.icon
                  className="text-4xl mx-auto mb-4"
                  style={{ color: COLORS.primary }}
                />
                <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
                  {benefit.title}
                </h4>
                <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
                  {benefit.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 7. Proven Experience / Past Projects (High Level) */}
      <section 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">
            <FaBusinessTime
              className="text-5xl 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">
              Proven Track Record Across Industries
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
              We have successfully delivered resources and managed projects in
              complex environments, including:
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto text-center">
            <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm">
              <FaShieldAlt
                className="text-3xl mx-auto mb-3"
                style={{ color: COLORS.primary }}
              />
              <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
                Financial Services & Compliance
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                FIC/KYC Remediation (Data Architecture, MI), Core Banking
                Systems, Lending/Credit Process Optimisation.
              </p>
            </div>
            <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm">
              <FaUsersCog
                className="text-3xl mx-auto mb-3"
                style={{ color: COLORS.primary }}
              />
              <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
                Customer Management & Onboarding
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                Design, Testing, Requirements, Process Engineering, UX/UI for
                customer-facing platforms.
              </p>
            </div>
            <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm">
              <FaSitemap
                className="text-3xl mx-auto mb-3"
                style={{ color: COLORS.primary }}
              />
              <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
                Platform & Process Automation
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                Straight-Through Processing (STP) on Banking Platforms, API
                Integration, Salesforce implementations.
              </p>
            </div>
          </div>
          {/* Optional: Mention specific technologies briefly if desired */}
          {/* <p className="text-center text-md text-gray-500 dark:text-gray-400 mt-8 max-w-4xl mx-auto italic">
              Expertise includes: Salesforce, AWS, Azure, Data Warehousing, BI Tools, BPMN, Various Banking Systems (Sybrin, Flexicube, etc.), Automation Frameworks (Selenium), and more.
            </p> */}
        </div>
      </section>

      {/* 8. Implementation Approaches / Methodologies */}
      <section className="py-16 md:py-24 bg-gray-800 text-white">
        <div className="container mx-auto px-6 text-center">
          <FaLayerGroup
            className="text-5xl mx-auto mb-4"
            style={{ color: COLORS.primary }}
          />
          <h2 className="text-3xl md:text-4xl font-bold font-poppins mb-4">
            Adaptable Delivery Methodologies
          </h2>
          <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-300 mb-8">
            We are proficient in various project management frameworks and adapt
            our approach to align with your organizational standards and project
            needs.
          </p>
          <div className="flex flex-wrap justify-center items-center gap-8">
            {methodologies.map((method) => (
              <div
                key={method.name}
                className="flex flex-col items-center p-4 bg-gray-700 rounded-lg w-48"
              >
                <method.icon
                  className="text-4xl mb-2"
                  style={{ color: COLORS.primary }}
                />
                <span className="font-semibold text-gray-200">
                  {method.name}
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 9. Clients & Partners Section */}
      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6">
          <h2 className="text-center text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-12">
            Trusted by Leading Organizations
          </h2>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-8 md:gap-12 items-center max-w-5xl mx-auto">
            {clientLogos.map((logo) => (
              <div
                key={logo.alt}
                className="relative h-16 md:h-20 filter grayscale hover:grayscale-0 transition duration-300 brightness-75 hover:brightness-100 dark:brightness-150 dark:hover:brightness-100 dark:invert dark:hover:invert-0"
              >
                <Image
                  src={logo.src}
                  alt={logo.alt}
                  layout="fill"
                  objectFit="contain"
                />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 10. 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">
            Ready to Enhance Your IT Team?
          </h2>
          <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed mb-8 font-poppins text-gray-800">
            Let&apos;s discuss how OMS resource augmentation or managed services
            can help you achieve your project goals. Contact us today for a
            consultation tailored to your specific needs.
          </p>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
            <Link
              href="/contact?subject=Resource Augmentation Consultation"
              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"
            >
              Request a Consultation
            </Link>
            <Link
              href="mailto:admin@oms.africa" // Direct email link
              className="inline-block bg-transparent border-2 border-gray-800 text-gray-800 font-bold py-3 px-8 rounded-md hover:bg-gray-800 hover:text-white transition-colors duration-300"
            >
              Email Us Directly
            </Link>
          </div>
        </div>
      </section>

      {/* 11. Contact Information Section */}
      <section className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800">
        <div className="container mx-auto px-6">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
              Get in Touch
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
              We&apos;re ready to assist you. Reach out via phone, email, or use
              the form below to start the conversation about your IT resource
              needs.
            </p>
          </div>
          <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
            {/* Contact Details */}
            <div className="space-y-6 bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white mb-4">
                Contact Information
              </h3>
              <div className="flex items-center space-x-4">
                <FaPhone
                  className="w-6 h-6 flex-shrink-0"
                  style={{ color: COLORS.primary }}
                />
                <div>
                  <h4 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
                    Phone
                  </h4>
                  {/* Using specific numbers from PDF */}
                  <a
                    href="tel:+27120513281"
                    className="block text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
                  >
                    Zanele: (012) 051 3281
                  </a>
                  <a
                    href="tel:+27120513282"
                    className="block text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
                  >
                    Lindiwe: (012) 051 3282
                  </a>
                </div>
              </div>
              <div className="flex items-center space-x-4">
                <FaEnvelope
                  className="w-6 h-6 flex-shrink-0"
                  style={{ color: COLORS.primary }}
                />
                <div>
                  <h4 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
                    Email
                  </h4>
                  {/* Using specific emails from PDF */}
                  <a
                    href="mailto:Zanelem@oms.africa"
                    className="block text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
                  >
                    Zanelem@oms.africa
                  </a>
                  <a
                    href="mailto:Lindiwes@oms.africa"
                    className="block text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm"
                  >
                    Lindiwes@oms.africa
                  </a>
                  <a
                    href="mailto:admin@oms.africa"
                    className="block text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm mt-1"
                  >
                    admin@oms.africa (General)
                  </a>
                </div>
              </div>
              {/* Optional: Link to main contact page */}
              <Link
                href="/contact"
                className="inline-flex items-center text-gold-600 dark:text-gold-400 hover:text-gold-700 dark:hover:text-gold-300 font-semibold transition-colors duration-300 mt-4"
                style={{ color: COLORS.primary }}
              >
                Go to Full Contact Page <FaArrowRight className="ml-2" />
              </Link>
            </div>

            {/* Contact Form */}
            <div className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white mb-4">
                Send a Quick Inquiry
              </h3>
              <ContactForm /> {/* Reuse your existing contact form */}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}