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>
                <p
                  data-aos="fade-left"
                  data-aos-duration={1500}
                  data-aos-offset={50}>
                  We’re always happy to connect with you at Shiva Sakthi Restaurant. Conveniently located in a prime and easily accessible area, our restaurant welcomes guests who are looking for fresh, authentic South Indian meals served with care. Whether you want to make a reservation, check our menu, place a takeaway order, or inquire about catering services, our team is ready to assist you. Visitors can reach us by phone, email, or through the contact form on this page. We aim to respond quickly to all inquiries and ensure every guest enjoys a smooth experience. Drop by, get in touch, or simply say hello—we look forward to serving you.


                </p>
              </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:+19056773555">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;