import React, { Suspense, useEffect } from "react";
import style from "./Home.module.css";
import Header from "../Header/Header";
import ContentWrapper from "../ContentWrapper/ContentWrapper";
import ToggleButton from "../ToggleButton/ToggleButton";
// import Footer from "../../components/Footer/Footer";
import FAQ from "../FAQ/FAQ";
import TestimonialCarousal from "../TestimonialCarousal/TestimonialCarousal";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import { Box } from "@mui/material";
import { faqsHome } from "../data/faqs";
import { homeTestimonial } from "../data/pageContent";
import { store } from "../redux/store";
import { Provider } from "react-redux";
import ScrollToTop from "../ScrollToTop/ScrollToTop";
const Footer = React.lazy(() => import("../../components/Footer/Footer"));

function Home() { 
  useEffect(() => {
  window.scrollTo({ top: 0, behavior: "instant" });
  }, []);

  return (
    <Provider store={store}>
      <section className={style.section1}>
        <ContentWrapper>
          <Header color={"#003C81"} />
          <div className={style.section1__content}>
            <div className={style.section1__content1}>
              <h1 className={style.section1__content__line2}>
                Empowering Educators Inspiring Young Minds
              </h1>
              <p className={style.section1__content__line3}>
                <b>ai</b>nnovation to support and elevate educators while
                fostering a nurturing, dynamic and inspiring learning
                environment for early learners.
              </p>
              <a href={"/about-us"}>
                <p className={style.section1__content__line4}>
                  <span>Learn more</span>{" "}
                  <KeyboardArrowRightIcon sx={{ mt: 0.2 }} />
                </p>
              </a>
            </div>
            <div className={style.section1__content2}>
              <img
                src="/assets/home_banner.webp"
                width={"100%"}
                alt="Transform Early Learning with aKadmy's AI-Powered Education Tools"
              />
            </div>
          </div>
        </ContentWrapper>
        <div className={style.section1__bg_1}></div>
      </section>
      <div className={style.section1__bg_2}></div>

      <section className={style.section2}>
        <ContentWrapper>
          <div className={style.section2__content}>
            <p className={style.section2__content__line1}>For Age 2-6 years</p>
            <h1 className={style.section2__content__line2}>
              Our Curriculum Products
            </h1>
            <div className={style.section2__card_container}>
              <div className={style.section2__card1}>
                <Box mb={1}>
                  <img
                    src="/assets/Home_TB.webp"
                    className={style.section2__img12}
                    alt="Transform Early Learning with aKadmy's AI-Powered Education Tools"
                  />
                </Box>
                <p className={style.section2__card_title}>Teeny Beans</p>
                <p>
                  A globally benchmarked, innovative curriculum for early
                  <br />
                  childhood education.
                </p>
              </div>
              <div className={style.section2__card2}>
                <img
                  src="/assets/Home_Interakto.webp"
                  className={style.section2__img12}
                  alt="Transform Early Learning with aKadmy's AI-Powered Education Tools"
                />
                <p className={style.section2__card_title}>InteraKto</p>
                <p>
                  Enhancing early childhood education with interactive
                  <br /> learning experiences.
                </p>
              </div>
              <div className={style.section2__card3}>
                <div className={style.section2__card3__container}>
                  <div className={style.section2__card3__left}>
                    <img
                      src="/assets/Home_Toddler.webp"
                      className={style.section2__img3}
                      alt="Transform Early Learning with aKadmy's AI-Powered Education Tools"
                    />
                  </div>
                  <div className={style.section2__card3__right}>
                    <Box maxWidth={300} mx={"auto"}>
                      <p className={style.section2__card_title}>Toddlers</p>
                      <p>
                        A unique Mother - Toddler connection program, especially
                        curated for bonding with you little one.
                      </p>
                    </Box>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </ContentWrapper>
      </section>

      <section className={style.section3}>
        <ContentWrapper>
          <div className={style.section3__cards_container}>
            <div className={style.section3__1}>
              <div className={style.section3__1_text}>
                <p>Explore Our Platform Capabilities</p>
                <h2>One Platform, Multiple Possibilities</h2>
              </div>
              <img
                src={"/assets/home_platform.webp"}
                alt="Transform Early Learning with aKadmy's AI-Powered Education Tools"
              />
            </div>
            <div className={style.section3__2}>
              <div className={style.section3__2_text}>
                <img src={'/assets/cloud-icon.svg'} alt="cloud icon" width={"30px"} />
                <h4>Cross Platform Compatibility</h4>
                <p>
                  Seamless cross-platform functionality, delivering a consistent
                  and intuitive user experience across iOS, Android, and web
                  browsers, enabling flexible and accessible engagement for
                  educators, parents, and children on any device.
                </p>
              </div>
              <div className={style.section3__img_container}>
                <img
                  className={style.main_img}
                  src={"/assets/home_platform2.webp"}
                  alt="Transform Early Learning with aKadmy's AI-Powered Education Tools"
                />
              </div>
            </div>

            <div className={style.section3__3}>
              <div className={style.section3__3_text}>
                <img src={'/assets/cloud-icon.svg'} alt="cloud icon" width={"30px"} />
                <h4>Smart. Really Smart.</h4>
                <p>
                  Leverages AI to personalize learning experiences, enhance
                  educational content, and provide intelligent insights for
                  educators, helping to optimize early childhood education
                  through tailored recommendations and adaptive learning paths.
                </p>
              </div>
              <div className={style.section3__img_container}>
                <img
                  className={style.main_img}
                  src={"/assets/interakto-coding-section3-3.webp"}
                  alt="Transform Early Learning with aKadmy's AI-Powered Education Tools"
                />
              </div>
            </div>

            <div className={style.section3__4}>
              <div className={style.section3__4_left}>
                <img
                  src="/assets/Next-Gen-Tech.webp"
                  width={"100%"}
                  alt="Transform Early Learning with aKadmy's AI-Powered Education Tools"
                />
              </div>
              <div className={style.section3__4_right}>
                <h4>Academia Meets Next-Gen Tech</h4>
                <p>
                  Created by a team of early learning experts with cumulatively
                  over a century's experience in delivering classroom learning
                  to over a million kids worldwide.
                </p>
                <a href={"/preschool-management-solutions"}>
                  <button className={`${style.section3__4_btn} btn`}>
                    Explore our platform
                  </button>
                </a>
              </div>
            </div>
          </div>
        </ContentWrapper>
      </section>

      <section className={style.section4}>
        <ContentWrapper>
          <div className={style.section4__content}>
            <div className={style.section4__content_left}>
              <p className={style.line1}>Get Started</p>
              <h2 className={style.line2}>Explore Our Subscriptions</h2>
              <ToggleButton
                data={["Enterprise Solutions", "Individual Solutions"]}
                discription={[
                  "Enterprise subscription plans for schools that offer comprehensive access to educational resources, personalized learning tools, and student progress analytics to elevate teaching and learning outcomes.",
                  "Individual subscription plans that offer personalized educational resources, progress tracking, and flexible access to support their child's learning journey.",
                ]}
                url={[
                  "/pricing/akadmy-platform-pricing",
                  "/pricing/akadmy-product-pricing",
                ]}
              />
            </div>
            <div className={style.section4__content_right}>
              <TestimonialCarousal data={homeTestimonial} />
            </div>
          </div>
        </ContentWrapper>
      </section>

      <section className={style.section5}>
        <ContentWrapper>
          <div className={style.section5__content}>
            <div className={style.section5__content_text}>
              <p>Why Us?</p>
              <h2>Different folks. Different strokes.</h2>
            </div>

            <div className={style.section5__card_container}>
              <div className={style.section5__card}>
                <img
                  src={"/assets/Home_parent.webp"}
                  alt="Transform Early Learning with aKadmy's AI-Powered Education Tools"
                />
                <div className={style.section5__card_text}>
                  <p>The Learner</p>
                  <p>
                    aKadmy is a highly interactive tool for young learners. Byte
                    sized lessons that hold attention and deliver learning.
                  </p>
                </div>
              </div>
              <div className={style.section5__card}>
                <img
                  src={"/assets/Home_educator.webp"}
                  alt="Transform Early Learning with aKadmy's AI-Powered Education Tools"
                />
                <div className={style.section5__card_text}>
                  <p>The Educator</p>
                  <p>
                    Unique AI powered teaching tools on aKadmy brings more power
                    to the educator to unleash creativity within the classroom.
                  </p>
                </div>
              </div>
              <div className={style.section5__card}>
                <img
                  src={"/assets/Home_learner.webp"}
                  alt="Transform Early Learning with aKadmy's AI-Powered Education Tools"
                />
                <div className={style.section5__card_text}>
                  <p>The Parent</p>
                  <p>
                    aKadmy empowers parents with real-time insights into their
                    child’s learning, personalized resources, and tools to
                    actively support and enhance their educational journey.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </ContentWrapper>
      </section>

      <section className={style.section6}>
        <img
          className={style.section6__cuveline}
          src="/assets/curve_line.png"
        />
        <ContentWrapper>
          <div className={style.section6__content}>
            <p className={style.section6__content__line1}>For Educators</p>
            <h1 className={style.section6__content__line2}>
              aKadmy for Schools
              <br /> & Tutors
            </h1>
            <p className={style.section6__content__line3}>
              aKadmy empowers educators by providing AI-driven tools for
              personalized lesson planning, access to a vast library of
              educational content, and real-time insights into student progress.
              It simplifies the teaching process, allowing educators to focus on
              what matters most: fostering student growth and learning.
            </p>
            <a href={"/contact-us"}>
              <button className={`${style.section3__4_btn} btn`}>
                Contact Us
              </button>
            </a>
          </div>
        </ContentWrapper>
      </section>
      <FAQ color1="#0348A8" color2={"#72B3FF"} data={faqsHome} />
      <Suspense>
        <Footer page="INTERAKTO_CODING" />
      </Suspense>
    </Provider>
  );
}

export default Home;
