operify/app/health/rare-disorders/components/RareIntro.jsx

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

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

  const slides = [
    {
      content: "There are over 7,000 identified rare diseases, many of which begin in childhood—and nearly 80% have a genetic cause. Yet, the average time to diagnose a rare disorder is still 4.8 years, with some cases taking up to 20 years."
    },
    {
      content: "At Operify Health, we leverage advanced Next Generation Sequencing (NGS) and proprietary bioinformatics to deliver rapid, reliable insights—helping reduce the diagnostic journey from years to days."
    }
  ];

  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/rare.png"
              alt="DNA sequencing and genetic analysis in modern laboratory"
              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">Transforming</span>
                <span className="block sm:inline sm:ml-2">Delays into Diagnoses</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-[80px] sm:min-h-[90px] lg:min-h-[100px] 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 rounded-full transition-all duration-200 hover:scale-105 active:scale-95"
                  style={{
                    borderColor: '#ffffff',
                    color: '#ffffff'
                  }}
                  onMouseEnter={(e) => {
                    e.target.style.borderColor = '#faae31';
                    e.target.style.backgroundColor = '#faae31';
                    e.target.style.color = '#0f766e';
                  }}
                  onMouseLeave={(e) => {
                    e.target.style.borderColor = '#ffffff';
                    e.target.style.backgroundColor = 'transparent';
                    e.target.style.color = '#ffffff';
                  }}
                  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 rounded-full transition-all duration-200 hover:scale-105 active:scale-95"
                  style={{
                    borderColor: '#ffffff',
                    color: '#ffffff'
                  }}
                  onMouseEnter={(e) => {
                    e.target.style.borderColor = '#faae31';
                    e.target.style.backgroundColor = '#faae31';
                    e.target.style.color = '#0f766e';
                  }}
                  onMouseLeave={(e) => {
                    e.target.style.borderColor = '#ffffff';
                    e.target.style.backgroundColor = 'transparent';
                    e.target.style.color = '#ffffff';
                  }}
                  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>
  );
}