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

export default function AboutHealth() {
  return (
    <div className="mx-auto px-10 pt-12">
      {/* Title */}
      <h1 className="text-4xl font-bold text-gray-700 text-left pb-2 mb-4">About Health</h1>

      {/* Intro Section */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center mb-12">
        {/* Left Content */}
        <div>
          <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
            At Operify Health, we believe every patient deserves answers that are not only
            accurate — but actionable. By harnessing the power of Next Generation Sequencing
            (NGS), we transform patient samples into rich genomic insights that enable
            clinicians and oncologists to make informed, personalized decisions. From rare
            genetic disorders to complex oncological cases, our solutions help uncover what
            traditional diagnostics often miss.
          </p>
          <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
            Our strength lies in our multidisciplinary team of researchers, bioinformaticians,
            and data scientists who use custom-built algorithms and cutting-edge analytics to
            interpret genetic data with unmatched depth. Backed by curated scientific evidence
            and real-world clinical findings, we deliver recommendations that are current,
            relevant, and patient-focused.
          </p>
          <p className="text-gray-600 leading-relaxed text-base text-justify">
            With every genome we decode, we move closer to truly personalized medicine —
            bridging data and care, science and life.
          </p>
        </div>

        {/* Right Image */}
        <div className="flex justify-center">
          <Image
            src="images/health/dna-placeholder.jpg" // Replace with your actual image path in /public
            alt="DNA Strand"
            width={500}
            height={500}
            className="rounded-lg object-cover"
          />
        </div>
      </div>
    </div>
  );
}