'use client'
import { H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'

import * as Headless from '@headlessui/react'
import { ArrowLongRightIcon } from '@heroicons/react/20/solid'
import { clsx } from 'clsx'
import {
  motion,
  useMotionValueEvent,
  useScroll,
  useSpring,
} from 'framer-motion'
import { useCallback, useLayoutEffect, useRef, useState } from 'react'
import useMeasure from 'react-use-measure'
import { Container } from './Container'
import { Link } from './link'
import { Heading, Subheading } from './text'

const testimonials = [
  {
    img: '/images/veda1.jpg',
    subtitle: 'A beautiful 50-meter dahabiya offering a tranquil and organic platform for personalized cruises.',
    quote: 'VEDA I',
    href: '/phases/phase1',
  },
  {
    img: '/images/veda2.jpg',
    subtitle: 'An elegant 45-meter dahabiya, ideal for hosting larger groups, healing retreats, company getaways, and more.',
    quote: 'VEDA II',
    href: '/phases/phase2',
  },
  {
    img: '/images/veda3.jpg',
    subtitle: 'A cozy 18-meter dahabiya offering a serene floating home, perfect for private groups seeking tranquility and comfort on the Nile.',
    quote: 'VEDA III',
    href: '/phases/phase3',
  },
  {
    img: '/images/veda4.jpg',
    subtitle: 'A spaciou 55-meter dahabeya offering a serene retreat, perfect for bigger groups seeking tranquility and comfort on the Nile.',
    quote: 'VEDA IV',
    href: '/phases/phase4',
  },
]

function TestimonialCard({
  subtitle,
  name,
  title,
  img,
  href,
  children,
  bounds,
  scrollX,
  ...props
}) {
  let ref = useRef(null)

  let computeOpacity = useCallback(() => {
    let element = ref.current
    if (!element || bounds.width === 0) return 1

    let rect = element.getBoundingClientRect()

    if (rect.left < bounds.left) {
      let diff = bounds.left - rect.left
      let percent = diff / rect.width
      return Math.max(0.5, 1 - percent)
    } else if (rect.right > bounds.right) {
      let diff = rect.right - bounds.right
      let percent = diff / rect.width
      return Math.max(0.5, 1 - percent)
    } else {
      return 1
    }
  }, [ref, bounds.width, bounds.left, bounds.right])

  let opacity = useSpring(computeOpacity(), {
    stiffness: 154,
    damping: 23,
  })

  useLayoutEffect(() => {
    opacity.set(computeOpacity())
  }, [computeOpacity, opacity])

  useMotionValueEvent(scrollX, 'change', () => {
    opacity.set(computeOpacity())
  })

  return (
    <motion.div
      ref={ref}
      style={{ opacity }}
      {...props}
      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-[#fffefa] rounded-3xl shadow-lg overflow-hidden sm:w-80 lg:w-96"
    >
      {/* Image Section */}
      <div className="relative aspect-square overflow-hidden">
        <img
          alt=""
          src={img}
          className="w-full h-full object-cover"
        />
      </div>
      
      {/* Content Section Below Image */}
      <div className="p-6">
          <H3 className="">
            {children}
          </H3>

        
        <p className="mt-2 lg:text-base text-sm text-gray-200 leading-6">
          {subtitle}
        </p>
        
        <Link
          href={href}
          className="mt-2 mb-2 inline-flex items-center gap-2 text-sm font-semibold text-gold-700 hover:text-gold-700"
        >
          Learn More
          <ArrowLongRightIcon className="h-4 w-4" />
        </Link>
      </div>
    </motion.div>
  )
}

export function Boat() {
  let scrollRef = useRef(null)
  let { scrollX } = useScroll({ container: scrollRef })
  let [setReferenceWindowRef, bounds] = useMeasure()
  let [activeIndex, setActiveIndex] = useState(0)

  useMotionValueEvent(scrollX, 'change', (x) => {
    if (scrollRef.current && scrollRef.current.children[0]) {
      setActiveIndex(Math.floor(x / scrollRef.current.children[0].clientWidth))
    }
  })

  function scrollTo(index) {
    let gap = 32
    let width = scrollRef.current.children[0].offsetWidth
    scrollRef.current.scrollTo({ left: (width + gap) * index })
  }

  return (
    <div className="pt-12 lg:pt-24 pb-12">
      <Container>
        <div ref={setReferenceWindowRef}>
          <h2 className="font-display mt-2 text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
            Dahabiyas
          </h2>
          <p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
            Discover peaceful platforms where every detail ensures a truly memorable stay. Our fleet of traditional dahabiyas combines authentic Nile heritage with modern comfort, offering intimate sailing experiences that connect you with Egypt's timeless river culture. 
          </p>
        </div>
      </Container>
      <div
        ref={scrollRef}
        className={clsx([
          'mt-16 flex gap-8 pl-6 pr-6 lg:pl-8 lg:ml-12 ml-4',
          '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
          'snap-x snap-mandatory overflow-x-scroll overscroll-x-contain scroll-smooth',
          'pb-8',
        ])}
      >
        {testimonials.map(({ img, name, title, quote, href, subtitle }, testimonialIndex) => (
          <TestimonialCard
            key={testimonialIndex}
            subtitle={subtitle}
            name={name}
            title={title}
            href={href}
            img={img}
            bounds={bounds}
            scrollX={scrollX}
            onClick={() => scrollTo(testimonialIndex)}
          >
            {quote}
          </TestimonialCard>
        ))}
        <div className="w-8 shrink-0" />
      </div>
    </div>
  )
}