import React from "react";
import style from "./Footer.module.css";
import { InteraktoCoding } from "../data/pageContent";
import ContentWrapper from "../ContentWrapper/ContentWrapper";
import InteraktoExtentions from "../InteraktoExtentions/InteraktoExtentions";
import Calendly from "../Calendly/Calendly";

function Footer({
  page,
  contact,
  title,
  description1,
  description2,
  description3,
}) {
  return (
    <div
      style={{ position: "relative" }}
      className={`${
        page === "INTERAKTO_CODING"
          ? style.interakto_coding
          : page === "TEENYBEANS"
          ? style.teenybeans
          : page === "INTERAKTO"
          ? style.interakto
          : page === "TODDLERS"
          ? style.toddlers
          : page === "SUBSCRIPTION_PLANS"
          ? style.subscription_plans
          : page === "AKADEMY_B2C"
          ? style.akademy_B2C
          : page === "AKADEMY_B2B"
          ? style.akademy_B2B
          : page === "AKADEM_PRICING"
          ? style.akademy_PRICING
          : page === "INTERAKTO_COADING"
          ? style.akademy_CODING
          : style.default
      } `}
    >
      <div className={page === "INTERAKTO" ? style.mb_form : null}>
        <div className={style.contact_section}>
          {contact ? null : (
            <ContentWrapper>
              <div className={style.contact_box}>
                <div className={style.content_left}>
                  <p className={style.line1}>
                    {title
                      ? title
                      : "Discover Endless Possibilities with aKadmy"}
                  </p>
                  <p className={style.line3}>
                    {description1 ? description1 : ""}
                    Unlock limitless prospects in Early Education by leveraging
                    the power of AI.
                    <br />{" "}
                    {description2
                      ? description2
                      : "Empower educators, connect with parents, and see little learners thrive during their preschool years."}
                  </p>
                  <p
                    style={{
                      fontWeight: 600,
                      color: "white",
                      opacity: 0.8,
                      margin: "20px 0",
                    }}
                  >
                    {description3 ? description3 : "Contact Us Now!"}
                  </p>
                  <Calendly
                    style={{
                      background:
                        page === "TEENYBEANS"
                          ? "#00634B"
                          : page === "INTERAKTO"
                          ? "#0D2227"
                          : page === "TODDLERS"
                          ? "#7f621f"
                          : page === "AKADEMY_B2B"
                          ? "#7B3EFF"
                          : page === "AKADEM_PRICING"
                          ? "#000000"
                          : "#02439D",
                    }}
                    btnName={
                      <span>
                        Book a Demo &nbsp;
                        <img src="/assets/white_right.png" width={"14px"} />
                      </span>
                    }
                  />
                  <br /> <br />
                </div>
                <div className={style.content_right}>
                  <img
                    src="/assets/contact.svg"
                    width={"100%"}
                    alt="Book a demo"
                  />
                </div>
              </div>
            </ContentWrapper>
          )}
        </div>
      </div>
      {page === "INTERAKTO" && (
        <>
          <div className={style.interakto_extentions_2}></div>
          <div className={style.interakto_extentions_1}>
            <InteraktoExtentions data={InteraktoCoding} />
          </div>
        </>
      )}
      {page === "TEENYBEANS" && (
        <section className={style.footer_top}>
          <ContentWrapper>
            <div className={style.footer_top__container}>
              <div className={style.footer_top__content}>
                <p className={style.footer_top__content__line1}>
                  Become A Partner
                </p>
                <h2 className={style.footer_top__content__line2}>
                  Know parents who can benefit from using our product? Become an{" "}
                  <span>Affiliate Parent Partner</span>
                </h2>
                <p className={style.footer_top__content__line3}>
                  Refer a parent and unlock partner benefits
                </p>
                <a href={"/contact-us"}>
                  <button className={style.footer_top__content_btn}>
                    Contact Us &nbsp;
                    <i
                      className="fa fa-chevron-right"
                      style={{ paddingRight: "10px" }}
                    />
                  </button>
                </a>
              </div>
            </div>
          </ContentWrapper>
        </section>
      )}

      <div className={style.footer}>
        {page === "TODDLERS" ? (
          <>
            <div className={style.icon1}></div>
            <div className={style.icon2}></div>
            <div className={style.icon3}></div>
            <div className={style.icon5}></div>
            <div className={style.icon6}></div>
          </>
        ) : null}
        <ContentWrapper>
          <div className={style.footer_content}>
            <div className={style.section_left}>
              <a href="/">
                <img
                  src={"/assets/akademy_Logo.png"}
                  width={80}
                  alt="aKadmy Logo"
                />
              </a>
              <p>Follow us</p>
              <div className={style.group}>
                <a href="https://www.facebook.com/get.aKadmy/" target="_blank">
                  Facebook
                </a>
                <a href="https://www.instagram.com/akadmyapp/" target="_blank">
                  Instagram
                </a>
                <a
                  href="https://www.linkedin.com/showcase/akadmyapp/"
                  target="_blank"
                >
                  Linkedin
                </a>
              </div>
              <p>© 2024 aKadmy</p>
            </div>

            <div className={style.section_right}>
              <div className={style.group}>
                <p>Products</p>
                <a href="/digital-preschool-curriculum">Teenybeans</a>
                <a href="/interactive-learning-resources-for-preschool">
                  InteraKto
                </a>
                <a href="/interakto-coding-worksheets">InteraKto Coding</a>
              </div>
              <div className={style.group}>
                <p>Legal</p>
                <a href="/term-and-conditions">Terms and Conditions</a>
                <a href="/"></a>
                {/* <a href="/"></a> */}
              </div>
              <div className={style.group}>
                <p>General</p>
                <a href="/about-us">About Us</a>
                <a href="/contact-us">Contact us </a>
                <a href="/pricing/akadmy-platform-pricing">Plans</a>
                <a href="/Blogs">Blogs</a>
              </div>
            </div>
          </div>
        </ContentWrapper>
      </div>
      <div className={style.footer_divider_2}></div>
      <div className={style.footer_divider}></div>
    </div>
  );
}

export default Footer;