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 {
  ContactFormDesigns,
  HeroDesigns,
  FeaturesDesigns,
  TestimonialsDesigns,
  PricingDesigns,
} from '../components/WebPageComponents/designs';

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

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

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

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

import PricingSection from '../components/WebPageComponents/PricingComponent';

export default function WebSite() {
  const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
  const projectName = 'Ethr';

  useEffect(() => {
    const darkElement = document.querySelector('body .dark');
    if (darkElement) {
      darkElement.classList.remove('dark');
    }
  }, []);
  const pages = [
    {
      href: '/home',
      label: 'home',
    },

    {
      href: '/services',
      label: 'services',
    },

    {
      href: '/contact',
      label: 'contact',
    },
  ];

  const features_points = [
    {
      name: 'Easy Registration',
      description:
        'Sign up quickly and start exploring a wide range of vehicles. Our user-friendly interface ensures a smooth registration process.',
      icon: 'mdiAccountCircle',
    },
    {
      name: 'Secure Transactions',
      description:
        'Enjoy peace of mind with secure payment options. We prioritize your safety with encrypted transactions and trusted payment gateways.',
      icon: 'mdiLock',
    },
    {
      name: 'Flexible Booking',
      description:
        'Choose from a variety of vehicles and book at your convenience. Our flexible booking system adapts to your schedule.',
      icon: 'mdiCalendarCheckOutline',
    },
    {
      name: 'Verified Users',
      description:
        'Rent with confidence knowing all users are verified. Our platform ensures a trustworthy community for both renters and rentees.',
      icon: 'mdiShieldCheck',
    },
    {
      name: 'Comprehensive Listings',
      description:
        'Browse detailed listings with photos, descriptions, and pricing. Find the perfect vehicle for your adventure with ease.',
      icon: 'mdiViewList',
    },
    {
      name: '24/7 Support',
      description:
        'Get assistance whenever you need it. Our dedicated support team is available around the clock to help with any inquiries.',
      icon: 'mdiHeadsetMic',
    },
  ];

  const testimonials = [
    {
      text: '${projectName} made my weekend getaway unforgettable! The booking process was seamless, and the vehicle was in perfect condition.',
      company: 'Adventure Seekers Inc.',
      user_name: 'John Doe, Outdoor Enthusiast',
    },
    {
      text: 'I was impressed by the variety of vehicles available. ${projectName} is my go-to platform for all my adventure needs.',
      company: 'Thrill Ventures',
      user_name: 'Jane Smith, Travel Blogger',
    },
    {
      text: 'The secure payment system gave me peace of mind. I highly recommend ${projectName} for anyone looking to rent outdoor vehicles.',
      company: 'Secure Travels Co.',
      user_name: 'Michael Brown, Finance Manager',
    },
    {
      text: 'The customer support team was incredibly helpful. They answered all my questions promptly and made the experience enjoyable.',
      company: 'Happy Trails Ltd.',
      user_name: 'Emily White, Customer Service Specialist',
    },
    {
      text: 'I love how easy it is to find and book vehicles on ${projectName}. The platform is user-friendly and efficient.',
      company: 'Easy Rentals Group',
      user_name: 'David Green, Tech Enthusiast',
    },
    {
      text: 'The verification process ensures a safe community. I felt confident renting out my vehicle on ${projectName}.',
      company: 'Trusty Rides',
      user_name: 'Sarah Johnson, Vehicle Owner',
    },
  ];

  const pricing_features = {
    standard: {
      features: [
        'Basic vehicle listings',
        'Secure payment processing',
        'User verification',
      ],
      limited_features: ['Limited customer support', 'Basic analytics'],
    },
    premium: {
      features: [
        'Advanced vehicle listings',
        'Priority customer support',
        'Enhanced security measures',
      ],
      also_included: ['Detailed analytics', 'Customizable booking options'],
    },
    business: {
      features: [
        'Comprehensive vehicle management',
        'Dedicated account manager',
        'Full analytics suite',
        'Custom integrations',
      ],
    },
  };

  const description = {
    standard:
      'Ideal for individuals looking to rent or list a few vehicles. Enjoy basic features with secure transactions and user verification.',
    premium:
      'Perfect for small startups or agencies needing advanced features and priority support. Gain access to detailed analytics and customizable options.',
    business:
      'Designed for enterprises managing a large fleet. Benefit from comprehensive management tools, dedicated support, and custom integrations.',
  };

  return (
    <div className='flex flex-col min-h-screen'>
      <Head>
        <title>{`Peer-to-Peer Power Sports Rentals | Rent Snowmobiles, ATVs, Boats & More`}</title>
        <meta
          name='description'
          content={`Discover the ultimate peer-to-peer power sports rental platform. Rent snowmobiles, ATVs, UTVs, dirt bikes, and boats directly from owners. Safe, secure, and convenient rentals for your next adventure.`}
        />
      </Head>
      <WebSiteHeader projectName={'Ethr'} pages={pages} />
      <main className={`flex-grow  ${bgColor}    rounded-none  `}>
        <HeroSection
          projectName={'Ethr'}
          image={['Exciting outdoor adventure vehicles']}
          mainText={`Explore Adventure with ${projectName} Rentals`}
          subTitle={`Experience the thrill of the outdoors with ${projectName}. Rent snowmobiles, ATVs, and more directly from owners. Safe, secure, and ready for your next adventure.`}
          design={HeroDesigns.IMAGE_BG || ''}
          buttonText={`Start Your Adventure`}
        />

        <FeaturesSection
          projectName={'Ethr'}
          image={['Diverse range of rental vehicles']}
          withBg={0}
          features={features_points}
          mainText={`Discover ${projectName} Key Features`}
          subTitle={`Unlock the full potential of your outdoor adventures with ${projectName}. Explore our unique features designed for a seamless rental experience.`}
          design={FeaturesDesigns.CARDS_GRID_WITH_ICONS || ''}
        />

        <TestimonialsSection
          projectName={'Ethr'}
          design={TestimonialsDesigns.HORIZONTAL_CAROUSEL || ''}
          testimonials={testimonials}
          mainText={`What Our Users Say About ${projectName} `}
        />

        <PricingSection
          projectName={'Ethr'}
          withBg={1}
          features={pricing_features}
          description={description}
        />

        <ContactFormSection
          projectName={'Ethr'}
          design={ContactFormDesigns.WITH_IMAGE || ''}
          image={['Contact us for quick support']}
          mainText={`Get in Touch with ${projectName} `}
          subTitle={`Reach out to us anytime. Our team is here to assist you with any inquiries or support you need. Expect a prompt response from ${projectName}.`}
        />
      </main>
      <WebSiteFooter projectName={'Ethr'} pages={pages} />
    </div>
  );
}

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