"use client";

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

interface ConnectedLogisticsSectionProps {
  id?: string;
  eyebrow?: string;
  title?: string;
  imageSrc?: string;
  imageAlt?: string;
  items?: Array<{ title: string; text: string }>;
  showButton?: boolean;
}

const DEFAULT_ITEMS = [
  { title: "Real-Time Visibility", text: "See every shipment, every vehicle, every handoff—live. No blind spots." },
  { title: "Dynamic Route Adjustment", text: "AI continuously optimizes routes based on traffic, weather, and real-world conditions." },
  { title: "Proactive Delay Prevention", text: "Detect SLA risks hours before they become problems. Act, don't react." },
  { title: "Execution Intelligence", text: "Learn from every shipment. Get smarter with every mile traveled." },
];

export default function ConnectedLogisticsSection({
  id = "vehicle-ai",
  eyebrow = "/ Connected Logistics /",
  title = "Smart logistics solutions we deliver for modern supply chains",
  imageSrc = "/images/home2-pic-3.webp",
  imageAlt = "Connected Logistics",
  items = DEFAULT_ITEMS,
  showButton = false,
}: ConnectedLogisticsSectionProps) {
  const sectionRef = useRef<HTMLDivElement>(null);
  const isInView = useInView(sectionRef, { once: true, margin: "-50px" });

  return (
    <div ref={sectionRef} className="elementor elementor-61" data-elementor-type="wp-page" data-elementor-id="61" id={id} style={{ width: "100%", scrollMarginTop: "100px" }}>
      <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;
            box-sizing: border-box !important;
          }

          .elementor-element-99768ba img.wp-image-4481 {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            object-fit: cover !important;
            border-radius: 25px !important;
            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) {
            .elementor-element-9ffed33 {
              flex-direction: column !important;
              align-items: stretch !important;
            }
            
            .elementor-element-96343ba,
            .elementor-element-71c3e1d {
              width: 100% !important;
              max-width: 100% !important;
              padding-left: 0 !important;
              padding-right: 0 !important;
            }

            .elementor-element-96343ba > div {
              width: 100% !important;
              height: auto !important;
            }

            .elementor-element-96343ba {
              margin-top: 0px !important;
            }

            .elementor-element-71c3e1d {
              padding-bottom: 24px !important;
            }

            .elementor-element-165dfa5,
            .elementor-element-3888a1e {
              width: 100% !important;
              max-width: 100% !important;
            }

            .elementor-element-99768ba {
              width: 100% !important;
              max-width: 100% !important;
            }

            .elementor-element-99768ba .elementor-widget-container {
              padding: 10px !important;
              display: block !important;
              width: 100% !important;
            }

            .elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
              width: 100% !important;
              max-width: 600px !important;
              border-radius: 25px !important;
            }
          }

          @media (max-width: 767px) {
            .elementor-element-99768ba {
              width: 100% !important;
              max-width: 100% !important;
            }

            .elementor-element-71c3e1d {
              padding-bottom: 12px !important;
            }

            .elementor-element-99768ba .elementor-widget-container {
              padding: 0px !important;
              display: block !important;
              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;
            }
          }
        ` }} />
        <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={imageSrc} 
                    className="attachment-full size-full wp-image-4481" 
                    alt={imageAlt} 
                    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">{eyebrow}</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">{title}</h2>
                  </div>
                </div>
              </ScrollReveal>

              {/* Staggered List items */}
              {items.map((item, index) => (
                <ScrollReveal key={index} delay={0.25 + index * 0.1} 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">{item.title}</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>{item.text}</p>
                    </div>
                  </div>
                </ScrollReveal>
              ))}

              {showButton && (
                <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 ${isInView ? "animated" : ""}`}>
                <div className="block-decoration-item"></div>
              </div>
            </div>
          </div>

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