www_veda_2025/src/components/Veda3.jsx

'use client'

import { H3, PXXS } from '@/components/text'
import { Button } from '@/components/Button'

import { useState } from 'react'
import {
  Tab,
  TabGroup,
  TabList,
  TabPanel,
  TabPanels,
} from '@headlessui/react'
import { H2, PS } from '@/components/text'

const product = {
  name: 'VEDA III',
  images: [
    {
      id: 1,
      name: 'Veda 3',
      src: '/images/dahabiyas/veda3/veda3_1.jpg',
      alt: 'Veda 3',
    },
    {
      id: 2,
      name: 'Veda 3',
      src: '/images/dahabiyas/veda3/veda3_2.jpg',
      alt: 'Veda 3',
    },
    {
      id: 3,
      name: 'Veda 3',
      src: '/images/dahabiyas/veda3/veda3_3.jpg',
      alt: 'Veda 3',
    },
    {
      id: 4,
      name: 'Veda 3',
      src: '/images/dahabiyas/veda3/veda3_4.jpg',
      alt: 'Veda 3',
    },
    {
      id: 5,
      name: 'Veda 3',
      src: '/images/dahabiyas/veda3/veda3_5.jpg',
      alt: 'Veda 3',
    },
    {
      id: 6,
      name: 'Veda 3',
      src: '/images/dahabiyas/veda3/veda3_6.jpg',
      alt: 'Veda 3',
    },
    {
      id: 7,
      name: 'Veda 3',
      src: '/images/dahabiyas/veda3/veda3_7.jpg',
      alt: 'Veda 3',
    },
    {
      id: 8,
      name: 'Veda 3',
      src: '/images/dahabiyas/veda3/veda3_8.jpg',
      alt: 'Veda 3',
    },
    {
      id: 9,
      name: 'Veda 3',
      src: '/images/dahabiyas/veda3/veda3_9.jpg',
      alt: 'Veda 3',
    },
    {
      id: 10,
      name: 'Veda 3',
      src: '/images/dahabiyas/veda3/veda3_10.jpg',
      alt: 'Veda 3',
    },
    {
      id: 11,
      name: 'Veda 3',
      src: '/images/dahabiyas/veda3/veda3_11.jpg',
      alt: 'Veda 3',
    },
        {
      id: 12,
      name: 'Veda 3',
      src: '/images/dahabiyas/veda3/veda3_12.jpg',
      alt: 'Veda 3',
    },
  ],
  colors: [
    { name: 'Washed Black', bgColor: 'bg-gray-700', selectedColor: 'ring-gray-700' },
    { name: 'White', bgColor: 'bg-white', selectedColor: 'ring-gray-400' },
    { name: 'Washed Gray', bgColor: 'bg-gray-500', selectedColor: 'ring-gray-500' },
  ],
  description: [
    'VEDA III is a cozy 18-meter dahabiya that offers a serene floating home experience, perfect for smaller groups seeking tranquility and comfort on the Nile.',
    'VEDA III accommodates up to 10 guests across 5 rooms. The accommodations include 2 rooms with double beds and 3 rooms with two single beds, providing flexible sleeping arrangements. Each room is equipped with a private bathroom for convenience and privacy.',
    'Guests can enjoy breathtaking views of the Nile from the cozy upper deck, designed for relaxation and enjoyment. The upper deck provides an intimate space to unwind and take in the rivers beauty.'
  ],
  details: [
    {
      name: 'FEATURES',
      items: [
      '5 Rooms: 2 rooms with double beds and 3 rooms with two single beds',
      'Hosts up to 10 people',
      'Private bathroom ensuites in each room',
      'Intimate upper deck with stunning Nile views',
      ],
    },
    // More sections...
  ],
}

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

export default function Veda3() {
  const [selectedColor, setSelectedColor] = useState(product.colors[0])

  return (
    <div className="bg-transparent">
      <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-0">
        <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 bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4"
                  >
                    <H3 className="sr-only">{image.name}</H3>
                    <span className="absolute inset-0 overflow-hidden">
                      <img alt="" src={image.src} className="h-full w-full object-cover object-center" />
                    </span>
                    <span
                      aria-hidden="true"
                      className="pointer-events-none absolute inset-0 ring-2 ring-transparent ring-offset-2 group-data-[selected]:ring-indigo-500"
                    />
                  </Tab>
                ))}
              </TabList>
            </div>

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

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

            <div className="mt-2">
              <div className="space-y-4 text-base text-gray-700">
                {product.description.map((paragraph, index) => (
                  <PS key={index}>{paragraph}</PS>
                ))}
              </div>
            </div>

            <section aria-labelledby="details-heading" className="mt-6">
              <div className="border-t border-gray-200 pt-6">
                <H3 className="">Specifications</H3>
                <div className="mt-4">
                  <ul role="list" className="list-disc pl-5 space-y-1">
                    {product.details[0].items.map((item) => (
                      <li key={item} className="text-gray-700">
                        <PXXS>{item}</PXXS>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
              <form className="mt-12">
              <div className=" flex">
                <Button
                  variant="solid"
                  className="flex max-w-xs flex-1 items-center justify-center  border border-transparent bg-gold-800x-8 py-3 text-base font-medium text-white hover:bg-gold-700 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full"
                >
                  Book Now
                </Button>
              </div>
            </form>
            </section>
          </div>
        </div>
      </div>
    </div>
  )
}