'use client'
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";

export default function OncologyIntro() {
  const [currentSlide, setCurrentSlide] = useState(0);

  const slides = [
    {
      content: "Cancer is not a single disease—it's a highly complex and dynamic group of disorders, often driven by a multitude of genomic alterations. Despite advancements in treatment, many patients still face uncertainty due to incomplete or delayed molecular diagnoses."
    },
    {
      content: "At Operify Health, we recognize that behind every tumor is a unique genetic story waiting to be told. Our precision oncology solutions utilize high-throughput Next Generation Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians with actionable insights that inform targeted therapies, immunotherapy decisions, and hereditary cancer risk assessments."
    },
    {
      content: "This genomic-driven approach is especially critical in advanced and treatment-resistant cancers, where conventional methods often fall short. Studies have shown that integrating broad-panel NGS into cancer care can impact clinical decision-making in up to 30% of cases, leading to more personalized and effective treatment strategies."
    },
    {
      content: "By combining cutting-edge sequencing, advanced bioinformatics, and curated clinical evidence, Operify Health empowers oncologists to move from uncertainty to precision—ensuring every cancer patient's care is as individualized as their diagnosis."
    }
  ];

  const goToSlide = (index) => {
    setCurrentSlide(index);
  };

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % slides.length);
  };

  const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
  };

  return (
    <section className="bg-teal-700">
      <div className="flex flex-col lg:flex-row min-h-[300px] sm:min-h-[350px] lg:min-h-[350px]">
        {/* Image - Top on mobile, Left on desktop */}
        <div className="w-full lg:w-3/4 h-48 sm:h-64 lg:h-auto relative order-1 lg:order-1">
          <div className="absolute inset-0">
            <Image
              src="/images/health/oncology_section.jpg"
              alt="Cancer research and oncology molecular analysis"
              fill
              className="object-cover grayscale-[20%]"
              priority
            />
            <div className="absolute inset-0 bg-slate-900/10"></div>
          </div>
          
          {/* Subtle border */}
          <div className="absolute bottom-0 left-0 w-full h-px lg:right-0 lg:top-0 lg:w-px lg:h-full bg-teal-600"></div>
        </div>

        {/* Content - Bottom on mobile, Right on desktop */}
        <div className="w-full lg:w-3/4 order-2 lg:order-2">
          <div className="h-full flex flex-col justify-center px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
            {/* Brand/Title */}
            <div className="mb-4 sm:mb-6">
              <h2 className="text-2xl sm:text-3xl lg:text-3xl font-bold text-white mb-3 sm:mb-4">
                <span className="block sm:inline">Turning</span>
                <span className="block sm:inline sm:ml-2">Complexity into Clarity</span>
              </h2>
              <div className="w-8 sm:w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
            </div>

            {/* Content Slider */}
            <div className="mb-4 sm:mb-6 max-w-3xl">
              <div className="text-gray-200 leading-relaxed text-sm sm:text-base mb-4 sm:mb-6 text-left sm:text-justify font-light transition-opacity duration-300 min-h-[120px] sm:min-h-[140px] lg:min-h-[160px] flex items-start">
                <span>{slides[currentSlide].content}</span>
              </div>
            </div>

            {/* Navigation */}
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2 sm:space-x-3">
                <button
                  onClick={prevSlide}
                  className="w-7 h-7 sm:w-8 sm:h-8 flex items-center justify-center border border-white text-white rounded-full transition-all duration-200 hover:scale-105 active:scale-95 hover:border-yellow-400 hover:bg-yellow-400 hover:text-teal-700"
                  aria-label="Previous slide"
                >
                  <svg className="w-2.5 h-2.5 sm:w-3 sm:h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
                  </svg>
                </button>

                <button
                  onClick={nextSlide}
                  className="w-7 h-7 sm:w-8 sm:h-8 flex items-center justify-center border border-white text-white rounded-full transition-all duration-200 hover:scale-105 active:scale-95 hover:border-yellow-400 hover:bg-yellow-400 hover:text-teal-700"
                  aria-label="Next slide"
                >
                  <svg className="w-2.5 h-2.5 sm:w-3 sm:h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5l7 7-7 7" />
                  </svg>
                </button>

                {/* Progress Indicators */}
                <div className="flex space-x-1.5 sm:space-x-2 ml-3 sm:ml-4">
                  {slides.map((_, index) => (
                    <button
                      key={index}
                      onClick={() => goToSlide(index)}
                      className={`transition-all duration-200 rounded-full hover:scale-110 active:scale-95 h-1.5 ${
                        index === currentSlide 
                          ? 'w-5 sm:w-6 bg-yellow-400' 
                          : 'w-1.5 bg-white hover:bg-gray-100'
                      }`}
                      aria-label={`Go to slide ${index + 1}`}
                    />
                  ))}
                </div>
              </div>

              {/* Slide counter for mobile */}
              <div className="block sm:hidden">
                <span className="text-xs text-gray-300">
                  {currentSlide + 1} / {slides.length}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}