import Image from 'next/image';
import React from 'react'

const CoreValues = () => {
    const values = [
        {
          title: "People",
          description:
            "User-First Innovation: We engineer mobile-first, responsive digital experiences designed to engage audiences across every device. Our focus remains on high-performance SEO and conversion optimization to ensure maximum ROI for our partners.",
          img: "/images/core_value_1.svg",
        },
        {
          title: "Customers",
          description:
            "Global Collaboration: With a strategic presence in India and the USA, we bridge the gap between vision and execution. We provide 24/7 seamless support to our international clientele, delivering localized expertise with a global perspective.",
            img: "/images/core_value_2.svg",
        },
        {
          title: "Quality",
          description:
            "Uncompromising Excellence: At Fruxinfo, quality is our benchmark. From clean, scalable code to rigorous security testing, we deliver premium digital solutions that empower brands to lead their industries with confidence.",
            img: "/images/core_value_3.svg",
        },
      ];
    
      return (
        <section className="py-16 bg-white">
            <div className='max-w-[1200px] mx-auto overflow-hidden px-3'>
                <div className="">
                    <h2 className="text-[30px] md:text-[50px] text-[#3A3A3A] font-bold text-center md:text-start Manrope">
                    Core <span className="text-orange-500">Values</span>
                    </h2>
                </div>
            
                <div className="mt-8 mb-8 flex flex-col md:flex-row justify-center gap-6">
                    {values.map((value, index) => (
                    <div key={index} className="bg-gradient-to-b from-[rgba(231,112,37,0.3)] to-[rgba(175,235,255,0.3)] p-6 rounded-xl shadow-md w-full md:w-1/3 transition-all duration-300 hover:scale-105">
                        <Image sizes="80px" src={value.img} width={1200} height={600} className='w-[70px]' alt={`${value.title} — Fruxinfo core value`} />
                        <h3 className="text-lg font-semibold mt-3">{value.title}</h3>
                        <p className="text-gray-600 mt-2 text-sm text-justify">{value.description}</p>
                    </div>
                    ))}
                </div>
            </div>
        </section>
  )
}

export default CoreValues
