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

  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}
            className="rounded-lg p-6 hover:shadow-sm transition-shadow 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">{sol.name}</h3>
                <p className="text-gray-500 text-sm leading-relaxed">{sol.desc}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}