'use client'

import { useState, useEffect, useRef } from 'react'
import { H1, H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'
import { ChevronDownIcon } from '@heroicons/react/24/outline'

const itineraryDays = {
  day1: {
    title: "Day 1: Luxor",
    image: "/images/luxor1.jpg",
    content: [
      "Welcome to Luxor, often referred to as the world's greatest open-air museum.Begin your journey by exploring the city's rich history and captivating landmarks.",
      "Visit the magnificent Karnak Temple, one of the largest religious complexes in the world, and marvel at its towering columns and intricate hieroglyphs. Then, head to the Luxor Temple, a stunning example of ancient Egyptian architecture.",
      "In the evening, enjoy a traditional Egyptian dinner on our Dahabiya, followed by a relaxing evening under the stars.."
    ]
  },
  day2: {
    title: "Day 2: Sailing to Esna",
    image: "/images/esna.jpeg",
    content: [
      "Set sail on the serene waters of the Nile, as we journey towards the charming town of Esna.",
      "As the dahabiya glides through the tranquil river, take in the breathtaking views of the lush landscapes and ancient monuments that line the banks.",
      "In the evening, VEDA docks at Esna and explore the local markets, where you can discover unique handicrafts and interact with friendly locals."
    ]
  },
  day3: {
    title: "Day 3: Crossing the Esna Lock",
    image: "/images/lock1.jpg",
    content: [
      "Experience the fascinating process of crossing the Esna Lock, a marvel of engineering that allows vessels to navigate the varying water levels of the Nile.",
      "Witness the skilled operation of the lock as the dahabiya is raised or lowered to continue its journey upstream. This unique experience offers a glimpse into the intricate workings of river navigation and provides an excellent opportunity for photography.",
      "After crossing the lock, continue sailing towards Edfu, enjoying the serene ambiance and scenic vistas along the way."
    ]
  },
  day4: {
    title: "Day 4: Edfu",
    image: "/images/edfu1.jpg",
    content: [
      "Arrive in Edfu, home to one of Egypt's best-preserved temples dedicated to the falcon god Horus.",
      "Explore the impressive Temple of Edfu, with its massive pylons, detailed reliefs, and captivating myths depicted on its walls. Discover the fascinating stories of ancient Egyptian deities and their significance in the culture and religion of the time.",
      "After the temple visit, return to the dahabiya for a leisurely afternoon sail, with opportunities for relaxation and rejuvenation on board."
    ]
  },
  day5: {
    title: "Day 5: Silsila",
    image: "/images/silsila1.jpg",
    content: [
      "Together we will visit the historic site of Gebel el-Silsila, known for its ancient sandstone quarries.",
      "Explore the remnants of temples, shrines, and inscriptions that reveal the area's significance as a source of building materials for many of Egypt's monumental structures. Gain insight into the craftsmanship and artistry of the ancient Egyptians as you wander through this unique archaeological site.",
      "In the evening, continue our journey along the Nile, soaking in the tranquil beauty of the river."
    ]
  },
  day6: {
    title: "Day 6: Kom Ombo",
    image: "/images/komombo1.jpg",
    content: [
      "Our journey brings us to Kom Ombo, a unique temple dedicated to two gods: Sobek, the crocodile god, and Horus the Elder, the falcon-headed god.",
      "Explore the symmetrical design of the temple, with its dual sanctuaries and fascinating reliefs depicting medical instruments, surgical scenes, and ancient calendars. Don't miss the nearby Crocodile Museum, where you can view mummified crocodiles and learn about the sacred role of these creatures in ancient Egyptian culture.",
      "Return to the dahabiya for a relaxing evening as we sail towards Aswan."
    ]
  },
  day7: {
    title: "Day 7: Aswan",
    image: "/images/aswan1.jpg",
    content: [
      "We will conclude our journey in the picturesque city of Aswan, known for its stunning landscapes and rich cultural heritage.",
      "Visit the majestic Philae Temple, dedicated to the goddess Isis, and marvel at its beautiful island setting. Explore the bustling Aswan market, where you can shop for spices, jewelry, and local crafts. In the afternoon, take a peaceful felucca ride around Elephantine Island and enjoy the gentle breeze and scenic views.",
      "As the day draws to a close, gather for a farewell dinner on board, celebrating the unforgettable experiences and memories created during the VEDA Retreat."
    ]
  }
}

export function Itinerary() {
  const [currentDay, setCurrentDay] = useState('day1')
  const intervalRef = useRef(null)
  const dayData = itineraryDays[currentDay]

  const getNextDay = (day = currentDay) => {
    const days = ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7']
    const currentIndex = days.indexOf(day)
    const nextIndex = (currentIndex + 1) % days.length
    return days[nextIndex]
  }

  // Function to start the auto-loop
  const startAutoLoop = () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current)
    }
    intervalRef.current = setInterval(() => {
      setCurrentDay(prevDay => getNextDay(prevDay))
    }, 5000) // 5 seconds
  }

  // Auto-loop setup
  useEffect(() => {
    startAutoLoop()
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
    }
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  // Handle manual click - this will reset the auto-loop timer
  const handleManualAdvance = () => {
    setCurrentDay(getNextDay())
    startAutoLoop() // Restart the timer after manual interaction
  }

  return (
    <div className="relative bg-transparent mb-0 px-4 sm:px-6 lg:px-0 pt-0">
      <div className="relative mx-auto max-w-8xl lg:grid lg:grid-cols-2 lg:items-stretch">
        {/* Left column with changeable day content */}
        <div className="relative lg:min-h-80 min-h-[80vh]">
          <img
            alt={`Journey Image ${currentDay}`}
            src={dayData.image}
            className="w-full lg:h-full h-[80vh] object-cover"
          />
          {/* Black overlay */}
          <div className="absolute inset-0 bg-black opacity-60"></div>
          {/* paragraphs */}
          <div className="absolute inset-0 flex items-start justify-center mx-auto max-w-lg flex-col lg:text-start text-center px-4 sm:px-6 lg:px-10 pt-20 lg:pt-0">
            <H2 className="text-white">{dayData.title}</H2>
            {dayData.content.map((paragraph, index) => (
              <PS key={index} className="mt-2 text-gray-50">{paragraph}</PS>
            ))}
            <div className="mt-6 flex justify-center items-center ">
              <ChevronDownIcon 
                onClick={handleManualAdvance}
                className="h-8 w-8 text-white cursor-pointer hover:text-gray-300 transition-colors duration-200 animate-pulse"
              />
            </div>
          </div>
        </div>
        
        {/* Right column with map */}
        <div className="relative min-h-80">
          <img
            alt="Journey Map"
            src="/images/map_dark2.jpg"
            className="w-full h-auto object-contain"
          />
        </div>
      </div>
    </div>
  )
}
