// This is a server component to optimize LCP
import ReserveDialogWrapper from './ReserveDialogWrapper';

export default function HeroSection() {
  return (
    <div className="min-h-[60vh] flex flex-col items-center justify-center relative">
      <div className="h-16" />
      
      {/* Critical heading that will be pre-rendered for LCP optimization */}
      <h1
        className="text-4xl font-bold text-center md:text-6xl system-font"
        style={{ 
          textRendering: "optimizeLegibility",
          fontSynthesis: "none"
        }}
        data-testid="main-heading"
      >
        Мястото, където <br /> се чувстваш <b>Вкъщи</b>
      </h1>
      
      <div className="h-4" />

      {/* Static non-interactive parts */}
      <div className="mx-auto flex flex-wrap justify-center text-gray-700">
        {[
          {
            href: '/services/birthdays',
            text: 'Рождени дни'
          },
          {
            href: '/services/companies',
            text: 'Фирмени партита'
          },
          {
            href: '/services/quizes',
            text: 'Куизове'
          },
          {
            href: '/services/board-games',
            text: 'Бордови игри'
          },
          {
            href: '/services/coworking',
            text: 'Coworking'
          }
        ].map((item, index) => (
          <a
            key={index}
            className="flex mr-3 mb-1 text-sm hover:text-orange-800 transition-colors duration-300"
            href={item.href}
            aria-label={item.text}
          >
            {item.text}
          </a>
        ))}
      </div>

      <div className="h-5" />
      <p className="text-lg text-center md:text-xl text-gray-800">
        Наслади се на уютна атмосфера, вкусна храна и невероятни напитки.
      </p>

      <div className="h-10" />

      {/* Client component wrapper for interactive elements */}
      <ReserveDialogWrapper />
    </div>
  );
}