import React from "react";
import FAQ from "../FAQ/FAQ";
import Footer from "../Footer/Footer";
import PhotoFlipCarousel from "../Carousel/PhotoFlipCarousel/PhotoFlipCarousel";
import { faqsInterakto_coding } from "../data/faqs";
import ScrollToTop from "../ScrollToTop/ScrollToTop";
import IntraktoCodingBanner from "../IntraktoCodingBanner/IntraktoCoding";
import ContentWrapper from "../../components/ContentWrapper/ContentWrapper";
import style from "./IntraktoCoding.module.css";
import { interaktoWorksheets } from "../data/photoFileData";
import TestimonialCarousal from "../../components/TestimonialCarousal/TestimonialCarousal";
import { interaktoCodingTestimonial } from "../data/pageContent";
import { store } from "../redux/store";
import { Provider } from "react-redux";
const codingPreschoolers = [
  {
    img: "/assets/Curriculum_1.png",
    title: "Interactive Learning",
    description:
      "Engage with digital tools that bring stories and characters to life.",
  },
  {
    img: "/assets/Curriculum_2.png",
    title: "Project-Based Learning",
    description:
      "Create personalized projects that reinforce each lesson's objectives",
  },
  {
    img: "/assets/Curriculum_3.png",
    title: "Step Wise Instruction",
    description:
      "Simple, clear instructions that even the youngest learners can follow",
  },
];

const skills = [
  {
    title: "Problem-Solving",
    description: "Learn how to break down complex tasks into manageable steps.",
  },
  {
    title: "Creativity",
    description: "Design and build unique projects from scratch.",
  },
  {
    title: "Collaboration",
    description:
      "Work together on group projects, learning to communicate and share ideas.",
  },
  {
    title: "Confidence",
    description:
      "Celebrate successes and learn from mistakes in a supportive environment.",
  },
];

const setUp = [
  {
    title: "Sign Up",
    description: "Click the 'Enroll Now' button and choose interaKto Coding.",
  },
  {
    title: "Choose Your Program",
    description: "Select the best Plan according to your needs.",
  },
  {
    title: "Start Learning",
    description: "Access our online platform and start the first lesson today.",
  },
];

