"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { ArrowRight, Coffee, Heart, Mail, Sparkles, Star } from "lucide-react";

export default function LandingPage() {
  const handleEmailSignup = (email: string) => {
    console.log('Email signup:', email);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="floatingGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Midnight"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Experience", id: "experience" },
            { name: "Reviews", id: "testimonial" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Visit Us",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="MIDNIGHT"
          description="The best coffee you've ever had. Plan your day around it. Stay for the atmosphere. Come back for the people."
          buttons={[
            { text: "View Menu", href: "#experience" },
            { text: "Visit Us Today", href: "#contact" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/espresso-details-close-up-pouring-coffee-into-white-cup-from-coffee-pot-selective-focus-concept-making-coffee-bar-pub-restaurant-brewing-coffee-cezve_166373-2016.jpg"
          imageAlt="Espresso pour with professional moody lighting"
          mediaAnimation="opacity"
          frameStyle="card"
          background={{ variant: "radial-gradient" }}
        />
      </div>

      <div id="socialproof" data-section="socialproof">
        <SocialProofOne
          title="Loved by Our Community"
          description="Join the people who plan their day around Midnight Cafe"
          tag="Reviews"
          tagIcon={Star}
          tagAnimation="blur-reveal"
          names={[
            "Iowa City Locals",            "Study Groups",            "Coffee Enthusiasts",            "Late-Night Learners",            "Friend Groups",            "Remote Workers",            "Neighborhood Favorites"
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          speed={35}
          showCard={true}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Our Story"
          tagIcon={Coffee}
          tagAnimation="slide-up"
          title="More Than Coffee. It's a Mood."
          description="Midnight Cafe is where natural light meets late-night energy."
          subdescription="Where you study for hours, meet friends, fall in love with espresso, and stay longer than you planned."
          icon={Heart}
          imageSrc="https://img.b2bpic.net/free-photo/coffee-maker-machine-table_23-2148937228.jpg"
          imageAlt="Coffee craft and artisan preparation"
          mediaAnimation="blur-reveal"
          useInvertedBackground={true}
        />
      </div>

      <div id="experience" data-section="experience">
        <FeatureCardTwentySix
          title="Why People Drive Out of Their Way"
          description="Every element is obsessively crafted for your perfect moment"
          tag="Experience"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          features={[
            {
              title: "The Atmosphere",              description: "Natural light by day. Intimate glow by night. Your perfect backdrop.",              imageSrc: "https://img.b2bpic.net/free-photo/woman-works-cafe-evening_1153-3549.jpg",              imageAlt: "Warm cafe interior with natural light",              buttonIcon: ArrowRight
            },
            {
              title: "Perfect Every Time",              description: "Consistency you can count on. Coffee crafted with obsessive precision.",              imageSrc: "https://img.b2bpic.net/free-photo/man-enjoying-cup-hot-coffee-cafe_53876-88441.jpg",              imageAlt: "Professional latte art",              buttonIcon: ArrowRight
            },
            {
              title: "The People",              description: "Friendly, responsive, real. We remember you and we care.",              imageSrc: "https://img.b2bpic.net/free-photo/handsome-barista-serving-coffee-bring-cup-standing-black-apron-with-friendly-smile_1258-41034.jpg",              imageAlt: "Smiling barista in professional setting",              buttonIcon: ArrowRight
            },
            {
              title: "The Intention",              description: "We're here because we love this. Passion shows in every cup.",              imageSrc: "https://img.b2bpic.net/free-photo/cozy-home-composition-with-cup-coffee-candle-decorative-details_169016-23101.jpg",              imageAlt: "Midnight cafe glowing with warm light",              buttonIcon: ArrowRight
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "Reserve Your Spot", href: "#contact" }
          ]}
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardFifteen
          testimonial="Without a doubt the best coffee I've ever had. I plan my day around a stop to Midnight. My favorite coffee shop in Iowa City. Perfect and consistent every time."
          rating={5}
          author="Lisa & Meredith, Loyal Customers"
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/handsome-barista-serving-coffee-bring-cup-standing-black-apron-with-friendly-smile_1258-41034.jpg",              alt: "Customer testimonial avatar 1"
            },
            {
              src: "https://img.b2bpic.net/free-photo/croissant-coffee-food-photography_53876-104492.jpg",              alt: "Customer testimonial avatar 2"
            },
            {
              src: "https://img.b2bpic.net/free-photo/brewing-coffee-coffee-is-poured-into-glass-cup-from-copper-coffee-maker-lunch-old-cafe-vertical-shot-selective-focus_166373-2509.jpg",              alt: "Customer testimonial avatar 3"
            },
            {
              src: "https://img.b2bpic.net/free-photo/woman-works-cafe-evening_1153-3549.jpg",              alt: "Customer testimonial avatar 4"
            }
          ]}
          ratingAnimation="blur-reveal"
          avatarsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Connected"
          tagIcon={Mail}
          tagAnimation="slide-up"
          title="Join the Midnight List"
          description="Secret drinks. Early releases. Exclusive offers. Plan your day around our best moments."
          inputPlaceholder="Enter your email"
          buttonText="Sign Me Up"
          termsText="We respect your inbox. Unsubscribe anytime. You're in good hands."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          onSubmit={handleEmailSignup}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Cafe",              items: [
                { label: "Home", href: "#hero" },
                { label: "About", href: "#about" },
                { label: "Experience", href: "#experience" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "Email", href: "mailto:hello@midnightcafe.local" },
                { label: "Directions", href: "#" }
              ]
            },
            {
              title: "Hours",              items: [
                { label: "Monday - Sunday", href: "#" },
                { label: "6:30 AM - 10:00 PM", href: "#" },
                { label: "Iowa City, Iowa", href: "#" },
                { label: "Come By", href: "#contact" }
              ]
            }
          ]}
          copyrightText="© 2025 Midnight Cafe | Plan Your Day Around Us"
        />
      </div>
    </ThemeProvider>
  );
}