import React from "react";
import ContactMapEmbed from "@/components/map/ContactMapEmbed";

/**
 * Contact / Location section.
 *
 * The section's layout (20px side padding, 40px top margin, the 25px top-rounded
 * card that flows into the footer, and the 500px / 360px responsive heights) is
 * preserved verbatim from the original Elementor markup so there is no visual
 * regression. Only the *content* of the embed has changed: the Google Maps
 * iframe is replaced by an interactive Leaflet satellite map (ContactMapEmbed).
 */
export default function ContactMap() {
  return (
    <div className="elementor-element elementor-element-7304a53 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="7304a53" data-element_type="container" data-e-type="container">
      <style dangerouslySetInnerHTML={{ __html: `
        .elementor-element-7304a53 {
          --padding-left: 20px;
          --padding-right: 20px;
          --margin-top: 12px;
          --margin-bottom: 0px;
          /* Reduce the large gap above the map (was 40px). */
          margin-top: 12px !important;
          padding-top: 0 !important;
          /* Real side padding so the map is inset like the hero/footer sections
             (the --padding-* vars only work with elementor-frontend.css, which
             isn't loaded, so the map was going edge-to-edge). Matches
             .custom-standard-hero-container: 20px desktop / 10px mobile. */
          padding-left: 20px;
          padding-right: 20px;
          box-sizing: border-box;
          /* The section computes to display:inline here (the --display:flex var
             isn't mapped without elementor-frontend.css), so its padding never
             constrained the block child. Force flex so the padding insets the map. */
          display: flex;
          flex-direction: column;
          width: 100%;
        }
        .elementor-element-7304a53 .elementor-custom-embed {
          /* Rounded on all corners so the map reads as a self-contained card
             (bottom was square before, leaving a hard edge above the footer gap). */
          border-radius: 25px;
          overflow: hidden;
          background: transparent;
          line-height: 0;
        }
        @media (max-width: 840px) {
          .elementor-element-7304a53 {
            padding-left: 10px;
            padding-right: 10px;
          }
        }
        @media (max-width: 768px) {
          .elementor-element-7304a53 .elementor-custom-embed { height: 360px !important; }
        }
      ` }} />
      <div className="elementor-element elementor-element-5a3eed4 elementor-widget" data-id="5a3eed4" data-element_type="widget" data-e-type="widget">
        <div className="elementor-widget-container">
          <div className="elementor-custom-embed" style={{ width: "100%", height: "500px" }}>
            <ContactMapEmbed />
          </div>
        </div>
      </div>
    </div>
  );
}
