"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Coffee, Sparkles, Camera, Heart, MapPin, ArrowRight } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="large"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <style jsx global>{`
        :root {
          --background: #2a1810;
          --card: #3d2817;
          --foreground: #f5e6d3;
          --primary-cta: #d68a3c;
          --secondary-cta: #3d2817;
          --accent: #ffb84d;
          --background-accent: #cc6b2f;
          --primary-cta-text: #1a0f09;
          --secondary-cta-text: #f5e6d3;
        }

        body {
          background: linear-gradient(135deg, #1a0f09 0%, #2a1810 50%, #3d2817 100%);
          position: relative;
          overflow-x: hidden;
        }

        body::before {
          content: '';
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image:
            radial-gradient(circle at 20% 50%, rgba(255, 184, 77, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(214, 138, 60, 0.02) 0%, transparent 50%),
            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" seed="1"/></filter><rect width="100" height="100" fill="rgba(255,255,255,0.02)" filter="url(%23noise)"/></svg>');
          background-size: 100% 100%, 100% 100%, 100px 100px;
          pointer-events: none;
          z-index: 0;
        }

        html {
          scroll-behavior: smooth;
        }

        @keyframes steam-rise {
          0% {
            transform: translateY(0px) translateX(0px);
            opacity: 0;
          }
          50% {
            opacity: 0.4;
          }
          100% {
            transform: translateY(-100px) translateX(10px);
            opacity: 0;
          }
        }

        .steam {
          position: absolute;
          border-radius: 50%;
          animation: steam-rise 4s ease-in infinite;
        }
      `}</style>

      {/* Animated steam effects */}
      <div className="fixed inset-0 pointer-events-none overflow-hidden" style={{ zIndex: 1 }}>
        {Array.from({ length: 5 }).map((_, i) => (
          <div
            key={i}
            className="steam"
            style={{
              width: `${30 + i * 20}px`,
              height: `${30 + i * 20}px`,
              left: `${20 + i * 15}%`,
              bottom: '10%',
              backgroundColor: `rgba(255, 184, 77, ${0.1 - i * 0.02})`,
              animationDelay: `${i * 0.6}s`,
              animationDuration: `${3 + i * 0.5}s`,
            }}
          />
        ))}
      </div>

      <div className="relative z-10">
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            brandName="Midnight Brew"
            navItems={[
              { name: "Menu", id: "menu" },
              { name: "Story", id: "about" },
              { name: "Gallery", id: "gallery" },
              { name: "Reserve", id: "reservation" }
            ]}
            button={{
              text: "Reserve a Table",              href: "#reservation"
            }}
            animateOnLoad={true}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroSplitDualMedia
            tag="Late-Night Coffee Culture"
            tagIcon={Coffee}
            tagAnimation="slide-up"
            title="Brewed After Dark"
            description="Immerse yourself in a bold, artistic café experience designed for night owls and creative souls. Watch coffee transform in slow motion as steam dances through our carefully curated space. Soft neon amber glows meet deep espresso browns in this scroll-worthy sanctuary for young creatives."
            background={{ variant: "plain" }}
            buttons={[
              { text: "Explore the Experience", href: "#menu" },
              { text: "Reserve Your Moment", href: "#reservation" }
            ]}
            buttonAnimation="slide-up"
            mediaItems={[
              {
                videoSrc: "https://videos.pexels.com/video-files/3571327/3571327-sd_640_360_25fps.mp4",                imageAlt: "Coffee brewing in slow motion with visible steam"
              },
              {
                imageSrc: "https://images.unsplash.com/photo-1495474472645-4c71bcdd2d18?w=800&q=80",                imageAlt: "Artistic coffee presentation with warm amber lighting"
              }
            ]}
            mediaAnimation="slide-up"
            rating={5}
            ratingText="Loved by creative night owls worldwide"
          />
        </div>

        <div id="about" data-section="about">
          <TextSplitAbout
            title="The Philosophy of Midnight Brew"
            description={[
              "Midnight Brew is a celebration of late-night coffee culture—where artistry meets craft, and darkness becomes a canvas for creative expression. We believe that the best ideas happen after sunset, fueled by exceptional coffee and an atmosphere that inspires.",              "Our space is deliberately designed with deep espresso brown walls, soft neon amber accents, and subtle textured grain that creates depth and emotional resonance. Every element—from the slow-motion coffee brewing displays to the minimalist design—is crafted to create an immersive, scroll-worthy experience that speaks to young creatives and night owls.",              "Here, coffee isn't just a beverage. It's a ritual, an art form, and a gateway to inspiration. Welcome to your after-dark creative sanctuary."
            ]}
            buttons={[{ text: "Our Story", href: "#" }]}
            buttonAnimation="slide-up"
            showBorder={true}
            useInvertedBackground={false}
          />
        </div>

        <div id="menu" data-section="menu">
          <FeatureCardTwentySix
            title="Signature After-Dark Collection"
            description="A carefully curated selection of specialty beverages designed for late-night inspiration. Each drink is a masterpiece of flavor, precision, and artistic presentation."
            tag="Exclusively Midnight"
            tagIcon={Sparkles}
            tagAnimation="slide-up"
            features={[
              {
                title: "Midnight Eclipse",                description: "Cold-brew concentrate infused with dark chocolate and espresso. A bold statement of sophistication and creative energy.",                imageSrc: "https://images.unsplash.com/photo-1461023058943-07fcbe16d735?w=600&q=80",                imageAlt: "Midnight Eclipse specialty cold brew",                buttonIcon: ArrowRight,
                buttonHref: "#"
              },
              {
                title: "Amber Dream",                description: "Single-origin pour-over with caramel and vanilla notes. Soft neon glow meets exceptional craft in every sip.",                imageSrc: "https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=600&q=80",                imageAlt: "Amber Dream pour-over coffee",                buttonIcon: ArrowRight,
                buttonHref: "#"
              },
              {
                title: "Espresso Noir",                description: "Double-shot espresso with oat milk microfoam and cocoa dust. Intense, dramatic, unforgettable—pure creative fuel.",                imageSrc: "https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=600&q=80",                imageAlt: "Espresso Noir premium espresso",                buttonIcon: ArrowRight,
                buttonHref: "#"
              },
              {
                title: "Steam & Ink",                description: "Artistic latte with signature layered foam art. Where coffee meets visual storytelling and pure caffeine inspiration.",                imageSrc: "https://images.unsplash.com/photo-1447933601403-0c6688de566e?w=600&q=80",                imageAlt: "Steam & Ink artisan latte",                buttonIcon: ArrowRight,
                buttonHref: "#"
              }
            ]}
            textboxLayout="default"
            useInvertedBackground={false}
            buttonAnimation="slide-up"
            buttons={[]}
          />
        </div>

        <div id="gallery" data-section="gallery">
          <TeamCardSix
            title="Instagram-Worthy Moments"
            description="Every corner of Midnight Brew is designed for the perfect photograph. Bold artistic aesthetics meet functional beauty in spaces that inspire creativity and connection."
            tag="Visual Experience"
            tagIcon={Camera}
            tagAnimation="slide-up"
            members={[
              {
                id: "1",                name: "The Bar",                role: "Espresso Theater",                imageSrc: "https://images.unsplash.com/photo-1495521821757-a1efb6729352?w=600&q=80",                imageAlt: "Midnight Brew bar with soft neon amber lighting"
              },
              {
                id: "2",                name: "Creative Corner",                role: "Inspiration Hub",                imageSrc: "https://images.unsplash.com/photo-1514432324607-2e467f4af445?w=600&q=80",                imageAlt: "Artistic seating area with moody aesthetic"
              },
              {
                id: "3",                name: "Brewing Station",                role: "Coffee Art",                imageSrc: "https://images.unsplash.com/photo-1508615039623-a25605d2938d?w=600&q=80",                imageAlt: "Behind-the-scenes coffee preparation artistry"
              },
              {
                id: "4",                name: "Ambient Glow",                role: "Atmospheric Design",                imageSrc: "https://images.unsplash.com/photo-1514432324607-2e467f4af445?w=600&q=80",                imageAlt: "Warm neon amber lighting creating immersive mood"
              }
            ]}
            gridVariant="bento-grid"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            buttons={[]}
            buttonAnimation="slide-up"
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardFive
            title="Stories from Night Owls"
            description="Hear from the young creatives, designers, and innovative thinkers who've found their sanctuary in Midnight Brew's bold, artistic space."
            tag="Creative Community"
            tagIcon={Heart}
            tagAnimation="slide-up"
            testimonials={[
              {
                id: "1",                name: "Alex, Digital Artist",                date: "Date: 18 December 2024",                title: "Where creativity flows freely",                quote: "Midnight Brew's moody aesthetic and ambient glow create the perfect environment for late-night creative sessions. The coffee is exceptional, but it's the atmosphere that keeps me coming back.",                tag: "Artist",                avatarSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&q=80",                avatarAlt: "Alex headshot",                imageSrc: "https://images.unsplash.com/photo-1495521821757-a1efb6729352?w=400&q=80",                imageAlt: "Midnight Brew ambient design"
              },
              {
                id: "2",                name: "Jordan, Creative Director",                date: "Date: 15 December 2024",                title: "A masterclass in artistic branding",                quote: "Every detail at Midnight Brew speaks to intentional design. From the espresso brown palette to the soft amber glow, it's clear this space was created by people who understand creative culture.",                tag: "Director",                avatarSrc: "https://images.unsplash.com/photo-1503454537688-e6629bc26067?w=150&q=80",                avatarAlt: "Jordan headshot",                imageSrc: "https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=400&q=80",                imageAlt: "Specialty coffee craftsmanship"
              },
              {
                id: "3",                name: "Sam, Graphic Designer",                date: "Date: 12 December 2024",                title: "Inspiration in every sip",                quote: "The slow-motion coffee brewing displays are hypnotic. The whole space feels like a living art installation—a sanctuary for anyone who creates after dark.",                tag: "Designer",                avatarSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&q=80",                avatarAlt: "Sam headshot",                imageSrc: "https://images.unsplash.com/photo-1514432324607-2e467f4af445?w=400&q=80",                imageAlt: "Creative workspace"
              },
              {
                id: "4",                name: "Taylor, Photographer",                date: "Date: 10 December 2024",                title: "Every frame is perfect",                quote: "As a photographer, I'm obsessed with lighting and composition. Midnight Brew nails both. This place is an Instagram goldmine and a genuine creative sanctuary.",                tag: "Photographer",                avatarSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&q=80",                avatarAlt: "Taylor headshot",                imageSrc: "https://images.unsplash.com/photo-1461023058943-07fcbe16d735?w=400&q=80",                imageAlt: "Artistic coffee presentation"
              },
              {
                id: "5",                name: "Casey, Creative Writer",                date: "Date: 8 December 2024",                title: "The muse of late-night inspiration",                quote: "There's something magical about writing in Midnight Brew after hours. The ambiance, the exceptional coffee, the vibe—it all comes together to unlock creative flow.",                tag: "Writer",                avatarSrc: "https://images.unsplash.com/photo-1516307365033-622198c86281?w=150&q=80",                avatarAlt: "Casey headshot",                imageSrc: "https://images.unsplash.com/photo-1495521821757-a1efb6729352?w=400&q=80",                imageAlt: "Midnight Brew creative space"
              },
              {
                id: "6",                name: "Morgan, Content Creator",                date: "Date: 5 December 2024",                title: "Content gold meets coffee excellence",                quote: "The visual storytelling at Midnight Brew is unmatched. Bold colors, moody lighting, artistic presentation—it's a creator's paradise wrapped in exceptional specialty coffee.",                tag: "Creator",                avatarSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&q=80",                avatarAlt: "Morgan headshot",                imageSrc: "https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=400&q=80",                imageAlt: "Coffee artistry"
              }
            ]}
            textboxLayout="default"
            useInvertedBackground={false}
            buttons={[]}
            buttonAnimation="slide-up"
          />
        </div>

        <div id="reservation" data-section="reservation">
          <ContactCTA
            tag="Ready to Experience?"
            tagIcon={MapPin}
            tagAnimation="slide-up"
            title="Join the Night Shift"
            description="Reserve your spot in Midnight Brew's exclusive creative sanctuary. Whether you're here for inspiration, connection, or simply to experience exceptional coffee in a bold artistic space—we're ready for you after dark."
            buttons={[
              { text: "Reserve Now", href: "https://reservations.midnightbrew.local" },
              { text: "Get in Touch", href: "mailto:hello@midnightbrew.local" }
            ]}
            buttonAnimation="slide-up"
            background={{ variant: "plain" }}
            useInvertedBackground={false}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBase
            logoText="Midnight Brew"
            copyrightText="© 2025 Midnight Brew. Brewed After Dark."
            columns={[
              {
                title: "Experience",                items: [
                  { label: "Hours (After Dark)", href: "#" },
                  { label: "Location", href: "#" },
                  { label: "Book a Table", href: "#" }
                ]
              },
              {
                title: "Creative",                items: [
                  { label: "Instagram", href: "https://instagram.com" },
                  { label: "Follow Us", href: "https://twitter.com" },
                  { label: "Newsletter", href: "#" }
                ]
              },
              {
                title: "Legal",                items: [
                  { label: "Privacy Policy", href: "#" },
                  { label: "Terms of Service", href: "#" },
                  { label: "Contact", href: "mailto:hello@midnightbrew.local" }
                ]
              }
            ]}
          />
        </div>
      </div>
    </ThemeProvider>
  );
}
