import BannerProduct from "../BannerProduct/BannerProduct";
import ProductCapabilities from "../ProductCapabilities/ProductCapabilities";
import ProductPlatform from "../ProductPlatform/ProductPlatform";
import FAQ from "../FAQ/FAQ";
import Footer from "../Footer/Footer";
import { platformFaqs } from "../data/faqs";
import VerticalAutoCarousel from "../VerticalAutoCarousel/VerticalAutoCarousel";
import style from "./Product.module.css";
import InteractionTabs from "../InteractionTabs/InteractionTabs"; 
import ContentWrapper from "../ContentWrapper/ContentWrapper";
import { store } from "../redux/store";
import { Provider } from "react-redux";
export default function Product() {
  window.scrollTo({ top: 0, behavior: "instant" });

  const support = [
    {
      title: "Smart Curriculum Planning",
      description:
        "With AI algorithms, aKadmy suggests personalised learning paths, making curriculum planning effective and smarter.",
    },
    {
      title: "Efficient Classroom Administration",
      description:
        "aKadmy preschool management software uses AI to handle administrative tasks, giving teachers more time to focus on teaching and student development.",
    },
    {
      title: "Real-time Performance Monitoring",
      description:
        "aKadmy uses AI to continuously monitor student performance and offer real-time updates, allowing for immediate adjustments to support student success.",
    },
  ];
  return (
    <>
    <Provider store={store}>
      <BannerProduct />
      <ProductCapabilities />
      <ProductPlatform />
      <div style={{ background: "#DEF0FD", marginTop: "100px" }}>
        <img
          src="/assets/cloud_blue.webp"
          width={"100%"}
          className={style.cloud_img}
        />
        <div style={{ textAlign: "center" }}>
          <h2 style={{ color: "#0348A8" }}>
            What Makes aKadmy the Top Kindergarten Management Solution?
          </h2>
          <p>
            It's the power of AI, transforming everything from streamlining
            tasks to enhancing learning experiences.
          </p>
        </div>
        <VerticalAutoCarousel />
        <div style={{ textAlign: "center", marginTop: "60px" }}>
          <h2 style={{ color: "#0348A8" }}>
            Say Hello to Your Learning Buddy – aKadmy Sprite!
          </h2>
          <p
            style={{
              maxWidth: "660px",
              padding: "0px 40px",
              margin: "0px auto",
            }}
          >
            Make each lesson engaging and enjoyable with aKadmy Sprite. Select
            your perfect match and unlock a world of interactive learning!
          </p>
        </div>
        <br />
        <InteractionTabs />
      </div>
      <ContentWrapper>
        <div style={{ textAlign: "center", margin: "100px 0px 0px 0px" }}>
          <h2 style={{ color: "#0348A8" }}>
            Powerful Tools for Transformative Learning
          </h2>
          <br />
          <div
            style={{
              display: "flex",
              flexWrap: "wrap",
              justifyContent: "space-between",
            }}
          >
            {support.map((item) => (
              <div className={style.card}>
                <h6 style={{ color: "#0348A8", marginBottom: "6px" }}>
                  {item.title}
                </h6>
                <p style={{ height: 110 }}>{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </ContentWrapper>
      <img src="/assets/product_curve.webp" width={"100%"} />
      <div className={style.curve}>
        <FAQ
          color1="#0348A8"
          color2={"#72B3FF"}
          data={platformFaqs}
          prefix={"Curious? Find Answers Here"}
        />
      </div>
      <Footer
        page="AKADEMY_B2C"
        title="Transform Early Education with aKadmy"
        description1="Empower teachers, engage parents, and watch little learners thrive with the power of AI in early education."
        description2="Create a foundation for lifelong success and growth."
        description3="Get Started Today!"
      />
    </Provider>
    </>
  );
}
