"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import TextAbout from '@/components/sections/about/TextAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Users, Award, Globe, Smile } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Valera Morning"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Menu", id: "menu" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Reserve a Table",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Start Your Morning Right"
          description="Discover the perfect blend of premium coffee, warm atmosphere, and exceptional service at Valera Morning"
          tag="Fresh Daily Roasted"
          imageSrc="https://img.b2bpic.net/free-photo/close-up-woman-drinking-coffee_23-2148973383.jpg"
          imageAlt="Premium morning coffee"
          textPosition="bottom-left"
          showDimOverlay={true}
          showBlur={true}
          buttons={[
            { text: "Visit Us Today", href: "contact" },
            { text: "View Menu", href: "menu" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="At Valera Morning, we believe every cup tells a story. Established with passion for exceptional coffee, we source the finest beans from ethical farmers worldwide and craft each beverage with precision and care."
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Learn Our Story", href: "about" }
          ]}
        />
      </div>

      <div id="menu" data-section="menu">
        <ProductCardOne
          title="Featured Selection"
          description="Handpicked specialties that define Valera Morning's unique coffee experience"
          products={[
            {
              id: "1",              name: "Single Origin Espresso",              price: "$4.50",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-hands-holding-hot-beverage_23-2149271431.jpg",              imageAlt: "Single Origin Espresso"
            },
            {
              id: "2",              name: "Signature Cappuccino",              price: "$5.25",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-woman-enjoying-mug-coffee_23-2149122038.jpg",              imageAlt: "Signature Cappuccino"
            },
            {
              id: "3",              name: "Artisan Pastry Pair",              price: "$8.75",              imageSrc: "https://img.b2bpic.net/free-photo/breakfast-set-flat-lay-with-croissant-raspberry-jam-food-photography_53876-108045.jpg",              imageAlt: "Artisan Pastry Pair"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Valera Morning by the Numbers"
          description="Our commitment to excellence reflected in every metric"
          metrics={[
            {
              id: "1",              value: "5K+",              title: "Daily Visitors",              description: "Coffee enthusiasts choosing Valera Morning",              icon: Users
            },
            {
              id: "2",              value: "15",              title: "Years",              description: "Of crafting exceptional coffee experiences",              icon: Award
            },
            {
              id: "3",              value: "40+",              title: "Coffee Origins",              description: "Ethically sourced from around the world",              icon: Globe
            },
            {
              id: "4",              value: "98%",              title: "Satisfaction Rate",              description: "From our valued customers",              icon: Smile
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Valera Morning has become my sanctuary for morning rituals. The quality of the coffee is unmatched, the baristas genuinely care, and the atmosphere perfectly sets the tone for my day. I can't imagine starting mornings anywhere else."
          rating={5}
          author="Sarah Mitchell, Regular Customer"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg", alt: "Sarah Mitchell" },
            { src: "https://img.b2bpic.net/free-photo/front-view-professional-business-woman-suit_23-2148603020.jpg", alt: "Customer" },
            { src: "https://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", alt: "Customer" },
            { src: "https://img.b2bpic.net/free-photo/portrait-young-smiling-pretty-girl-plaid-shirt-posing_114579-70643.jpg", alt: "Customer" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch"
          description="Reserve your table, ask about our latest roasts, or simply say hello. We'd love to hear from you and welcome you to Valera Morning."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your visit or ask anything about our menu...",            rows: 4,
            required: true
          }}
          imageSrc="https://img.b2bpic.net/free-photo/tufted-brown-leather-ottoman_417767-424.jpg"
          imageAlt="Valera Morning coffeeshop interior"
          mediaPosition="right"
          useInvertedBackground="invertDefault"
          buttonText="Send Message"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/hot-drink-arrangement-winter_23-2149188012.jpg"
          imageAlt="Fresh roasted coffee beans"
          logoText="Valera Morning"
          copyrightText="© 2025 Valera Morning. All rights reserved."
          columns={[
            {
              title: "Hours",              items: [
                { label: "Monday - Friday: 6:00 AM - 8:00 PM", href: "" },
                { label: "Saturday - Sunday: 7:00 AM - 9:00 PM", href: "" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "Phone: (555) 123-4567", href: "" },
                { label: "Email: hello@valeramorning.com", href: "" }
              ]
            },
            {
              title: "Follow Us",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Facebook", href: "https://facebook.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}