"use client";

import React, { useEffect, useRef } from "react";
import Image from "next/image";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

const CARDS_DATA = [
  {
    index: 1,
    title: "Operational Visibility",
    desc: "Real-time tracking and centralized control provide complete visibility across every shipment, vehicle, and delivery milestone.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="2" y="7" width="16" height="10" rx="2" ry="2" />
        <line x1="22" y1="11" x2="22" y2="13" />
        <line x1="6" y1="11" x2="10" y2="11" />
        <line x1="6" y1="13" x2="12" y2="13" />
      </svg>
    )
  },
  {
    index: 2,
    title: "Intelligent Routing",
    desc: "AI-powered route optimization reduces travel time, improves delivery accuracy, and maximizes fleet utilization.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
      </svg>
    )
  },
  {
    index: 3,
    title: "EV-First Logistics",
    desc: "Purpose-built workflows for electric fleets improve battery efficiency, charging management, and sustainable operations.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 2v10" />
        <path d="M18 8V6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v2a4 4 0 0 0 4 4h4a4 4 0 0 0 4-4Z" />
        <path d="M10 22v-6" />
        <path d="M14 22v-6" />
      </svg>
    )
  },
  {
    index: 4,
    title: "Scalable Network",
    desc: "Flexible logistics infrastructure supports growth across cities, regions, and high-volume delivery operations without disruption.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 3.5 2 5.5a7 7 0 0 1-7 7h-3" />
        <path d="M12 22V12" />
      </svg>
    )
  }
];

