"use client";

import { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';
import { useGlobalContext } from '@/context/GlobalContext';
import { useLanguage } from '@/context/LanguageContext';
import '../(website)/styles/home.css';
import Image from 'next/image';
import { HoverEffect } from '@/components/ui/card-hover-effect';

const ServiceSlider = dynamic(() => import('@/components/ServiceSlider'), { 
  ssr: false,
  loading: () => <div className="h-40 flex items-center justify-center">Loading services...</div>
});

const HomeSlider1 = dynamic(() => import('@/components/homeSlider'), { 
  ssr: false,
  loading: () => <div className="h-[500px] flex items-center justify-center">Loading slider...</div>
});

const EbookSlider = dynamic(() => import('@/components/EbookSlider'), { 
  ssr: false,
  loading: () => <div className="h-60 flex items-center justify-center">Loading services...</div>
});

const PartnerSlider = dynamic(() => import('@/components/partnerslider'), { 
  ssr: false,
  loading: () => <div className="h-40 flex items-center justify-center">Loading partners...</div>
});

const ProjectSlider = dynamic(() => import('@/components/ProjectSlider1'), { 
  ssr: false,
  loading: () => <div className="h-60 flex items-center justify-center">Loading projects...</div>
});

export default function Home() {
  const { darkMode } = useGlobalContext();
  const { language, t } = useLanguage();
  const [hoveredIndex, setHoveredIndex] = useState(-1);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const service = [
    {
      title: t("E-TOP-UP"),
      slug: "E-TOP-UP",
      imgSrc: "/images/e-topup1.png",
      subTitle: t("Your1"),
      description: t("Easily1"),
      id: "e1",
    },
    {
      title: t("FTTH (Fiber-to-the-Home)"),
      slug: "Fiber-to-the-Home",
      imgSrc: "/images/FTTH12.png",
      subTitle: t("Strateg1"),
      description: t("AfghanPAY's12"),
      id: "e4",
    },
    {
      title: t("ELECTRICITY BILL PAYMENT"),
      slug: "ELECTRICITY-BILL-PAYMENT",
      imgSrc: "/images/elec1.png",
      subTitle: t("Instant Mobile Bill Pay"),
      description: t("Experience"),
      tags: "COMING SOON",
      id: "e2",
    },
    {
      title: t("HOTEL AND FLIGHT TICKET"),
      slug: "HOTEL-AND-FLIGHT-TICKET",
      imgSrc: "/images/flight1.png",
      subTitle: t("Increase Your Brand's Local Visibility"),
      description: t("Book1"),
      tags: "COMING SOON",
      id: "e3",
    },
  ];
  
  const state = [
    {
      title: "Master Distributers",
      description: t("Easily1"),
      imgSrc: "/images/distribution.png",
      count: "1000",
    },
    {
      title: "Distributers",
      description: t("AfghanPAY's12"),
      imgSrc: "/images/supplier.png",
      id: "e4",
      count: "2000",
    },
    {
      title: "Retailers",
      description: t("AfghanPAY's12"),
      imgSrc: "/images/retailer.png",
      id: "e4",
      count: "12000",
    },
    {
      title: "Ressellers",
      description: t("AfghanPAY's12"),
      imgSrc: "/images/transfer.png",
      id: "e4",
      count: "85000",
    },
    {
      title: "FTTH Customers",
      description: t("AfghanPAY's12"),
      imgSrc: "/images/friends.png",
      id: "e4",
      count: "2500",
    },
  ];
  
  const projects = [
    {
      id: 3,
      tags: ["Internet Service"],
      title: t("Afghan pay FTTH"),
      url: "https://ftth.afghan-pay.com/",
      description: t("Sahib.af"),
      image: "/images/ftth1.png",
    },
    {
      id: 1,
      tags: ["E-Commerce"],
      title: "Sahib.AF",
      url: "https://sahib.af/",
      description: t("Shoping1"),
      image: "/images/sahib.png",
      link: "",
    },
  ];

  const grids = [
    {
      id: 1,
      title: t("Fast"),
      image: "/images/icon6.png",
      image1: "/images/icon7.png",
    },
    {
      id: 2,
      title: t("Easy"),
      image: "/images/icon8.png",
      image1: "/images/icon15.png",
    },
    {
      id: 4,
      title: t("Customer Care"),
      image: "/images/icon10.png",
      image1: "/images/icon20.png",
    },
    {
      id: 5,
      title: t("USSD Services"),
      image: "/images/icon11.png",
      image1: "/images/icon18.png",
    },
    {
      id: 6,
      title: t("SMS Service"),
      image: "/images/icon12.png",
      image1: "/images/icon17.png",
    },
    {
      id: 7,
      title: t("App"),
      image: "/images/icon13.png",
      image1: "/images/icon19.png",
    },
    {
      id: 8,
      title: t("Web Portal"),
      image: "/images/icon14.png",
      image1: "/images/icon16.png",
    },
  ];

  const renderThemeImage = (darkSrc, lightSrc, className) => {
    return (
      <img 
        src={darkMode ? darkSrc : lightSrc} 
        alt="" 
        className={className}
      />
    );
  };

  // Don't render anything during SSR to prevent hydration mismatch
  if (!mounted) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-teal-500"></div>
      </div>
    );
  }

  return (
    <div className={`flex relative bg-[#fafcfc] overflow-hidden dark:bg-[#111111] flex-col ${language === "en" ? "" : ""}`}>
      <div className={`relative ${language === "en" ? "" : ""}`}>
        <HomeSlider1 />
      </div>

      {renderThemeImage(
        "/images/circle3.png",
        "/images/circle.png",
        `w-[100px] absolute right-0 top-[1350px]`
      )}
      
      {renderThemeImage(
        "/images/circle3.png",
        "/images/circle.png",
        `w-[100px] absolute right-0 top-[2500px]`
      )}
      
      {renderThemeImage(
        "/images/circle2.png",
        "/images/circle1.png",
        `w-[100px] absolute left-0 top-[1000px]`
      )}
      
      {renderThemeImage(
        "/images/circle2.png",
        "/images/circle1.png",
        `w-[100px] absolute left-0 top-[2200px]`
      )}

      <section>
        <ServiceSlider items={grids} />
      </section>
    
      <section className={`md:max-w-screen-2xl mt-[2rem] md:mt-[4rem] w-full px-[1rem] bg-[#fafcfc] dark:bg-[#111111] mx-auto md:px-[10rem]`}>
        <h1 className={`md:text-[32px] text-[24px] font-medium md:font-medium text-center`}>
          {t('Our Service')}
        </h1>
        <p className={`md:text-[16px] text-[14px] md:leading-7 font-light leading-6 md:font-light text-center px-[1rem] mb-7 mt-3`}>
          {t("Value")}
        </p>
        <EbookSlider items={service} />
      </section>

      <section className={`md:max-w-screen-2xl z-10 mb-10 mx-auto px-[1rem] w-full md:px-[10rem]`}>
        <h1 className={`md:text-[32px] text-[20px] font-medium md:font-medium mt-[5rem] text-center`}>
          {t("Our Projects")}
        </h1>
        <p className={`text-[16px] font-medium text-center mb-7 mt-3`}>
          {t("Browse")}
        </p>
        <ProjectSlider items={projects} />
      </section>

      <section className={`relative dark:mt-[35rem] dark:bg-[#111111] w-full items-center mx-auto ${language === "en" ? "" : ""}`}>
        <img src='/images/afghanistan.png' className={`w-[800px] z-0 dark:absolute dark:left-[-50%] dark:right-[-50%] dark:bottom-[0rem] mx-auto ${language === "en" ? "" : ""}`} alt='' />
      </section>

      <section className='max-w-screen-2xl mx-auto md:px-[8rem] overflow-hidden mt-6'>
        <div className={`z-10 left-0 right-0 ${language === "en" ? "" : ""}`}>
          <div className={`vision ${language === "en" ? "" : ""}`}>
            <p>
              {t('Want')}
              <span>{t("Want1")}</span>
            </p>
          </div>
        </div>
      </section>

      <section className={`relative bg-[#fafcfc] dark:bg-[#111111] max-w-screen-2xl pt-[8rem] items-center mx-auto ${language === "en" ? "" : ""}`}>
        <h1 className={`text-[#181818] text-center dark:text-[#f9f9f9] text-[20px] md:text-[32px] font-medium ${language === "en" ? "" : ""}`}>
          {t('Our Partners')}
        </h1>
      </section>

      <PartnerSlider />

      <section className='md:px-[8rem] mx-auto max-w-screen-2xl'>
        <HoverEffect items={state} />
      </section>
    </div>
  );
}