import Layout from "@/components/layout/Layout";
import Link from "next/link";

export default function Contact() {
    return (
        <>
            <section className="contact-map-section">
                {/*-============spacing==========-*/}
                <div className="pd_top_90" />
                {/*-============spacing==========-*/}
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12">
                            <div className="section_title text-center type_five">
                                <h4 className="sm_title">Areas we serve</h4>
                                <div className="title_whole">
                                    <h2 className="title">Serving Cities Across Ontario</h2>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/*-============spacing==========-*/}
                    <div className="pd_bottom_40" />
                    {/*-============spacing==========-*/}

                    <div className="row">
                        {/* Greater Toronto Area */}
                        <div className="col-lg-4 col-md-6 col-sm-12 mb-4">
                            <section className="map-section text-center">
                                <div className="map-outer">
                                    <iframe
                                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28910.8478211405!2d-79.4756152!3d43.653226!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b34d7c3a8f7a7%3A0x6e7dff2c5e2f7f11!2sToronto%2C%20ON%2C%20Canada!5e0!3m2!1sen!2sca!4v1678975266976!5m2!1sen!2sca"
                                        height={300}
                                        style={{ border: 0, width: "100%" }}
                                        allowFullScreen
                                        loading="lazy"
                                        referrerPolicy="no-referrer-when-downgrade"
                                    />
                                </div>
                                <h5 className="location-name mt-3">Greater Toronto Area</h5>
                            </section>
                        </div>

                        {/* Greater Hamilton Area */}
                        <div className="col-lg-4 col-md-6 col-sm-12 mb-4">
                            <section className="map-section text-center">
                                <div className="map-outer">
                                    <iframe
                                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28932.7767939088!2d-79.8916582!3d43.2557206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882c99a40aa9b15f%3A0xa13b3b3b3b3b3b3!2sHamilton%2C%20ON%2C%20Canada!5e0!3m2!1sen!2sca!4v1678975266977!5m2!1sen!2sca"
                                        height={300}
                                        style={{ border: 0, width: "100%" }}
                                        allowFullScreen
                                        loading="lazy"
                                        referrerPolicy="no-referrer-when-downgrade"
                                    />
                                </div>
                                <h5 className="location-name mt-3">Greater Hamilton Area</h5>
                            </section>
                        </div>

                        {/* Kitchener-Waterloo-Cambridge Area */}
                        <div className="col-lg-4 col-md-6 col-sm-12 mb-4">
                            <section className="map-section text-center">
                                <div className="map-outer">
                                    <iframe
                                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28940.53596836324!2d-80.4829871!3d43.4516395!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882bf3b3b3b3b3b3%3A0x3b3b3b3b3b3b3b3!2sKitchener%2C%20ON%2C%20Canada!5e0!3m2!1sen!2sca!4v1678975266978!5m2!1sen!2sca"
                                        height={300}
                                        style={{ border: 0, width: "100%" }}
                                        allowFullScreen
                                        loading="lazy"
                                        referrerPolicy="no-referrer-when-downgrade"
                                    />
                                </div>
                                <h5 className="location-name mt-3">Kitchener-Waterloo-Cambridge Area</h5>
                            </section>
                        </div>
                    </div>
                </div>

                {/*-============spacing==========-*/}
                <div className="pd_bottom_90" />
                {/*-============spacing==========-*/}
            </section>

            <style jsx>{`
                .location-name {
                    font-size: 18px;
                    font-weight: 600;
                    color: #222;
                }

                @media (max-width: 992px) {
                    .map-section iframe {
                        height: 250px;
                    }
                }

                @media (max-width: 576px) {
                    .map-section iframe {
                        height: 220px;
                    }
                    .location-name {
                        font-size: 16px;
                    }
                }
            `}</style>
        </>
    );
}