import Link from 'next/link'
import Image from 'next/image'
import BusinessContact from '@/components/BusinessContact'
import BusinessSocials from '@/components/BusinessSocials'
import BusinessHours from '@/components/BusinessHours'

const LOGO_SRC =
  'https://uploads.vulai.co.za/vula-uploads/e691b2f9-937a-45fd-a18f-c5b9cf1193f2/library/b5f9e225d0e8b533af6f7549ff80af8be30bdc813fedd7985bc93c23e6799eda.png'

const EXPLORE_LINKS = [
  { label: 'Home', href: '/' },
  { label: 'About', href: '/#about-the-practice' },
  { label: 'Services', href: '/#chiropractic-services' },
  { label: 'Team', href: '/#meet-the-team' },
  { label: 'Gallery', href: '/#clinic-gallery' },
  { label: 'Contact', href: '/#visit-the-clinic' },
]

export default function Footer() {
  const year = new Date().getFullYear()

  return (
    <footer className='bg-card'>
      <div className='mx-auto w-full max-w-6xl px-6 py-16 lg:px-10 lg:py-20'>
        <div className='grid gap-12 lg:grid-cols-4 lg:gap-10'>
          <div>
            <Link
              href='/'
              className='inline-flex items-center transition-all duration-200 ease-out hover:opacity-80'
            >
              <Image
                src={LOGO_SRC}
                alt='The Bay Chiro logo'
                width={0}
                height={0}
                sizes='200px'
                className='h-9 w-auto object-contain'
              />
            </Link>
            <p className='mt-5 max-w-sm text-sm text-muted-foreground'>
              Chiropractic assessment, adjustment and rehabilitation for the whole household: babies from six weeks,
              moms-to-be, athletes, and anyone whose working day leaves them stiff, sore or constantly drained.
            </p>
            <Link
              href='/services'
              className='mt-7 inline-flex items-center justify-center rounded-full bg-primary px-7 py-3.5 text-sm font-semibold text-primary-foreground shadow-soft transition-all duration-200 ease-out hover:-translate-y-0.5 hover:bg-primary/90'
            >
              Book Appointment
            </Link>
          </div>

          <div>
            <h3 className='font-heading text-sm font-semibold tracking-tight text-foreground'>Contact</h3>
            <BusinessContact className='mt-5 text-sm text-muted-foreground' />
          </div>

          <div>
            <BusinessHours compact />
          </div>

          <div>
            <h3 className='font-heading text-sm font-semibold tracking-tight text-foreground'>Explore</h3>
            <ul className='mt-5 space-y-3'>
              {EXPLORE_LINKS.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className='text-sm text-muted-foreground transition-all duration-200 ease-out hover:text-primary'
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
            <BusinessSocials className='mt-6' />
          </div>
        </div>

        <div className='mt-14 flex flex-col gap-3 pt-8 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between'>
          <p>© {year} The Bay Chiro. All rights reserved.</p>
          <p>Dr K.P. Khumalo · M.Tech.Chiro (S.A.)</p>
        </div>
      </div>
    </footer>
  )
}