import Header from "../Header/Header";
import ContentWrapper from "../ContentWrapper/ContentWrapper";
import style from "./BannerLearningSolutions.module.css";

const Card = ({ data }) => {
  return (
    <div className={style.banner_img_align}>
      <h6
        style={{
          color: "#310B8E",
          maxWidth: "400px",
          textAlign: "center",
          margin: "20px auto 6px auto",
        }}
      >
        {data.content}
      </h6>
      <p style={{ color: "#2E0590" }}>{data.subcontent}</p>
      <a href={"/pricing/akadmy-product-pricing"}>
        <button
          style={{
            background: "#7B3EFF",
            color: "white",
            borderRadius: "10px",
            marginTop: "16px",
          }}
        >
          View Plan &nbsp;
          <i class="fa fa-arrow-right" />
        </button>
      </a>
    </div>
  );
};

export default function BannerLearningSolutionTab({
  toggleState,
  setToggleState,
}) {
  const toggleTab = (index) => {
    setToggleState(index);
  };

  const getActiveClass = (index, className) =>
    toggleState === index ? className : style.tab;
  return (
    <>
      <div className="content-container">
        <div className={style.header}>
          <ContentWrapper>
            <Header color={"white"} />
          </ContentWrapper>
        </div>

        {toggleState === 1 ? (
          <>
            <div className={style.image_box}></div>
            <div
              style={{
                backgroundImage: `url("./assets/wave.webp")`,
                width: "100%",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover",
                backgroundPosition: "center",
                position: "relative",
              }}
              className={style.banner_wave1}
            >
              <div
                style={{
                  position: "absolute",
                  top: "5%",
                  left: "50%",
                  transform: "translate(-50%, -50%)",
                  color: "#DFE6FF",
                  textAlign: "center",
                }}
              >
                <p style={{ marginBottom: "10px" }}>
                  Learning Solutions for Schools
                </p>
                <h2
                  style={{
                    textAlign: "center",
                    maxWidth: "430px",
                    margin: "0 auto",
                  }}
                >
                  Enjoy all platform benefits as a Tutor or as a School
                  Administrator.
                </h2>
                <ul className={style.tab_list} style={{ marginTop: "20px" }}>
                  <li
                    className={getActiveClass(1, style.active_content)}
                    onClick={() => toggleTab(1)}
                  >
                    <img src="./assets/menu_book.png" />
                    FOR SCHOOL
                  </li>
                  <li
                    className={getActiveClass(2, style.active_content)}
                    onClick={() => toggleTab(2)}
                  >
                    <img src="./assets/audio_file.png" />
                    FOR TUTORS
                  </li>
                </ul>
                <Card
                  data={{
                    content:
                      "Classroom Management and Teaching made easy with our ever so powerful tools",
                    subcontent: "",
                  }}
                />
              </div>
            </div>
            <div className={style.mainBottom1} />
          </>
        ) : (
          <>
            <div className={style.image_box}></div>
            <div
              style={{
                backgroundImage: `url("./assets/wave-2.webp")`,
                width: "100%",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover",
                backgroundPosition: "center",
                position: "relative",
              }}
              className={style.banner_wave2}
            >
              <div
                style={{
                  position: "absolute",
                  top: "38%",
                  left: "50%",
                  transform: "translate(-50%, -50%)",
                  color: "#DFE6FF",
                  textAlign: "center",
                }}
              >
                <p style={{ marginBottom: "10px" }}>
                  Learning Solutions for all businesses
                </p>
                <h2
                  style={{
                    textAlign: "center",
                    maxWidth: "430px",
                    margin: "0 auto",
                  }}
                >
                  Enjoy all platform benefits as a Tutor or as a School
                  Administrator.
                </h2>
                <ul className={style.tab_list} style={{ marginTop: "36px" }}>
                  <li
                    className={getActiveClass(1, style.active_content)}
                    onClick={() => toggleTab(1)}
                  >
                    <img src="./assets/menu_book-blue.png" />
                    FOR SCHOOL
                  </li>
                  <li
                    className={getActiveClass(2, style.active_content)}
                    onClick={() => toggleTab(2)}
                  >
                    <img src="./assets/audio-book-white.png" />
                    FOR TUTORS
                  </li>
                </ul>
                <Card
                  data={{
                    content:
                      "Find innovative resources at your fingertips, so you can deliver effective lessons especially tailored for your students",
                    subcontent:
                      "** Tutors can take a subscription per class with free student access for 5 students.",
                  }}
                />
              </div>
            </div>
          </>
        )}
      </div>
    </>
  );
}