export default function EVLogisticSection() {
  const containerRef = useRef<HTMLDivElement>(null);
  const imageWrapperRef = useRef<HTMLDivElement>(null);
  const imageRef = useRef<HTMLImageElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    const img = imageRef.current;
    const imgWrapper = imageWrapperRef.current;
    if (!container || !img || !imgWrapper) return;

    // 1. Parent Wrapper Loop: Slow Looping float
    const floatAnim = gsap.to(imgWrapper, {
      y: "-=10",
      duration: 4.5,
      ease: "sine.inOut",
      yoyo: true,
      repeat: -1,
    });

    // 2. Premium Entrance Animation on Scroll (ScrollTrigger based)
    const entryTl = gsap.timeline({
      scrollTrigger: {
        trigger: container,
        start: "top 80%",
        toggleActions: "play none none none",
      }
    });

    entryTl
      .to(container.querySelector(".ev-logistic-kicker-widget"), {
        opacity: 1,
        y: 0,
        duration: 0.8,
        ease: "power3.out",
      })
      .to(container.querySelector(".ev-logistic-title-widget"), {
        y: 0,
        opacity: 1,
        duration: 0.85,
        ease: "power4.out",
      }, "-=0.45")
      .to(container.querySelectorAll(".ev-feature-card"), {
        opacity: 1,
        y: 0,
        duration: 0.6,
        stagger: 0.08,
        ease: "power3.out",
      }, "-=0.6")
      .fromTo(img, {
        opacity: 0,
        scale: 0.95,
      }, {
        opacity: 1,
        scale: 1,
        duration: 1.0,
        ease: "power4.out",
      }, "-=0.8");

    return () => {
      floatAnim.kill();
    };
  }, []);

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: `
        /* Custom CSS Scoped to EV Logistics Section */
        .ev-logistic-section {
          box-sizing: border-box !important;
          background: #ffffff !important;
          font-family: 'Manrope', sans-serif !important;
          position: relative !important;
        }

        .ev-logistic-header {
          width: 100% !important;
          max-width: 100% !important;
          align-self: stretch !important;
          margin-bottom: 48px !important;
          display: block !important;
          text-align: left !important;
        }

        .ev-logistic-body-grid {
          display: flex !important;
          flex-direction: row !important;
          align-items: center !important;
          justify-content: space-between !important;
          width: 100% !important;
          gap: 3% !important;
        }

        /* Left Column - Image column takes up 45% */
        .ev-logistic-image-col {
          flex: 0 0 45% !important;
          max-width: 45% !important; 
          display: flex !important;
          align-items: center !important;
          justify-content: flex-start !important; 
          position: relative !important;
          min-height: auto !important;
          margin: 0 !important;
        }

        /* Branded glow spotlight halo behind the vehicle */
        .ev-logistic-image-glow {
          position: absolute !important;
          left: 50% !important;
          top: 50% !important;
          width: 80% !important;
          height: 70% !important;
          transform: translate(-50%, -50%) !important;
          background: radial-gradient(circle, rgba(192, 18, 39, 0.05) 0%, rgba(192, 18, 39, 0.01) 55%, transparent 75%) !important;
          filter: blur(54px) !important;
          z-index: 0 !important;
          pointer-events: none !important;
        }

        /* Image wrapper scaling naturally inside its column container */
        .ev-logistic-image-wrapper {
          width: 100% !important;
          max-width: 100% !important;
          display: flex !important;
          align-items: center !important;
          justify-content: flex-start !important;
          overflow: visible !important;
          position: relative !important;
          transform: scale(1.15) !important;
          transform-origin: left center !important;
          margin-left: -80px !important;
        }

        .ev-logistic-image-wrapper img {
          width: 100% !important;
          height: auto !important;
          object-fit: contain !important;
          filter: none !important;
          will-change: transform !important;
        }

        /* Right column - takes up 52% for grid cards */
        .ev-logistic-content-col {
          flex: 0 0 52% !important;
          max-width: 52% !important; 
          display: flex !important;
          flex-direction: column !important;
          justify-content: center !important;
          margin: 0 !important;
        }

        .ev-logistic-kicker-widget {
          opacity: 0;
          transform: translateY(-12px);
          will-change: transform, opacity;
        }

        .ev-logistic-title-wrapper {
          margin: 0 !important;
        }

        .ev-logistic-title-widget {
          opacity: 0;
          transform: translateY(24px);
          will-change: transform, opacity;
        }

        .ev-logistic-title-widget > .elementor-widget-container {
          margin: 0 !important;
          padding: 0 !important;
        }

        .ev-logistic-title-widget .logico-title {
          margin: 0 !important;
          text-align: left !important;
        }

        /* Card Grid Layout */
        .ev-feature-grid {
          display: grid !important;
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 24px !important;
          width: 100% !important;
        }

        /* Premium Theme White Card */
        .ev-feature-card {
          display: flex !important;
          flex-direction: column !important;
          background: #ffffff !important;
          border: 1px solid rgba(17, 17, 17, 0.09) !important;
          border-radius: 20px !important;
          padding: 30px !important;
          color: #555555 !important;
          height: 100% !important;
          box-sizing: border-box !important;
          opacity: 0;
          transform: translateY(20px);
          will-change: transform, opacity;
          transition: border-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                      box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                      transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
          box-shadow: 0 4px 24px rgba(17, 17, 17, 0.02) !important;
        }

        .ev-feature-card:hover {
          border-color: #c01227 !important;
          box-shadow: 0 20px 40px rgba(192, 18, 39, 0.08), 0 4px 12px rgba(17, 17, 17, 0.03) !important;
          transform: translateY(-8px) !important;
        }

        /* Red Icon Wrapper */
        .ev-feature-icon-wrapper {
          margin-bottom: 24px !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          width: 54px !important;
          height: 54px !important;
          background: rgba(192, 18, 39, 0.06) !important;
          border: 1px solid rgba(192, 18, 39, 0.18) !important;
          border-radius: 50% !important;
          color: #c01227 !important;
          transition: all 0.3s ease !important;
        }

        .ev-feature-card:hover .ev-feature-icon-wrapper {
          background: rgba(192, 18, 39, 0.12) !important;
          border-color: #c01227 !important;
          transform: scale(1.1) !important;
          box-shadow: 0 0 12px rgba(192, 18, 39, 0.15) !important;
        }

        .ev-feature-icon-wrapper svg {
          width: 24px !important;
          height: 24px !important;
          stroke: currentColor !important;
        }

        /* Title & Description Inside Cards */
        .ev-feature-card-title {
          font-family: 'Manrope', sans-serif !important;
          font-size: 20px !important;
          font-weight: 700 !important;
          line-height: 1.3em !important;
          color: #c01227 !important;
          margin: 0 0 12px 0 !important;
          text-transform: none !important;
        }

        .ev-feature-card-desc {
          font-family: 'Manrope', sans-serif !important;
          font-size: 14px !important;
          font-weight: 500 !important;
          line-height: 1.6 !important;
          color: #555555 !important;
          margin: 0 !important;
        }

        /* Responsiveness constraints */
        @media (max-width: 1024px) {
          .ev-logistic-body-grid {
            flex-direction: column !important;
            gap: 50px !important;
          }

          .ev-logistic-image-col {
            flex: 1 1 100% !important;
            max-width: 100% !important;
            min-height: auto !important;
            justify-content: center !important;
          }

          .ev-logistic-image-wrapper {
            max-width: 580px !important;
            transform: none !important;
            margin-left: 0 !important;
            justify-content: center !important;
          }

          .ev-logistic-content-col {
            flex: 1 1 100% !important;
            max-width: 100% !important;
          }

        }

        @media (max-width: 767px) {
          .ev-logistic-section {
            --padding-left: 10px !important;
            --padding-right: 10px !important;
            padding-left: 10px !important;
            padding-right: 10px !important;
            box-sizing: border-box !important;
          }

          .ev-logistic-section > .e-con-inner {
            width: 100% !important;
            max-width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin-left: auto !important;
            margin-right: auto !important;
            box-sizing: border-box !important;
          }

          .ev-logistic-section .elementor-element-343b363 {
            --padding-left: 0px !important;
            --padding-right: 0px !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
          }

          .ev-logistic-body-grid {
            width: 100% !important;
            max-width: 100% !important;
            align-items: stretch !important;
          }

          .ev-logistic-content-col {
            width: 100% !important;
            max-width: 100% !important;
            align-self: center !important;
          }

          .ev-feature-grid {
            grid-template-columns: 1fr !important;
            gap: 20px !important;
            width: 100% !important;
            max-width: 100% !important;
          }

          .ev-feature-card {
            width: 100% !important;
            max-width: 100% !important;
          }
        }
      `}} />

      <div className="elementor-61">
        <div
          ref={containerRef}
          className="elementor-element elementor-element-88745f4 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent ev-logistic-section"
          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">
              {/* Same header hierarchy and container structure as "The Doormile Way". */}
              <div className="ev-logistic-header">
                <div className="elementor-element elementor-element-7afb238 elementor-widget elementor-widget-logico_heading ev-logistic-kicker-widget" data-id="7afb238" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
                  <div className="elementor-widget-container">
                    <div className="logico-title ev-logistic-kicker">/ Built for Electric Vehicles /</div>
                  </div>
                </div>
                <div className="ev-logistic-title-wrapper">
                  <div className="elementor-element elementor-element-1cc335a elementor-widget elementor-widget-logico_heading ev-logistic-title-widget" 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,
                        }}
                      >
                        Logistics Built for EV Vehicles
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="ev-logistic-body-grid">
                {/* Left Column: Enlarged Floating Wrapper & Ambient glow */}
                <div className="ev-logistic-image-col">
                  <div className="ev-logistic-image-glow"></div>
                  
                  <div ref={imageWrapperRef} className="ev-logistic-image-wrapper">
                    <Image 
                      ref={imageRef}
                      src="/images/ev.webp"
                      alt="EV Logistics"
                      width={1050}
                      height={854}
                      priority
                    />
                  </div>
                </div>

                {/* Right Column: 2x2 Grid of Feature Cards */}
                <div className="ev-logistic-content-col">
                  <div className="ev-feature-grid">
                    {CARDS_DATA.map((item) => (
                      <div 
                        key={item.index} 
                        className="ev-feature-card"
                      >
                        <div className="ev-feature-icon-wrapper">
                          {item.icon}
                        </div>
                        <h4 className="ev-feature-card-title">{item.title}</h4>
                        <p className="ev-feature-card-desc">{item.desc}</p>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}