import { height } from 'components/OpenGraphImage'
import Image from 'next/image'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'

export default function CTA() {
  return (
    <div className="row g-0 pb-32 pl-0 pr-0">
      <div className="col-12 pb-3 text-center md:col-4 sm:pb-0">
        <Link href="#">
          <button className="spacing border-stone-300 text-stone-500 w-full rounded-md border-[1px] bg-stone-100 px-10 py-2 font-sans font-semibold leading-7 tracking-wide shadow-sm duration-300 ease-in hover:border-yellow-600 hover:bg-yellow-600 hover:text-stone-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow-500 sm:w-auto">
            STROLL THE PARK
          </button>
        </Link>
      </div>
      <div className="col-12 pb-3 text-center md:col-4 sm:pb-0">
        <a
          href="https://bit.ly/buttonbuyticketwebsite"
          target="_blank"
          rel="noopener noreferrer"
        >
          <button className="spacing w-full rounded-md bg-yellow-600 px-10 py-2 font-sans font-semibold leading-7 tracking-wide text-stone-50 shadow-sm duration-300 ease-in hover:bg-yellow-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow-500 sm:w-auto">
            BUY TICKET
          </button>
        </a>
      </div>
      <div className="col-12 pb-3 text-center md:col-4 sm:pb-0">
        <Link href="mailto:info@gwkbali.com">
          <button className="spacing border-stone-300 text-stone-500 w-full rounded-md border-[1px] bg-stone-100 px-10 py-2 font-sans font-semibold leading-7 tracking-wide shadow-sm duration-300 ease-in hover:border-yellow-600 hover:bg-yellow-600 hover:text-stone-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow-500 sm:w-auto">
            ASK QUESTION
          </button>
        </Link>
      </div>
    </div>
  )
}