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

const PlansCard = React.forwardRef<HTMLDivElement>((props, ref) => {
  return (
    <section className="container mx-auto px-4 lg:px-8 space-y-5 py-5 md:py-10 lg:py-16">

  {/* Investment Intro Card */}
  <div className="grid lg:grid-cols-2 bg-gradient-to-r from-[#EDF4FF] 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">
      Euphoria 5 - Invest Smart. Earn More.
      </h3>
      <p className="text-text-soft-100 md:text-lg">

        Trade stocks/forex <br />

        Buy shares in US companies <br />

        Build your ETF Portfolio <br />

        Build your Real Estate portfolio <br />

        (Explore Emerald Dubai Now) <br />  

        Start investing now with as low as 20$
      </p>
    </div>
    <div className="relative p-6 lg:p-12 flex items-center justify-center">
      <Image
        src="/Investing-bro.svg"
        alt="Investment Plan"
        width={400}
        height={300}
        className="w-full max-w-md"
      />
    </div>
  </div>

  {/* Plan Cards */}
  <div ref={ref} className="grid lg:grid-cols-3 gap-5">
    {/* XI Plan */}
    <div className="border-4 rounded-3xl bg-gradient-to-b pt-6 px-6 lg:pt-12 lg:px-12 from-[#F4F2FF] to-white border-transparent shadow-[0_50px_100px_0_rgba(144,128,255,0.15)]">
      <h3 className="font-semibold text-text-dark-200 text-2xl md:text-[2rem] mb-4">Plan XI</h3>
      <ul className="text-text-soft-100 md:text-lg space-y-2 mb-8">
        <li>💎 Ruby - $20</li>
        <li>💠 Silver - $50</li>
        <li>🏅 Gold - $200</li>
        <li>👑 Diamond - $500</li>
      </ul>
      <Image
        src="/Investing-amico.svg"
        alt="Plan XI"
        width={350}
        height={250}
        className="w-full"
      />
    </div>

    {/* XII Plan */}
    <div className="border-4 rounded-3xl bg-gradient-to-b pt-6 px-6 lg:pt-12 lg:px-12 from-[#FFF7ED] to-white border-transparent shadow-[0_50px_100px_0_rgba(255,186,119,0.15)]">
      <h3 className="font-semibold text-text-dark-200 text-2xl md:text-[2rem] mb-4">Plan XII</h3>
      <ul className="text-text-soft-100 md:text-lg space-y-2 mb-8">
        <li>💎 Ruby - $1,000</li>
        <li>💠 Silver - $2,000</li>
        <li>🏅 Gold - $5,000</li>
        <li>👑 Diamond - $10,000</li>
      </ul>
      <Image
        src="/Investing-pana.svg"
        alt="Plan XII"
        width={350}
        height={250}
        className="w-full"
      />
    </div>

    {/* XIII Plan */}
    <div className="border-4 rounded-3xl bg-gradient-to-b pt-6 px-6 lg:pt-12 lg:px-12 from-[#E6FAF4] to-white border-transparent shadow-[0_50px_100px_0_rgba(80,200,170,0.15)]">
      <h3 className="font-semibold text-text-dark-200 text-2xl md:text-[2rem] mb-4">Plan XIII</h3>
      <ul className="text-text-soft-100 md:text-lg space-y-2 mb-8">
        <li>💎 Ruby - $20,000</li>
        <li>💠 Silver - $50,000</li>
        <li>🏅 Gold - $100,000</li>
        <li>👑 Diamond - $200,000</li>
      </ul>
      <Image
        src="/Investing-rafiki.svg"
        alt="Plan XIII"
        width={350}
        height={250}
        className="w-full"
      />
    </div>
  </div>
</section>

  )
});

export default PlansCard
