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

const StocksSection = () => {
  return (
    <FadeInSection>
    <section className="bg-[#D9FDFF] py-20 md:py-28 rounded-3xl mx-4 md:mx-8 mt-12">
  <div className="max-w-7xl mx-auto px-6 md:px-10">
    <div className="grid lg:grid-cols-2 gap-16 items-center">
      {/* Left Content */}
      <div className="space-y-10">
        <h2 className="text-4xl md:text-5xl font-bold text-gray-900 leading-tight font-tomato">
          We bring the world's best companies to you.
        </h2>

        <p className="text-lg text-gray-600 font-work max-w-md leading-relaxed">
          The Euphoria 5 stock portfolio is a selection of stocks of the world’s most profitable companies, curated by experts to deliver great long term returns.
        </p>

        <Link
          href="/stocks"
          className="inline-block bg-white border border-gray-200 text-gray-800 px-6 py-3 rounded-full shadow-sm hover:shadow-md transition-all font-work text-base font-medium"
        >
          Create a stock plan now →
        </Link>
      </div>

      {/* Right Content - Image */}
      <div className="flex justify-center lg:justify-end">
        <img
          src="https://ext.same-assets.com/3278459369/3082470713.webp"
          alt="Stock Portfolio Illustration"
          className="w-56 md:w-72 lg:w-80 h-auto"
        />
      </div>
    </div>
  </div>
</section>
</FadeInSection>

  );
};

const RealEstateSection = () => {
  return (
    <FadeInSection>
    <section className="bg-[#F7F3FF] py-20 md:py-28 rounded-3xl mx-4 md:mx-8 mt-12">
  <div className="max-w-7xl mx-auto px-6 md:px-10">
    <div className="grid lg:grid-cols-2 gap-16 items-center">
      {/* Left Content - Image */}
      <div className="flex justify-center lg:justify-start order-2 lg:order-1">
        <img
          src="https://ext.same-assets.com/3278459369/946931374.webp"
          alt="Real Estate Investment"
          className="w-64 md:w-80 lg:w-96 h-auto"
        />
      </div>

      {/* Right Content */}
      <div className="space-y-10 order-1 lg:order-2">
        <h2 className="text-4xl md:text-5xl font-bold text-gray-900 leading-tight font-tomato">
          We offer diverse investment options.
        </h2>

        <p className="text-lg text-gray-600 font-work leading-relaxed max-w-md">
          Our real estate offering is a portfolio of rental properties in the US that provide steady monthly returns, price appreciation and capital gains. Your investments are more stable and protect you from market declines.
        </p>

        <Link
          href="/real-estate"
          className="inline-block bg-white border border-gray-200 text-gray-800 px-6 py-3 rounded-full shadow-sm hover:shadow-md transition-all font-work text-base font-medium"
        >
          Create a real estate plan now →
        </Link>
      </div>
    </div>
  </div>
</section>
</FadeInSection>

  );
};

const FixedIncomeSection = () => {
  return (
    <FadeInSection>
    <section className="bg-[#f4f7f9] py-20 md:py-28 rounded-3xl mx-4 md:mx-8 mt-12">
  <div className="max-w-7xl mx-auto px-6 md:px-10">
    <div className="grid lg:grid-cols-2 gap-16 items-center">
      {/* Left Content */}
      <div className="space-y-10">
        <h2 className="text-4xl md:text-5xl font-bold text-gray-900 leading-tight font-tomato">
          There's something for everyone.
        </h2>

        <p className="text-lg text-gray-600 font-work leading-relaxed max-w-md">
          Looking for stable and safe returns? Our fixed-income portfolio delivers consistent returns annually and is perfect for low-risk investors.
        </p>

        <Link
          href="/fixed-income"
          className="inline-block bg-white border border-gray-200 text-gray-800 px-6 py-3 rounded-full shadow-sm hover:shadow-md transition-all font-work text-base font-medium"
        >
          Create a fixed-income plan now →
        </Link>
      </div>

      {/* Right Content - Image */}
      <div className="flex justify-center lg:justify-end">
        <img
          src="https://ext.same-assets.com/3278459369/576307202.webp"
          alt="Fixed Income Investment"
          className="w-64 md:w-80 lg:w-96 h-auto"
        />
      </div>
    </div>
  </div>
</section>
</FadeInSection>

  );
};

export default function InvestmentSections() {
  return (
    <>
      <StocksSection />
      <RealEstateSection />
      <FixedIncomeSection />
    </>
  );
}
