import axios from 'axios'
import Image from 'next/image'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'
import { Fade, Slide } from 'react-awesome-reveal'

import Container from 'components/BlogContainer'

const CulturalSection = () => {
  const [data, setData] = useState([])

  useEffect(() => {
    const fetchCulturalSection = async () => {
      try {
        const response = await axios.get(
          '/api/homepageSection/culturalSectionData'
        )

        setData(response.data)
        //console.log(data)
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    }

    fetchCulturalSection()
  }, [])

  return (
    <Container>
      <Fade duration={2000} fraction={0} damping={0.5} triggerOnce>
        <Container>
          <div className="mb-2 grid grid-cols-3 gap-0 pt-5">
            <div className="col-span-2">
              <Fade
                direction={'up'}
                duration={600}
                fraction={1}
                delay={300}
                triggerOnce
              >
                {data.map((item) => (
                  <h2
                    key={item._id}
                    className="mb-0 pb-0 text-left font-serif text-lg font-semibold leading-tight text-yellow-500 sm:text-3xl sm:leading-normal "
                  >
                    {item.heading}
                  </h2>
                ))}
              </Fade>
              <Fade duration={3000} fraction={0} delay={600} triggerOnce>
                {data.map((item) => (
                  <h3
                    key={item._id}
                    className="text-stone-700 pb-3 text-left text-2xl font-bold leading-tight tracking-normal sm:text-6xl sm:leading-normal"
                  >
                    {item.subheading}
                  </h3>
                ))}
              </Fade>
            </div>
          </div>
        </Container>

        <div className="mx-auto w-full">
          <div className="">
            <Fade duration={600} fraction={0} delay={600} triggerOnce cascade>
              <div className="bg-slate-100 relative w-full">
                {data.map((item) => (
                  <Link key={item._id} href={item.url}>
                    <Image
                      key={item._id}
                      src="/images/a3e4030a899a671867168b7064dac947e7aabc1d-1920x1080.jpeg"
                      // src={item.mainImage}
                      alt={item.mainimage.alt}
                      width={1440}
                      height={600}
                      sizes="(max-width: 768px) 100vw, (max-width: 1440px) 50vw, 33vw"
                      quality={75}
                      placeholder="empty"
                      className="duration-700 ease-linear hover:contrast-125 hover:transition"
                    />
                  </Link>
                ))}
              </div>
            </Fade>
            <div className="w-full bg-stone-900 p-5 sm:p-5">
              <Container>
                <Fade duration={600} delay={0} triggerOnce>
                  <div className="text-stone-300 inline-block text-center align-middle text-xl font-extralight sm:text-left sm:text-4xl">
                    <span className="text-yellow-600">
                      The Spectacular Kecak
                    </span>
                    <span className="ml-1 font-medium text-white sm:ml-3 sm:font-medium">
                      Garuda Wisnu
                    </span>
                    <span className="m-auto inline w-full text-center sm:ml-2 sm:inline">
                      {/* play button */}
                      {/* <Link key={item._id} href={item.url}> */}
                      {/* <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={0.75} stroke="currentColor" className="w-10 h-10 pl-1 sm:pl-0 sm:w-12 sm:h-12 inline stroke-yellow-500 hover:stroke-yellow-300 ease-in duration-150">
                          <path strokeLinecap="round" strokeLinejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                          <path strokeLinecap="round" strokeLinejoin="round" d="M15.91 11.672a.375.375 0 010 .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z" />
                        </svg> */}
                      {/* </Link> */}
                    </span>
                  </div>
                </Fade>
              </Container>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-0 sm:grid-cols-3">
          <Fade duration={600} fraction={0} delay={600} triggerOnce cascade>
            {/* BANNER 1 */}
            <div className="bg-slate-100 w-full sm:relative sm:overflow-hidden">
              {data.map((item) => (
                <Link key={item._id} href={item.bannerSatu.urlbanner}>
                  <Image
                    key={item._id}
                    src={item.bannerSatuImgURL}
                    alt={item.bannerSatu.image.alt}
                    width={500}
                    height={500}
                    sizes="(max-width: 768px) 100vw, (max-width: 1440px) 50vw, 33vw"
                    quality={75}
                    placeholder="empty"
                    className="aspect-square duration-700 ease-in-out hover:contrast-125 hover:transition"
                  />
                </Link>
              ))}
              <div className="bg-yellow-600 px-5 py-4">
                {data.map((item) => (
                  <Link key={item._id} href={item.bannerSatu.urlbanner}>
                    <h3
                      key={item._id}
                      className="text-md text-center font-semibold uppercase tracking-wide text-stone-100 drop-shadow-sm duration-500 ease-in-out hover:text-white hover:transition sm:text-xl"
                    >
                      {item.bannerSatu.heading}
                    </h3>
                  </Link>
                ))}
              </div>
            </div>
            {/* BANNER 2 */}
            <div className="bg-slate-100 w-full sm:relative sm:overflow-hidden">
              {data.map((item) => (
                <Link key={item._id} href={item.bannerDua.urlbanner}>
                  <Image
                    key={item._id}
                    src={item.bannerDuaImgURL}
                    alt={item.bannerDua.image.alt}
                    width={500}
                    height={500}
                    sizes="(max-width: 768px) 100vw, (max-width: 1440px) 50vw, 33vw"
                    quality={75}
                    placeholder="empty"
                    className="aspect-square duration-500 ease-in-out hover:contrast-125 hover:transition"
                  />
                </Link>
              ))}
              <div className="bg-yellow-600 px-5 py-4">
                {data.map((item) => (
                  <Link key={item._id} href={item.bannerDua.urlbanner}>
                    <h3
                      key={item._id}
                      className="text-md text-center font-semibold uppercase tracking-wide text-stone-100 drop-shadow-sm duration-500 ease-in-out hover:text-white hover:transition sm:text-xl"
                    >
                      {item.bannerDua.heading}
                    </h3>
                  </Link>
                ))}
              </div>
            </div>

            {/* BANNER 3 */}
            <div className="bg-slate-100 w-full sm:relative sm:overflow-hidden">
              {data.map((item) => (
                <Link key={item._id} href={item.bannerTiga.urlbanner}>
                  <Image
                    key={item._id}
                    src={item.bannerTigaImgURL}
                    alt={item.bannerTiga.image.alt}
                    width={500}
                    height={500}
                    sizes="(max-width: 768px) 100vw, (max-width: 600px) 50vw, 33vw"
                    quality={75}
                    className="aspect-square duration-500 ease-in-out hover:contrast-125 hover:transition"
                  />
                </Link>
              ))}
              <div className="bg-yellow-600 px-5 py-4">
                {data.map((item) => (
                  <Link key={item._id} href={item.bannerTiga.urlbanner}>
                    <h3
                      key={item._id}
                      className="text-md text-center font-semibold uppercase tracking-wide text-stone-100 drop-shadow-sm duration-500 ease-in-out hover:text-white hover:transition sm:text-xl"
                    >
                      {item.bannerTiga.heading}
                    </h3>
                  </Link>
                ))}
              </div>
            </div>
          </Fade>
        </div>
      </Fade>
    </Container>
  )
}

export default CulturalSection