import Link from 'next/link';
import Image from 'next/image';
import BookingLink from './BookingLink';
import { usePublicCoachSite } from './PublicCoachSiteProvider';

const links = [
  { href: '/how-it-works/', label: 'How it works' },
  { href: '/about/', label: 'About' },
  { href: '/services/', label: 'Packages' },
  { href: '/client-portal/', label: 'Client login' },
];

export default function PublicSiteNav() {
  const publicCoachSite = usePublicCoachSite();

  return (
    <header className='sticky top-3 z-50 px-5 pt-5'>
      <div className='mx-auto flex max-w-6xl items-center justify-between gap-4 rounded-none bg-white px-4 py-2.5 ring-1 ring-[#19192d]/5 backdrop-blur-xl md:px-5 md:py-3'>
        <Link
          href='/'
          className='flex items-center gap-3 text-lg font-semibold tracking-tight'
        >
          {publicCoachSite.logoUrl ? (
            <Image src={publicCoachSite.logoUrl} alt='' width={36} height={36} className='h-9 w-9 object-contain' />
          ) : (
            <span className='flex h-9 w-9 items-center justify-center rounded-none bg-[#fffdf9] text-xl font-black text-[#147568]'>
              C
            </span>
          )}
          <span className='sr-only'>{publicCoachSite.workspaceName}</span>
        </Link>

        <nav className='hidden items-center gap-6 text-base font-medium text-[#19192d] md:flex'>
          {links.map((item) => (
            <Link key={item.href} href={item.href}>
              {item.label}
            </Link>
          ))}
        </nav>

        <BookingLink
          href={publicCoachSite.calendly.assessmentUrl}
          className='rounded-none bg-[#147568] px-5 py-2.5 text-sm font-semibold text-white transition hover:brightness-105'
        >
          Schedule assessment
        </BookingLink>
      </div>

      <nav className='mx-auto mt-2 flex max-w-6xl gap-4 overflow-x-auto border border-[#19192d]/10 bg-white px-4 py-3 text-sm font-semibold text-[#19192d] md:hidden'>
        {links.map((item) => (
          <Link key={item.href} href={item.href} className='shrink-0 whitespace-nowrap'>
            {item.label}
          </Link>
        ))}
      </nav>
    </header>
  );
}
