import { P, H3, H4, PXS, PXXS } from '@/components/text'
import {
  Tab,
  TabGroup,
  TabList,
  TabPanel,
  TabPanels,
} from '@headlessui/react'
import { H2, PS } from '@/components/text'

const product = {
  name: 'Events & Conferences',
  images: [
    {
      id: 1,
      name: 'Event Space 1',
      src: '/images/events1.jpg',
      alt: 'Professional event space with Nile backdrop',
    },
    {
      id: 2,
      name: 'Event Space 2',
      src: '/images/events2.jpg',
      alt: 'Conference venue with modern amenities',
    },
    {
      id: 3,
      name: 'Event Space 3',
      src: '/images/events3.jpg',
      alt: 'Meeting space on dahabiya',
    },
    {
      id: 4,
      name: 'Event Space 4',
      src: '/images/events4.jpg',
      alt: 'Outdoor event setting by the Nile',
    },
  ],
  description: "VEDA's facilities are suited for hosting events, a unique venue that combines professional functionality with the tranquility of the Nile. An innovative setting that stands apart from traditional conference venues, promising an impactful event.",
  details: [
    {
      name: 'Features',
      items: [
        'Four Air-Conditioned Meeting Spaces equipped with modern amenities to host up to 50/100 participants, perfect for workshops, seminars, and more.',
        'From indoor workshops to outdoor receptions and gala dinners, the settings are as versatile as the events themselves.',
        'Comprehensive Services: This includes catering, technical equipment, and event planning assistance to ensure everything runs smoothly.',
        'Essential for modern retreats and conferences, we offer reliable internet and state-of-the-art meeting equipment.',
        'Flexible Event Locations Across the Nile: Offering the freedom to choose unique meeting locations for an unparalleled experience.',
      ],
    },
  ],
}

export function Events() {
  return (
    <div className="lg:pb-24 pb-12">
      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-12 lg:px-0">
        <div className="mx-auto max-w-2xl lg:max-w-none">
          {/* Product */}
          <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
            {/* Image gallery */}
            <TabGroup className="flex flex-col-reverse">
              {/* Image selector */}
              <div className="mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none">
                <TabList className="grid grid-cols-4 gap-6">
                  {product.images.map((image) => (
                    <Tab
                      key={image.id}
                      className="group relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-transparent text-sm font-medium text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-indigo-500/50 focus:ring-offset-4 focus:outline-hidden"
                    >
                      <span className="sr-only">{image.name}</span>
                      <span className="absolute inset-0 overflow-hidden ">
                        <img alt="" src={image.src} className="size-full object-cover" />
                      </span>
                      <span
                        aria-hidden="true"
                        className="pointer-events-none absolute inset-0 ring-1 ring-transparent ring-offset-2 group-data-selected:ring-indigo-500"
                      />
                    </Tab>
                  ))}
                </TabList>
              </div>

              <TabPanels>
                {product.images.map((image) => (
                  <TabPanel key={image.id}>
                    <img alt={image.alt} src={image.src} className="aspect-square w-full object-cover" />
                  </TabPanel>
                ))}
              </TabPanels>
            </TabGroup>

            {/* Product info */}
            <div className="mt-6 px-6 sm:mt-16 sm:px-0 lg:mt-0">
              <H2>{product.name}</H2>

              <div className="mt-2">

                <div className="space-y-2 text-base text-gray-700">
                  <PS>{product.description}</PS>
                </div>
              </div>

              <section aria-labelledby="details-heading" className="lg:pt-8 pt-6">

                <div className="lg:space-y-8 space-y-4 border-t border-gray-300 lg:pt-8 pt-6">
                  {product.details.map((detail) => (
                    <div key={detail.name}>
                      <H3 className="font-medium text-gray-900 mb-4">
                        {detail.name}
                      </H3>
                      <ul
                        role="list"
                        className="list-disc space-y-2 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"
                      >
                        {detail.items.map((item) => (
                          <li key={item} className="pl-2 font-light">
                            {item}
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              </section>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}