"use client";

import React from "react";
import Link from "next/link";
import Image from "next/image";
import { ScrollReveal, Magnetic } from "@/animations/Reveal";

export default function ConnectedLogistics() {
  return (
    <div className="elementor-element elementor-element-89a0ca1 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="89a0ca1" data-element_type="container" data-e-type="container">
      <style dangerouslySetInnerHTML={{ __html: `
        /* Ensure the inner content wrapper is responsive and never overflows */
        .elementor-element-fdb2e58 {
          width: 100% !important;
          max-width: 650px !important;
        }

        /* Make heading font size fluid and responsive */
        .elementor-element-7500280 .logico-title {
          font-size: clamp(26px, 3.5vw, 54px) !important;
          line-height: 1.25em !important;
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
        }

        /* Fix text colors for the dark background */
        .elementor-element-71c3e1d .logico-title {
          color: #ffffff !important;
        }
        .elementor-element-71c3e1d p {
          color: rgba(255, 255, 255, 0.85) !important;
        }

        /* Make sure paragraphs are responsive on all screen widths */
        .elementor-element-165dfa5 {
          width: 100% !important;
          max-width: min(619px, 100%) !important;
        }
        .elementor-element-3888a1e {
          width: 100% !important;
          max-width: min(526px, 100%) !important;
        }

        /* Sizing and identical padding on all 4 sides for Connected Logistics Image container */
        .elementor-element-99768ba .elementor-widget-container {
          display: flex !important;
          justify-content: center !important;
          align-items: center !important;
          padding: 40px !important; /* Identical gap on left, right, top, and bottom */
          box-sizing: border-box !important;
        }

        .elementor-element-99768ba img.wp-image-4481 {
          width: 100% !important;
          max-width: 100% !important; /* Allow natural responsive scaling on desktop */
          height: auto !important;
          object-fit: cover !important;
          border-radius: 25px !important; /* Preserve 25px border radius */
          margin: 0 auto !important;
          display: block !important;
        }

        /* Desktop/Laptop (min-width: 1025px) column width and flex rules */
        @media (min-width: 1025px) {
          .elementor-element-9ffed33 {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
          }

          .elementor-element-96343ba,
          .elementor-element-71c3e1d {
            width: 50% !important;
            max-width: 50% !important;
            flex: 1 1 50% !important;
            box-sizing: border-box !important;
          }
        }

        @media (max-width: 1024px) {
          /* Force columns to stack vertically on mobile/tablet */
          .elementor-element-9ffed33 {
            flex-direction: column !important;
            align-items: stretch !important;
          }
          
          /* Force both children to be full width */
          .elementor-element-96343ba,
          .elementor-element-71c3e1d {
            width: 100% !important;
            max-width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
          }

          /* Force ScrollReveal wrapper div to span full width */
          .elementor-element-96343ba > div {
            width: 100% !important;
            height: auto !important;
          }

          /* Show image at the bottom or top depending on order */
          .elementor-element-96343ba {
            margin-top: 0px !important;
          }

          /* Reduce padding bottom of the content section on tablet */
          .elementor-element-71c3e1d {
            padding-bottom: 24px !important;
          }

          /* Override desktop fixed widths on mobile/tablet */
          .elementor-element-165dfa5,
          .elementor-element-3888a1e {
            width: 100% !important;
            max-width: 100% !important;
          }

          /* Allow widget container to take 100% width on mobile/tablet */
          .elementor-element-99768ba {
            width: 100% !important;
            max-width: 100% !important;
          }

          /* Tablet overrides */
          .elementor-element-99768ba .elementor-widget-container {
            padding: 10px !important;
            display: block !important; /* Disable flex centering layout on mobile/tablet */
            width: 100% !important;
          }

          .elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
            width: 100% !important;
            max-width: 600px !important; /* allow up to 600px on tablet */
            border-radius: 25px !important; /* Explicitly keep 25px */
          }
        }

        @media (max-width: 767px) {
          /* Mobile overrides: let container take 100% width and image fill it */
          .elementor-element-99768ba {
            width: 100% !important;
            max-width: 100% !important;
          }

          /* Eliminate extra gap under the content column on mobile */
          .elementor-element-71c3e1d {
            padding-bottom: 12px !important;
          }

          .elementor-element-99768ba .elementor-widget-container {
            padding: 0px !important; /* Eliminate padding to maximize image width/height */
            display: block !important; /* Disable flex centering layout on mobile/tablet */
            width: 100% !important;
          }

          .elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            object-fit: cover !important;
            border-radius: 25px !important; /* Explicitly keep 25px */
          }
        }
      `}} />
      <div className="elementor-element elementor-element-9ffed33 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ffed33" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
        
        {/* Image side */}
        <div className="elementor-element elementor-element-96343ba e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="96343ba" data-element_type="container">
          <ScrollReveal delay={0.1} duration={0.9} yOffset={30} className="w-full h-full">
            <div className="elementor-element elementor-element-99768ba elementor-widget elementor-widget-image" data-id="99768ba" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
              <div className="elementor-widget-container">
                <Image 
                  fetchPriority="high" 
                  priority
                  width={578} 
                  height={790} 
                  src="/images/home2-pic-3.webp" 
                  className="attachment-full size-full wp-image-4481" 
                  alt="Connected Logistics" 
                  style={{
                    width: "100%",
                    height: "auto",
                    objectFit: "cover",
                    borderRadius: "25px",
                  }}
                />
              </div>
            </div>
          </ScrollReveal>
        </div>

        {/* Content side */}
        <div className="elementor-element elementor-element-71c3e1d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="71c3e1d" data-element_type="container" data-e-type="container">
          <div className="elementor-element elementor-element-fdb2e58 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="fdb2e58" data-element_type="container" data-e-type="container">
            
            <ScrollReveal delay={0.1} duration={0.8} yOffset={20}>
              <div className="elementor-element elementor-element-0136e6e elementor-widget elementor-widget-logico_heading" data-id="0136e6e" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <div className="logico-title">/ Connected Logistics /</div>
                </div>
              </div>
            </ScrollReveal>

            <ScrollReveal delay={0.2} duration={0.85} yOffset={25}>
              <div className="elementor-element elementor-element-7500280 elementor-widget elementor-widget-logico_heading" data-id="7500280" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <h2 className="logico-title">Smart logistics solutions we deliver for modern supply chains</h2>
                </div>
              </div>
            </ScrollReveal>

            {/* Staggered List items */}
            <ScrollReveal delay={0.25} duration={0.8} yOffset={25}>
              <div className="elementor-element elementor-element-4cc07a7 elementor-widget elementor-widget-logico_heading" data-id="4cc07a7" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <div className="logico-title">Real-Time Visibility</div>
                </div>
              </div>
              <div className="elementor-element elementor-element-165dfa5 elementor-widget__width-initial elementor-widget elementor-widget-text-editor" data-id="165dfa5" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                <div className="elementor-widget-container">
                  <p>See every shipment, every vehicle, every handoff—live. No blind spots.</p>
                </div>
              </div>
            </ScrollReveal>

            <ScrollReveal delay={0.35} duration={0.8} yOffset={25}>
              <div className="elementor-element elementor-element-da9d310 elementor-widget elementor-widget-logico_heading" data-id="da9d310" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <div className="logico-title">Dynamic Route Adjustment</div>
                </div>
              </div>
              <div className="elementor-element elementor-element-3888a1e elementor-widget__width-initial elementor-widget elementor-widget-text-editor" data-id="3888a1e" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                <div className="elementor-widget-container">
                  <p>AI continuously optimizes routes based on traffic, weather, and real-world conditions.</p>
                </div>
              </div>
            </ScrollReveal>

            <ScrollReveal delay={0.45} duration={0.8} yOffset={25}>
              <div className="elementor-element elementor-element-4cc07a7 elementor-widget elementor-widget-logico_heading" data-id="4cc07a7" 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-165dfa5 elementor-widget__width-initial elementor-widget elementor-widget-text-editor" data-id="165dfa5" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                <div className="elementor-widget-container">
                  <p>Detect SLA risks hours before they become problems. Act, don&apos;t react.</p>
                </div>
              </div>
            </ScrollReveal>

            <ScrollReveal delay={0.55} duration={0.8} yOffset={25}>
              <div className="elementor-element elementor-element-4cc07a7 elementor-widget elementor-widget-logico_heading" data-id="4cc07a7" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                <div className="elementor-widget-container">
                  <div className="logico-title">Execution Intelligence</div>
                </div>
              </div>
              <div className="elementor-element elementor-element-165dfa5 elementor-widget__width-initial elementor-widget elementor-widget-text-editor" data-id="165dfa5" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
                <div className="elementor-widget-container">
                  <p>Learn from every shipment. Get smarter with every mile traveled.</p>
                </div>
              </div>
            </ScrollReveal>

            <ScrollReveal delay={0.65} duration={0.8} yOffset={20}>
              <div className="elementor-element elementor-element-c0a45e4 elementor-widget elementor-widget-logico_button" data-id="c0a45e4" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
                <div className="elementor-widget-container">
                  <div className="button-widget">
                    <div className="button-container">
                      <Magnetic>
                        <Link href="/solutions" className="logico-alter-button">Explore more</Link>
                      </Magnetic>
                    </div>
                  </div>
                </div>
              </div>
            </ScrollReveal>

          </div>
        </div>

        {/* Absolutely Positioned Block Decoration Badge */}
        <div 
          className="elementor-element elementor-element-0efc59e elementor-absolute elementor-widget elementor-widget-logico_block_decoration" 
          data-id="0efc59e" 
          data-element_type="widget" 
          data-settings='{"_position":"absolute"}' 
          data-widget_type="logico_block_decoration.default"
          style={{ position: "absolute" }}
        >
          <div className="elementor-widget-container">
            <div className="block-decoration animation-enable block-decoration-style-1">
              <div className="block-decoration-item"></div>
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}