// components/ClinicalAreas.js
import Link from "next/link";
import Image from "next/image";

export default function ClinicalAreas() {
  return (
    <div className="mx-auto px-10 py-4">
      {/* Heading */}
      <h2 className="text-3xl font-bold text-teal-700 mb-4">
        Precise Solutions for Clinical Areas
      </h2>

      {/* Subtext */}
      <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
        Empowering you with precise, tailored approaches to diagnostics and care — 
        addressing the unique needs of each clinical area to improve patient outcomes.
      </p>

      {/* Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
        {/* Rare Disorders */}
        <Link href="/health/rare-disorders">
          <div className="rounded-2xl p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
            <div className="flex items-start gap-4">
              {/* Icon */}
              <div className="flex-shrink-0 mt-1 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
                <Image
                  src="/images/icons/disorder.png"
                  alt="Rare Disorders"
                  width={40}
                  height={40}
                  className="object-contain"
                />
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-teal-700 mb-2">Rare Disorders</h3>
                <p className="text-gray-500 text-sm leading-relaxed">
                  Advancing diagnostics and treatments for rare genetic conditions.
                </p>
              </div>
            </div>
          </div>
        </Link>

        {/* Oncology */}
        <Link href="/health/oncology">
          <div className="rounded-2xl p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
            <div className="flex items-start gap-4">
              {/* Icon */}
              <div className="flex-shrink-0 mt-1 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
                <Image
                  src="/images/icons/oncology.png"
                  alt="Oncology"
                  width={40}
                  height={40}
                  className="object-contain"
                />
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-teal-700 mb-2">Oncology</h3>
                <p className="text-gray-500 text-sm leading-relaxed">
                  Revolutionizing cancer care with targeted therapies and early detection.
                </p>
              </div>
            </div>
          </div>
        </Link>
      </div>
    </div>
  );
}