"use client";
import Image from "next/image";
import { LinkButton } from "../form/forms";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/effect-fade";
import "swiper/css/pagination";

import { Autoplay, EffectFade, Pagination, Virtual } from "swiper/modules";
import { AWS_CDN_URL } from "@/utils/staticValues";

type Props = { bottomSlides?: string[] };

export default function StoryBottom({ bottomSlides = [] }: Props) {


  
  return (
    <div className="relative flex flex-col overflow-hidden bg-linear-to-t from-cyan-600 to-gray-100 py-16 md:py-32">
      <div className="from-vivid-voilet absolute -bottom-[5%] -left-[5%] z-2 h-1/2 w-4/5 rounded-full bg-linear-to-t from-40% to-fuchsia-700/0 opacity-50 blur-[80px]" />
      <div className="absolute right-0 bottom-[10%] -left-8 z-10 w-[88%] md:left-auto md:w-[25%]">
        <Image
          src="/images/motif-ccum-peacock.png"
          height={633}
          width={900}
          alt="peacock thread"
          className="img-responsive"
        />
      </div>
      <div className="storyWrapper z-10">
        <p className="largeTitle uppercase">Co-Create your morni</p>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
          <div className="border-t-2 pt-2 md:pt-0 md:text-right">
            <h4>
              Or go back to the boring clothes that do not feel like {"'"}you
              {"'"}?
            </h4>
          </div>
          <div className="flex w-full flex-col gap-8">
            <div className="relative">
              <div className="absolute -right-4 md:-right-12 -bottom-3 md:-bottom-1 left-auto z-10 -rotate-18">
                <div className="font-hasiant text-5xl">
                  Bring your visions to life
                </div>
              </div>
              <div>
                <Swiper
                  loop={true}
                  effect="fade"
                  pagination={{
                    clickable: true,
                  }}
                  autoplay={{
                    delay: 3000, // time between slides in ms
                    disableOnInteraction: false, // keep autoplay after user swipes
                  }}
                  modules={[EffectFade, Pagination, Autoplay, Virtual]}
                  className="story-product-gallery-swiper"
                >
                  {bottomSlides.map((slide, idx) => (
                    <SwiperSlide key={idx} virtualIndex={idx}>
                      <div className="relative border w-full overflow-hidden bg-amber-200 aspect-square">
                        <Image
                        src={`${AWS_CDN_URL}/${slide}`}
                        height={800}
                        width={800}
                        alt={`stories slide ${idx}`}
                        className="bg-cover h-full w-full object-cover object-center"
                      />
                      <div className="absolute left-0 top-0 h-full w-full mob-noise opacity-50" />
                      </div>
                    </SwiperSlide>
                  ))}
                </Swiper>
              </div>
            </div>

            <div className="hidden md:flex mt-4 md:mt-0">
              <LinkButton
                id="link_home_get_started_web"
                label="Get started"
                href="/start-co-creation"
                color="gray"
                hairline="white"
              />
            </div>
          </div>
          <div className="flex h-full w-full flex-col items-center justify-center pt-4 align-middle md:w-2/3 md:pt-0">
            <div className="ml-0 text-xs md:ml-[15%]">
              Enter the Morni flow, where visionary designers and master
              artisans dive into the ether with you. Together we translate raw
              imagination into wearable art—blending natural materials, heritage
              techniques, and next-level design tech to craft pieces that feel
              entirely your own.
            </div>
            <div className="flex md:hidden w-full mt-8">
              <LinkButton
                id="link_home_get_started_web"
                label="Get started"
                href="/start-co-creation"
                color="gray"
                hairline="white"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}