import Link from 'next/link';
import FadeInSection from './FadeInSection';

export default function EasyDiversified() {
  return (
    <FadeInSection>
    <section className="bg-white py-12 md:py-20">
  <div className="max-w-7xl mx-auto px-4">
    <div className="bg-gray-50 rounded-3xl shadow-md px-8 md:px-12 py-12 md:py-20">
      <div className="grid lg:grid-cols-2 gap-12 items-center">

        {/* Left Content */}
        <div className="space-y-8">
          <div className="space-y-6">
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-tomato font-bold text-rise-dark leading-tight">
            Explore Emerald 
            <br className="hidden md:block" />
            Dubai Island  <span className="text-rise-teal italic">today.</span>
            </h2>
            <p className="text-lg text-gray-600 font-work leading-relaxed max-w-md">
            Start your real estate investment with Luzora with an initial  investment of 5,000$ off plan project and earn 20% ROI monthly with an option to buy back your investment at the end of 12 months.
            </p>
          </div>

          <Link
            href="/register"
            className="inline-block bg-rise-teal text-white px-8 py-4 rounded-full hover:bg-foreground transition-colors font-work text-base font-medium"
          >
            Start investing →
          </Link>
        </div>

        {/* Right Content - Image */}
        <div className="relative">
          {/* Background decorations */}
          <div className="absolute inset-0 -z-10">
            <div className="absolute top-12 right-12 w-32 h-32 bg-gradient-to-br from-teal-100 to-teal-200 rounded-full opacity-40" />
            <div className="absolute bottom-12 left-12 w-24 h-24 bg-gradient-to-tr from-orange-100 to-orange-200 rounded-full opacity-40" />
          </div>

          {/* Main Image */}
          <div className="relative">
            <img
              src="/real-estate.png"
              alt="Investment Interface"
              className="w-full max-w-md mx-auto lg:max-w-none"
            />
            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
              <img
                src="/real-estate.png"
                alt="Animation"
                className="w-16 h-16 opacity-80"
              />
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>
</FadeInSection>

  );
}
