"use client";

export default function SolutionsOffer() {
  const solutions = [
    {
      name: "Exome",
      desc: "Whole Exome Sequencing for uncovering the genetic basis of rare diseases.",
      path: "/health/rare-disorders/exome"
    },
    {
      name: "ExomeMito",
      desc: "Exome + Mitochondrial Genome Sequencing for a higher diagnostic yield.",
      path: "/health/rare-disorders/exomemito"
    }
  ];

  const handleCardClick = (path) => {
    // Using Next.js router for navigation
    window.location.href = path;
    
    // Alternative: If you want to use Next.js useRouter hook:
    // import { useRouter } from 'next/navigation';
    // const router = useRouter();
    // router.push(path);
  };

  return (
    <div className="mx-auto px-8 py-6">
      <h2 className="text-3xl font-bold text-teal-700 mb-4">Our Rare Disease Solutions Offer</h2>
      
      <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
        Comprehensive genomic sequencing solutions designed to unlock genetic insights 
        and accelerate diagnosis for rare disease patients and their families.
      </p>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
        {solutions.map((sol, idx) => (
          <div
            key={idx}
            onClick={() => handleCardClick(sol.path)}
            className="rounded-xl p-4 hover:shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer"
            style={{backgroundColor: '#f2fcfc'}}
          >
            <div className="flex items-start">
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-gray-900 mb-2 hover:text-teal-700 transition-colors">
                  {sol.name}
                </h3>
                <p className="text-gray-500 text-sm leading-relaxed mb-3">{sol.desc}</p>
                <div className="flex items-center text-teal-600 text-sm font-medium">
                  Learn more 
                  <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                  </svg>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}