"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroGlobeOverlay from '@/components/sections/hero/HeroGlobeOverlay';
import TextAbout from '@/components/sections/about/TextAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Coffee, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="dotGrid"
      cardStyle="layered-gradient"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Coffee House"
          navItems={[
            { name: "Menu", id: "menu" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Visit Us",
            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroGlobeOverlay
          title="Welcome to Coffee House"
          description="Discover exceptional coffee crafted with passion. From rich espresso to smooth lattes, experience the perfect cup every time."
          tag="Specialty Coffee"
          tagIcon={Coffee}
          buttons={[
            { text: "View Menu", href: "#menu" },
            { text: "Order Now", href: "#contact" }
          ]}
        />
      </div>

      <div id="menu" data-section="menu">
        <ProductCardFour
          title="Featured Coffee Selection"
          description="Our carefully selected menu of premium coffee beverages, each crafted to perfection."
          tag="Popular Items"
          tagIcon={Star}
          products={[
            {
              id: "espresso",
              name: "Espresso",
              price: "$3.50",
              variant: "Rich and Bold",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765540090199-25r3mw2o.jpg",
              imageAlt: "Espresso shot"
            },
            {
              id: "cappuccino",
              name: "Cappuccino",
              price: "$4.50",
              variant: "Creamy and Smooth",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765540091851-gjykxtjj.jpg",
              imageAlt: "Cappuccino with latte art"
            },
            {
              id: "americano",
              name: "Americano",
              price: "$3.75",
              variant: "Clean and Simple",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765540093878-0dmcsy8f.jpg",
              imageAlt: "Americano coffee"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          containerStyle="default"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="We believe great coffee brings people together. Since 2015, we've been roasting premium beans and creating memorable moments for our community."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn Our Story", href: "#" }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Customer Favorites"
          description="Hear what our coffee lovers have to say about their experience at Coffee House"
          testimonials={[
            {
              id: "1",
              title: "Best Espresso in Town",
              quote: "The espresso here is absolutely incredible. The baristas really know their craft and the beans are always fresh. I come here every morning before work.",
              name: "Sarah Mitchell",
              role: "Regular Customer",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765540095392-6kj1t7og.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              title: "Perfect Coffee Ritual",
              quote: "Coffee House has become my favorite spot in the city. The atmosphere is warm, the staff is friendly, and most importantly, the coffee is exceptional.",
              name: "James Chen",
              role: "Coffee Enthusiast",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765540097168-sccvny54.jpg",
              imageAlt: "James Chen"
            },
            {
              id: "3",
              title: "A True Coffee Experience",
              quote: "I love how they take pride in every cup. The baristas explain the origin of the beans and I can taste the difference. Worth every penny.",
              name: "Emma Rodriguez",
              role: "Coffee Connoisseur",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765540098279-529odohf.jpg",
              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",
              title: "Outstanding Quality",
              quote: "From the moment I walked in, I felt welcome. The cappuccino is silky smooth and the entire experience feels special. Highly recommended.",
              name: "Michael Torres",
              role: "Satisfied Customer",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765540099229-oejhfsj1.jpg",
              imageAlt: "Michael Torres"
            }
          ]}
          variant="card"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Coffee Shop FAQs"
          sideDescription="Everything you need to know about visiting Coffee House and our services."
          faqs={[
            {
              id: "1",
              title: "What are your hours of operation?",
              content: "We are open Monday through Friday from 6:00 AM to 7:00 PM, Saturday from 7:00 AM to 8:00 PM, and Sunday from 8:00 AM to 6:00 PM."
            },
            {
              id: "2",
              title: "Do you offer WiFi?",
              content: "Yes, we offer complimentary high-speed WiFi to all our customers. Just ask the barista for the password when you order."
            },
            {
              id: "3",
              title: "Can I order online?",
              content: "We accept pre-orders through our website and mobile app for pickup. This helps us prepare your drink ahead of time so you never have to wait."
            },
            {
              id: "4",
              title: "Do you have dairy-free options?",
              content: "Absolutely! We offer almond, oat, soy, and coconut milk alternatives for all our espresso drinks at no extra charge."
            },
            {
              id: "5",
              title: "Where are you located?",
              content: "Coffee House is located at 123 Main Street, downtown. We're between Oak Avenue and Maple Street, with convenient street parking available."
            }
          ]}
          textPosition="left"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready for your perfect cup? Visit us today or get in touch with any questions about our menu and services."
          animationType="reveal-blur"
          buttons={[
            { text: "Visit Our Location", href: "#" },
            { text: "Send Message", href: "#" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765540102017-r30hns3c.jpg"
          imageAlt="Coffee shop ambiance"
          logoText="Coffee House"
          copyrightText="© 2025 Coffee House. All rights reserved."
          columns={[
            {
              title: "Menu",
              items: [
                { label: "Espresso Drinks", href: "#menu" },
                { label: "Pastries", href: "#" },
                { label: "Seasonal Specials", href: "#" }
              ]
            },
            {
              title: "Information",
              items: [
                { label: "Hours & Location", href: "#" },
                { label: "About Us", href: "#about" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "Twitter", href: "https://twitter.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}