function IntraktoCoding() {
  return (
    <>
      <Provider store={store}>
        <ScrollToTop />
        <IntraktoCodingBanner />
        <ContentWrapper>
          <div className={`${style.flex}`}>
            <div className={`${style.flex_1} ${style.mt}`}>
              <h4 className={style.primary_color}>
                Why Coding for Preschoolers?
              </h4>
              <p>
                We believe that learning should start early. With interaKto you
                can introduce young children to the basics of coding. It engages
                children through playful and engaging activities. Children as
                young as 4 years old can create their own stories, games, and
                animations using the simple-to-use ScratchJr interface. . And as
                it is a visual programming language, when children design all
                the while developing crucial problem-solving skills and logical
                thinking. Coding is all about learning to think creatively and
                work collaboratively.
              </p>
            </div>
            <div className={style.flex_1} style={{ margin: "auto 0px" }}>
              <img
                src="/assets/children.webp"
                width={"100%"}
                alt="Child Using Interakto Coding Worksheet"
              />
            </div>
          </div>
        </ContentWrapper>
        <div style={{ background: "#F1F2FF", marginTop: "100px" }}>
          <img
            src="/assets/Cloud.webp"
            width={"100%"}
            className={style.cloud_img}
          />
          <ContentWrapper>
            <div className={`${style.primary_color} ${style.text_center}`}>
              <p>Our Coding Curriculum</p>
              <h4>Why have a Coding Curriculum for Preschoolers?</h4>
              <p className={style.secondary_color}>
                Our block-based programming approach, using ScratchJr ,
                introduces coding as another language . With Scratch Children
                learn how to write commands , create loops, and understand
                programming language from basic. Each lesson is designed so that
                completing it and moving on to the next level makes your child
                feel a sense of achievement at every step.
              </p>
              <div className={style.flex}>
                {codingPreschoolers.map((item) => (
                  <div className={style.preschoolCard}>
                    <img src={item.img} />
                    <h4>{item.title}</h4>
                    <p>{item.description}</p>
                  </div>
                ))}
              </div>
            </div>
            <div className={`${style.flex}`}>
              <div className={`${style.flex_1} ${style.mt} ${style.order_1}`}>
                <h4 className={style.primary_color}>
                  The MIT-Based Curriculum
                </h4>
                <p>
                  interaKto Coding was established by the internationally
                  recognized Media Labs at MIT (Massachusetts Institute of
                  Technology), a leader in computer science and technology. Our
                  program is successful and scientifically proven since it is
                  based on the most recent research in early childhood coding
                  education.
                </p>
                <br />
                <a href={"/pricing/akadmy-product-pricing"}>
                  <button className={style.btn}>
                    Get Started &nbsp; <i class="fa fa-arrow-right" />
                  </button>
                </a>
              </div>
              <div
                className={`${style.flex_1} ${style.order_2}`}
                style={{ margin: "auto 0px" }}
              >
                <img
                  src="/assets/MIT-Based.webp"
                  width={"100%"}
                  alt="Child Using Interakto Coding Worksheet"
                />
              </div>
            </div>
            <div className={`${style.flex}`}>
              <div className={style.flex_1} style={{ margin: "auto 0px" }}>
                <img
                  src="/assets/Jr-Interface.webp"
                  width={"100%"}
                  alt="Child Using Interakto Coding Worksheet"
                />
              </div>
              <div className={`${style.flex_1} ${style.mt}`}>
                <h4 className={style.primary_color}>Scratch Jr Interface</h4>
                <p>
                  We use the Scratch Jr interface to make our curriculum
                  accessible to young learners associated with our Teeny Beans
                  partner centers around the world . Young children can learn
                  about coding ideas and hone their problem-solving abilities in
                  an engaging and dynamic manner by using the Scratch Jr.
                  platform.
                </p>
                <br />
                <a href={"/pricing/akadmy-product-pricing"}>
                  <button className={style.btn}>
                    Get Started &nbsp; <i class="fa fa-arrow-right" />
                  </button>
                </a>
              </div>
            </div>
          </ContentWrapper>

          <div
            style={{
              textAlign: "center",
              backgroundImage:
                "linear-gradient(to right, #b39bf5, #a1b5ee, #97c4ea)",
              paddingTop: "60px",
              color: "white",
              paddingBottom: "360px",
              marginTop: "80px",
              position: "relative",
              marginBottom: "200px",
            }}
          >
            <ContentWrapper>
              <h4>Benefits of Coding Early</h4>
              <p>
                Learning to code at an early age has numerous benefits beyond
                just computer literacy. Our program helps children develop
                essential life skills such as:
              </p>
              <div className={style.flex}>
                {skills.map((item) => (
                  <div className={style.skills_card}>
                    <h4 className={style.primary_color}>{item.title}</h4>
                    <p className={style.secondary_color}>{item.description}</p>
                  </div>
                ))}
              </div>
              <div style={{ marginBottom: "-300px" }}>
                <img
                  src="/assets/on_cloud.webp"
                  width={"300px"}
                  alt="Teacher Managing Interakto Coding Tools on aKadmy"
                />
              </div>
            </ContentWrapper>
            <div className={style.bottom_cloud}>
              <img
                src="/assets/cloud_bg.svg"
                width={"100%"}
                alt="Teacher Managing Interakto Coding Tools on aKadmy"
              />
            </div>
          </div>
        </div>

        <section className={style.section4}>
          <ContentWrapper>
            <div className={style.section4__content}>
              <div className={style.section4__content_1}>
                <p
                  className={`${style.section4__content__1_line1} ${style.primary_color}`}
                >
                  Success Stories
                </p>
                <h2
                  className={`${style.section4__content__1_line2}  ${style.primary_color}`}
                >
                  See What Our Students Have Created
                </h2>
                <p className={style.secondary_color}>
                  From their first animated story to more complex projects, our
                  students are achieving amazing things. Here are just a few
                  examples of what your child can accomplish with interaKto
                  Coding.
                </p>
                <br />
              </div>
              <div className={style.section4__content_2}>
                <video
                  width={"100%"}
                  height="auto"
                  poster="/assets/community_helper.webp"
                  controls
                  controlsList="nodownload"
                >
                  <source
                    src={
                      "https://bscdn.sgp1.digitaloceanspaces.com/school_owner/videos/02/InteraktoProj13ComHelpers.mp4"
                    }
                    type="video/mp4"
                  />
                </video>
              </div>
            </div>
          </ContentWrapper>
        </section>

        <section
          style={{
            backgroundColor: "#F1F2FF",
            textAlign: "center",
            padding: "30px 0px",
            margin: "100px 0px",
            width: "100%",
          }}
        >
          <ContentWrapper>
            <p className={style.primary_color}> How to Get Started</p>
            <h2 className={style.primary_color}>Ready to Begin? Here's How</h2>
            <p className={style.seconadry_color}>
              Enrolling in interaKto Coding is easy. Follow these simple steps
              to start your child’s coding journey:
            </p>
            <a href={"/pricing/akadmy-product-pricing"}>
              <button
                style={{
                  background: "#001F48",
                  color: "white",
                  borderRadius: "10px",
                  marginTop: "20px",
                }}
              >
                Get Started &nbsp; <i class="fa fa-arrow-right" />
              </button>
            </a>
            <div className={style.flex}>
              {setUp.map((item, index) => (
                <div
                  style={{
                    width: "300px",
                    background: "white",
                    height: "300px",
                    margin: "0 auto",
                    border: "1px solid #0476BB80",
                    borderRadius: "10px",
                    marginBottom: "30px",
                  }}
                >
                  <div
                    style={{
                      width: "200px",
                      marginLeft: "-40px",
                      backgroundImage:
                        "linear-gradient(to right, #b39bf5, #a1b5ee, #97c4ea)",
                      marginTop: "30px",
                      display: "flex",
                      color: "white",
                    }}
                  >
                    <h4 style={{ marginTop: "18px", marginLeft: "60px" }}>
                      Step {index + 1}
                    </h4>
                    <div className={style.triangle_right}></div>
                  </div>
                  <div className={style.triangle_topright} />
                  <h4 className={style.primary_color}>{item.title}</h4>
                  <p>{item.description}</p>
                </div>
              ))}
            </div>
          </ContentWrapper>
        </section>

        <FAQ
          color1={"#001F48"}
          color2={"#72B3FF"}
          data={faqsInterakto_coding}
        />
        <section className={style.section6}>
          <ContentWrapper>
            <div className={style.section6__content}>
              <div className={style.section6__content_left}>
                <p className={`{style.line1} ${style.primary_color}`}>
                  Testimonials
                </p>
                <h2 className={`${style.line2} ${style.primary_color}`}>
                  Hear From Happy Parents
                  <br /> and Educators
                </h2>
                <br />
                <p className={style.secondary_color}>
                  Don't just take our word for it—see what others
                  <br /> are saying about the impact of interaKto Coding
                  <br /> on their children.
                </p>
              </div>
              <div className={style.section6__content_right}>
                <TestimonialCarousal data={interaktoCodingTestimonial} />
              </div>
            </div>
          </ContentWrapper>
        </section>
        <Footer page="INTERAKTO_COADING" contact={true} />
      </Provider>
    </>
  );
}

export default IntraktoCoding;