import Slider1 from "../../public/assets/img/header-01.webp"
import Slider2 from "../../public/assets/img/header-02.webp"
import Slider3 from "../../public/assets/img/header-03.webp"
import SliderMobile1 from "../../public/assets/img/header-01-mobile.webp"
import SliderMobile2 from "../../public/assets/img/header-02-mobile.webp"
import SliderMobile3 from "../../public/assets/img/header-03-mobile.webp"
import GoBlack from "../../public/assets/img/go-icon-black.webp"

const SliderDos = () => {
    return (
        <>
            <div id="carouselExampleCaptions" className="relative" data-te-carousel-init data-te-carousel-slide>
                <div className="absolute bottom-10 left-24 z-[2] flex list-none justify-center p-0" data-te-carousel-indicators>
                    <button 
                        type="button" 
                        data-te-target="#carouselExampleCaptions" 
                        data-te-slide-to="0" 
                        data-te-carousel-active="true"
                        className="mx-[3px] box-content h-[5px] w-[100px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-eBlack aria-current:bg-eBlue bg-clip-padding p-0 -indent-[999px] transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" 
                        aria-current="true" 
                        aria-label="Slide 1">
                        </button>
                    <button 
                        type="button" 
                        data-te-target="#carouselExampleCaptions" 
                        data-te-slide-to="1" 
                        className="mx-[3px] box-content h-[5px] w-[100px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-eBlack aria-current:bg-eBlue bg-clip-padding p-0 -indent-[999px] transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" 
                        aria-label="Slide 2">
                        </button>
                    <button 
                        type="button" 
                        data-te-target="#carouselExampleCaptions" 
                        data-te-slide-to="2" 
                        className="mx-[3px] box-content h-[5px] w-[100px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-eBlack aria-current:bg-eBlue bg-clip-padding p-0 -indent-[999px] transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" 
                        aria-label="Slide 3">
                        </button>
                </div>
                <div className="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
                    <div className="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-active="true" data-te-carousel-item style={{backfaceVisibility: "hidden"}}>
                        <img src={Slider1} className="block w-full" alt="..." />
                        <div className="absolute hidden lg:block top-0 left-0 lg:top-10 lg:left-20 xl:top-20 xl:left-28 z-10">
                            <p className="text-sm lg:text-4xl font-MontserratSemiBold bg-eYellow w-1/3 px-2 py-1 rounded-md">Puertas para</p>
                            <p className="text-sm lg:text-4xl font-MontserratSemiBold w-1/3 p-1">tu hogar</p>
                            <p className="w-1/3">Protege lo que más te importa con nuestras puertas de seguridad y siéntete más tranquilo al salir de casa.</p>
                            <div className="w-1/3 flex justify-end items-end">
                                <button className="bg-eYellow text-eBlack font-MontserratRegular rounded-full py-2 px-5">
                                    <div className="flex justify-center items-center gap-2">
                                        Ver Productos
                                        <img src={GoBlack} alt="Ver productos" className="ml-2 w-4" />
                                    </div>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-item style={{backfaceVisibility: "hidden"}}>
                        <img src={Slider2} className="block w-full" alt="..." />
                    </div>
                    <div className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-item style={{backfaceVisibility: "hidden"}}>
                        <img src={Slider3} className="block w-full" alt="..." />
                    </div>
                </div>
                {/*
                <button className="absolute top-0 bottom-0 left-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none" type="button" data-te-target="#carouselExampleCaptions" data-te-slide="prev">
                    <span className="inline-block h-8 w-8">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="h-6 w-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
                        </svg>
                    </span>
                    <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]" >
                        Previous
                    </span>
                </button>
                <button className="absolute top-0 bottom-0 right-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none" type="button" data-te-target="#carouselExampleCaptions" data-te-slide="next">
                    <span className="inline-block h-8 w-8">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="h-6 w-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                        </svg>
                    </span>
                    <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]" 
                        >Next
                    </span>
                </button>
                */}
            </div>
        </>
    )
}

export default SliderDos
