operify/app/health/Components/HealthIntro.jsx

// components/AboutHealth.js
'use client'
// components/AboutHealth.js
import Image from "next/image";
import Link from "next/link";
import { useState, useEffect } from "react";

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

  const slides = [
    {
      content: "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."
    },
    {
      content: "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."
    },
    {
      content: "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."
    }
  ];

  // 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 className="bg-teal-700">
      <div className="flex min-h-[350px]">
        {/* Left Side - Image */}
        <div className="hidden lg:block w-1/2 relative">
          <div className="absolute inset-0">
            <Image
              src="https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
              alt="Healthcare professional working 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 right-0 top-0 w-px h-full bg-teal-600"></div>
        </div>

        {/* Right Side - Content */}
        <div className="w-full lg:w-3/4">
          <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-white mb-4">
                <span>Operify</span>
                <span className="ml-2">Health</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-200 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: '#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-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: '#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-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' : '#ffffff'
                      }}
                      onMouseEnter={(e) => {
                        if (index !== currentSlide) {
                          e.target.style.backgroundColor = '#f1f5f9';
                        }
                      }}
                      onMouseLeave={(e) => {
                        if (index !== currentSlide) {
                          e.target.style.backgroundColor = '#ffffff';
                        }
                      }}
                      aria-label={`Go to slide ${index + 1}`}
                    />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}