import PageBanner from "@/components/PageBanner";
import WellFoodLayout from "@/layout/WellFoodLayout";
import ContactForm from "@/components/ContactForm";

export const metadata = {
  title: "Shiva Sakthi | Best South Indian Restaurant in Mississauga",
  description:
    "Get in touch with Shiva Sakthi, Mississauga’s top Indian restaurant. Call or visit us for dine-in, takeout, or catering. Located Airport Road Malton, Mississauga",
};

const page = () => {
  return (
    <WellFoodLayout>
      <PageBanner
        pageTitle={"Contact"}
        background="/assets/images/inner-banner/3.webp"
      />

      {/* === Contact Info Cards === */}
      <section className="contact-page-area pt-100 rpt-100 pb-60 rpb-30 rel z-1">
        <div className="container">
          <div className="row align-items-center">
            <div
              className="contact-page-content rmb-55"
              data-aos="fade-up"
              data-aos-duration={1500}
              data-aos-offset={50}
            >
              <div className="section-title mb-35 text-center">
                <span className="sub-title mb-10">contact us</span>
                <h2>Get In Touch With Us</h2>
              </div>

              {/* Cards Row with Spacing */}
              <div className="row gx-4 gy-4">
                <div className="col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center">
                  <div
                    className="contact-info-item bgc-black flex-fill p-4"
                    style={{
                      backgroundImage: "url(/assets/images/background/hero.jpg)",
                    }}
                  >
                    <div className="icon">
                      <i className="fal fa-phone" />
                    </div>
                    <div className="content">
                      <span className="title" style={{ fontWeight: "bold" }}>
                        Call Us
                      </span>
                      <p>
                        <a href="tel:9056773555">905 677 3555</a>
                      </p>
                    </div>
                  </div>
                </div>

                <div className="col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center">
                  <div
                    className="contact-info-item bgc-black flex-fill p-4"
                    style={{
                      backgroundImage: "url(/assets/images/background/hero.jpg)",
                    }}
                  >
                    <div className="icon">
                      <i className="fal fa-envelope-open" />
                    </div>
                    <div className="content">
                      <span className="title" style={{ fontWeight: "bold" }}>
                        Email Address
                      </span>
                      <p>
                        <a href="mailto:info@shivasakthi.ca">info@shivasakthi.ca</a>
                      </p>
                    </div>
                  </div>
                </div>

                <div className="col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center">
                  <div
                    className="contact-info-item bgc-black flex-fill p-4"
                    style={{
                      backgroundImage: "url(/assets/images/background/hero.jpg)",
                    }}
                  >
                    <div className="icon">
                      <i className="fal fa-map-marker-alt" />
                    </div>
                    <div className="content">
                      <span className="title" style={{ fontWeight: "bold" }}>
                        Location
                      </span>
                      <p>
                        7166 Airport Road, Mississauga, Ontario L4T 2H2, Canada.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* === Contact Form & Image (Equal Height) === */}
      <section className="contact-page-area rpt-40 pt-60 pb-60 rel z-1 bgc-black">
        <div className="container">
          <div className="row align-items-stretch no-gap">
            <div className="col-lg-6 d-flex">
              <div
                className="contact-page-content rmb-55 d-flex w-100"
                data-aos="fade-left"
                data-aos-duration={1500}
                data-aos-offset={50}
              >
                <div className="contact-info-wrap flex-fill">
                  <img
                    src="/assets/images/contact.webp"
                    alt="Contact ShivaSakthi"
                    loading="lazy"
                    style={{ width: "100%", height: "100%", objectFit: "cover" }}
                  />
                </div>
              </div>
            </div>
            <div
              className="col-lg-6 d-flex"
              data-aos="fade-right"
              data-aos-duration={1500}
              data-aos-offset={50}
            >
              <div className="flex-fill d-flex">
                <ContactForm />
              </div>
            </div>
          </div>
        </div>
        <div className="bg-lines">
          <span />
          <span />
          <span />
          <span />
        </div>
      </section>

      {/* === Google Map === */}
      <section className="contact-page-area pt-60">
        <div className="container-fluid">
          <div className="row align-items-center">
            <div
              className="our-location"
              data-aos="fade-up"
              data-aos-duration={1500}
              data-aos-offset={50}
            >
              {/* <iframe
              src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d96777.16150026117!2d-74.00840582560909!3d40.71171357405996!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sbd!4v1706508986625!5m2!1sen!2sbd"
              style={{ border: 0, width: "100%" }}
              allowFullScreen=""
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            /> */}
              <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d369174.37626170606!2d-79.647352!3d43.706916!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b3bfed533002b%3A0xe83c1cd7caca2ee6!2s7166%20Airport%20Rd%2C%20Mississauga%2C%20ON%20L4T%202H2%2C%20Canada!5e0!3m2!1sen!2sus!4v1748536731832!5m2!1sen!2sus" style={{ border: 0, width: "100%" }}
                allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
          </div>
        </div>
      </section>
    </WellFoodLayout>
  );
};
export default page;