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

import { config, library } from '@fortawesome/fontawesome-svg-core'
import {
  faFacebookSquare,
  faInstagramSquare,
  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 } from 'react-awesome-reveal'

config.autoAddCss = false

function FooterTemp() {
  return (
    <div className="mx-auto w-full">
      {/* <FontAwesomeIcon icon={faFaceRelieved} />
      <FontAwesomeIcon icon={fa-brands fa-square-instagram} /> */}

      {/* <div className="mx-auto w-full h-52 p-0 align-middle" style={{

        backgroundImage: "url('bgwavestone900.svg')",
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "top"

      }}></div> */}

      {/* mobile */}
      <div className="relative block w-full sm:hidden">
        <div className="bg-slate-50 fixed bottom-0 w-full">
          <div>
            <Link href="https://ticket.gwkbali.com/">
              <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  mt-14 hidden bg-stone-900 p-0 sm:p-14">
        <div>&copy;</div>
      </div>

      <div className="mx-auto mt-14 hidden bg-stone-900 p-0 sm:hidden sm:p-14">
        <Container>
          {/* mid & lg */}
          <div className="hidden columns-4 sm:block">
            <div className="w-full">
              <Image
                src="/images/logo-stayintouch.svg"
                alt="GWK Bali"
                width={100}
                height={100}
                className="align-middle"
              />
            </div>
            <div className="w-full">
              <ul>
                <li>
                  <Link
                    href="/pages/newsroom"
                    className="text-sm font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                  >
                    Newsroom & Media
                  </Link>
                </li>
                <li>
                  <Link
                    href="/"
                    className="text-sm font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                  >
                    Event Calendar
                  </Link>
                </li>
                <li>
                  <Link
                    href="/"
                    className="text-sm font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                  >
                    Gallery
                  </Link>
                </li>
              </ul>
            </div>
            <div className="w-full">
              <ul>
                <li>
                  <Link
                    href="/"
                    className="text-sm font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                  >
                    <span className="pr-2">
                      <FontAwesomeIcon icon={faInstagramSquare} />
                    </span>
                    <span>Instagram</span>
                  </Link>
                </li>
                <li>
                  <Link
                    href="/"
                    className="text-sm font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                  >
                    <span className="pr-2">
                      <FontAwesomeIcon icon={faFacebookSquare} />
                    </span>
                    Facebook
                  </Link>
                </li>
                <li>
                  <Link
                    href="/"
                    className="text-sm font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                  >
                    <span className="pr-2">
                      <FontAwesomeIcon icon={faYoutubeSquare} />
                    </span>
                    Youtube
                  </Link>
                </li>
              </ul>
            </div>
            <div className="w-full">
              <ul>
                <li>
                  <Link
                    href="/"
                    className="text-sm font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                  >
                    Corporate
                  </Link>
                </li>
                <li>
                  <Link
                    href="/"
                    className="text-sm font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                  >
                    Careers
                  </Link>
                </li>
                <li>
                  <Link
                    href="/"
                    className="text-sm font-light text-stone-400 duration-300 ease-in hover:text-yellow-600"
                  >
                    Contact Us
                  </Link>
                </li>
              </ul>
            </div>
          </div>
        </Container>
      </div>

      {/* <Fade duration={2000}>
      <div className="relative hidden sm:block">
        <div className="absolute right-0 bottom-0">
          <Image src="/images/garudawisnu.png" width={300} height={200} alt="Garuda Wisnu Kencana" />
        </div>
      </div>
      </Fade> */}
    </div>
  )
}

export default FooterTemp