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

// components/FeaturedProductSection.tsx
import React from "react";
import Image from "next/image";
import Button from "@/components/ui/Button";
import { FiCheckCircle, FiArrowRight } from "react-icons/fi"; // Example icons

type FeaturePoint = {
  text: string;
};

type FeaturedProductProps = {
  eyebrow?: string;
  title: string;
  productName: string; // e.g., "OBSE"
  description: string;
  features: FeaturePoint[];
  buttonText: string;
  buttonHref: string;
  imageUrl: string; // Path to product graphic/mockup
  imageAlt: string;
};

const FeaturedProductSection: React.FC<FeaturedProductProps> = ({
  eyebrow,
  title,
  productName,
  description,
  features,
  buttonText,
  buttonHref,
  imageUrl,
  imageAlt,
}) => {
  return (
    // Use secondary background for visual separation
    <section className="py-20 md:py-28 bg-secondary overflow-hidden">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col md:flex-row items-center gap-12 md:gap-16 lg:gap-20">
          {/* Text Content Area (Takes up half on desktop) */}
          <div className="md:w-1/2 text-center md:text-left">
            {eyebrow && (
              <p className="text-sm font-semibold uppercase tracking-wider text-primary mb-3">
                {eyebrow}
              </p>
            )}
            {/* Main title uses foreground color */}
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-foreground">
              {title} <span className="text-primary">{productName}</span>
            </h2>
            {/* Description uses muted foreground */}
            <p className="text-lg text-muted-foreground mb-6">{description}</p>
            {/* Feature List */}
            <ul className="space-y-3 mb-8 text-left">
              {" "}
              {/* Ensure list is left-aligned */}
              {features.map((feature, index) => (
                <li key={index} className="flex items-start">
                  <FiCheckCircle className="w-5 h-5 text-primary mr-3 mt-1 flex-shrink-0" />
                  {/* Feature text uses muted foreground */}
                  <span className="text-muted-foreground">{feature.text}</span>
                </li>
              ))}
            </ul>
            {/* Call to Action Button */}
            <Button
              href={buttonHref}
              variant="primary"
              size="lg"
              className="group"
            >
              {buttonText}
              <FiArrowRight className="ml-2 transition-transform duration-300 group-hover:translate-x-1" />
            </Button>
          </div>

          {/* Image Area (Takes up half on desktop) */}
          <div className="md:w-1/2 relative flex justify-center">
            {/* Add perspective/shadow for visual lift */}
            <div className="relative w-full max-w-md lg:max-w-lg xl:max-w-xl rounded-lg shadow-2xl overflow-hidden transform transition-transform duration-500 hover:scale-105">
              {/* Apply subtle dark overlay on image if needed for contrast */}
              {/* <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent dark:from-black/20 z-10"></div> */}
              <Image
                src={imageUrl}
                alt={imageAlt}
                width={600} // Adjust intrinsic size
                height={450} // Adjust intrinsic size
                layout="responsive" // Makes image scale
                objectFit="cover" // Or 'contain' depending on image
                className="relative z-0"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// Example default data for OBSE
export const defaultObseFeatures: FeaturePoint[] = [
  { text: "Automate data extraction & analysis from bank statements." },
  { text: "Reduce manual errors and increase processing speed." },
  { text: "Gain deep insights into financial health and trends." },
  { text: "Enhance fraud detection capabilities." },
  { text: "Seamless integration with existing financial systems." },
];

export default FeaturedProductSection;