"use client";

import React from "react";
import { ScrollReveal } from "@/animations/Reveal";

export default function TheProblem() {
  return (
    <div className="elementor-element elementor-element-30fd9d1 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent section-shrink-custom" data-id="30fd9d1" data-element_type="container" data-e-type="container">
      <div className="e-con-inner">
        <div className="elementor-element elementor-element-03db5d7 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="03db5d7" data-element_type="container" data-e-type="container">
          
          <ScrollReveal delay={0.05} duration={0.8} yOffset={20}>
            <div className="elementor-element elementor-element-3fe4ca3 elementor-widget elementor-widget-logico_heading" data-id="3fe4ca3" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
              <div className="elementor-widget-container">
                <div className="logico-title">/ The Problem /</div>
              </div>
            </div>
          </ScrollReveal>

          <ScrollReveal delay={0.15} duration={0.85} yOffset={30}>
            <div className="elementor-element elementor-element-ffd1f7d elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="ffd1f7d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
              <div className="elementor-widget-container">
                <h2 className="logico-title">Fragmented Logistics is Broken</h2>
              </div>
            </div>
          </ScrollReveal>

          {/* Grid of Problem boxes */}
          <div className="elementor-element elementor-element-e09c20e e-grid e-con-full cut-corner-no sticky-container-off e-con e-child" data-id="e09c20e" data-element_type="container" data-e-type="container">
            
            {/* Box 1 */}
            <ScrollReveal delay={0.1} duration={0.7} yOffset={35} className="w-full">
              <div className="elementor-element elementor-element-81a7690 elementor-view-default elementor-position-block-start elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="81a7690" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
                <div className="elementor-widget-container">
                  <div className="elementor-icon-box-wrapper">
                    <div className="elementor-icon-box-icon">
                      <span className="elementor-icon">
                        <i aria-hidden="true" className="fontello icon-air-delivery"></i>
                      </span>
                    </div>
                    <div className="elementor-icon-box-content">
                      <div className="elementor-icon-box-title">
                        <p className="logico-title" style={{ fontSize: "42px", fontWeight: 800, color: "#111111", marginBottom: 0, textAlign: "left", lineHeight: "1.1" }}>73%</p>
                        <span style={{ textAlign: "left", display: "block", fontSize: "16px", fontWeight: 600, color: "#111111", marginTop: "8px", lineHeight: "1.4" }}>of delays happen at handoffs</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </ScrollReveal>

            {/* Box 2 */}
            <ScrollReveal delay={0.2} duration={0.7} yOffset={35} className="w-full">
              <div className="elementor-element elementor-element-0f4aa27 elementor-view-default elementor-position-block-start elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="0f4aa27" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
                <div className="elementor-widget-container">
                  <div className="elementor-icon-box-wrapper">
                    <div className="elementor-icon-box-icon">
                      <span className="elementor-icon">
                        <i aria-hidden="true" className="fontello icon-container"></i>
                      </span>
                    </div>
                    <div className="elementor-icon-box-content">
                      <div className="elementor-icon-box-title">
                        <p className="logico-title" style={{ fontSize: "42px", fontWeight: 800, color: "#111111", marginBottom: 0, textAlign: "left", lineHeight: "1.1" }}>3x</p>
                        <span style={{ textAlign: "left", display: "block", fontSize: "16px", fontWeight: 600, color: "#111111", marginTop: "8px", lineHeight: "1.4" }}>higher risk of missed SLAs</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </ScrollReveal>

            {/* Box 3 */}
            <ScrollReveal delay={0.3} duration={0.7} yOffset={35} className="w-full">
              <div className="elementor-element elementor-element-6cfd203 elementor-view-default elementor-position-block-start elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="6cfd203" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
                <div className="elementor-widget-container">
                  <div className="elementor-icon-box-wrapper">
                    <div className="elementor-icon-box-icon">
                      <span className="elementor-icon">
                        <i aria-hidden="true" className="fontello icon-trolley"></i>
                      </span>
                    </div>
                    <div className="elementor-icon-box-content">
                      <div className="elementor-icon-box-title">
                        <p className="logico-title" style={{ fontSize: "42px", fontWeight: 800, color: "#111111", marginBottom: 0, textAlign: "left", lineHeight: "1.1" }}>2.5x</p>
                        <span style={{ textAlign: "left", display: "block", fontSize: "16px", fontWeight: 600, color: "#111111", marginTop: "8px", lineHeight: "1.4" }}>more time spent on coordination</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </ScrollReveal>

            {/* Box 4 */}
            <ScrollReveal delay={0.4} duration={0.7} yOffset={35} className="w-full">
              <div className="elementor-element elementor-element-0d343e1 elementor-view-default elementor-position-block-start elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box" data-id="0d343e1" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
                <div className="elementor-widget-container">
                  <div className="elementor-icon-box-wrapper">
                    <div className="elementor-icon-box-icon">
                      <span className="elementor-icon">
                        <i aria-hidden="true" className="fontello icon-supply-chain"></i>
                      </span>
                    </div>
                    <div className="elementor-icon-box-content">
                      <div className="elementor-icon-box-title">
                        <p className="logico-title" style={{ fontSize: "42px", fontWeight: 800, color: "#111111", marginBottom: 0, textAlign: "left", lineHeight: "1.1" }}>28%</p>
                        <span style={{ textAlign: "left", display: "block", fontSize: "16px", fontWeight: 600, color: "#111111", marginTop: "8px", lineHeight: "1.4" }}>increase in operational costs</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </ScrollReveal>

          </div>

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