import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import ScrollToTop from "@/components/ScrollToTop";
import HeroBanner from "@/components/HeroBanner";
import ContactForm from "@/components/ContactForm";
import { FaPhone, FaEnvelope, FaMapMarkerAlt } from "react-icons/fa";
import "./contact.css";

export default function ContactPage() {
  return (
    <>
      <Navbar />

      <main>
        <HeroBanner 
          title="Contact Us" 
          bgImage="/images/hero-dosa.png" 
        />

        <section className="contact-section">
          <div className="container contact-wrapper">

            {/* Left Column: Info Cards & Map */}
            <div className="contact-left">
              <div className="contact-cards">
                <div className="contact-card">
                  <FaPhone className="card-icon" />
                  <h4>Phone</h4>
                  <p>+1 (519) 888-7459</p>
                </div>
                <div className="contact-card">
                  <FaEnvelope className="card-icon" />
                  <h4>Email</h4>
                  <p>mydosaplacewaterloo@gmail.com</p>
                </div>
                <div className="contact-card">
                  <FaMapMarkerAlt className="card-icon" />
                  <h4>Our Shop</h4>
                  <p>922 Erb St. W Unit C3#3,<br/>Waterloo, ON N2T 0C9</p>
                </div>
              </div>

              <div className="contact-map">
                <iframe
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2896.800884029152!2d-80.5796577!3d43.4438744!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882bf755b6dfbef5%3A0x21184d424ab8bf6f!2sMy%20Dosa%20Place%20(%20South%20Indian%20Pure%20VEG)!5e0!3m2!1sen!2sin!4v1781081116425!5m2!1sen!2sin"
                  style={{ border: 0 }}
                  allowFullScreen=""
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                  title="Google Maps"
                ></iframe>
              </div>
            </div>

            {/* Right Column: Contact Form */}
            <div className="contact-right">
              <span className="contact-eyebrow">Contact Us</span>
              <h2>Get In <em>Touch</em></h2>
              <p className="contact-subtitle">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, 
                luctus nec ullamcorper mattis, pulvinar dapibus leo.
              </p>

              <ContactForm />
            </div>

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

      <Footer />
      <ScrollToTop />
    </>
  );
}