import React from "react";

const MapSection = () => {
    return (
        <section className="map-area">
            <div className="container-fluid p-0">
                <div className="map-wrapper">
                    <iframe
                        title="Google Map"
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d158858.1106774136!2d-0.2416812035308924!3d51.5287718408761!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sin!4v1700000000000!5m2!1sen!2sin"
                        width="100%"
                        height="500"
                        style={{ border: 0 }}
                        allowFullScreen
                        loading="lazy"
                        referrerPolicy="no-referrer-when-downgrade"
                    ></iframe>
                </div>
            </div>
            <style jsx>{`
                .map-area {
                    margin-bottom: -10px; /* Adjust as needed to align with footer */
                }
                .map-wrapper {
                    height: 500px;
                    width: 100%;
                    overflow: hidden;
                    border: none;
                }
                iframe {
                    display: block;
                    width: 100%;
                    height: 100%;
                    border: none;
                    background: transparent;
                    filter: grayscale(1); /* Optional: Adjust to match the design */
                }
            `}</style>
        </section>
    );
};

export default MapSection;
