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

'use client'
import Image from "next/image";
import Link from "next/link";
import { useState, useEffect } 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."
    }
  ];

  // Auto-advance slides every 5 seconds
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length);
    }, 5000);

    return () => clearInterval(timer);
  }, [slides.length]);

  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>
      <div className="flex min-h-[350px]">
        {/* Left Side - Content */}
        <div className="w-full lg:w-3/4 bg-white">
          <div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4">
            {/* Brand/Title */}
            <div className="mb-4">
              <h2 className="text-3xl font-bold text-teal-700 mb-4">
                <span>Transforming</span>
                <span className="ml-2">Delays into Diagnoses</span>
              </h2>
              <div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
            </div>

            {/* Content Slider */}
            <div className="mb-4 max-w-3xl">
              <div className="text-gray-600 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
                {slides[currentSlide].content}
              </div>
            </div>

            {/* Navigation */}
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <button
                  onClick={prevSlide}
                  className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
                  style={{
                    borderColor: '#555555',
                    color: '#555555'
                  }}
                  onMouseEnter={(e) => {
                    e.target.style.borderColor = '#faae31';
                    e.target.style.backgroundColor = '#faae31';
                    e.target.style.color = '#2a6564';
                  }}
                  onMouseLeave={(e) => {
                    e.target.style.borderColor = '#555555';
                    e.target.style.backgroundColor = 'transparent';
                    e.target.style.color = '#555555';
                  }}
                  aria-label="Previous slide"
                >
                  <svg className="w-3 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-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
                  style={{
                    borderColor: '#555555',
                    color: '#555555'
                  }}
                  onMouseEnter={(e) => {
                    e.target.style.borderColor = '#faae31';
                    e.target.style.backgroundColor = '#faae31';
                    e.target.style.color = '#2a6564';
                  }}
                  onMouseLeave={(e) => {
                    e.target.style.borderColor = '#555555';
                    e.target.style.backgroundColor = 'transparent';
                    e.target.style.color = '#555555';
                  }}
                  aria-label="Next slide"
                >
                  <svg className="w-3 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-2 ml-4">
                  {slides.map((_, index) => (
                    <button
                      key={index}
                      onClick={() => goToSlide(index)}
                      className="transition-all duration-200 rounded-full"
                      style={{
                        width: index === currentSlide ? '24px' : '6px',
                        height: '6px',
                        backgroundColor: index === currentSlide ? '#faae31' : '#555555'
                      }}
                      onMouseEnter={(e) => {
                        if (index !== currentSlide) {
                          e.target.style.backgroundColor = '#2a6564';
                        }
                      }}
                      onMouseLeave={(e) => {
                        if (index !== currentSlide) {
                          e.target.style.backgroundColor = '#555555';
                        }
                      }}
                      aria-label={`Go to slide ${index + 1}`}
                    />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Right Side - Image */}
        <div className="hidden lg:block w-1/2 relative">
          <div className="absolute inset-0">
            <Image
              src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
              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 left-0 top-0 w-px h-full bg-slate-200"></div>
        </div>
      </div>
    </section>
  );
}