import React, { useState } from "react";
import Header from "../Header/Header";
import ToggleButton from "../ToggleButton/ToggleButton";
import ContentWrapper from "../ContentWrapper/ContentWrapper";
import style from "./TeenyBeans.module.css";
import FAQ from "../../components/FAQ/FAQ";
import Footer from "../Footer/Footer";
import LearningDevCarousel from "../LearningDevCarousel/LearningDevCarousel";
import PhotoFlipCarousel from "../Carousel/PhotoFlipCarousel/PhotoFlipCarousel";
import GuideLineSection from "../GuideLineSection/GuideLineSection";
import { guideLinesSectionData, Resources_Learning } from "../data/pageContent";
import LearningResources from "../LearningResources/LearningResources";
import { faqsTeenybeans } from "../data/faqs";
import { audio, worksheets } from "../data/photoFileData";
import { store } from "../redux/store";
import { Provider } from "react-redux";
import GameProvider  from '../context/GameContext';

// import ScrollToTop from "../ScrollToTop/ScrollToTop";
 
function TeenyBeans() {
  const [select, setSelect] = useState(0);
  return (
    <>
        <Provider store={store}>
            {/* <ScrollToTop /> */}
            <section className={style.section1}>
                <ContentWrapper>
                <Header color={"#358431"} />
                <div className={style.section1__container}>
                    <div className={style.section1__content}>
                    <p className={style.section1__content__line1}>
                        Introducing Teenybeans
                    </p>
                    <h1 className={style.section1__content__line2}>
                        Guiding Early Steps, Building Strong Foundations
                    </h1>
                    <p className={style.section1__content__line3}>
                        Teeny Beans - a curriculum that empowers educators with a
                        globally recognized EYFS framework, fostering excellence in
                        early childhood education.
                    </p>
                    <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>
                </ContentWrapper>
            </section>
            <div className={style.section1__bg_1}></div>

            <section className={style.section2}>
                <ContentWrapper>
                <div className={style.section2__content}>
                    <p className={style.section2__content__line1}>
                    Our Structured Preschool Curriculum
                    </p>
                    <h2 className={style.section2__content__line2}>
                    Areas of Learning
                    <br /> & Development
                    </h2>
                </div>
                </ContentWrapper>
                <LearningDevCarousel />
            </section>
            <div className={style.section2__bg_1}></div>

            <section className={style.section3}>
                <ContentWrapper>
                <div className={style.section3__content}>
                    <div className={style.section3__content_1}>
                    <p className={style.section3__content__1_line1}>
                        Explore the product
                    </p>
                    <h2 className={style.section3__content__1_line2}>
                        A world of discovery. Packed with learning.
                    </h2>
                    <ToggleButton
                        setSelect={setSelect}
                        data={["WORKSHEETS", "AUDIO BOOKS"]}
                        style={{
                        marginTop: "1rem",
                        color: "#E0FFDF",
                        backgroundColor: "#6C956A",
                        selectedBtnTextColor: "#DBFF00",
                        selectedBtnBgColor: "#163C14",
                        }}
                        discription={[
                        "Worksheets that enhance early childhood development, targeting cognitive, motor, language, and social-emotional skills, all seamlessly integrated with the curriculum.",
                        "Audio Books that enhance early learning, supporting language development and imagination while aligning with the curriculum.",
                        ]}
                        url={["", ""]}
                    />
                    </div>
                    <div className={style.section3__content_2}>
                        <GameProvider>
                            <PhotoFlipCarousel
                                theme="TEENYBEANS"
                                color={"#DBFFEB"}
                                data={select === 0 ? worksheets : audio}
                                poster="/assets/AudioBookPlay.webp"
                            />
                        </GameProvider>
                    </div>
                </div>
                </ContentWrapper>
            </section>
            <p className={style.section4__content__line1}>Explore our resources</p>
            <h2 className={style.section4__content__line2}>
                Resources that enrich learning
            </h2>
            <p className={style.section4__content__line3}>
                Our resource rich educators platform makes it convenient for educators
                to deliver highly interactive lessons for preschoolers.
            </p>
            <div className={style.section4__bg}>
                <LearningResources
                data={Resources_Learning}
                color1={"#e0ffdf"}
                color2={"rgb(218, 255, 0)"}
                />
            </div>
            <GuideLineSection data={guideLinesSectionData} />
            <FAQ color1={"#434701"} color2={"#ACCFAA"} data={faqsTeenybeans} />
            <Footer page="TEENYBEANS" />
        </Provider>
    </>
  );
}

export default TeenyBeans;
