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

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

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

import FaqSection from '../../components/WebPageComponents/FaqComponent';

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 = 'Gerenciador e Fiscalizador de Obras Copasa';

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

  const features_points = [
    {
      name: 'Precision Drone Inspections',
      description:
        'Conduct thorough inspections using state-of-the-art drones, capturing high-resolution images for detailed analysis and reporting.',
      icon: 'mdiDrone',
    },
    {
      name: 'AI-Driven Data Analysis',
      description:
        'Leverage advanced AI algorithms to process and analyze data, providing actionable insights and enhancing decision-making.',
      icon: 'mdiBrain',
    },
    {
      name: 'Comprehensive Project Reporting',
      description:
        'Generate detailed reports that offer a clear overview of project status, compliance, and areas for improvement, ensuring transparency and accountability.',
      icon: 'mdiFileDocumentOutline',
    },
  ];

  const faqs = [
    {
      question: 'What services does Engedrones offer?',
      answer:
        'Engedrones provides drone inspections, AI-driven data analysis, and comprehensive project reporting for public sanitation projects. Our services ensure precision and efficiency.',
    },
    {
      question: 'How does Engedrones use AI in its services?',
      answer:
        'We utilize advanced AI algorithms to analyze drone-captured images, providing actionable insights and enhancing decision-making for project management.',
    },
    {
      question:
        'Can Engedrones integrate with existing project management tools?',
      answer:
        'Yes, Engedrones can integrate with popular project management tools to streamline workflows and ensure seamless data exchange.',
    },
    {
      question: "What is the pricing model for Engedrones' services?",
      answer:
        'Our pricing is based on the scope and scale of the project. Contact us for a customized quote tailored to your specific needs.',
    },
    {
      question: 'How can I get started with Engedrones?',
      answer:
        'To get started, contact us through our website or email. Our team will guide you through the onboarding process and tailor our services to your project requirements.',
    },
    {
      question: "Is training provided for using Engedrones' platform?",
      answer:
        'Yes, we offer comprehensive training sessions to ensure your team can effectively utilize our platform and maximize its benefits.',
    },
  ];

  return (
    <div className='flex flex-col min-h-screen'>
      <Head>
        <title>{`Engedrones - Our Services`}</title>
        <meta
          name='description'
          content={`Explore the comprehensive services offered by Engedrones, including drone inspections, AI analysis, and detailed reporting for public sanitation projects.`}
        />
      </Head>
      <WebSiteHeader
        projectName={'Gerenciador e Fiscalizador de Obras Copasa'}
      />
      <main className={`flex-grow    bg-white  rounded-none  `}>
        <HeroSection
          projectName={'Gerenciador e Fiscalizador de Obras Copasa'}
          image={['Drone surveying construction site']}
          mainText={`Transforming Sanitation with Engedrones Services`}
          subTitle={`Discover how ${projectName} leverages cutting-edge drone technology and AI to revolutionize public sanitation projects. Our services ensure precision, efficiency, and comprehensive oversight.`}
          design={HeroDesigns.IMAGE_BG || ''}
          buttonText={`Explore Our Services`}
        />

        <FeaturesSection
          projectName={'Gerenciador e Fiscalizador de Obras Copasa'}
          image={['Drone capturing detailed images']}
          withBg={0}
          features={features_points}
          mainText={`Unveiling Engedrones' Premier Services`}
          subTitle={`Explore the innovative services offered by ${projectName} that redefine public sanitation management with precision and efficiency.`}
          design={FeaturesDesigns.CARDS_GRID_WITH_ICONS || ''}
        />

        <FaqSection
          projectName={'Gerenciador e Fiscalizador de Obras Copasa'}
          design={FaqDesigns.ACCORDION || ''}
          faqs={faqs}
          mainText={`Frequently Asked Questions about Engedrones `}
        />

        <ContactFormSection
          projectName={'Gerenciador e Fiscalizador de Obras Copasa'}
          design={ContactFormDesigns.HIGHLIGHTED || ''}
          image={['Person typing on keyboard']}
          mainText={`Connect with Engedrones Today `}
          subTitle={`Reach out to ${projectName} for inquiries, support, or collaboration. Our team is ready to assist you promptly and efficiently.`}
        />
      </main>
      <WebSiteFooter
        projectName={'Gerenciador e Fiscalizador de Obras Copasa'}
      />
    </div>
  );
}

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