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

export default function GoalBased({ onExploreClick }: { onExploreClick: () => void }) {
  const handleExploreClick = (e: React.MouseEvent) => {
    e.preventDefault(); // Prevent default link navigation
    onExploreClick(); // Call the scroll function
  };

  return (
    <FadeInSection>
    <section className="bg-[#fff5f5] 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">
          Invest toward your goals.
        </h2>

        <p className="text-lg text-gray-600 font-work leading-relaxed max-w-md">
        <span className="font-bold">How our investment works:</span> <br />


        </p>

        <p className="text-lg text-gray-600 font-work leading-relaxed max-w-md">Create an account, select your investwment category, fund your account and get merged to a portfolio manager / trader. 

Have access to your trading account and watch your trading results live while your portfolio manager trades on your behalf.</p>

<p className="text-lg text-gray-600 font-work leading-relaxed max-w-md">35-65% profit added to your account after trading duration ends depending on your investment package. 

We have over 100 qualified traders handling accounts and over 20 customer care agents to attend to your questions and needs.</p>

        <button
                onClick={handleExploreClick}
                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 cursor-pointer"
              >
                Explore our goal-based plans →
              </button>
      </div>

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

  );
}