import { H1, H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'
import { Button } from './Button'


export  function Journey() {
  return (
    <div className="relative bg-transparent my-12">
      <div className="relative mx-auto max-w-8xl lg:grid lg:grid-cols-2">
        {/* Left column with journey1.jpg */}
        <div className="relative h-80 lg:h-full">
          <img
            alt="Journey Image 1"
            src="/images/journey1.jpg"
            className="size-full object-cover"
          />
          {/* Black overlay */}
          <div className="absolute inset-0 bg-black opacity-50 hover:opacity-20"></div>
          {/* paragraphs */}
          <div className="absolute inset-0 flex items-center justify-center mx-auto max-w-lg flex-col text-center px-10">
            <H2 className=" text-white text-3xl font-semibold">Experiences</H2>
            <PS className=" mt-4 text-white text-center ">From intimate community gatherings to professional retreats, VEDA offers transformative programs on the Nile.</PS>
            <Button className="mt-6" href="/experiences" variant="outline" color="white">Learn More</Button>
          </div>
        </div>
        
        {/* Right column with journey2.jpg */}
        <div className="relative h-80 lg:h-full">
          <img
            alt="Journey Image 2"
            src="/images/journey2.jpg"
            className="size-full object-cover"
          />
          {/* Black overlay */}
          <div className="absolute inset-0 bg-black opacity-50 hover:opacity-20"></div>
          {/* Learn More button */}
          <div className="absolute inset-0 flex items-center justify-center mx-auto max-w-lg flex-col text-center px-10">
            <H2 className=" text-white text-3xl font-semibold">Activities</H2>
            <PS className=" mt-4 text-white text-center ">Explore a diverse range of activities designed to elevate your mind, body, and soul.</PS>
            <Button className="mt-6" href="/experiences" variant="outline" color="white">Learn More</Button>
          </div>
        </div>
      </div>
    </div>
  )
}