'use client'

import { useTranslations } from 'next-intl'
import { Link } from '@/i18n/routing'
import { useEffect } from 'react'

export default function HomePage() {
  const t = useTranslations('home')

  useEffect(() => {
    // Micro-interaction for buttons
    const buttons = document.querySelectorAll('button');
    buttons.forEach(btn => {
      btn.addEventListener('mousedown', () => btn.classList.add('scale-95'));
      btn.addEventListener('mouseup', () => btn.classList.remove('scale-95'));
      btn.addEventListener('mouseleave', () => btn.classList.remove('scale-95'));
    });

    // Simple Fade In on Scroll
    const observerOptions = { threshold: 0.1 };
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('opacity-100');
          entry.target.classList.remove('translate-y-10');
        }
      });
    }, observerOptions);

    const sections = document.querySelectorAll('section:not(:first-child)');
    sections.forEach(section => {
      section.classList.add('transition-all', 'duration-1000', 'translate-y-10', 'opacity-0');
      observer.observe(section);
    });
  }, [])

  return (
    <main>
      {/* Hero Section */}
      <section className="relative h-screen flex items-center justify-center overflow-hidden transition-all duration-1000">
        <div className="absolute inset-0 z-0">
          <img className="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuALRLjbZvJQRlnpOqK0FJXRpeoI4Q_PObykBtlxjxHFCLy_rpnzaUpvICS9bCJFLUNurkL6BnQYbkxPxHITsbreYTPJvVgybXvzTDIN37BpLrQBD34WDr81Es58HM112IRETzzryapmv-CURUfWMFTj5MblCZ9CUmI6LA5BaCnxiQFBgHkK6i09sV42FFOXuVMBMcyufKjkM2vStSHFYu4inukZsoPWxh8ydf9WnkTg0TYEkypsIK4T8LqZoGNav8jPB7R6aMdV6D01" alt="Hero Steak" />
          <div className="absolute inset-0 chiaroscuro-gradient"></div>
          <div className="absolute inset-0 vignette-overlay"></div>
        </div>
        <div className="relative z-10 text-center px-[var(--spacing-gutter)] max-w-4xl">
          <p className="font-label-caps text-label-caps text-tertiary mb-4 tracking-[0.3em] uppercase">{t('hero.subtitle')}</p>
          <h1 className="font-display-lg text-display-lg-mobile md:text-display-lg text-on-surface mb-6">{t('hero.title')}</h1>
          <p className="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto mb-10">
            {t('hero.desc')}
          </p>
          <div className="flex flex-col md:flex-row gap-4 justify-center">
            <Link href="/menu" className="bg-secondary-container text-white px-10 py-4 font-label-caps text-label-caps border border-transparent copper-glow transition-all uppercase inline-block">{t('hero.explore_menu')}</Link>
            <Link href="#philosophy" className="bg-transparent text-secondary border border-secondary/50 px-10 py-4 font-label-caps text-label-caps hover:bg-secondary/10 transition-all uppercase inline-block">{t('hero.our_philosophy')}</Link>
          </div>
        </div>
        <div className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2">
          <span className="font-label-caps text-[10px] text-outline tracking-widest uppercase">Scroll</span>
          <div className="w-[1px] h-12 bg-gradient-to-b from-tertiary to-transparent"></div>
        </div>
      </section>

      {/* The Ignis Philosophy */}
      <section id="philosophy" className="py-[var(--spacing-section-padding)] bg-surface-container-lowest relative scroll-mt-20">
        <div className="max-w-[var(--spacing-container-max)] mx-auto px-[var(--spacing-gutter)] grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
          <div className="md:col-span-5 relative group">
            <div className="aspect-[4/5] overflow-hidden border border-outline-variant/20">
              <img className="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700" src="https://static.wixstatic.com/media/19c276_8160f1c03e0343f1a2c4f456157a74e2~mv2.jpg/v1/fill/w_327,h_479,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/19c276_8160f1c03e0343f1a2c4f456157a74e2~mv2.jpg" alt="Aged Oak" />
            </div>
            <div className="absolute -bottom-6 -right-6 w-32 h-32 bg-surface-container border border-outline-variant/30 hidden md:flex items-center justify-center p-4">
              <p className="font-label-caps text-[10px] text-tertiary text-center leading-relaxed">{t('philosophy.badge')}</p>
            </div>
          </div>
          <div className="md:col-span-7 md:pl-12">
            <span className="font-label-caps text-label-caps text-tertiary mb-6 block uppercase">{t('philosophy.tag')}</span>
            <h2 className="font-headline-md text-headline-md text-on-surface mb-8 max-w-md">{t('philosophy.title')}</h2>
            <div className="w-20 h-[1px] bg-tertiary mb-8"></div>
            <p className="font-body-lg text-body-lg text-on-surface-variant mb-6">
              {t('philosophy.desc1')}
            </p>
            <p className="font-body-md text-body-md text-outline">
              {t('philosophy.desc2')}
            </p>
          </div>
        </div>
      </section>

      {/* Signature Cuts */}
      <section className="py-[var(--spacing-section-padding)] bg-surface">
        <div className="max-w-[var(--spacing-container-max)] mx-auto px-[var(--spacing-gutter)]">
          <div className="text-center mb-16">
            <span className="font-label-caps text-label-caps text-secondary mb-4 block uppercase">{t('cuts.tag')}</span>
            <h2 className="font-headline-md text-headline-md text-on-surface">{t('cuts.title')}</h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div className="md:col-span-2 md:row-span-2 group relative overflow-hidden bg-surface-container-high aspect-square md:aspect-auto">
              <img className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" src="https://static.wixstatic.com/media/19c276_ce72add7ebdb407597224e87e838bd70~mv2.jpg/v1/fill/w_327,h_479,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/19c276_ce72add7ebdb407597224e87e838bd70~mv2.jpg" alt="Tomahawk" />
              <div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent"></div>
              <div className="absolute bottom-0 left-0 p-8">
                <p className="font-label-caps text-[10px] text-secondary mb-2 uppercase">{t('cuts.dry_aged')}</p>
                <h3 className="font-headline-sm text-headline-sm text-on-surface mb-2">{t('cuts.t_bone')}</h3>
                <p className="font-body-md text-on-surface-variant opacity-0 group-hover:opacity-100 transition-opacity duration-500">{t('cuts.t_bone_desc')}</p>
              </div>
            </div>
            <div className="group relative overflow-hidden aspect-square bg-surface-container">
              <img className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBXylHVJVF2D1Ox5qiz8sQwSkUlOwci8kh62Sv8cdmxzU91j1ML3MymH-aTP2nIbmGZvn0W_AgmZKSfXQLI9YNSaYcaxoTh_VRv8NWU34xPwm3md4_ETDTR09cz2nTIfeBcrapG8PY-alnCnt3xFCrgeo0icFENiC5pSFfLxxvuRs0pnSYQgCNtf9AVc3s3PNJeOUW8hApoGrkjWai33iKnKA-JpBDZ6U-R0mW7AUS3sSZNBGfa98-KqVRswC-DiJI8DMHj1qoZan3C" alt="Tomahawk" />
              <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center p-4">
                <div className="text-center">
                  <h4 className="font-headline-sm text-headline-sm text-on-surface">{t('cuts.tomahawk')}</h4>
                  <span className="font-label-caps text-label-caps text-tertiary">{t('cuts.tomahawk_desc')}</span>
                </div>
              </div>
            </div>
            <div className="group relative overflow-hidden aspect-square bg-surface-container">
              <img className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDczwEijlcMbRMPQy8Dci6cx4PmffAeGbv0iOvph56bRTXI1t9Y1dReFXXp4whLg-EblfFEBNgDq0XrfPe2N1LGtQemcc5U9QHBJaEVgoGO2VlKW8OmFtK2L9KAuwBtUpGyQXcxm_tRD3PsjMOL3IhwPO2GqqTGD-2rnrZJ1GR0Y8awTQK8PhO114GuvBt9OVWAdz6iRSP4en5lNBJYCKcTGOL5Vj43_tM60tpBCAyfz2igf-RBo63GjkfoWMtGVul77nHFfCUw2rFi" alt="New York" />
              <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center p-4">
                <div className="text-center">
                  <h4 className="font-headline-sm text-headline-sm text-on-surface">{t('cuts.new_york')}</h4>
                  <span className="font-label-caps text-label-caps text-tertiary">{t('cuts.new_york_desc')}</span>
                </div>
              </div>
            </div>
            <div className="md:col-span-2 group relative h-64 overflow-hidden bg-surface-container-high">
              <div className="absolute inset-0 flex items-center justify-center px-12 z-10 pointer-events-none">
                <div className="text-center">
                  <h3 className="font-headline-sm text-headline-sm text-on-surface mb-2">{t('cuts.dry_aged')}</h3>
                  <p className="font-body-md text-on-surface-variant">{t('cuts.dry_aged_desc')}</p>
                </div>
              </div>
              <img className="w-full h-full object-cover opacity-40 grayscale group-hover:grayscale-0 group-hover:opacity-60 transition-all duration-700" src="https://static.wixstatic.com/media/19c276_3590e6b88f54446e93c31aeb65933107~mv2.jpg/v1/fill/w_326,h_479,al_b,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/19c276_3590e6b88f54446e93c31aeb65933107~mv2.jpg" alt="Porterhouse" />
            </div>
          </div>
        </div>
      </section>

      {/* The Cellar */}
      <section className="py-[var(--spacing-section-padding)] bg-surface-container-lowest relative overflow-hidden">
        <div className="absolute left-1/2 top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-tertiary/20 to-transparent"></div>
        <div className="max-w-[var(--spacing-container-max)] mx-auto px-[var(--spacing-gutter)] grid grid-cols-1 md:grid-cols-2 gap-20 items-center">
          <div className="order-2 md:order-1">
            <span className="font-label-caps text-label-caps text-secondary-container mb-6 block uppercase">{t('cellar.tag')}</span>
            <h2 className="font-display-lg-mobile md:font-display-lg text-display-lg-mobile md:text-display-lg text-on-surface mb-8">{t('cellar.title')}</h2>
            <p className="font-body-lg text-body-lg text-on-surface-variant mb-8">
              {t('cellar.desc')}
            </p>
            <ul className="space-y-6 mb-10">
              <li className="flex justify-between items-end border-b border-outline-variant/30 pb-2">
                <div>
                  <h4 className="font-headline-sm text-[18px] text-on-surface">{t('cellar.wine1_name')}</h4>
                  <p className="font-body-md text-outline text-sm">{t('cellar.wine1_desc')}</p>
                </div>
              </li>
              <li className="flex justify-between items-end border-b border-outline-variant/30 pb-2">
                <div>
                  <h4 className="font-headline-sm text-[18px] text-on-surface">{t('cellar.wine2_name')}</h4>
                  <p className="font-body-md text-outline text-sm">{t('cellar.wine2_desc')}</p>
                </div>
              </li>
              <li className="flex justify-between items-end border-b border-outline-variant/30 pb-2">
                <div>
                  <h4 className="font-headline-sm text-[18px] text-on-surface">{t('cellar.wine3_name')}</h4>
                  <p className="font-body-md text-outline text-sm">{t('cellar.wine3_desc')}</p>
                </div>
              </li>
            </ul>
            <Link href="/menu" className="font-label-caps text-label-caps text-secondary flex items-center gap-2 group uppercase">
              {t('cellar.view_list')}
              <span className="material-symbols-outlined group-hover:translate-x-2 transition-transform">arrow_forward</span>
            </Link>
          </div>
          <div className="order-1 md:order-2 relative">
            <div className="aspect-[3/4] bg-surface-container relative">
              <img className="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAjziyIdiB8l1fAyEZhCWldYGlClbeZAPQqY86so0hVbUW93mJpPvRcV1kmn2tAP0w8c2nm8MyBBoyJ-7GOU5WchtcLZCv33NWfNevgZqm0wX4nISlnjBN1RmdVBaUfhlyc84XquNYkm1jcA8247tT3HX0x0vkCS5rHzyGl3alUyHWFqIn0awR0s5tzCZ_PBX8X7XlUfY5umq4CGgIUY7_1ly9LIx3ZaYO6p9CgXGisNX3-rEJf0kQjBVPHRzpFsEDFjkatn8WvsoZP" alt="Wine Cellar" />
              <div className="absolute -top-10 -left-10 w-40 h-40 border border-secondary/20 -z-10"></div>
              <div className="absolute -bottom-10 -right-10 w-40 h-40 border border-secondary/20 -z-10"></div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 bg-surface text-center">
        <div className="max-w-2xl mx-auto px-[var(--spacing-gutter)]">
          <h2 className="font-headline-md text-headline-md text-on-surface mb-8">{t('cta.title')}</h2>
          <p className="font-body-md text-on-surface-variant mb-12">{t('cta.desc')}</p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/rezervasyon" className="bg-secondary-container text-white px-8 py-3 font-label-caps text-label-caps hover:bg-secondary-container/80 transition-all uppercase">{t('cta.button')}</Link>
          </div>
        </div>
      </section>
    </main>
  )
}