"use client";

import React, { useState, useEffect } from "react";
import { preload } from "react-dom";

export default function SolutionsHero() {
  preload("/images/home1-slide-1.webp", { as: "image" });
  const [activeSlide, setActiveSlide] = useState(0);

  // Auto-slide every 7 seconds — slower, more readable, professional pacing
  useEffect(() => {
    const interval = setInterval(() => {
      setActiveSlide((prev) => (prev === 0 ? 1 : 0));
    }, 7000);
    return () => clearInterval(interval);
  }, []);

  const handleDotClick = (index: number) => {
    setActiveSlide(index);
  };

  return (
    <>
      
      <style dangerouslySetInnerHTML={{ __html: `
        .howits-hero-custom-bg.elementor-repeater-item-3264830,
        .howits-hero-custom-bg.elementor-repeater-item-6867061 {
            background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-1.webp') !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            background-size: cover !important;
        }

        .howits-hero-custom-bg.elementor-repeater-item-6867061 {
            background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-2.webp') !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            background-size: cover !important;
        }

        /* Center alignments for standard content slider elements */
        .elementor-element.elementor-element-6c7cbcb .slide-content {
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
            text-align: center !important;
            width: 100% !important;
            height: 100% !important;
            padding: 0 !important;
            box-sizing: border-box !important;
        }

        .elementor-element.elementor-element-6c7cbcb .slide-content-inner {
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
            text-align: center !important;
            width: 100% !important;
            max-width: 1000px !important;
            margin: 0 auto !important;
            /* Contain the slider theme's inherited 20px padding (content-box) so
               width:100% + padding doesn't overflow the viewport and push the
               heading off-center on mobile. */
            box-sizing: border-box !important;
        }

        .elementor-element.elementor-element-6c7cbcb .content-slider-item-heading,
        .elementor-element.elementor-element-6c7cbcb .content-slider-item-heading .heading-content {
            text-align: center !important;
            display: block !important;
            width: 100% !important;
            margin-left: auto !important;
            margin-right: auto !important;
            padding-left: 15px !important;
            padding-right: 15px !important;
        }

        .elementor-element.elementor-element-6c7cbcb .content-slider-item-text {
            display: flex !important;
            justify-content: center !important;
            width: 100% !important;
            margin-top: 23px !important;
        }

        .elementor-element.elementor-element-6c7cbcb .text-content {
            text-align: center !important;
            max-width: 820px !important;
            margin: 0 auto !important;
            padding-left: 15px !important;
            padding-right: 15px !important;
        }

        /* Larger, more readable hero subtitle on large/4K screens */
        .elementor-element.elementor-element-6c7cbcb .content-slider-item-text p {
            font-size: clamp(16px, 1.35vw, 23px) !important;
            line-height: 1.65 !important;
        }

        @media (min-width: 1025px) {
            /* Match Home's hero frame so the floating navbar sits with the same
               breathing space. Home (.elementor-61) frames the hero card at 20px;
               this page falls through to the shared kit's 32px base. */
            .elementor-element.elementor-element-741f56c {
                padding: 20px !important;
            }
            .elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
                height: 800px !important;
                min-height: 800px !important;
            }
        }

        @media (max-width: 1024px) {
            .elementor-element.elementor-element-741f56c {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: auto !important;
                margin-right: auto !important;
                --padding-top: 0px !important;
                --padding-block-start: 0px !important;
                padding: 0 10px 10px 10px !important;
                overflow: hidden !important;
                border-radius: 25px !important;
            }

            /* The stage-outer carries an inline height:800px; collapse it to the
               slide height so there is no dead empty space below the hero card. */
            .elementor-element.elementor-element-6c7cbcb .owl-stage-outer {
                height: 620px !important;
            }

            .elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
                width: 100% !important;
                min-height: 620px !important;
                height: 620px !important;
                border-radius: 25px !important;
                overflow: hidden !important;
            }

            .elementor-element.elementor-element-6c7cbcb .slide-content {
                width: 100% !important;
                min-height: 620px !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                box-sizing: border-box !important;
            }
        }

        @media (max-width: 767px) {
            .elementor-element.elementor-element-741f56c {
                width: 100% !important;
                max-width: 100% !important;
                --padding-top: 0px !important;
                --padding-block-start: 0px !important;
                padding: 0 10px 10px 10px !important;
                border-radius: 22px !important;
            }

            .elementor-element.elementor-element-6c7cbcb .owl-stage-outer {
                height: 560px !important;
            }

            .elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
                min-height: 560px !important;
                height: 560px !important;
                border-radius: 22px !important;
            }

            .elementor-element.elementor-element-6c7cbcb .slide-content {
                min-height: 560px !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            .elementor-element.elementor-element-6c7cbcb .content-slider-item-heading {
                max-width: 100% !important;
                font-size: clamp(38px, 11vw, 48px) !important;
                line-height: 1.05 !important;
                overflow-wrap: break-word !important;
                padding-left: 15px !important;
                padding-right: 15px !important;
            }

            /* Pin the slide counter ("01/02") cleanly bottom-RIGHT — matching the
               Home and How-It-Works heroes. site.css parks it ~80px in from the
               right (looks left/centred), and the wide dot navigation eats the
               right side, so hide the dots on mobile and right-align the counter. */
            .elementor .elementor-element.elementor-element-6c7cbcb .slider-footer {
                text-align: right !important;
                margin-bottom: 24px !important;
            }
            .elementor .elementor-element.elementor-element-6c7cbcb .slider-footer .slider-pagination {
                justify-content: flex-end !important;
                margin-left: 22px !important;
                margin-right: 22px !important;
            }
            .elementor .elementor-element.elementor-element-6c7cbcb .owl-dots {
                display: none !important;
            }
            /* Hide the prev/next arrows on mobile (they overlap the counter) —
               slides still auto-rotate, matching the home hero. */
            .elementor .elementor-element.elementor-element-6c7cbcb .owl-nav {
                display: none !important;
            }
        }
      `}} />

      <div className="elementor-element elementor-element-741f56c e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="741f56c" data-element_type="container" data-e-type="container">
        <div className="elementor-element elementor-element-6c7cbcb elementor-widget elementor-widget-logico_content_slider" data-id="6c7cbcb" data-element_type="widget" data-e-type="widget" data-widget_type="logico_content_slider.default">
          <div className="elementor-widget-container">
            <div className="logico-content-slider-widget">
              <div className="content-slider-wrapper">
                <div className="content-slider-container">
                  <div className="content-slider owl-carousel owl-theme nav-view-vertical nav-h-position-right nav-v-position-bottom owl-loaded owl-drag">
                    
                    <div className="owl-stage-outer" style={{ position: "relative", overflow: "hidden", height: "800px" }}>
                      <div className="owl-stage" style={{ position: "relative", width: "100%", height: "100%" }}>
                        
                        {/* Slide 1 */}
                        <div 
                          className={`owl-item ${activeSlide === 0 ? "active" : ""}`}
                          style={{
                            position: "relative",
                            width: "100%",
                            opacity: activeSlide === 0 ? 1 : 0,
                            visibility: activeSlide === 0 ? "visible" : "hidden",
                            transition: "opacity 0.8s ease-in-out, visibility 0.8s ease-in-out",
                            zIndex: activeSlide === 0 ? 2 : 1
                          }}
                        >
                          <div className="content-item slider-item elementor-repeater-item-3264830 slide-style-standard howits-hero-custom-bg">
                            <div className="slide-content">
                              <div className="slide-content-inner">
                                <h1 className="content-slider-item-heading logico-content-wrapper-1">
                                  <span className="heading-content">Solutions for Every Industry</span>
                                </h1>
                                <div className="content-slider-item-text logico-content-wrapper-2">
                                  <div className="text-content">
                                    <p>Discover how Doormile&apos;s connected logistics platform serves diverse industries with tailored solutions.</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        {/* Slide 2 */}
                        <div 
                          className={`owl-item ${activeSlide === 1 ? "active" : ""}`}
                          style={{
                            position: "absolute",
                            top: 0,
                            left: 0,
                            width: "100%",
                            opacity: activeSlide === 1 ? 1 : 0,
                            visibility: activeSlide === 1 ? "visible" : "hidden",
                            transition: "opacity 0.8s ease-in-out, visibility 0.8s ease-in-out",
                            zIndex: activeSlide === 1 ? 2 : 1
                          }}
                        >
                          <div className="content-item slider-item elementor-repeater-item-6867061 slide-style-standard howits-hero-custom-bg">
                            <div className="slide-content">
                              <div className="slide-content-inner">
                                <h1 className="content-slider-item-heading logico-content-wrapper-1">
                                  <span className="heading-content">One Platform. All Verticals</span>
                                </h1>
                                <div className="content-slider-item-text logico-content-wrapper-2">
                                  <div className="text-content">
                                    <p>Doormile adapts to the unique challenges of your vertical—not the other way around.</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>

                    {/* Navigation controls (prev/next) — matches the home hero slider */}
                    <div className="owl-nav">
                      <button
                        type="button"
                        className="owl-next"
                        onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
                        aria-label="Next"
                        style={{ cursor: "pointer", border: "none", outline: "none" }}
                      />
                      <button
                        type="button"
                        className="owl-prev"
                        onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
                        aria-label="Previous"
                        style={{ cursor: "pointer", border: "none", outline: "none" }}
                      />
                    </div>

                    {/* Progress indicators */}
                    <div className="slider-footer slider-footer-position-after slider-footer-width-full slider-footer-view-inside">
                      <div className="slider-footer-content">
                        <div className="slider-pagination" style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "10px" }}>
                          <div className="slider-progress-wrapper" style={{ marginRight: "35px", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
                            <div style={{ fontSize: "16px", fontWeight: 600, color: "#FFFFFF", marginBottom: "4px" }}>
                              <span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
                              {" / "}
                              <span className="slider-progress-all" style={{ opacity: 0.6 }}>02</span>
                            </div>
                            {/* Progress line — red bar slides to match the active slide (mirrors the home hero) */}
                            <div style={{ width: "80px", height: "2px", background: "rgba(255, 255, 255, 0.2)", position: "relative", borderRadius: "1px", overflow: "hidden" }}>
                              <div style={{
                                position: "absolute",
                                left: activeSlide === 0 ? "0" : "50%",
                                width: "50%",
                                height: "100%",
                                background: "#c01227",
                                transition: "left 0.3s ease"
                              }} />
                            </div>
                          </div>
                          <div className="owl-dots owl-dots-6c7cbcb" style={{ display: "none" }}>
                            <button 
                              type="button" 
                              role="button" 
                              className={`owl-dot ${activeSlide === 0 ? "active" : ""}`}
                              onClick={() => handleDotClick(0)}
                            >
                              <span></span>
                            </button>
                            <button 
                              type="button" 
                              role="button" 
                              className={`owl-dot ${activeSlide === 1 ? "active" : ""}`}
                              onClick={() => handleDotClick(1)}
                            >
                              <span></span>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>

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