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

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

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

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

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

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

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

  const features_points = [
    {
      name: 'Course Management',
      description:
        'Easily create, edit, and organize courses with comprehensive syllabi, resources, and assessment tools. Simplify the educational process for instructors and students alike.',
      icon: 'mdiBookOpenPageVariant',
    },
    {
      name: 'Student Tracking',
      description:
        'Monitor student progress with detailed analytics. Keep track of grades, attendance, and engagement to ensure every student reaches their full potential.',
      icon: 'mdiAccountGroup',
    },
    {
      name: 'Instructor Profiles',
      description:
        'Maintain detailed profiles for all teaching staff, showcasing their qualifications and availability. Enhance communication and collaboration between instructors and students.',
      icon: 'mdiAccountTie',
    },
  ];

  const testimonials = [
    {
      text: "${projectName} has revolutionized our approach to online education. The platform's intuitive design and robust features have made a significant impact on our teaching methods.",
      company: 'EduBridge Solutions',
      user_name: 'Liam Carter, Director of Education',
    },
    {
      text: 'The support team at ${projectName} is exceptional. They are always ready to assist and ensure our experience is seamless and productive.',
      company: 'Learning Innovations Inc.',
      user_name: 'Olivia Martinez, IT Manager',
    },
    {
      text: "Our students are more engaged and motivated thanks to the interactive tools provided by ${projectName}. It's a fantastic platform for modern education.",
      company: 'Future Leaders Academy',
      user_name: 'Noah Thompson, Principal',
    },
    {
      text: 'The analytics feature in ${projectName} has provided us with valuable insights into student performance, allowing us to tailor our teaching strategies effectively.',
      company: 'Bright Minds Institute',
      user_name: 'Emma Brown, Academic Coordinator',
    },
    {
      text: 'As an instructor, I appreciate the ease of managing courses and communicating with students through ${projectName}. It has made my job much easier.',
      company: 'Global Learning Hub',
      user_name: 'John Davis, Senior Instructor',
    },
    {
      text: 'The discussion boards have fostered a vibrant learning community. ${projectName} has made online education more engaging and interactive.',
      company: 'Innovative Learning Solutions',
      user_name: 'Sophia Wilson, Community Manager',
    },
  ];

  return (
    <div className='flex flex-col min-h-screen'>
      <Head>
        <title>{`Our Services - Explore What ${projectName} Offers`}</title>
        <meta
          name='description'
          content={`Discover the range of services provided by ${projectName}. From course management to student engagement, learn how we support educational institutions in delivering exceptional online learning experiences.`}
        />
      </Head>
      <WebSiteHeader projectName={'uuid test 2'} />
      <main className={`flex-grow    bg-white  rounded-none  `}>
        <HeroSection
          projectName={'uuid test 2'}
          image={['Diverse team discussing services']}
          mainText={`Discover Our Comprehensive Services at ${projectName}`}
          subTitle={`Explore the diverse range of services offered by ${projectName} to enhance your online education experience. From course management to student engagement, we provide the tools you need for success.`}
          design={HeroDesigns.IMAGE_BG || ''}
          buttonText={`Explore Our Services`}
        />

        <FeaturesSection
          projectName={'uuid test 2'}
          image={['Interactive dashboard with analytics']}
          withBg={0}
          features={features_points}
          mainText={`Explore Key Features of ${projectName}`}
          subTitle={`Unlock the full potential of online education with ${projectName}. Discover features designed to enhance learning and streamline management.`}
          design={FeaturesDesigns.CARDS_GRID_WITH_ICONS || ''}
        />

        <TestimonialsSection
          projectName={'uuid test 2'}
          design={TestimonialsDesigns.HORIZONTAL_CAROUSEL || ''}
          testimonials={testimonials}
          mainText={`What Our Clients Say About ${projectName} `}
        />

        <ContactFormSection
          projectName={'uuid test 2'}
          design={ContactFormDesigns.HIGHLIGHTED || ''}
          image={['Person typing on a laptop']}
          mainText={`Reach Out to ${projectName} `}
          subTitle={`Have questions or need assistance? Contact us anytime, and our team at ${projectName} will respond promptly to your inquiries.`}
        />
      </main>
      <WebSiteFooter projectName={'uuid test 2'} />
    </div>
  );
}

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