import Layout from "@/components/layout/Layout";
import ContactForm from "./ContactForm";

export const metadata = {
    title: "Contact Sixty5 Street – Get in Touch with Us",
    description: "Have questions or crave something special? Reach out to Sixty5 Street. We’re here for you with fresh street-food passion. Let’s talk wings, wraps and more.",
}

export default function Contact() {
  return (
    <Layout
      headerStyle={2}
      footerStyle={2}
      breadcrumbTitle="Contact Us"
      bgImage="/assets/images/inner-banner/contact-us-banner.webp"
    >
      {/* Contact Section */}
      <section className="contact-section" id="contact">
        <div className="auto-container">
          <div className="row clearfix">

            {/* Left Column - Info */}
            <div className="title-column col-lg-5 col-md-12 col-sm-12">
              <div className="inner-column">
                <div className="sec-title">
                  <div className="title custome-style">Reach us</div>
                  <h2>Contact</h2>
                  <div className="separate"></div>
                  <div className="text">
                    Whether you're grabbing lunch, chilling with friends, or fueling a late-night craving, we've got something hot, hearty, and delicious waiting for you.
                  </div>
                </div>

                <ul className="info-list">
                  <li>
                    <span className="icon flaticon-telephone"></span>
                    <strong>Phone</strong>
                    <a href="tel:+289-498-6565">+ 289-498-6565</a>
                  </li>
                  <li>
                    <span className="icon flaticon-pin"></span>
                    <strong>Address</strong>
                    <a href="#">Unit 75, 100 Maritime Ontario Blvd, Brampton, ON L6S 0E7</a>
                  </li>
                </ul>
              </div>
            </div>

            {/* Right Column - Form */}
            <div className="form-column col-lg-7 col-md-12 col-sm-12">
              <div className="inner-column">
                <ContactForm />
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* Google Map */}
      <section className="contact-map-section">
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2888.8200521592764!2d-79.6977294!3d43.749255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b3dbb0e18ed73%3A0xbdb3783d6e6393c9!2s100%20Maritime%20Ontario%20Blvd%20%2375%2C%20Brampton%2C%20ON%20L6S%200E7%2C%20Canada!5e0!3m2!1sen!2sus!4v170995882xxx"
          allowFullScreen
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
        ></iframe>
      </section>
    </Layout>
  );
}