'use client'

import { useTranslations } from 'next-intl'
import { useEffect } from 'react'

export default function MenuPage() {
  const t = useTranslations('menu')

  useEffect(() => {
    // Intersection Observer to highlight current menu category
    const sections = document.querySelectorAll('section[id]');
    const navLinks = document.querySelectorAll('a[href^="#"]');

    const observerOptions = {
        root: null,
        threshold: 0.5,
        rootMargin: '0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const id = entry.target.getAttribute('id');
                navLinks.forEach(link => {
                    if (link.getAttribute('href') === `#${id}`) {
                        link.classList.add('text-tertiary', 'font-bold');
                        link.classList.remove('text-on-surface-variant');
                    } else {
                        link.classList.remove('text-tertiary', 'font-bold');
                        link.classList.add('text-on-surface-variant');
                    }
                });
            }
        });
    }, observerOptions);

    sections.forEach(section => observer.observe(section));

    // Subtle parallax effect on mouse move for cards
    const handleMouseMove = (e: MouseEvent) => {
        const cards = document.querySelectorAll('.copper-glow');
        cards.forEach(card => {
            const rect = card.getBoundingClientRect();
            const cardX = rect.left + rect.width / 2;
            const cardY = rect.top + rect.height / 2;
            
            const angleX = (e.clientY - cardY) / 50;
            const angleY = (cardX - e.clientX) / 50;
            
            (card as HTMLElement).style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg)`;
        });
    };

    document.addEventListener('mousemove', handleMouseMove);
    return () => document.removeEventListener('mousemove', handleMouseMove);
  }, [])

  return (
    <main className="relative">
      {/* Hero Header */}
      <section className="relative h-[614px] flex flex-col items-center justify-center text-center px-[var(--spacing-gutter)] overflow-hidden">
        <div className="relative z-10 space-y-4">
          <h1 className="font-display-lg text-display-lg-mobile md:text-display-lg italic">{t('title')}</h1>
          <div className="w-32 h-px bg-tertiary mx-auto opacity-60"></div>
          <p className="font-label-caps text-label-caps text-on-surface-variant tracking-[0.3em] uppercase">{t('subtitle')}</p>
        </div>
      </section>

      {/* Category Navigation (Sticky) */}
      <div className="sticky top-[72px] z-40 bg-surface/80 backdrop-blur-xl border-b border-outline-variant/10">
        <div className="max-w-[var(--spacing-container-max)] mx-auto px-[var(--spacing-gutter)] overflow-x-auto no-scrollbar">
          <div className="flex justify-center gap-8 md:gap-16 py-4 whitespace-nowrap">
            <a className="font-label-caps text-[10px] md:text-label-caps text-tertiary font-bold hover:text-tertiary transition-colors uppercase" href="#starters">{t('nav_starters')}</a>
            <a className="font-label-caps text-[10px] md:text-label-caps text-on-surface-variant hover:text-tertiary transition-colors uppercase" href="#prime-cuts">{t('nav_prime_cuts')}</a>
            <a className="font-label-caps text-[10px] md:text-label-caps text-on-surface-variant hover:text-tertiary transition-colors uppercase" href="#sides">{t('nav_sides')}</a>
            <a className="font-label-caps text-[10px] md:text-label-caps text-on-surface-variant hover:text-tertiary transition-colors uppercase" href="#dessert">{t('nav_dessert')}</a>
          </div>
        </div>
      </div>

      {/* Menu Sections */}
      <div className="max-w-[var(--spacing-container-max)] mx-auto px-[var(--spacing-gutter)] space-y-[var(--spacing-section-padding)] py-[var(--spacing-section-padding)]">
        
        {/* Starters Section */}
        <section className="scroll-mt-32" id="starters">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-[var(--spacing-gutter)] items-start">
            <div className="md:col-span-4 sticky top-48">
              <h2 className="font-headline-md text-headline-md mb-4 text-tertiary">{t('starters_title')}</h2>
              <p className="font-body-md text-on-surface-variant leading-relaxed">{t('starters_desc')}</p>
              <div className="mt-8 h-24 w-px bg-gradient-to-b from-tertiary to-transparent opacity-30 hidden md:block"></div>
            </div>
            <div className="md:col-span-8 space-y-12">
              <div className="group border-b border-outline-variant/10 pb-8 hover:border-tertiary/30 transition-colors duration-500">
                <div className="flex justify-between items-baseline mb-2">
                  <h3 className="font-headline-sm text-headline-sm group-hover:text-tertiary transition-colors">{t('starter1_title')}</h3>
                  <span className="font-label-caps text-label-caps text-tertiary">22</span>
                </div>
                <p className="font-body-md text-on-surface-variant">{t('starter1_desc')}</p>
              </div>
              <div className="group border-b border-outline-variant/10 pb-8 hover:border-tertiary/30 transition-colors duration-500">
                <div className="flex justify-between items-baseline mb-2">
                  <h3 className="font-headline-sm text-headline-sm group-hover:text-tertiary transition-colors">{t('starter2_title')}</h3>
                  <span className="font-label-caps text-label-caps text-tertiary">34</span>
                </div>
                <p className="font-body-md text-on-surface-variant">{t('starter2_desc')}</p>
              </div>
            </div>
          </div>
        </section>

        {/* Featured Highlight - Prime Cuts */}
        <section className="scroll-mt-32" id="prime-cuts">
          <div className="relative overflow-hidden rounded-lg aspect-[16/9] mb-16">
            <img className="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBZQFwOXiMm8B7hPOumV-GiiGFbt3Pl5c6NEOUSC3JFlzzahLgcckvjpa46Q5Ro6XsUyQhroFuxT9OFJEAUt5EpHxEi-C4NXILyPUk-HfKRP2ljE5UAYHdVTAa3q7FP_Tfp0a7ZDvugWHsIjKJBLDDTOC2czJwnC5CvJGL_WYAjtnO5DiNQdQGYe_vDmgTbKnr07TgIu6KUjFnxNr5_3MyOA35vKePtjK51nR_IDbAkZu5GrxfQByM-CE8f8-lPoksDABh3Z2NQD83x" alt="Tomahawk" />
            <div className="vignette-overlay-linear absolute inset-0 flex flex-col justify-end p-[var(--spacing-gutter)] md:p-12">
              <div className="max-w-xl">
                <span className="font-label-caps text-label-caps text-tertiary mb-4 block tracking-widest uppercase">{t('prime_cuts_tag')}</span>
                <h2 className="font-display-lg text-display-lg-mobile md:text-headline-md text-white mb-4">{t('prime_cuts_title')}</h2>
                <p className="font-body-lg text-on-surface-variant mb-6">{t('prime_cuts_desc')}</p>
                <span className="font-label-caps text-label-caps text-tertiary border border-tertiary/40 px-6 py-2 inline-block">{t('mkt_price')}</span>
              </div>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--spacing-gutter)]">
            <div className="bg-surface-container-low p-8 copper-glow border border-outline-variant/20 hover:border-tertiary/40 transition-all duration-300">
              <h3 className="font-headline-sm text-headline-sm mb-2">{t('cut1_title')}</h3>
              <p className="font-body-md text-on-surface-variant mb-4">{t('cut1_desc')}</p>
              <span className="font-label-caps text-label-caps text-tertiary">58</span>
            </div>
            <div className="bg-surface-container-low p-8 copper-glow border border-outline-variant/20 hover:border-tertiary/40 transition-all duration-300">
              <h3 className="font-headline-sm text-headline-sm mb-2">{t('cut2_title')}</h3>
              <p className="font-body-md text-on-surface-variant mb-4">{t('cut2_desc')}</p>
              <span className="font-label-caps text-label-caps text-tertiary">145</span>
            </div>
            <div className="bg-surface-container-low p-8 copper-glow border border-outline-variant/20 hover:border-tertiary/40 transition-all duration-300">
              <h3 className="font-headline-sm text-headline-sm mb-2">{t('cut3_title')}</h3>
              <p className="font-body-md text-on-surface-variant mb-4">{t('cut3_desc')}</p>
              <span className="font-label-caps text-label-caps text-tertiary">74</span>
            </div>
          </div>
        </section>

        {/* Sides Section */}
        <section className="scroll-mt-32" id="sides">
          <div className="section-divider mb-16"></div>
          <div className="text-center max-w-2xl mx-auto mb-16">
            <h2 className="font-headline-md text-headline-md mb-4">{t('sides_title')}</h2>
            <p className="font-body-md text-on-surface-variant">{t('sides_desc')}</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-12">
            <div className="flex justify-between items-start border-b border-outline-variant/10 pb-4">
              <div>
                <h4 className="font-label-caps text-label-caps uppercase tracking-wider mb-1">{t('side1_title')}</h4>
                <p className="text-sm text-on-surface-variant">{t('side1_desc')}</p>
              </div>
              <span className="font-label-caps text-label-caps text-tertiary">18</span>
            </div>
            <div className="flex justify-between items-start border-b border-outline-variant/10 pb-4">
              <div>
                <h4 className="font-label-caps text-label-caps uppercase tracking-wider mb-1">{t('side2_title')}</h4>
                <p className="text-sm text-on-surface-variant">{t('side2_desc')}</p>
              </div>
              <span className="font-label-caps text-label-caps text-tertiary">16</span>
            </div>
          </div>
        </section>

        {/* Dessert Section */}
        <section className="scroll-mt-32" id="dessert">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-[var(--spacing-gutter)] items-center">
            <div className="md:col-span-7 order-2 md:order-1 space-y-12">
              <div className="group border-l-2 border-tertiary/20 pl-8 pb-4 hover:border-tertiary transition-colors duration-500">
                <h3 className="font-headline-sm text-headline-sm mb-2 group-hover:text-tertiary transition-colors">{t('dessert1_title')}</h3>
                <p className="font-body-md text-on-surface-variant mb-2">{t('dessert1_desc')}</p>
                <span className="font-label-caps text-label-caps text-tertiary">18</span>
              </div>
              <div className="group border-l-2 border-tertiary/20 pl-8 pb-4 hover:border-tertiary transition-colors duration-500">
                <h3 className="font-headline-sm text-headline-sm mb-2 group-hover:text-tertiary transition-colors">{t('dessert2_title')}</h3>
                <p className="font-body-md text-on-surface-variant mb-2">{t('dessert2_desc')}</p>
                <span className="font-label-caps text-label-caps text-tertiary">16</span>
              </div>
            </div>
            <div className="md:col-span-5 order-1 md:order-2 mb-8 md:mb-0">
              <div className="relative group">
                <div className="absolute -inset-4 bg-tertiary/10 blur-xl group-hover:bg-tertiary/20 transition-all duration-700"></div>
                <img className="relative z-10 w-full h-80 object-cover rounded-lg" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBPy2xGbUE9MZqJC4F5ZVPD7fP5S1Eklhu3oZjiyREkC4_UyW4G5BxCOwOISwKzdsc3fVI-xIo_4DIV9frboEX0wEkj3mZvUKZBPXgB_I14udTZry1riWVcv1IrgaFtjN3GdtKy8SrIK03SCgZZ4kVzsBH-sxAsRpxBjgy8VU_w_-Ohc5n1x0yjyuNxrRWWM2PbFFA6mFv-4JV6qcV3cA9N-hd_TUVUsXGs9MGfQPNosGHEF_eiOd-Wecb6sNAUoiH_Rl0gl1l7IZLF" alt="Chocolate Fondant" />
                <h2 className="font-headline-md text-headline-md mt-6 text-tertiary italic">{t('dessert_title')}</h2>
              </div>
            </div>
          </div>
        </section>
      </div>
    </main>
  )
}