"use client";

import React, { useState } from "react";
import Image from "next/image";

export default function Workflow2() {
  const [activeSlide, setActiveSlide] = useState(0);

  const slides = [
    {
      title: "Innovation",
      text: "Our Parallel Universe Engine simultaneously evaluates multiple routing strategies to identify the most efficient delivery plan for every dispatch window. By simulating different route combinations in real time, the system ensures faster, smarter, and more cost-effective logistics decisions. This enables businesses to maintain high operational accuracy while adapting dynamically to changing delivery conditions."
    },
    {
      title: "Innovation",
      text: "The platform solves the EV routing challenge through intelligent battery-aware simulations and advanced optimization logic powered by Google OR-Tools. It balances delivery efficiency, charging constraints, and SLA priorities to maximize fleet performance without compromising reliability. This creates a scalable and future-ready logistics system designed for both traditional and EV fleets."
    },
    {
      title: "Innovation",
      text: "With sub-45ms inference latency and real-time ETA validation, the engine delivers instant routing decisions with exceptional precision. Multiple strategy universes are benchmarked in parallel to consistently select the best-performing route configuration. The result is highly reliable, SLA-first delivery operations with improved customer experience and operational consistency."
    }
  ];

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: `
        .miletruth-workflow-heading {
          font-size: 24px;
          font-weight: 700;
          margin-bottom: 15px;
          color: #1c1c1c;
        }
        .testimonials-slider-container {
          position: relative;
        }
        .testimonial-item {
          opacity: 0;
          visibility: hidden;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
        }
        .testimonial-item.active {
          opacity: 1;
          visibility: visible;
          position: relative;
        }
      `}} />

      <div className="elementor-63">
        <div className="elementor-element elementor-element-285c828 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="285c828" data-element_type="container" data-e-type="container">
          
          {/* Left Column: Image with overlay */}
          <div className="elementor-element elementor-element-f3478fa e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="f3478fa" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
            <div className="elementor-element elementor-element-e8ee5be elementor-widget elementor-widget-logico_image_carousel" data-id="e8ee5be" data-element_type="widget" data-e-type="widget" data-widget_type="logico_image_carousel.default">
              <div className="elementor-widget-container">
                <div className="logico-image-carousel-widget">
                  <div className="image-slider">
                    <div className="image-item slider-item">
                      <div className="image-item-card with-height">
                        <Image 
                          width={1733} 
                          height={773} 
                          src="/images/miletruth-2.png" 
                          className="attachment-full size-full wp-image-5026" 
                          alt="Workflow 2" 
                        />
                        <div className="image-title">
                          <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" style={{ backgroundColor: "white", padding: "20px", borderRadius: "10px", opacity: 0.9 }}>
                              <h4 className="logico-title" style={{ color: "#C01227", margin: 0 }}>
                                Our Competitive Edge
                              </h4>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Right Column: Testimonial/Text Slider */}
          <div className="elementor-element elementor-element-79ba100 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="79ba100" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
            <div className="e-con-inner">
              <div className="elementor-element elementor-element-9c38369 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9c38369" data-element_type="container" data-e-type="container">
                
                {/* Secondary Image inside right col */}
                <div className="elementor-element elementor-element-8f3f74d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="8f3f74d" data-element_type="container" data-e-type="container">
                  <div className="elementor-element elementor-element-f5a66b2 elementor-widget elementor-widget-image" data-id="f5a66b2" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
                    <div className="elementor-widget-container">
                      <Image 
                        width={491} 
                        height={373} 
                        src="/images/home2-pic-2.png" 
                        className="attachment-full size-full wp-image-4396" 
                        alt="Decorative pic" 
                      />
                    </div>
                  </div>
                </div>

                {/* Slider */}
                <div className="elementor-element elementor-element-4071ec8 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="4071ec8" data-element_type="container" data-e-type="container">
                  <div className="elementor-element elementor-element-0a76e77 elementor-widget elementor-widget-logico_testimonial_carousel" data-id="0a76e77" data-element_type="widget" data-e-type="widget" data-widget_type="logico_testimonial_carousel.default">
                    <div className="elementor-widget-container">
                      <div className="logico-testimonial-carousel-widget">
                        <div className="testimonial-carousel-wrapper witch-icon">
                          <div className="testimonials-slider-container">
                            <div className="testimonials-slider">
                              {slides.map((slide, index) => (
                                <div 
                                  key={index}
                                  className={`testimonial-item slider-item ${index === activeSlide ? "active" : ""}`}
                                >
                                  <div className="testimonial-text">
                                    <h4 className="miletruth-workflow-heading">{slide.title}</h4>
                                    <p>{slide.text}</p>
                                  </div>
                                </div>
                              ))}
                            </div>

                            {/* Slider Navigation Footer */}
                            <div className="slider-footer slider-footer-view-outside slider-footer-position-after slider-footer-width-full miletruth-workflow-progress">
                              <div className="slider-footer-content" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                                <div className="slider-pagination" style={{ display: "flex", alignItems: "center", gap: "15px" }}>
                                  <div className="slider-progress-wrapper">
                                    <span className="slider-progress-current">0{activeSlide + 1}</span>
                                    /
                                    <span className="slider-progress-all">03</span>
                                  </div>
                                  <div className="owl-dots owl-dots-workflow-2" style={{ display: "flex", gap: "8px" }}>
                                    {slides.map((_, index) => (
                                      <button 
                                        key={index}
                                        type="button" 
                                        role="button" 
                                        className={`owl-dot ${index === activeSlide ? "active" : ""}`}
                                        onClick={() => setActiveSlide(index)}
                                        style={{ width: "10px", height: "10px", borderRadius: "50%", padding: 0 }}
                                      >
                                        <span></span>
                                      </button>
                                    ))}
                                  </div>
                                </div>
                              </div>
                            </div>

                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>

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