"use client";

import React, { useEffect, useRef, useState } from "react";
import Link from "next/link";
import gsap from "gsap";
import { ShimmerText } from "@/animations/Reveal";

export default function WingsHero() {
  const [activeSlide, setActiveSlide] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const interval = setInterval(() => {
      setActiveSlide((prev) => (prev === 0 ? 1 : 0));
    }, 7000);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    if (!containerRef.current) return;

    const activeItem = containerRef.current.querySelector(".owl-item.active");
    if (!activeItem) return;

    const heading = activeItem.querySelector(".heading-content");
    const text = activeItem.querySelector(".text-content");
    const actions = activeItem.querySelector(".wings-hero-actions");

    const animatedEls = [heading, text, actions].filter(Boolean);
    if (!animatedEls.length) return;

    gsap.killTweensOf(animatedEls);

    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
      gsap.set(animatedEls, { y: 0, opacity: 1, scale: 1 });
      return;
    }

    if (heading) {
      gsap.fromTo(
        heading,
        { y: 55, opacity: 0, scale: 0.95 },
        { y: 0, opacity: 1, scale: 1, duration: 1.1, ease: "power4.out" }
      );
    }

    if (text) {
      gsap.fromTo(
        text,
        { y: 30, opacity: 0 },
        { y: 0, opacity: 1, duration: 0.95, ease: "power3.out", delay: 0.25 }
      );
    }

    if (actions) {
      gsap.fromTo(
        actions,
        { y: 24, opacity: 0 },
        { y: 0, opacity: 1, duration: 0.85, ease: "power3.out", delay: 0.38 }
      );
    }
  }, [activeSlide]);

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

  const toggleSlide = () => {
    setActiveSlide((prev) => (prev === 0 ? 1 : 0));
  };

  return (
    <>
      <link rel="preload" as="image" href="/images/wings-heroslider4.png" />
      <link rel="preload" as="image" href="/images/wings-heroslide2.png" />
      <style
        dangerouslySetInnerHTML={{
          __html: `
        .wings-hero-bg.elementor-repeater-item-3264830,
        .wings-hero-bg.elementor-repeater-item-6867061 {
          background-image: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.06)), url('/images/wings-heroslider4.png') !important;
          background-position: center !important;
          background-repeat: no-repeat !important;
          background-size: cover !important;
        }

        .wings-hero-bg.elementor-repeater-item-6867061 {
          background-image: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.06)), url('/images/wings-heroslide2.png') !important;
        }

        #doormile-wings,
        #doormile-wings .content,
        #doormile-wings .content-inner,
        #doormile-wings .elementor {
          max-width: 100vw !important;
          overflow-x: hidden !important;
        }

        .wings-hero-page,
        .wings-hero-page .elementor-widget-container,
        .wings-hero-page .logico-content-slider-widget,
        .wings-hero-page .content-slider-wrapper,
        .wings-hero-page .content-slider-container,
        .wings-hero-page .content-slider,
        .wings-hero-page .owl-stage-outer,
        .wings-hero-page .owl-stage,
        .wings-hero-page .owl-item,
        .wings-hero-page .slider-item,
        .wings-hero-page .slide-content,
        .wings-hero-page .slide-content-inner {
          max-width: 100% !important;
          box-sizing: border-box !important;
        }

        .wings-hero-page .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;
        }

        .wings-hero-page .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;
          box-sizing: border-box !important;
        }

        .wings-hero-page .content-slider-item-heading,
        .wings-hero-page .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;
          white-space: normal !important;
          overflow-wrap: break-word !important;
        }

        .wings-hero-page .content-slider-item-heading {
          font-size: clamp(30px, 5.5vw, 80px) !important;
          line-height: 1.05 !important;
        }

        .wings-hero-page .content-slider-item-text {
          display: flex !important;
          justify-content: center !important;
          width: 100% !important;
          margin-top: 23px !important;
        }

        .wings-hero-page .text-content {
          text-align: center !important;
          max-width: 680px !important;
          width: 100% !important;
          margin: 0 auto !important;
          padding-left: 15px !important;
          padding-right: 15px !important;
          box-sizing: border-box !important;
          white-space: normal !important;
          overflow-wrap: break-word !important;
        }

        .wings-hero-page .content-slider-item-text p {
          font-size: clamp(16px, 1.35vw, 23px) !important;
          line-height: 1.65 !important;
          white-space: normal !important;
          overflow-wrap: break-word !important;
        }

        .wings-hero-actions {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          gap: 16px;
          margin-top: 30px;
          position: relative;
          z-index: 5;
          opacity: 1;
          visibility: visible;
        }

        .wings-hero-actions .logico-alter-button {
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          opacity: 1;
          visibility: visible;
        }

        .wings-mobile-break {
          display: none;
        }

        .wings-hero-page a.wings-hero-primary,
        .wings-hero-page a.wings-hero-secondary {
          --logico-button-text-color: #ffffff;
          --logico-button-border-color: rgba(255, 255, 255, 0.72);
          --logico-button-background-color: rgba(255, 255, 255, 0);
          --logico-button-text-hover: #ffffff;
          --logico-button-border-hover: #c01227;
          --logico-button-background-hover: #c01227;
          --logico-button-icon-hover: #ffffff;
        }

        .wings-hero-page a.wings-hero-primary {
          --logico-button-border-color: #c01227;
          --logico-button-background-color: #c01227;
        }

        .wings-hero-page a.wings-hero-primary:hover,
        .wings-hero-page a.wings-hero-secondary:hover {
          color: #ffffff !important;
        }

        @media (min-width: 1025px) {
          .wings-hero-page.elementor-element-741f56c {
            padding: 20px !important;
          }

          .wings-hero-page .owl-carousel.owl-theme .content-item {
            height: 800px !important;
            min-height: 800px !important;
            border-radius: 24px !important;
            overflow: hidden !important;
          }
        }

        @media (max-width: 1024px) {
          .wings-hero-page.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;
          }

          .wings-hero-page .owl-stage-outer {
            height: 600px !important;
          }

          .wings-hero-page .owl-carousel.owl-theme .content-item {
            width: 100% !important;
            min-height: 600px !important;
            height: 600px !important;
            border-radius: 25px !important;
            overflow: hidden !important;
          }

          .wings-hero-page .slide-content {
            min-height: 600px !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
          }
        }

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

          .wings-hero-page .slide-content,
          .wings-hero-page .slide-content-inner {
            width: calc(100vw - 20px) !important;
            max-width: calc(100vw - 20px) !important;
          }

          .wings-hero-page .slide-content-inner {
            margin-left: 0 !important;
            margin-right: auto !important;
          }

          .wings-hero-page .owl-stage-outer {
            height: 520px !important;
          }

          .wings-hero-page .owl-carousel.owl-theme .content-item,
          .wings-hero-page .slide-content {
            min-height: 520px !important;
            height: 520px !important;
            border-radius: 22px !important;
          }

          .wings-hero-page .slide-content-inner {
            width: 100% !important;
            max-width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
          }

          .wings-hero-page .content-slider-item-heading {
            max-width: 100% !important;
            font-size: clamp(20px, 7vw, 32px) !important;
            line-height: 1.12 !important;
          }

          .wings-hero-page .content-slider-item-text p {
            font-size: 14px !important;
            line-height: 1.58 !important;
          }

          .wings-hero-page .content-slider-item-text,
          .wings-hero-page .text-content {
            max-width: min(280px, calc(100vw - 70px)) !important;
            width: min(280px, calc(100vw - 70px)) !important;
          }

          .wings-hero-actions {
            flex-direction: column;
            gap: 10px;
            margin-top: 18px;
          }

          .wings-hero-actions .logico-alter-button {
            min-width: 0 !important;
            width: 190px !important;
            padding: 0.78em 3.7em 0.78em 1.35em !important;
            min-height: 42px !important;
            font-size: 12px !important;
          }

          .wings-mobile-break {
            display: block;
          }

          .wings-hero-page .slider-footer {
            text-align: right !important;
            margin-bottom: 24px !important;
          }

          .wings-hero-page .slider-footer .slider-pagination {
            justify-content: flex-end !important;
            margin-left: 22px !important;
            margin-right: 22px !important;
          }

          .wings-hero-page .owl-dots,
          .wings-hero-page .owl-nav {
            display: none !important;
          }
        }
      `,
        }}
      />

      <div
        className="wings-hero-page 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"
                    ref={containerRef}
                  >
                    <div
                      className="owl-stage-outer"
                      style={{ position: "relative", overflow: "hidden", height: "800px" }}
                    >
                      <div
                        className="owl-stage"
                        style={{ position: "relative", width: "100%", height: "100%" }}
                      >
                        <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 wings-hero-bg">
                            <div className="slide-content">
                              <div className="slide-content-inner">
                                <h1 className="content-slider-item-heading logico-content-wrapper-1">
                                  <span className="heading-content">
                                    Where Quick Commerce
                                    <br />
                                    <ShimmerText className="font-extrabold">
                                      Meets Quick Logistics
                                    </ShimmerText>
                                  </span>
                                </h1>
                                <div className="content-slider-item-text logico-content-wrapper-2">
                                  <div className="text-content">
                                    <p>
                                      MileTruth™ AI forecasts demand, protects promises,
                                      and coordinates every handoff from runway to
                                      doorstep.
                                    </p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        <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 wings-hero-bg">
                            <div className="slide-content">
                              <div className="slide-content-inner">
                                <h1 className="content-slider-item-heading logico-content-wrapper-1">
                                  <span className="heading-content">
                                    Doormile Wings
                                    <br />
                                    <ShimmerText className="font-extrabold">
                                      Same-Day Air
                                    </ShimmerText>
                                    <br className="wings-mobile-break" />
                                    {" "}
                                    <ShimmerText className="font-extrabold">
                                      Logistics
                                    </ShimmerText>
                                  </span>
                                </h1>
                                <div className="content-slider-item-text logico-content-wrapper-2">
                                  <div className="text-content">
                                    <p>
                                      Linking India&apos;s major regional capitals with
                                      AI-powered air movement and zero-emission EV
                                      last-mile delivery.
                                    </p>
                                  </div>
                                </div>  
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className="owl-nav">
                      <button
                        type="button"
                        className="owl-next"
                        onClick={toggleSlide}
                        aria-label="Next"
                        style={{ cursor: "pointer", border: "none", outline: "none" }}
                      />
                      <button
                        type="button"
                        className="owl-prev"
                        onClick={toggleSlide}
                        aria-label="Previous"
                        style={{ cursor: "pointer", border: "none", outline: "none" }}
                      />
                    </div>

                    <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>
                            <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>
    </>
  );
}