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

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

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

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

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

  const features_points = [
    {
      name: 'In-Depth Articles',
      description:
        'Our blog offers comprehensive articles that delve into various aspects of cooperative management, providing valuable insights and practical tips.',
      icon: 'mdiBookOpenPageVariant',
    },
    {
      name: 'Expert Interviews',
      description:
        'Gain perspectives from industry experts through exclusive interviews. Learn from their experiences and apply their wisdom to your cooperative journey.',
      icon: 'mdiMicrophone',
    },
    {
      name: 'Community Stories',
      description:
        'Read inspiring stories from our community members. Discover how ${projectName} has impacted their cooperatives and fueled their success.',
      icon: 'mdiAccountGroupOutline',
    },
  ];

  return (
    <div className='flex flex-col min-h-screen'>
      <Head>
        <title>{`Yarkoop Blog - Insights and Updates`}</title>
        <meta
          name='description'
          content={`Stay informed with the latest insights, updates, and stories from Yarkoop. Explore our blog for valuable information and cooperative success stories.`}
        />
      </Head>
      <WebSiteHeader projectName={'yarkoop'} />
      <main
        className={`flex-grow   bg-skyBlueTheme-websiteBG   rounded-none  `}
      >
        <HeroSection
          projectName={'yarkoop'}
          image={['Blog articles and insights']}
          mainText={`Explore the World of ${projectName}`}
          subTitle={`Dive into the latest insights, updates, and stories from ${projectName}. Our blog is your go-to source for valuable information and cooperative success stories.`}
          design={HeroDesigns.IMAGE_BG || ''}
          buttonText={`Read Our Blog`}
        />

        <FeaturesSection
          projectName={'yarkoop'}
          image={['Blog features and highlights']}
          withBg={1}
          features={features_points}
          mainText={`Discover ${projectName} Blog Features`}
          subTitle={`Explore the unique features of our blog that keep you informed and engaged with the latest in cooperative success and innovation.`}
          design={FeaturesDesigns.CARDS_GRID_WITH_ICONS || ''}
        />
      </main>
      <WebSiteFooter projectName={'yarkoop'} />
    </div>
  );
}

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