import { H1, H2, P , PS, PXS, H3, H4 } from "@/components/text";


export function Experiences({ onExperienceSelect }) {
  return (           
    <div className="bg-transparent">    
      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-0 lg:pt-12 pt-6 lg:pb-12 pb-12">
        <div className="grid grid-cols-1 gap-4 lg:grid-cols-6 lg:grid-rows-2">
          {/* Photo 1 - Left large image */}
          <div className="flex lg:col-span-2 lg:row-span-2">
            <div className="w-full overflow-hidden relative cursor-pointer group" onClick={() => onExperienceSelect('retreats')}>
              <img
                alt=""
                src="/images/activities/private.jpg"
                className="h-60 lg:h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
              />
              {/* Black overlay */}
              <div className="absolute inset-0 bg-black opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
              {/* Text overlay */}
              <div className="absolute inset-0 flex items-center justify-center">
                <H3 className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Private Retreats</H3>
              </div>
            </div>
          </div>
          {/* Photo 2 - Top middle */}
          <div className="flex lg:col-span-2">
            <div className="w-full overflow-hidden relative cursor-pointer group" onClick={() => onExperienceSelect('events')}>
              <img
                alt=""
                src="/images/activities/events.jpg"
                className="h-60 lg:h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
              />
              {/* Black overlay */}
              <div className="absolute inset-0 bg-black opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
              {/* Text overlay */}
              <div className="absolute inset-0 flex items-center justify-center">
                <H3  className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Events & Conferences</H3>
              </div>
            </div>
          </div>
          {/* Photo 4 - Right large image */}
          <div className="flex lg:col-span-2 lg:row-span-2">
            <div className="w-full overflow-hidden relative cursor-pointer group" onClick={() => onExperienceSelect('community')}>
              <img
                alt=""
                src="/images/activities/community.jpg"
                className="h-80 lg:h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
              />
              {/* Black overlay */}
              <div className="absolute inset-0 bg-black opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
              {/* Text overlay */}
              <div className="absolute inset-0 flex items-center justify-center">
                <H3 className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Community Building</H3>
              </div>
            </div>
          </div>
          {/* Photo 3 - Bottom middle */}
          <div className="flex lg:col-span-2">
            <div className="w-full overflow-hidden relative cursor-pointer group" onClick={() => onExperienceSelect('nomads')}>
              <img
                alt=""
                src="/images/activities/nomad.jpg"
                className="h-60 lg:h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
              />
              {/* Black overlay */}
              <div className="absolute inset-0 bg-black opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
              {/* Text overlay */}
              <div className="absolute inset-0 flex items-center justify-center">
                <H3 className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Digital Nomad Hub</H3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}