Untitled

import React, { useEffect, useRef, useState } from 'react'

export default function ArtCultureSection() {
  const [isIntersecting, setIsIntersecting] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsIntersecting(entry.isIntersecting)
      },
      { threshold: 0.3 }
    )

    if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

    return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

  return (
    <section 
      ref={sectionRef} 
      className="flex flex-col md:flex-row items-center justify-center min-h-[100vh] p-4 overflow-hidden"
    >
      <div className="w-full md:w-1/2 h-64 md:h-auto relative mb-4 md:mb-0">
        <img 
          src="/placeholder.svg?height=400&width=600&text=Art"
          alt="Art gallery showcasing various artistic expressions"
          className="w-full h-full object-cover rounded-lg shadow-lg"
        />
        <div 
          className={`absolute inset-0 bg-black transition-all duration-1000 ease-in-out ${
            isIntersecting ? 'opacity-0' : 'opacity-70'
          }`}
        ></div>
        <div 
          className={`absolute inset-0 border-4 border-white transition-all duration-1000 ease-in-out ${
            isIntersecting ? 'scale-105 opacity-100' : 'scale-100 opacity-0'
          }`}
        >
          <div className="absolute inset-0 animate-pulse-slow bg-gradient-to-r from-purple-500 to-pink-500 opacity-50"></div>
        </div>
      </div>
      <div className="w-full md:w-1/2 p-4 md:p-8 relative">
        <div 
          className={`absolute inset-0 bg-black transition-all duration-1000 ease-in-out ${
            isIntersecting ? 'opacity-0' : 'opacity-70'
          }`}
        ></div>
        <div className={`relative z-10 transition-all duration-500 ${
          isIntersecting ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'
        }`}>
          <h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-4">Art & Culture</h2>
          <p className="text-base sm:text-lg">Dive into the world of art and culture. Experience creativity in its purest form through various artistic expressions.</p>
        </div>
      </div>
    </section>
  )
}