"use client";

import React from "react";
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
import styles from "./TheDoormileWay.module.css";

export default function TheDoormileWay() {
  return (
    <div className="elementor-61">
      <style dangerouslySetInnerHTML={{ __html: `
        /* Fix oversized h2 font size */
        .elementor-element-9363070 .logico-title {
          font-size: clamp(32px, 4.5vw, 64px) !important;
          line-height: 1.1 !important;
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
        }
      `}} />
      {/* Approach title container */}
      <div className="elementor-element elementor-element-88745f4 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="88745f4" data-element_type="container" data-e-type="container">
        <div className="e-con-inner">
          <div className="elementor-element elementor-element-343b363 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="343b363" data-element_type="container" data-e-type="container">
            <div className={styles.header}>
              <ScrollReveal delay={0.05} duration={0.7} yOffset={20} className={styles.kicker}>
                <p className={styles.eyebrow}>/ Doormile Approach /</p>
                <hr className={styles.divider} />
              </ScrollReveal>
              <ScrollReveal delay={0.15} duration={0.85} yOffset={30}>
                <div className="elementor-element elementor-element-1cc335a elementor-widget elementor-widget-logico_heading" data-id="1cc335a" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                  <div className="elementor-widget-container">
                    <div 
                      className="logico-title"
                      style={{
                        WebkitTextStroke: "4px #c01227",
                        color: "#fff",
                        fontWeight: 800,
                      }}
                    >
                      The Doormile Way
                    </div>
                  </div>
                </div>
              </ScrollReveal>
            </div>
            <div className="elementor-element elementor-element-4c3e632 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="4c3e632" data-element_type="container" data-e-type="container">
              <ScrollReveal delay={0.2} duration={0.8} yOffset={25}>
                <div className="elementor-element elementor-element-5ba6bbf e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5ba6bbf" data-element_type="container" data-e-type="container">
                  <div className="elementor-element elementor-element-9363070 elementor-widget elementor-widget-logico_heading" data-id="9363070" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                    <div className="elementor-widget-container">
                      <h2 className="logico-title"> Smarter, Faster, Connected Logistics</h2>
                    </div>
                  </div>
                </div>
              </ScrollReveal>
              <ScrollReveal delay={0.3} duration={0.8} yOffset={25}>
                <div className="elementor-element elementor-element-e7609a5 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="e7609a5" data-element_type="container" data-e-type="container">
                  <div className="elementor-element elementor-element-c134b96 elementor-widget elementor-widget-text-editor" data-id="c134b96" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                    <div className="elementor-widget-container">
                      <p>
                        <strong>
                          We connect first mile and last mile into one seamless system, reducing delays and improving efficiency. With real-time tracking and digital workflows, 
                          <br /> every shipment is faster, reliable, and fully transparent.
                        </strong>
                      </p>
                      <p>Seamless logistics powered by real-time tracking, digital processes, and reliable logistics execution.</p>
                    </div>
                  </div>
                </div>
              </ScrollReveal>
            </div>
          </div>
        </div>
      </div>

      {/* Grid of features */}
      <div className="elementor-element elementor-element-5041fcc e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="5041fcc" data-element_type="container" data-e-type="container">
        <div className="e-con-inner">
          <StaggerChildren stagger={0.12} duration={0.7} yOffset={35} className="elementor-element elementor-element-2d7c3ee e-con-full e-grid cut-corner-no sticky-container-off e-con e-child">
            
            {/* Feature 1 */}
            <div className="elementor-element elementor-element-d11b050 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="d11b050" data-element_type="container" data-e-type="container">
              <div className="elementor-element elementor-element-3a6f50f elementor-view-default elementor-widget elementor-widget-icon" data-id="3a6f50f" 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">
                      <i aria-hidden="true" className="fontello icon-light-delivery"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div className="elementor-element elementor-element-1025248 elementor-widget elementor-widget-logico_heading" data-id="1025248" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <div className="logico-title">End-to-End Protection</div>
                </div>
              </div>
              <div className="elementor-element elementor-element-c7c19bd elementor-widget elementor-widget-text-editor" data-id="c7c19bd" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                <div className="elementor-widget-container">
                  <p>End-to-end visibility ensures every shipment stays secure and on schedule.</p>
                </div>
              </div>
            </div>

            {/* Feature 2 */}
            <div className="elementor-element elementor-element-2c82e54 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="2c82e54" data-element_type="container" data-e-type="container">
              <div className="elementor-element elementor-element-f51735e elementor-view-default elementor-widget elementor-widget-icon" data-id="f51735e" 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">
                      <i aria-hidden="true" className="fontello icon-light-container"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div className="elementor-element elementor-element-c682633 elementor-widget elementor-widget-logico_heading" data-id="c682633" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <div className="logico-title">Proactive delay prevention</div>
                </div>
              </div>
              <div className="elementor-element elementor-element-74d14e3 elementor-widget elementor-widget-text-editor" data-id="74d14e3" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                <div className="elementor-widget-container">
                  <p>Real-time monitoring helps prevent delays before they impact operations.</p>
                </div>
              </div>
            </div>

            {/* Feature 3 */}
            <div className="elementor-element elementor-element-08b9b20 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="08b9b20" data-element_type="container" data-e-type="container">
              <div className="elementor-element elementor-element-612c459 elementor-view-default elementor-widget elementor-widget-icon" data-id="612c459" 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">
                      <i aria-hidden="true" className="fontello icon-light-directions"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div className="elementor-element elementor-element-aa49275 elementor-widget elementor-widget-logico_heading" data-id="aa49275" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <div className="logico-title">Single owner, single promise</div>
                </div>
              </div>
              <div className="elementor-element elementor-element-74cfdf7 elementor-widget elementor-widget-text-editor" data-id="74cfdf7" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                <div className="elementor-widget-container">
                  <p>One unified system manages the entire logistics process seamlessly.</p>
                </div>
              </div>
            </div>

            {/* Feature 4 */}
            <div className="elementor-element elementor-element-04989ee e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="04989ee" data-element_type="container" data-e-type="container">
              <div className="elementor-element elementor-element-11a657e elementor-view-default elementor-widget elementor-widget-icon" data-id="11a657e" 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">
                      <i aria-hidden="true" className="fontello icon-light-storage"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div className="elementor-element elementor-element-b317d31 elementor-widget elementor-widget-logico_heading" data-id="b317d31" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <div className="logico-title">Dynamic AI-driven adjustments</div>
                </div>
              </div>
              <div className="elementor-element elementor-element-8fe5662 elementor-widget elementor-widget-text-editor" data-id="8fe5662" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                <div className="elementor-widget-container">
                  <p>AI-powered routing adapts instantly to improve speed and efficiency.</p>
                </div>
              </div>
            </div>

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