import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import { useAppSelector } from '../../stores/hooks';
import LayoutGuest from '../../layouts/Guest';
import WebSiteHeader from '../../components/WebPageComponents/Header';
import WebSiteFooter from '../../components/WebPageComponents/Footer';
import {
  HeroDesigns,
  FeaturesDesigns,
  TestimonialsDesigns,
  GalleryPortfolioDesigns,
  ContactFormDesigns,
} from '../../components/WebPageComponents/designs';

import HeroSection from '../../components/WebPageComponents/HeroComponent';

import FeaturesSection from '../../components/WebPageComponents/FeaturesComponent';

import TestimonialsSection from '../../components/WebPageComponents/TestimonialsComponent';

import GalleryPortfolioSection from '../../components/WebPageComponents/GalleryPortfolioComponent';

import { getMultiplePexelsImages } from '../../helpers/pexels';

import ContactFormSection from '../../components/WebPageComponents/ContactFormComponent';

export default function WebSite() {
  const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
  const projectName = 'FlyAru-Powered by Arwa Travel Group';

  useEffect(() => {
    const darkElement = document.querySelector('body .dark');
    if (darkElement) {
      darkElement.classList.remove('dark');
    }
  }, []);

  const features_points = [
    {
      name: 'Seamless Online Booking',
      description:
        'Book your dream tour with ease using our intuitive online platform. Enjoy a hassle-free experience from start to finish.',
      icon: 'mdiCalendarCheck',
    },
    {
      name: 'Exclusive Tour Packages',
      description:
        'Choose from a variety of exclusive tour packages tailored to your preferences. Experience luxury and adventure like never before.',
      icon: 'mdiPackageVariant',
    },
    {
      name: 'Real-Time Availability',
      description:
        'Stay informed with real-time updates on tour availability. Plan your trips with confidence and avoid last-minute surprises.',
      icon: 'mdiClockOutline',
    },
  ];

  const testimonials = [
    {
      text: '${projectName} made our family vacation unforgettable. The booking process was seamless, and the tour exceeded our expectations.',
      company: 'Wanderlust Adventures Inc.',
      user_name: 'Emily Johnson, Travel Coordinator',
    },
    {
      text: 'I was impressed by the variety of exclusive packages offered by ${projectName}. Our trip was luxurious and well-organized.',
      company: 'Global Explorers Ltd.',
      user_name: 'Michael Smith, CEO',
    },
    {
      text: 'Thanks to ${projectName}, I could easily plan a surprise getaway for my partner. The real-time updates were incredibly helpful.',
      company: 'Dream Destinations Co.',
      user_name: 'Sarah Lee, Event Planner',
    },
    {
      text: 'The customer service at ${projectName} is top-notch. They were attentive to our needs and ensured a smooth travel experience.',
      company: 'Voyage Ventures',
      user_name: 'David Brown, Marketing Director',
    },
    {
      text: 'I highly recommend ${projectName} for anyone looking to explore new destinations. Their attention to detail is unmatched.',
      company: 'Travel Treasures',
      user_name: 'Jessica White, Travel Blogger',
    },
    {
      text: 'Our corporate retreat was a success, thanks to ${projectName}. The team-building activities were well-planned and enjoyable.',
      company: 'Corporate Getaways LLC',
      user_name: 'Robert Green, HR Manager',
    },
  ];

  const [images, setImages] = useState([]);
  const pexelsQueriesWebSite = [
    'Sunset over tropical beach',
    'Majestic mountain range view',
    'Historic cityscape with landmarks',
    'Luxury cruise ship at sea',
    'Vibrant local market scene',
    'Serene forest hiking trail',
  ];
  useEffect(() => {
    const fetchImages = async () => {
      try {
        const images = await getMultiplePexelsImages(pexelsQueriesWebSite);
        const formattedImages = (images || []).map((image) => ({
          src: image?.src || undefined,
          photographer: image?.photographer || undefined,
          photographer_url: image?.photographer_url || undefined,
        }));
        setImages(formattedImages);
      } catch (error) {
        console.error('Error fetching images:', error);
      }
    };

    fetchImages();
  }, []);

  return (
    <div className='flex flex-col min-h-screen'>
      <Head>
        <title>{`Explore Our Exclusive Tour Packages | Luxury Travel Experiences`}</title>
        <meta
          name='description'
          content={`Discover luxury travel experiences with our exclusive tour packages. Book online with ease and enjoy seamless travel planning with our advanced booking options.`}
        />
      </Head>
      <WebSiteHeader projectName={'FlyAru-Powered by Arwa Travel Group'} />
      <main className={`flex-grow  ${bgColor}    rounded-none  `}>
        <HeroSection
          projectName={'FlyAru-Powered by Arwa Travel Group'}
          image={['Breathtaking scenic travel destination']}
          mainText={`Discover Luxury Tours with ${projectName}`}
          subTitle={`Experience the world like never before with ${projectName}. Our exclusive tour packages offer seamless booking and unforgettable travel adventures.`}
          design={HeroDesigns.IMAGE_BG || ''}
          buttonText={`Explore Tours`}
        />

        <FeaturesSection
          projectName={'FlyAru-Powered by Arwa Travel Group'}
          image={['Iconic travel destinations collage']}
          withBg={1}
          features={features_points}
          mainText={`Explore ${projectName} Features`}
          subTitle={`Discover the unique features of ${projectName} that make your travel planning seamless and enjoyable.`}
          design={FeaturesDesigns.CARDS_GRID_WITH_ICONS || ''}
        />

        <TestimonialsSection
          projectName={'FlyAru-Powered by Arwa Travel Group'}
          design={TestimonialsDesigns.HORIZONTAL_CAROUSEL || ''}
          testimonials={testimonials}
          mainText={`What Our Travelers Say About ${projectName} `}
        />

        <GalleryPortfolioSection
          projectName={'FlyAru-Powered by Arwa Travel Group'}
          images={images}
          mainText={`Explore Our World of Adventures`}
          design={GalleryPortfolioDesigns.OVERLAPPING_CENTRAL_IMAGE || ''}
        />

        <ContactFormSection
          projectName={'FlyAru-Powered by Arwa Travel Group'}
          design={ContactFormDesigns.WITH_IMAGE || ''}
          image={['Person typing on laptop']}
          mainText={`Get in Touch with ${projectName} `}
          subTitle={`Reach out to us anytime. Our team at ${projectName} is here to assist you with your travel inquiries and ensure a prompt response.`}
        />
      </main>
      <WebSiteFooter projectName={'FlyAru-Powered by Arwa Travel Group'} />
    </div>
  );
}

WebSite.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};