import Image from 'next/image'

export default function FeatureCards() {
  return (
    <section className="container mx-auto px-4 lg:px-8 space-y-5 py-5 md:py-10 lg:py-16">
      {/* Treasury Card - Full Width */}
      <div className="grid lg:grid-cols-2 bg-gradient-to-r from-[#FEF3EF] to-white rounded-3xl border-4 border-white shadow-[0_50px_100px_0_rgba(233,233,233,0.2)]">
        <div className="p-6 lg:p-12">
          <h3 className="font-semibold text-text-dark-200 text-2xl md:text-[2rem] mb-4">
          Start your investment journey With Us.
          </h3>
          <p className="text-text-soft-100 md:text-lg">
          Welcome to Euphoria 5, your trusted investment partner. We provide innovative investment solutions tailored to your financial goals. Our expert team leverages market insights to optimize returns while ensuring transparency and security. 
          </p>
        </div>
        <div className="relative p-6 lg:p-12 flex items-center justify-center">
          <Image
            src="https://ext.same-assets.com/2403320367/1846357261.webp"
            alt="Treasury Balance"
            width={400}
            height={300}
            className="w-full max-w-md"
          />
        </div>
      </div>

      {/* Employee Benefits and Expense & Report Cards - Side by Side */}
      <div className="flex flex-col lg:flex-row lg:gap-x-5 gap-y-5 lg:gap-y-0">
        {/* Employee Benefits Card */}
        <div className="border-4 rounded-3xl bg-gradient-to-b pt-6 px-6 lg:pt-12 lg:px-12 from-[hsl(27,40%,88%)] to-white border-transparent shadow-[0_50px_100px_0_rgba(204,183,160,0.2)] flex-1">
          <h3 className="font-semibold text-text-dark-200 text-2xl md:text-[2rem] mb-4">
            Euphoria 5 Benefits
          </h3>
          <p className="text-text-soft-100 md:text-lg w-full xl:w-11/12 mb-8">
          With Euphoria 5, investing is simplified and accessible. Our platform offers real-time tracking, seamless transactions, and personalized support. Whether you're a seasoned investor or just starting out, we're committed to helping you achieve financial success. Join the Euphoria 5 community today and experience the future of investing.
          </p>
          <div className="relative">
            <Image
              src="https://ext.same-assets.com/2403320367/3598081199.webp"
              alt="Employee Benefits"
              width={350}
              height={250}
              className="w-full"
            />
          </div>
        </div>

        {/* Expense and Report Card */}
        <div className="border-4 rounded-3xl bg-gradient-to-b from-[hsl(27,40%,88%)] to-white border-[hsl(27,40%,94%)] shadow-[0_50px_100px_0_rgba(204,183,160,0.2)] flex-1">
          <div className="pt-6 px-6 lg:pt-12 lg:px-12">
            <h3 className="font-semibold text-text-dark-200 text-2xl md:text-[2rem] mb-4">
              Expense and Report
            </h3>
            <p className="text-text-soft-100 md:text-lg mb-8">
              Euphoria 5 simplifies the tedious task of financial management, allowing you to focus on what truly matters – growing your business
            </p>
            <div className="relative">
              <Image
                src="https://ext.same-assets.com/2403320367/2211882509.webp"
                alt="Expense and Report"
                width={300}
                height={200}
                className="w-full"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
