Untitled

import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import Image from 'next/image'
import star1 from '../../public/assets/star-1.svg'
import star2 from '../../public/assets/star-2.svg'
import star3 from '../../public/assets/star-3.svg'
import star1Dark from '../../public/assets/star-1-dark.svg'
import star2Dark from '../../public/assets/star-2-dark.svg'
import star3Dark from '../../public/assets/star-3-dark.svg'

import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import Link from 'next/link'

const darkGradient =
  'dark:bg-gradient-to-br dark:from-[#1E293B] dark:via-[#273449] dark:to-[#64748B] dark:bg-size-125 dark:bg-pos-25 dark:hover:bg-pos-100 dark:transition-all dark:duration-500'

const cards = [
  {
    title: 'Interactive learning to help you reinvent the catalog',
    body: 'Ten-minute learning sandbox that lets you see PXM in action. Some JS knowledge is helpful, but no tools are required.',
    link: '/learn/creating-an-online-store/store-preview',
    externalLink: false,
    linkText: 'Start learning',
    image: star1,
    imageDark: star1Dark,
    imagePosition: 'right-4 top-1/2 z-10 transform -translate-y-1/2',
    gradient: `card-gradient-1 hover:card-gradient-1-hover ${darkGradient}`,
  },
  {
    title: 'More flexibility with your Composable Commerce solution',
    body: 'Our Composable Commerce solution gives you the tools and services you need to create experiences that wow your customers and grow your business.',
    link: 'https://www.elasticpath.com/composable-commerce?utm_medium=cpc&utm_source=google&utm_campaign=Branded%20North%20America',
    externalLink: true,
    linkText: 'Read more',
    image: star2,
    imageDark: star2Dark,
    imagePosition: 'left-0 top-0 ml-4 mt-4',
    gradient: `card-gradient-2 hover:card-gradient-2-hover ${darkGradient}`,
  },
  {
    title: 'Helping you build amazing product experiences',
    body: 'Our customers have unique catalog requirements, sell products across multiple channels in many geographies, and need a solution that scales with their business.',
    link: 'https://www.elasticpath.com/case-studies?utm_medium=cpc&utm_source=google&utm_campaign=Branded%20North%20America',
    externalLink: true,
    linkText: 'Read more',
    image: star3,
    imageDark: star3Dark,
    imagePosition: 'left-6 top-10 ml-4 mt-4 h-3/4',
    gradient: `card-gradient-3 hover:card-gradient-3-hover ${darkGradient}`,
  },
]

const FeatureCards = () => {
  return (
    <Swiper
      className="mb-6 lg:mb-0"
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      spaceBetween={20}
      slidesPerView={1}
      freeMode={true}
      scrollbar={{ draggable: true }}
      breakpoints={{
        640: {
          slidesPerView: 1,
        },
        768: {
          slidesPerView: 2,
        },
        1024: {
          slidesPerView: 3,
        },
      }}
    >
      {cards.map((card, i) => {
        return (
          <div key={i}>
            <SwiperSlide>
              <div
                className={`${card.gradient} relative mb-8 overflow-hidden rounded-[3.125rem] border border-ep-lighter-gray px-10 py-9 transition-all duration-200 dark:border-ep-darker-gray dark:hover:border-darkmode-white/75 lg:mb-0`}
              >
                <a
                  href={card.link}
                  target={`${card.externalLink ? '_blank' : ''}`}
                  className="cursor-pointer"
                >
                  {/* <Link
                  href={card.link}
                  rel={`${card.externalLink ? 'noopener noreferrer' : ''}`}
                  target={`${card.externalLink ? '_blank' : ''}`}
                > */}
                  {/* Pretty messy implementation to get all of the cards of equal height within the slider - couldn't get a better solution working */}
                  <div className="relative z-20 grid grid-rows-[3.5rem_6.5rem_auto] gap-1 sm:grid-rows-[2.4rem_5.5rem_auto] md:sm:grid-rows-[4.1rem_7.8rem_auto] lg:sm:grid-rows-[5.4rem_9.1rem_auto] xl:sm:grid-rows-[auto_7.9rem_auto]">
                    <h4 className="mb-3.5 text-sm font-semibold dark:text-darkmode-white md:text-base">
                      {card.title}
                    </h4>
                    <div className="mb-6 text-sm dark:text-darkmode-white">
                      {card.body}
                    </div>
                    <a
                      className="text-sm font-semibold text-ep-blue underline dark:text-darkmode-links"
                      href={card.link}
                      target={`${card.externalLink ? '_blank' : ''}`}
                    >
                      {card.linkText}
                    </a>
                  </div>
                  <Image
                    className={`absolute ${card.imagePosition} z-10 dark:hidden`}
                    src={card.image}
                    alt="Decorative star image"
                  />
                  <Image
                    className={`absolute ${card.imagePosition} z-10 hidden dark:flex`}
                    src={card.imageDark}
                    alt="Decorative star image"
                  />
                  {/* </Link> */}
                </a>
              </div>
            </SwiperSlide>
          </div>
        )
      })}
    </Swiper>
  )
}

export default FeatureCards