import { Box } from "@mui/material";
import ContentWrapper from "../../components/ContentWrapper/ContentWrapper";
import Footer from "../../components/Footer/Footer";
import Header from "../../components/Header/Header";
import ThreeFormFields from "../../components/form/ThreeFormFields";
import style from "./index.module.css";
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import LocationOnIcon from "@mui/icons-material/LocationOn";
import FAQ from "../../components/FAQ/FAQ";
import { conatctFaqs } from "../../components/data/faqs";
import { Provider } from "react-redux";
import { store } from "../redux/store";

export default function Index() {
  window.scrollTo({ top: 0, behavior: "instant" });
  return (
    <Provider store={store}>
      <section className={style.section}>
        <ContentWrapper>
          <Header color={"#015C9F"} />
          <div className={style.box}>
            <h1>
              We’d Love to Hear From You!
              <br /> Contact Us
            </h1>
            <p>
              Whether you have a question about our services, need assistance,
              or just want to share your
              <br /> thoughts, we’re here to listen.
            </p>
          </div>
        </ContentWrapper>
      </section>
      <ContentWrapper>
        {" "}
        <div className={`${style.flex}`}>
          <div className={`${style.flex_1} ${style.mt}`}>
            <h4>Contact Information</h4>
            <p>
              Fill up the form and our team will get back to you within
              <br /> 24 hours.
              <br />
              <EmailOutlinedIcon fontSize="small" />
              &nbsp; Email: hello@akadmyapp.com
            </p>
            <br />
          </div>
          <div className={style.flex_1}>
            <Box boxShadow={1} maxWidth={400} ml={"auto"} p={4}>
              <b>Get in Touch</b>
              <p>You can reach us anytime</p>
              <ThreeFormFields formName="Contact" />
            </Box>
          </div>
        </div>
        <br />
        <br />
        <div className={`${style.flex}`}>
          <div className={`${style.flex_1}`}>
            <div>
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d3984.090385602562!2d101.690635!3d3.070521!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zM8KwMDQnMTMuOSJOIDEwMcKwNDEnMjYuMyJF!5e0!3m2!1sen!2sin!4v1725867001750!5m2!1sen!2sin"
                className={style.iframe_width}
                loading="lazy"
              />
            </div>
          </div>
          <div className={`${style.flex_1}`} style={{ marginTop: "auto" }}>
            <br />
            <h4>Our Location</h4>
            <p style={{ maxWidth: 400 }}>
              Come visit us! Use the map below to easily find our location.
              Whether you're planning a visit or just need directions, the map
              will guide you right to our doorstep.
              <div style={{ display: "flex", marginTop: "6px" }}>
                <div>
                  <LocationOnIcon sx={{ mt: 6 }} />
                </div>
                &nbsp;&nbsp;&nbsp;
                <div>
                  Address: Buzzapp Technologies Sdn Bhd,
                  <br /> 38, 3rd Floor, Jalan Radin Anum,
                  <br /> Bandar Baru Sri Petaling,
                  <br /> Kuala Lumpur, Wilayah Persekutuan, 57000
                  <br /> Malaysia
                </div>
              </div>
            </p>
            <br />
            <br />
          </div>
        </div>
      </ContentWrapper>
      <FAQ color1="#0348A8" color2={"#72B3FF"} data={conatctFaqs} />
      <br />
      <br />
      <br />
      <br />
      <br />
      <Footer page="AKADEMY_B2C" contact={true} />
    </Provider>
  );
}
