oms-website-nextjs/app/(website)/_components/WhyChooseUsSection.tsx

// components/WhyChooseUsSection.tsx
import React from "react";
import { IconType } from "react-icons"; // Import IconType for typing
import { FiZap, FiUsers, FiTarget, FiBarChart2 } from "react-icons/fi"; // Example icons

type FeatureItem = {
  icon: IconType;
  title: string;
  description: string;
};

type WhyChooseUsProps = {
  title: string;
  subtitle?: string;
  features: FeatureItem[];
};

const WhyChooseUsSection: React.FC<WhyChooseUsProps> = ({
  title,
  subtitle,
  features,
}) => {
  return (
    // Use standard background for seamless flow or secondary for slight distinction
    <section className="py-20 md:py-28 bg-background">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto text-center mb-12 md:mb-16">
          {/* Use semantic foreground */}
          <h2 className="text-3xl md:text-4xl font-bold mb-4 text-foreground">
            {title}
          </h2>
          {subtitle && (
            // Use semantic muted foreground
            <p className="text-lg text-muted-foreground">{subtitle}</p>
          )}
        </div>

        {/* Features Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-10">
          {features.map((feature, index) => (
            <div
              key={index}
              className="text-center md:text-left flex flex-col items-center md:items-start p-6 rounded-lg transition-colors duration-300 hover:bg-secondary"
            >
              {" "}
              {/* Added padding and hover */}
              <div className="flex-shrink-0 mb-4">
                {/* Icon using primary color */}
                <feature.icon className="w-10 h-10 text-primary" />
              </div>
              <div>
                {/* Title using foreground */}
                <h3 className="text-xl font-semibold mb-2 text-foreground">
                  {feature.title}
                </h3>
                {/* Description using muted foreground */}
                <p className="text-base text-muted-foreground">
                  {feature.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Example default data (adapt based on OMS's key selling points/values)
export const defaultWhyChooseUsFeatures: FeatureItem[] = [
  {
    icon: FiZap,
    title: "Innovation Driven",
    description:
      "We leverage cutting-edge technology to create transformative solutions that push boundaries.",
  },
  {
    icon: FiUsers,
    title: "Expert Teams",
    description:
      "Access highly skilled IT professionals tailored to your project needs, ensuring expertise and quality.",
  },
  {
    icon: FiTarget,
    title: "Client-Centric Approach",
    description:
      "Your success is our priority. We partner closely with you to deliver solutions aligned with your goals.",
  },
  {
    icon: FiBarChart2,
    title: "Measurable Results",
    description:
      "Our focus is on delivering tangible business impact, enhancing efficiency and driving growth.",
  },
];

export default WhyChooseUsSection;