import React, { useState } from "react";
import Header from "../Header/Header";
import ToggleButton from "../ToggleButton/ToggleButton";
import ContentWrapper from "../ContentWrapper/ContentWrapper";
import FAQ from "../FAQ/FAQ";
import Footer from "../Footer/Footer";
import style from "./InteraKto.module.css";
import PhotoFlipCarousel from "../Carousel/PhotoFlipCarousel/PhotoFlipCarousel";
import { faqsInterakto } from "../data/faqs";
import { interaktoAudio, interaktoWorksheets } from "../data/photoFileData";
import LearningResources from "../LearningResources/LearningResources";
import { Concept_explainer } from "../data/pageContent";
import ScrollToTop from "../ScrollToTop/ScrollToTop";
import { store } from "../redux/store";
import { Provider } from "react-redux";
import GameProvider from "../context/GameContext";
const array1 = [
  { img: "/assets/WAU_1.png", title: "World Around Us" },
  { img: "/assets/learning_area_1.png", title: "Language" },
  { img: "/assets/maths_1.png", title: "Mathematics" },
  { img: "/assets/celebration_1.png", title: "Celebrations" },
];

const array2 = [
  { img: "/assets/WAU_2.png", title: "World Around Us" },
  { img: "/assets/learning_area_2.png", title: "Language" },
  { img: "/assets/maths_2.png", title: "Mathematics" },
  { img: "/assets/celebration_2.png", title: "Celebrations" },
];

