import React from "react";
import FirstMileIcon from "../icons/FirstMileIcon";
import MidMileIcon from "../icons/MidMileIcon";
import LastMileIcon from "../icons/LastMileIcon";

interface Miles3Props {
  /** Eyebrow above the heading. Defaults to the original How It Works label. */
  eyebrow?: string;
  /** Section heading. Defaults to the original How It Works copy. */
  heading?: string;
}

export default function Miles3({
  eyebrow = "/ How It Works /",
  heading = "Doormile connects first, mid, and last mile into a seamless end-to-end logistics experience",
}: Miles3Props = {}) {
  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: `
        /* =====================================================================
           How It Works · "Doormile connects first, mid, and last mile" section
           Self-contained recreation of the original Elementor design
           (originally Elementor section CSS, now inlined below + in /public/css/site.css).
           Explicit flex/grid values because the Elementor framework reads them
           from CSS custom properties that aren't set in this rebuild.
           ===================================================================== */

        /* Section shell — dark card fully inset from the edges. The page body is
           white, so margins expose a white gutter on all sides and all four
           corners are rounded, matching the reference. */
        .elementor-element-c36a604 {
          display: flex;
          flex-direction: column;
          width: auto;
          margin: 20px 20px 0 20px;
          background-color: #1F1F1F;
          border-radius: 25px 25px 0 0;
          padding: 90px 0 0 0;
        }
        /* Boxed inner — centered, original content width */
        .elementor-element-c36a604 > .e-con-inner {
          width: 100%;
          max-width: 1630px;
          margin: 0 auto;
          padding: 0;
        }

        /* Outer content wrapper — full width, stacks header then grid */
        .elementor-element-77d1265 {
          display: flex;
          flex-direction: column;
          width: 100%;
          max-width: 1630px;
          margin: 0 auto;
          padding: 0 20px;
          box-sizing: border-box;
        }

        /* Header row + its inner column (eyebrow + heading, top-left) */
        .elementor-element-b147420 {
          display: flex;
          flex-direction: row;
          width: 100%;
        }
        .elementor-element-5bc90f3 {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
        }

        /* Eyebrow: "/ How It Works /" */
        .elementor-element-176d17f .logico-title {
          font-size: 14px;
          font-weight: 500;
          line-height: 2.1429em;
          color: #FFFFFF;
          margin: 0;
        }

        /* Main heading (h3 kit typography, white)
           NOTE: theme-core sets ".logico-front-end h3:not([class*=logico-title-h])
           { color: var(--logico-dark-text-color) }" at specificity (0,2,1), which
           renders this <h3 class="logico-title"> dark. We prefix .logico-front-end
           (-> (0,3,0)) to win, and force -webkit-text-fill-color (it had inherited
           the dark currentColor). */
        .elementor-element-63a9de5 > .elementor-widget-container {
          margin: 18px 0 0 0;
        }
        .logico-front-end .elementor-element-63a9de5 .logico-title {
          font-family: var(--font-manrope), "Manrope", sans-serif;
          font-size: 60px;
          font-weight: 500;
          line-height: 1.2em;
          letter-spacing: -0.03em;
          text-transform: uppercase;
          color: #FFFFFF;
          -webkit-text-fill-color: #FFFFFF;
          opacity: 1;
          visibility: visible;
          margin: 0;
        }

        /* 3-column card grid.
           Original column-gap is 120px, but at laptop widths (1280–1500) that
           squeezes columns so descriptions wrap to 3 lines. Reduced to 60px so
           columns stay wide enough for ~2-line descriptions like the reference,
           while keeping the 70px row-gap. */
        .elementor-element-4add972 {
          display: grid;
          /* Elementor's ".e-con.e-grid" (specificity 0,2,0) sets grid-template-columns
             from this CSS var, which OUT-RANKS a plain ".elementor-element-4add972"
             (0,1,0) rule — so the responsive breakpoints below MUST drive the var,
             not grid-template-columns directly, or the grid never collapses on mobile. */
          --e-con-grid-template-columns: repeat(3, 1fr);
          grid-template-columns: repeat(3, 1fr);
          grid-auto-flow: row;
          gap: 70px 60px;
          width: 100%;
          margin: 55px 0 0 0;
        }
        /* Each card stacks: truck / title / description, left-aligned */
        .elementor-element-4add972 > .e-con {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
        }

        /* Truck illustrations — exact original heights + baseline padding */
        .elementor-element-4add972 .elementor-icon-wrapper {
          text-align: start;
        }
        .elementor-element-4add972 .elementor-icon svg {
          width: auto;
          max-width: 100%;
          height: auto;
        }
        .elementor-element-74687fb > .elementor-widget-container { padding: 22px 0 0 0; }
        .elementor-element-74687fb .elementor-icon svg { max-height: 139px; }
        .elementor-element-fd9c57e .elementor-icon svg { max-height: 158px; }
        .elementor-element-fbb1628 > .elementor-widget-container { padding: 25px 0 0 0; }
        .elementor-element-fbb1628 .elementor-icon svg { max-height: 128px; }

        /* Card titles (First / Mid / Last Mile) */
        .elementor-element-d310968 > .elementor-widget-container,
        .elementor-element-c582715 > .elementor-widget-container,
        .elementor-element-fb01b90 > .elementor-widget-container {
          margin: 25px 0 20px 0;
        }
        .elementor-element-d310968 .logico-title,
        .elementor-element-c582715 .logico-title,
        .elementor-element-fb01b90 .logico-title {
          font-family: var(--font-manrope), "Manrope", sans-serif;
          font-size: 20px;
          font-weight: 700;
          line-height: 24px;
          letter-spacing: -0.03em;
          color: #FFFFFF;
          margin: 0;
        }

        /* Card descriptions */
        .elementor-element-9989187 p,
        .elementor-element-3ae1ce0 p,
        .elementor-element-1057c22 p {
          font-size: 18px;
          font-weight: 400;
          line-height: 1.6667em;
          color: #FFFFFF;
          margin: 0;
        }

        /* ---- Responsive (grid breakpoints mirror the original section-miles3
           cascade: 3-col@120gap >1200, 3-col@40gap ≤1200, 2-col ≤1020, 1-col
           ≤480). The ≤1200 step is what keeps columns wide enough at laptop
           widths so descriptions stay ~2 lines and trucks stay proportionate. */
        @media (max-width: 1200px) {
          .elementor-element-4add972 { gap: 70px 40px; }
          .logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(40px, 5vw, 60px); }
        }
        @media (max-width: 1020px) {
          .elementor-element-c36a604 { margin: 15px 15px 0 15px; padding: 76px 0 60px 0; }
          .elementor-element-77d1265 { padding: 0 30px; }
          .elementor-element-4add972 { --e-con-grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); gap: 50px 40px; }
          .logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(34px, 6vw, 52px); }
        }
        @media (max-width: 480px) {
          .elementor-element-c36a604 { margin: 12px 12px 0 12px; border-radius: 20px 20px 0 0; padding: 70px 0 50px 0; }
          .elementor-element-77d1265 { padding: 0 22px; }
          .elementor-element-4add972 { --e-con-grid-template-columns: 1fr; grid-template-columns: 1fr; gap: 56px; }
          .logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(30px, 9vw, 44px); }
        }
      `}} />

    <div className="elementor-element elementor-element-c36a604 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="c36a604" data-element_type="container" data-e-type="container">
      <div className="e-con-inner">
        <div className="elementor-element elementor-element-77d1265 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="77d1265" data-element_type="container" data-e-type="container">
          <div className="elementor-element elementor-element-b147420 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="b147420" data-element_type="container" data-e-type="container">
            <div className="elementor-element elementor-element-5bc90f3 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5bc90f3" data-element_type="container" data-e-type="container">
              <div className="elementor-element elementor-element-176d17f elementor-widget elementor-widget-logico_heading" data-id="176d17f" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <div className="logico-title">{eyebrow}</div>
                </div>
              </div>
              <div className="elementor-element elementor-element-63a9de5 elementor-widget elementor-widget-logico_heading" data-id="63a9de5" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <h3 className="logico-title">{heading}</h3>
                </div>
              </div>
            </div>
          </div>
          
          <div className="elementor-element elementor-element-4add972 e-con-full e-grid cut-corner-no sticky-container-off e-con e-child" data-id="4add972" data-element_type="container" data-e-type="container">
            {/* First Mile */}
            <div className="elementor-element elementor-element-e1670a9 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="e1670a9" data-element_type="container" data-e-type="container">
              <div className="elementor-element elementor-element-74687fb elementor-view-default elementor-widget elementor-widget-icon" data-id="74687fb" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
                <div className="elementor-widget-container">
                  <div className="elementor-icon-wrapper">
                    <div className="elementor-icon">
                      <FirstMileIcon />
                    </div>
                  </div>
                </div>
              </div>
              <div className="elementor-element elementor-element-d310968 elementor-widget elementor-widget-logico_heading" data-id="d310968" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <div className="logico-title">First Mile</div>
                </div>
              </div>
              <div className="elementor-element elementor-element-9989187 elementor-widget elementor-widget-text-editor" data-id="9989187" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                <div className="elementor-widget-container">
                  <p>Orders are picked up from warehouses with live tracking and quality checks.</p>
                </div>
              </div>
            </div>

            {/* Mid Mile */}
            <div className="elementor-element elementor-element-97a7e5b e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="97a7e5b" data-element_type="container" data-e-type="container">
              <div className="elementor-element elementor-element-fd9c57e elementor-view-default elementor-widget elementor-widget-icon" data-id="fd9c57e" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
                <div className="elementor-widget-container">
                  <div className="elementor-icon-wrapper">
                    <div className="elementor-icon">
                      <MidMileIcon />
                    </div>
                  </div>
                </div>
              </div>
              <div className="elementor-element elementor-element-c582715 elementor-widget elementor-widget-logico_heading" data-id="c582715" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <div className="logico-title">Mid Mile</div>
                </div>
              </div>
              <div className="elementor-element elementor-element-3ae1ce0 elementor-widget elementor-widget-text-editor" data-id="3ae1ce0" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                <div className="elementor-widget-container">
                  <p>Smooth inter-city logistics through strategically located hubs with live tracking.</p>
                </div>
              </div>
            </div>

            {/* Last Mile */}
            <div className="elementor-element elementor-element-86fb82f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="86fb82f" data-element_type="container" data-e-type="container">
              <div className="elementor-element elementor-element-fbb1628 elementor-view-default elementor-widget elementor-widget-icon" data-id="fbb1628" data-element_type="widget" data-e-type="widget" data-widget_type="icon.default">
                <div className="elementor-widget-container">
                  <div className="elementor-icon-wrapper">
                    <div className="elementor-icon">
                      <LastMileIcon />
                    </div>
                  </div>
                </div>
              </div>
              <div className="elementor-element elementor-element-fb01b90 elementor-widget elementor-widget-logico_heading" data-id="fb01b90" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <div className="logico-title">Last Mile</div>
                </div>
              </div>
              <div className="elementor-element elementor-element-1057c22 elementor-widget elementor-widget-text-editor" data-id="1057c22" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                <div className="elementor-widget-container">
                  <p>Packages reach customers with real-time updates and proof of delivery.</p>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    </>
  );
}