import '@fortawesome/fontawesome-svg-core/styles.css'

import { config, library } from '@fortawesome/fontawesome-svg-core'
import {
  faFacebookSquare,
  faInstagramSquare,
  faLinkedin,
  faYoutubeSquare,
} from '@fortawesome/free-brands-svg-icons'
import {
  faCompass,
  faMessage,
  faTicketSimple,
  faWalking,
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Container from 'components/BlogContainer'
import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
import { Fade, Slide } from 'react-awesome-reveal'

config.autoAddCss = false

function Footer() {
  return (
    <div className="mx-auto w-full pt-20 sm:pt-10">
      {/* mobile */}
      <div className="relative block w-full sm:hidden">
        <div className="bg-slate-50 fixed bottom-0 w-full">
          <div>
            <Link href="https://bit.ly/buttonticketmobile" target='_blank'>
              <button className="min-h-full w-full border-yellow-600 bg-yellow-600 px-4 py-4 text-base font-light leading-tight text-stone-50 duration-150 ease-in hover:border-yellow-500 hover:bg-yellow-500 hover:text-white">
                <FontAwesomeIcon icon={faTicketSimple} />
                <span className="px-3 font-sans font-semibold">Buy Ticket</span>
              </button>
            </Link>
          </div>
        </div>
      </div>

      <div className="mx-auto w-full bg-stone-900 pb-10 pl-0 pr-0 pt-0 sm:block sm:p-14 ">
        <Container>
          <div className="w-full">
            <div className="mb-1 grid gap-0 pt-5 sm:mb-2 sm:grid-cols-3">
              <div className="col-span-1 mx-auto pb-10 pt-10 sm:pt-0">
                <Fade
                  duration={600}
                  fraction={0}
                  delay={1200}
                  triggerOnce
                  cascade
                >
                  <p className="pb-5 text-center font-sans text-sm font-light text-stone-400">
                    GWK Cultural Park is a member of
                  </p>
                  <Fade direction="up" duration={1800} delay={600}>
                    <Link href={'https://www.alam-sutera.com/'} target="_blank">
                      <Image
                        src={'/images/LogoAlamSutera-White-Small.png'}
                        alt="Alam Sutera"
                        width={150}
                        height={150}
                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                        quality={75}
                        placeholder="empty"
                        className="mx-auto aspect-auto h-auto w-36"
                      />
                    </Link>
                  </Fade>
                </Fade>
              </div>

              <div className="m-auto pb-10 sm:col-span-1">
                <Fade
                  duration={600}
                  fraction={0}
                  delay={600}
                  direction="up"
                  triggerOnce
                  cascade
                >
                  <p className="pb-3 text-center font-serif text-lg font-medium text-stone-200 sm:text-left">
                    GWK Cultural Park
                  </p>
                  <p className="text-center font-sans text-sm font-light text-stone-400 sm:text-left">
                    Uluwatu St, Ungasan, South Kuta, <br /> Badung Regency, Bali
                    80364
                  </p>
                  <p className="text-center font-sans text-sm font-light text-stone-400 sm:text-left">
                    Phone: (0361) 700808
                  </p>
                </Fade>
              </div>
              <div className="m-auto sm:col-span-1">
                <ul className="text-center sm:text-left">
                  <Fade
                    duration={600}
                    fraction={0}
                    delay={600}
                    direction="up"
                    triggerOnce
                    cascade
                  >
                    <li>
                      <Link
                        href="https://www.alam-sutera.com"
                        target="_blank"
                        className="font-sans text-sm font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                      >
                        Corporate
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/career"
                        className="font-sans text-sm font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                      >
                        Career & Opportunity
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/media-corner/page/1"
                        className="font-sans text-sm font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                      >
                        News & Media
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/pages/gallery"
                        className="font-sans text-sm font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                      >
                        Gallery
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="mailto:customer@gwkbali.com"
                        className="font-sans text-sm font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                      >
                        Contact Us
                      </Link>
                    </li>
                  </Fade>
                </ul>
              </div>
            </div>
          </div>

          {/* social media */}
          <div className="pb-14 pt-14 text-center align-middle">
            <ul>
              <li className="inline-block px-1">
                <Link
                  href="https://www.instagram.com/gwkbali/"
                  target="_blank"
                  className="font-sans text-3xl font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                >
                  <span className="pr-2">
                    <FontAwesomeIcon icon={faInstagramSquare} />
                  </span>
                  <span></span>
                </Link>
              </li>
              <li className="inline-block px-1">
                <Link
                  href="https://www.facebook.com/gwkbali/"
                  target="_blank"
                  className="font-sans text-3xl font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                >
                  <span className="pr-2">
                    <FontAwesomeIcon icon={faFacebookSquare} />
                  </span>
                </Link>
              </li>
              <li className="inline-block px-1">
                <Link
                  href="https://www.linkedin.com/company/garuda-wisnu-kencana-cultural-park-bali/"
                  target="_blank"
                  className="font-sans text-3xl font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                >
                  <span className="pr-2">
                    <FontAwesomeIcon icon={faLinkedin} />
                  </span>
                </Link>
              </li>
              <li className="inline-block px-1">
                <Link
                  href="https://www.youtube.com/@GWKCulturalParkOfficial"
                  target="_blank"
                  className="font-sans text-3xl font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                >
                  <span className="pr-2">
                    <FontAwesomeIcon icon={faYoutubeSquare} />
                  </span>
                </Link>
              </li>
            </ul>
          </div>

          <div className="w-full items-center">
            <p className="text-center font-sans text-sm text-stone-600">
              &copy; All rights reserved - Garuda Wisnu Kencana Cultural Park
            </p>
          </div>
        </Container>
      </div>
    </div>
  )
}

export default Footer