// SECTION: HOMEINTRO

//import './VideoSection.module.css'
import axios from 'axios'
import Container from 'components/BlogContainer'
import React, { useEffect, useState } from 'react'
import { Fade, Slide } from 'react-awesome-reveal'
import ReactPlayer from 'react-player/lazy'

// Homepage video 🡪 company profile

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/api/homepageSection/homeIntroData')
        setData(response.data)
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    }

    fetchData()
  }, [])

  return (
    <>
      <div className="from-stone-300 bg-gradient-to-b to-white">
        <Container>
          <div className="w-full pb-10 pt-10 sm:py-20">
            {/* <Slide duration={3000} cascade damping={0.1} triggerOnce> */}
            <div className="mx-auto w-full">
              <div className="p-5 pt-5 sm:m-0 sm:pb-0 sm:pt-10">
                <Fade direction={'up'} duration={600} triggerOnce cascade>
                  <div>
                    {data.map((item) => (
                      <h1
                        key={item._id}
                        className="mb-3 text-center font-PlayfairDisplay text-2xl font-bold text-gray-900 sm:text-6xl"
                      >
                        {item.heading}
                      </h1>
                    ))}
                  </div>

                  {data.map((item) => (
                    <h3
                      key={item._id}
                      className="text-md sm:text-md pb-5 pl-10 pr-10 pt-0 text-center font-PlayfairDisplay font-medium text-gray-900 sm:text-2xl"
                    >
                      {item.subheading}
                    </h3>
                  ))}
                </Fade>

                <div className="mx-auto mb-0 mt-0 w-5/6">
                  <Fade duration={700} delay={700} triggerOnce cascade>
                    {data.map((item) => (
                      <div
                        key={item._id}
                        className="text-md sm:text-1xl text-stone-500 pb-5 text-center font-sans font-light leading-relaxed sm:text-center"
                        dangerouslySetInnerHTML={{
                          __html: item.paragraph[0].children[0].text,
                        }}
                      ></div>
                    ))}

                    {data.map((item) => (
                      <div
                        key={item._id}
                        className="text-md sm:text-1xl text-stone-500 pb-5 text-center font-sans font-light leading-relaxed sm:text-center"
                        dangerouslySetInnerHTML={{
                          __html: item.paragraph[1].children[0].text,
                        }}
                      ></div>
                    ))}

                    {data.map((item) => (
                      <div
                        key={item._id}
                        className="text-md sm:text-1xl text-stone-500 pb-5 text-center font-sans font-light leading-relaxed sm:text-center"
                        dangerouslySetInnerHTML={{
                          __html: item.paragraph[2].children[0].text,
                        }}
                      ></div>
                    ))}
                  </Fade>

                  {/* <p className='font-sans sm:text-center text-center text-md sm:text-2xl font-light text-stone-500 pb-5 leading-relaxed'>
                      We are thrilled to have you here and we hope that you will find our website informative and inspiring.
                      GWK Cultural Park is home to some of the most iconic cultural landmarks in Bali, including the magnificent Garuda Wisnu Kencana statue, which stands tall at 121 meters and is a representation of the Hindu god Vishnu and his mount, the Garuda bird.</p> */}
                </div>
                {/* <div className='w-4/5 sm:w-1/2 mx-auto'>
                    <p className='font-sans sm:text-center text-center text-md sm:text-1xl font-light text-stone-500 pb-5 leading-relaxed'>
                      Our park also features a range of cultural activities and performances, including the Kecak Garuda Wisnu dance, traditional Balinese music and dance performances, and much more.
                      Whether you are a history buff, an art enthusiast, or simply looking for a fun and unique experience in Bali, GWK Cultural Park has something for everyone. We invite you to explore our website and discover all that our park has to offer. Thank you for visiting GWK Cultural Park online, and we hope to see you in person soon!
                    </p>
                  </div> */}
              </div>
            </div>
            {/* </Slide> */}
          </div>
        </Container>
      </div>
    </>
  )
}

export default HomeIntro