function InteraKto() {
  const [select, setSelect] = useState(0);
  return (
    <>
      <Provider store={store}>
        {/* <ScrollToTop /> */}
        <section className={style.section1}>
          <ContentWrapper>
            <Header color={"#0348A8"} />
            <div className={style.section1__container}>
              <div className={style.section1__content}>
                <p className={style.section1__content__line1}>
                  Introducing InteraKto
                </p>
                <h1 className={style.section1__content__line2}>
                  AI-Powered Learning, Redefined.
                </h1>
                <p className={style.section1__content__line3}>
                  An innovative platform that leverages AI to deliver
                  personalized, interactive learning experiences, blending
                  traditional education with cutting-edge technology for dynamic
                  and impactful results.
                </p>
                <div style={{ zIndex: 999999 }}>
                  <a href={"/pricing/akadmy-product-pricing"}>
                    <button className={style.section1__content_btn}>
                      View Plans{" "}
                      <img
                        src={"/assets/navigate_next.svg"}
                        alt="navigate next icon"
                      />
                    </button>
                  </a>
                </div>
              </div>
            </div>
          </ContentWrapper>
        </section>
        <div className={style.section1__bg_1}></div>
        <div className={style.section1__bg_2}></div>

        <section className={style.section2}>
          <ContentWrapper>
            <div className={style.section2__content}>
              <p className={style.section2__content__line1}>
                Why kids grow with interaKto
              </p>
              <h2 className={style.section2__content__line2}>
                Science Powering The Technology
              </h2>
              {/* TODO: Integrate Carousels */}
              <div className={style.section2__cards_container}>
                <div className={`${style.section2__card} ${style.card1}`}>
                  <img
                    src="/assets/Interakto_Understanding_world.webp"
                    alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
                  />
                  <p className={style.title}>Understanding the world</p>
                  <p className={style.description}>
                    Teaches young learners about geography, nature, and science
                    through engaging, interactive worksheets.
                  </p>
                </div>
                <div className={`${style.section2__card} ${style.card2}`}>
                  <img
                    src="/assets/interakto_literacy.webp"
                    alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
                  />
                  <p className={style.title}>Language & Literacy</p>
                  <p className={style.description}>
                    Offers interactive activities to build reading, writing, and
                    communication skills for young learners.
                  </p>
                </div>
                <div className={`${style.section2__card} ${style.card3}`}>
                  <img
                    src="/assets/Interakto_math.webp"
                    alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
                  />
                  <p className={style.title}>Mathematics</p>
                  <p className={style.description}>
                    Provides interactive worksheets to teach basic math concepts
                    like counting and arithmetic to young learners.
                  </p>
                </div>
                <div className={`${style.section2__card} ${style.card4}`}>
                  <img
                    src="/assets/Interakto_Celebrations.webp"
                    width={"100%"}
                    style={{ maxWidth: "300px", margin: "0 auto" }}
                    alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
                  />
                  <p className={style.title}>Celebrating Celebrations</p>
                  <p className={style.description}>
                    Interactive activities that help young learners explore and
                    appreciate various cultural and traditional celebrations.
                    These activities are designed to be both educational and
                    engaging, allowing children to understand and celebrate
                    diversity.
                  </p>
                </div>
                <div className={`${style.section2__card} ${style.card5}`}>
                  <img
                    src="/assets/Interakto_Thinking.webp"
                    width={"100%"}
                    alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
                  />
                  <p className={style.title}>Logical Thinking</p>
                  <p className={style.description}>
                    Interactive activities to develop critical thinking and
                    problem-solving skills in young learners. These activities
                    are designed to enhance their ability to reason and make
                    decisions effectively.
                  </p>
                </div>
                <div className={`${style.section2__card} ${style.card6}`}>
                  <img
                    src="/assets/Interakto_coding.webp"
                    width={"100%"}
                    style={{ maxWidth: "300px", margin: "0 auto" }}
                    alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
                  />
                  <p className={style.title}>Coding with InteraKto</p>
                  <p className={style.description}>
                    Interactive activities that introduce young learners to
                    basic programming concepts, helping them develop logical
                    thinking and problem-solving skills through engaging,
                    hands-on tasks.
                  </p>
                </div>
                <div className={` ${style.card_group}`}>
                  <div className={`${style.section2__card} ${style.card7}`}>
                    <img
                      src="/assets/Problem_Solving.webp"
                      height={"100%"}
                      className={`${style.img}`}
                      alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
                    />
                    <p className={style.title}>Problem Solving </p>
                    <p className={style.description}>
                      interactive activities that boost critical thinking and
                      decision-making skills, guiding young learners to tackle
                      challenges effectively.
                    </p>
                  </div>
                  <div className={`${style.section2__card} ${style.card8}`}>
                    <img
                      src="/assets/Interakto_Perseverance.webp"
                      height={"100%"}
                      className={`${style.img}`}
                      alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
                    />
                    <p className={style.title}>Perseverance </p>
                    <p className={style.description}>
                      Activities that encourage young learners to stay committed
                      to tasks, even when they face challenges, helping them
                      develop resilience and determination.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </ContentWrapper>
        </section>

        <section className={style.section3}>
          {/* <ContentWrapper> */}
          <div className={style.section3__container}>
            <div className={style.section3__content}>
              <p className={style.section3__content__line1}>Learning Areas</p>
              <h2 className={style.section3__content__line2}>
                Learning Areas Reinforced
              </h2>
              <div className={style.marquee_container}>
                <div className={style.marquee}>
                  <div className={style.marquee__content1}>
                    {array1.map((item) => (
                      <div className={style.marquee__box}>
                        <img
                          src={item.img}
                          alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
                          width={"26px"}
                        />
                        <b>{item.title}</b>
                      </div>
                    ))}
                  </div>

                  <div className={style.marquee__content2}>
                    {array1.map((item) => (
                      <div className={style.marquee__box}>
                        <img
                          src={item.img}
                          alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
                          width={"26px"}
                        />
                        <b>{item.title}</b>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              <div className={style.marquee_container}>
                <div className={style.marquee2}>
                  <div className={style.marquee__content1}>
                    {array2.map((item) => (
                      <div className={style.marquee__box}>
                        <img
                          src={item.img}
                          alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
                          width={"26px"}
                        />
                        <b>{item.title}</b>
                      </div>
                    ))}
                  </div>

                  <div className={style.marquee__content2}>
                    {array2.map((item) => (
                      <div className={style.marquee__box}>
                        <img
                          src={item.img}
                          alt="Interactive Learning Resources for Preschool | aKadmy - Engaging Early Education"
                          width={"26px"}
                        />
                        <b>{item.title}</b>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
          {/* </ContentWrapper> */}
        </section>

        <section className={style.section4}>
          <ContentWrapper>
            <div className={style.section4__content}>
              <div className={style.section4__content_1}>
                <p className={style.section4__content__1_line1}>
                  Explore interaKto
                </p>
                <h2 className={style.section4__content__1_line2}>
                  Every interaKtion delivers learning
                </h2>
                <ToggleButton
                  setSelect={setSelect}
                  data={["WORKSHEETS", "AUDIO BOOKS"]}
                  discription={[
                    "InteraKto worksheets are interactive tools for engaging young learners in subjects like literacy, math, and science.",
                    "Enhance literacy by providing an engaging way for young learners to listen to stories and develop language skills.",
                  ]}
                  url={[
                    "/pricing/akadmy-platform-pricing",
                    "/pricing/akadmy-product-pricing",
                  ]}
                  onchange={() => {}}
                  style={{
                    marginTop: "1rem",
                    color: "#D2F1FF",
                    backgroundColor: "#6295D9",
                    selectedBtnTextColor: "#DBFFEB",
                    selectedBtnBgColor: "#001F48",
                  }}
                />
              </div>
              <div className={style.section4__content_2}>
                <GameProvider>
                  <PhotoFlipCarousel
                    theme="INTERAKTO"
                    data={select === 0 ? interaktoWorksheets : interaktoAudio}
                    background={"#001F48"}
                    color={"#DBFFEB"}
                    poster="/assets/AudioBookPlay.webp"
                  />
                </GameProvider>
              </div>
            </div>
          </ContentWrapper>
        </section>

        <section className={style.section5}>
          <ContentWrapper>
            <div className={style.section5__content}>
              <p className={style.section5__content__line1}>
                Explore InteraKto
              </p>
              <h2 className={style.section5__content__line2}>
                Concept Explainers That Engage
              </h2>
              <LearningResources
                data={Concept_explainer}
                color1="#001F48"
                color2="#DBFFEB"
              />
            </div>
          </ContentWrapper>
        </section>

        <FAQ color1={"#001F48"} color2={"#72B3FF"} data={faqsInterakto} />
        <Footer page="INTERAKTO" />
      </Provider>
    </>
  );
}

export default InteraKto;