import { useEffect, useState } from 'react'
import { Link, NavLink, useLocation } from 'react-router-dom'
import { AnimatePresence, motion } from 'framer-motion'

const links = [
  { to: '/about', label: 'About' },
  { to: '/treatments', label: 'Treatments' },
  { to: '/packages', label: 'Packages' },
  { to: '/gallery', label: 'Gallery' },
  { to: '/team', label: 'Team' },
  { to: '/blog', label: 'Blog' },
  { to: '/faqs', label: 'FAQs' },
]

export default function Navbar() {
  const [scrolled, setScrolled] = useState(false)
  const [open, setOpen] = useState(false)
  const { pathname } = useLocation()

  // Only the homepage has a full-bleed hero behind the nav.
  const overHero = pathname === '/' && !scrolled

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60)
    onScroll()
    addEventListener('scroll', onScroll, { passive: true })
    return () => removeEventListener('scroll', onScroll)
  }, [])

  useEffect(() => setOpen(false), [pathname])

  const linkColor = overHero
    ? 'text-white/90 hover:text-turquoise-200'
    : 'text-ink hover:text-turquoise-500'

  return (
    <>
      <nav
        className={`fixed inset-x-0 top-0 z-50 transition-all duration-300 ${
          overHero && !open
            ? 'py-5'
            : 'bg-cream/85 py-3 shadow-[0_8px_30px_-12px_rgb(21_94_117/0.18)] backdrop-blur-xl'
        }`}
      >
        <div className="wrap flex items-center justify-between">
          <Link
            to="/"
            className={`font-display text-[1.35rem] font-bold transition-colors ${
              overHero && !open ? 'text-white' : 'text-ocean-700'
            }`}
          >
            Touch{' '}
            <em className={overHero && !open ? 'text-turquoise-200' : 'text-turquoise-500'}>
              Therapies
            </em>
          </Link>

          <ul className="hidden items-center gap-7 lg:flex">
            {links.map((l) => (
              <li key={l.to}>
                <NavLink
                  to={l.to}
                  className={({ isActive }) =>
                    `text-[0.9rem] font-medium transition-colors ${linkColor} ${
                      isActive ? '!text-turquoise-500' : ''
                    }`
                  }
                >
                  {l.label}
                </NavLink>
              </li>
            ))}
            <li>
              <Link
                to="/contact"
                className="rounded-full bg-turquoise-500 px-5 py-2.5 text-[0.9rem] font-semibold text-white transition-all hover:-translate-y-0.5 hover:shadow-[0_10px_22px_-8px_rgb(8_145_178/0.55)]"
              >
                Book Now
              </Link>
            </li>
          </ul>

          <button
            className="relative z-[60] flex h-10 w-10 flex-col items-center justify-center gap-[5px] lg:hidden"
            aria-label={open ? 'Close menu' : 'Open menu'}
            aria-expanded={open}
            onClick={() => setOpen(!open)}
          >
            {[0, 1, 2].map((i) => (
              <span
                key={i}
                className={`block h-0.5 w-6 transition-all ${
                  open
                    ? 'bg-white' + (i === 0 ? ' translate-y-[7px] rotate-45' : i === 2 ? ' -translate-y-[7px] -rotate-45' : ' opacity-0')
                    : overHero
                      ? 'bg-white'
                      : 'bg-ocean-700'
                }`}
              />
            ))}
          </button>
        </div>
      </nav>

      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ x: '100%' }}
            animate={{ x: 0 }}
            exit={{ x: '100%' }}
            transition={{ type: 'tween', duration: 0.35 }}
            className="fixed inset-0 z-[55] flex flex-col items-center justify-center gap-6 bg-ocean-700/95 backdrop-blur-xl lg:hidden"
          >
            {[{ to: '/', label: 'Home' }, ...links, { to: '/contact', label: 'Book Now' }].map(
              (l) => (
                <Link
                  key={l.to}
                  to={l.to}
                  className="font-display text-[1.3rem] text-white transition-colors hover:text-turquoise-200"
                >
                  {l.label}
                </Link>
              ),
            )}
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}
