import React from "react";
import Header from "../Header/Header";
import ContentWrapper from "../ContentWrapper/ContentWrapper";
import FAQ from "../FAQ/FAQ";
import Footer from "../Footer/Footer";
import style from "./Toddlers.module.css";
import { faqsToddler } from "../data/faqs";
import GroupSection from "./GroupSection/GroupSection";
import { store } from "../redux/store";
import { Provider } from "react-redux";
const data = [
  { link: "https://amzn.in/d/aYTU5IR", img: "/assets/book_1.webp" },
  { link: "https://amzn.in/d/8U9C2T9", img: "/assets/book_2.webp" },
  { link: "https://amzn.in/d/gy6CZuf", img: "/assets/book_3.webp" },
  { link: "https://amzn.in/d/b8M6M1C", img: "/assets/book_4.webp" },
  { link: "https://amzn.in/d/3yh94Cn", img: "/assets/book_5.webp" },
  { link: "https://amzn.in/d/cWSTLjU", img: "/assets/book_6.webp" },
];

function Toddlers() {
  window.scrollTo({ top: 0, behavior: "instant" });
  return (
    <>
      <Provider store={store}>
        <section className={style.section1}>
          <div className={style.sprinkleGroup}>
            <div className={style.sprinkle1} />
            <div className={style.sprinkle2} />
            <div className={style.sprinkle3} />
            <div className={style.sprinkle4} />
            <div className={style.sprinkle5} />
            <div className={style.sprinkle6} />
            <div className={style.sprinkle7} />
            <div className={style.sprinkle8} />
          </div>
          <ContentWrapper>
            <Header theme="DARK" />
            <div className={style.section1__container}>
              <div className={style.section1__content}>
                <p className={style.section1__content__line1}>
                  Introducing the Mother Toddler Program
                </p>
                <h1 className={style.section1__content__line2}>
                  Inspiring Educators, Enriching Young Minds
                </h1>
                <p className={style.section1__content__line3}>
                  Discover the magic of our Mother Toddler Program, thoughtfully
                  designed to nurture the precious bond between toddlers and their
                  caregivers. Create cherished memories and foster holistic growth
                  through engaging activities, meaningful connections and joyful
                  learning experiences.
                </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__right__bg}>
              <img src="/assets/bg-curve-1.png" />
            </div>
            <div className={style.section2__left__bg}>
              <img src="/assets/Polygon.png" />
            </div>
            <div className={style.section2__center__bg}>
              <img src="/assets/bg-curve-2.png" />
            </div>
            <div className={style.section2__container}>
              <div className={style.section2__content}>
                <p className={style.section2__content__line1}>
                  Create a Strong Foundation
                </p>
                <h2 className={style.section2__content__line2}>
                  7 Essential Mother Toddler Program Curriculum Units
                </h2>
                <p className={style.section2__content__line3}>
                  30+ days of interactive Mother toddler Program age-appropriate
                  activities in each curriculum unit.
                </p>
                <p className={style.section2__content__line3}>
                  Flexibility to progress at your convenience.
                </p>
              </div>
              <div className={style.section2__carousel}>
                <GroupSection />
              </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}>
                  Why kids grow with interaKto
                </p> */}
                <h2 className={style.section3__content__line2}>
                  Transforming Mother Toddler Program Curriculum into Learning
                  Plans
                </h2>
                <p className={style.section3__content__line3}>
                  Each curriculum unit suggests a range of books and activities
                  for every day.
                </p>
                <p className={style.section3__content__line4}>
                  These plans include detailed book summaries and conversation
                  prompts to guide meaningful discussions with children. Each unit
                  also includes descriptions and a materials list for other
                  activities.
                </p>
                <div className={style.section3__content_2}></div>
              </div>
            </div>
          </ContentWrapper>
          <div className={style.marquee_container}>
            <div className={style.marquee}>
              <div className={style.marquee__content1}>
                {data.map((item) => (
                  <div className={style.marquee__box}>
                    <a href={item.link} target="_blank">
                      <img
                        src={item.img}
                        width={"100%"}
                        alt="Mother-Toddler Program | aKadmy - Engaging Early Childhood Learning"
                      />
                    </a>
                  </div>
                ))}
              </div>

              <div className={style.marquee__content2}>
                {data.map((item) => (
                  <div className={style.marquee__box}>
                    <a href={item.link} target="_blank">
                      <img
                        src={item.img}
                        width={"100%"}
                        alt="Mother-Toddler Program | aKadmy - Engaging Early Childhood Learning"
                      />
                    </a>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className={style.section4}>
          <ContentWrapper>
            <div className={style.section4__container}>
              <div className={style.section4__circle_container}>
                <div className={`${style.circle} ${style.circle1}`}>
                  LANGUAGE, VOCABULARY <br /> AND LITERACY DEVELOPMENT
                </div>
                <div className={`${style.circle} ${style.circle2}`}>
                  MATHEMATICAL <br />
                  DEVELOPMENT
                </div>
                <div className={`${style.circle} ${style.circle3}`}>
                  PHYSICAL <br /> DEVELOPMENT
                </div>
                <div className={`${style.circle} ${style.circle4}`}>
                  SELF-HELP <br /> DEVELOPMENT
                </div>
                <div className={`${style.circle} ${style.circle5}`}>
                  SOCIAL-EMOTIONAL <br /> DEVELOPMENT
                </div>
                <div className={`${style.circle} ${style.circle6}`}>
                  SCIENTIFIC DEVELOPMENT
                </div>
              </div>
              <div className={style.section4__content}>
                <h2 className={style.section4__content__line1}>
                  Observational Checklist
                </h2>
                <p className={style.section4__content__line2}>
                  Designed to support educators to track and evaluate a child’s
                  behaviour and development throughout activities, providing
                  insights into their progress and areas of development.
                </p>
                <div className={style.section4__content_2}></div>
              </div>
            </div>
          </ContentWrapper>
        </section>

        <FAQ
          color1={"#ED7BA5"}
          color2={"rgb(209 140 168)"}
          data={faqsToddler}
          prefix="Find Your Answers"
        />
        <Footer
          page="TODDLERS"
          title={"Empower the Next Generation with aKadmy"}
          description1={
            "Discover a world of possibilities in Early Education powered by AI."
          }
          description2={
            "Enable educators, strengthen parent connections, and help little learners thrive in their preschool years."
          }
          description3={"Reach out to us now!"}
        />
      </Provider>
    </>
  );
}

export default Toddlers;
