"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function OmakasePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="plain"
      cardStyle="inset"
      primaryButtonStyle="neon-glow-border"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div className="min-h-screen bg-background text-foreground">
        {/* Hero Section */}
        <div id="hero" data-section="hero" className="relative h-screen flex items-center justify-center overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-b from-background via-background/95 to-background/90"></div>
          <div className="absolute inset-0 bg-[url('/placeholders/placeholder1.webp')] bg-cover bg-center opacity-20"></div>
          <div className="relative z-10 text-center px-4 md:px-6">
            <h1 className="text-6xl md:text-8xl font-medium text-foreground mb-6 tracking-tight">
              Omakase
            </h1>
            <h2 className="text-2xl md:text-4xl text-foreground/80 mb-8 font-light">
              Premium Japanese Dining in Niseko
            </h2>
            <p className="text-lg md:text-xl text-foreground/70 max-w-2xl mx-auto mb-12 leading-relaxed">
              Experience the art of traditional Japanese cuisine with our expertly crafted omakase menu, featuring the finest seasonal ingredients and centuries-old culinary techniques.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button className="px-8 py-4 bg-primary-cta text-white rounded-full font-medium hover:bg-primary-cta/90 transition-all duration-300 hover:scale-105">
                Reserve Your Experience
              </button>
              <button className="px-8 py-4 border border-foreground/20 text-foreground rounded-full font-medium hover:border-foreground/40 transition-all duration-300">
                View Our Story
              </button>
            </div>
          </div>
        </div>

        {/* About Metrics Section */}
        <div id="about" data-section="about" className="py-24 bg-card">
          <div className="container mx-auto px-4 md:px-6">
            <div className="text-center mb-16">
              <h2 className="text-4xl md:text-6xl font-medium text-foreground mb-6">
                Crafted with Precision
              </h2>
              <p className="text-lg text-foreground/70 max-w-3xl mx-auto">
                Our dedication to excellence is reflected in every aspect of our culinary journey
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
              <div className="text-center">
                <div className="text-5xl md:text-6xl font-bold text-primary-cta mb-4">
                  25+
                </div>
                <h3 className="text-xl font-medium text-foreground mb-2">
                  Years of Expertise
                </h3>
                <p className="text-foreground/70">
                  Decades of mastering traditional Japanese culinary arts
                </p>
              </div>
              <div className="text-center">
                <div className="text-5xl md:text-6xl font-bold text-primary-cta mb-4">
                  100%
                </div>
                <h3 className="text-xl font-medium text-foreground mb-2">
                  Locally Sourced
                </h3>
                <p className="text-foreground/70">
                  Fresh ingredients sourced daily from Hokkaido's finest suppliers
                </p>
              </div>
              <div className="text-center">
                <div className="text-5xl md:text-6xl font-bold text-primary-cta mb-4">
                  32
                </div>
                <h3 className="text-xl font-medium text-foreground mb-2">
                  Guests Daily
                </h3>
                <p className="text-foreground/70">
                  Intimate dining experiences with personalized attention
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Feature Timeline Section */}
        <div id="experience" data-section="experience" className="py-24 bg-background">
          <div className="container mx-auto px-4 md:px-6">
            <div className="text-center mb-16">
              <h2 className="text-4xl md:text-6xl font-medium text-foreground mb-6">
                The Omakase Journey
              </h2>
              <p className="text-lg text-foreground/70 max-w-3xl mx-auto">
                Discover the artistry behind each course in our carefully curated dining experience
              </p>
            </div>
            <div className="max-w-4xl mx-auto">
              <div className="space-y-16">
                <div className="flex flex-col md:flex-row items-center gap-12">
                  <div className="md:w-1/2">
                    <div className="w-16 h-16 bg-primary-cta/10 rounded-full flex items-center justify-center mb-6">
                      <div className="w-8 h-8 bg-primary-cta rounded-full flex items-center justify-center">
                        <span className="text-white font-bold">1</span>
                      </div>
                    </div>
                    <h3 className="text-2xl font-medium text-foreground mb-4">
                      Seasonal Selection
                    </h3>
                    <p className="text-foreground/70 leading-relaxed">
                      Our chef personally selects the finest seasonal ingredients each morning, ensuring peak freshness and flavor in every dish.
                    </p>
                  </div>
                  <div className="md:w-1/2">
                    <div className="aspect-video bg-card rounded-lg overflow-hidden">
                      <img src="/placeholders/placeholder1.webp" alt="Seasonal ingredient selection" className="w-full h-full object-cover" />
                    </div>
                  </div>
                </div>
                <div className="flex flex-col md:flex-row-reverse items-center gap-12">
                  <div className="md:w-1/2">
                    <div className="w-16 h-16 bg-primary-cta/10 rounded-full flex items-center justify-center mb-6">
                      <div className="w-8 h-8 bg-primary-cta rounded-full flex items-center justify-center">
                        <span className="text-white font-bold">2</span>
                      </div>
                    </div>
                    <h3 className="text-2xl font-medium text-foreground mb-4">
                      Masterful Preparation
                    </h3>
                    <p className="text-foreground/70 leading-relaxed">
                      Each course is prepared with meticulous attention to detail, combining traditional techniques with modern precision.
                    </p>
                  </div>
                  <div className="md:w-1/2">
                    <div className="aspect-video bg-card rounded-lg overflow-hidden">
                      <img src="/placeholders/placeholder1.webp" alt="Chef preparation" className="w-full h-full object-cover" />
                    </div>
                  </div>
                </div>
                <div className="flex flex-col md:flex-row items-center gap-12">
                  <div className="md:w-1/2">
                    <div className="w-16 h-16 bg-primary-cta/10 rounded-full flex items-center justify-center mb-6">
                      <div className="w-8 h-8 bg-primary-cta rounded-full flex items-center justify-center">
                        <span className="text-white font-bold">3</span>
                      </div>
                    </div>
                    <h3 className="text-2xl font-medium text-foreground mb-4">
                      Intimate Service
                    </h3>
                    <p className="text-foreground/70 leading-relaxed">
                      Experience personalized service as each dish is presented with the story behind its creation and cultural significance.
                    </p>
                  </div>
                  <div className="md:w-1/2">
                    <div className="aspect-video bg-card rounded-lg overflow-hidden">
                      <img src="/placeholders/placeholder1.webp" alt="Intimate dining service" className="w-full h-full object-cover" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Testimonials Section */}
        <div id="testimonials" data-section="testimonials" className="py-24 bg-card">
          <div className="container mx-auto px-4 md:px-6">
            <div className="text-center mb-16">
              <h2 className="text-4xl md:text-6xl font-medium text-foreground mb-6">
                Guest Experiences
              </h2>
              <p className="text-lg text-foreground/70 max-w-3xl mx-auto">
                Discover what our guests say about their unforgettable omakase experiences
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <div className="bg-background/50 backdrop-blur-sm p-8 rounded-lg border border-foreground/10">
                <div className="flex items-center mb-4">
                  {Array.from({ length: 5 }).map((_, i) => (
                    <span key={i} className="text-accent text-lg">★</span>
                  ))}
                </div>
                <p className="text-foreground/80 mb-6 italic">
                  "An absolutely transcendent dining experience. Each course was a masterpiece that told a story of Japanese culinary tradition."
                </p>
                <div className="flex items-center">
                  <div className="w-12 h-12 bg-primary-cta/20 rounded-full flex items-center justify-center mr-4">
                    <span className="text-primary-cta font-medium">S.K.</span>
                  </div>
                  <div>
                    <div className="font-medium text-foreground">Sarah Kim</div>
                    <div className="text-sm text-foreground/60">Food Critic</div>
                  </div>
                </div>
              </div>
              <div className="bg-background/50 backdrop-blur-sm p-8 rounded-lg border border-foreground/10">
                <div className="flex items-center mb-4">
                  {Array.from({ length: 5 }).map((_, i) => (
                    <span key={i} className="text-accent text-lg">★</span>
                  ))}
                </div>
                <p className="text-foreground/80 mb-6 italic">
                  "The attention to detail and the chef's passion for his craft was evident in every single bite. Truly extraordinary."
                </p>
                <div className="flex items-center">
                  <div className="w-12 h-12 bg-primary-cta/20 rounded-full flex items-center justify-center mr-4">
                    <span className="text-primary-cta font-medium">M.T.</span>
                  </div>
                  <div>
                    <div className="font-medium text-foreground">Michael Thompson</div>
                    <div className="text-sm text-foreground/60">Culinary Enthusiast</div>
                  </div>
                </div>
              </div>
              <div className="bg-background/50 backdrop-blur-sm p-8 rounded-lg border border-foreground/10">
                <div className="flex items-center mb-4">
                  {Array.from({ length: 5 }).map((_, i) => (
                    <span key={i} className="text-accent text-lg">★</span>
                  ))}
                </div>
                <p className="text-foreground/80 mb-6 italic">
                  "A perfect blend of tradition and innovation. The intimate setting made this a truly memorable anniversary celebration."
                </p>
                <div className="flex items-center">
                  <div className="w-12 h-12 bg-primary-cta/20 rounded-full flex items-center justify-center mr-4">
                    <span className="text-primary-cta font-medium">A.L.</span>
                  </div>
                  <div>
                    <div className="font-medium text-foreground">Anna Lee</div>
                    <div className="text-sm text-foreground/60">Travel Blogger</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Contact Newsletter Section */}
        <div id="contact" data-section="contact" className="py-24 bg-background">
          <div className="container mx-auto px-4 md:px-6">
            <div className="max-w-4xl mx-auto text-center">
              <h2 className="text-4xl md:text-6xl font-medium text-foreground mb-6">
                Reserve Your Experience
              </h2>
              <p className="text-lg text-foreground/70 mb-12 max-w-2xl mx-auto">
                Join our exclusive list to receive updates on seasonal menus and secure your reservation for an unforgettable omakase experience.
              </p>
              <div className="bg-card/50 backdrop-blur-sm p-8 rounded-lg border border-foreground/10">
                <div className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
                  <input
                    type="email"
                    placeholder="Enter your email address"
                    className="flex-1 px-6 py-4 bg-background/50 border border-foreground/20 rounded-full text-foreground placeholder:text-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
                  />
                  <button className="px-8 py-4 bg-primary-cta text-white rounded-full font-medium hover:bg-primary-cta/90 transition-all duration-300 hover:scale-105">
                    Reserve Now
                  </button>
                </div>
                <p className="text-sm text-foreground/60 mt-4">
                  Limited seating available. Reservations required 48 hours in advance.
                </p>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-16">
                <div className="text-left">
                  <h3 className="text-xl font-medium text-foreground mb-4">Location</h3>
                  <p className="text-foreground/70 mb-2">123 Omakase Street</p>
                  <p className="text-foreground/70 mb-2">Niseko, Hokkaido 044-0081</p>
                  <p className="text-foreground/70">Japan</p>
                </div>
                <div className="text-left">
                  <h3 className="text-xl font-medium text-foreground mb-4">Hours</h3>
                  <p className="text-foreground/70 mb-2">Dinner: 6:00 PM - 10:00 PM</p>
                  <p className="text-foreground/70 mb-2">Tuesday - Sunday</p>
                  <p className="text-foreground/70">Closed Mondays</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Footer Section */}
        <div id="footer" data-section="footer" className="py-16 bg-card border-t border-foreground/10">
          <div className="container mx-auto px-4 md:px-6">
            <div className="flex flex-col md:flex-row justify-between items-center">
              <div className="mb-8 md:mb-0">
                <h3 className="text-3xl font-medium text-foreground mb-2">Omakase</h3>
                <p className="text-foreground/70">Premium Japanese Dining Experience</p>
              </div>
              <div className="flex flex-col sm:flex-row gap-8">
                <div className="text-center md:text-left">
                  <h4 className="font-medium text-foreground mb-2">Contact</h4>
                  <p className="text-sm text-foreground/70">+81 123-456-7890</p>
                  <p className="text-sm text-foreground/70">info@omakaseniseko.jp</p>
                </div>
                <div className="text-center md:text-left">
                  <h4 className="font-medium text-foreground mb-2">Follow</h4>
                  <div className="flex gap-4 justify-center md:justify-start">
                    <a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">Instagram</a>
                    <a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">Facebook</a>
                  </div>
                </div>
              </div>
            </div>
            <div className="border-t border-foreground/10 mt-8 pt-8 text-center">
              <p className="text-sm text-foreground/60">
                © 2024 Omakase Niseko. All rights reserved. | Crafted with passion for Japanese culinary excellence.
              </p>
            </div>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}