"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardThirteen from '@/components/sections/feature/FeatureCardThirteen';
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import { Award, Users, Wine, Clock, Sparkles, ChefHat, Leaf } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="small"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="minimal"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Trattoria"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Menu", id: "menu" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Reserve Table",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Trattoria"
          description="Experience authentic Italian cuisine in an elegant atmosphere. Reserve your table for an unforgettable dining experience."
          tag="Fine Dining"
          tagIcon={Sparkles}
          buttons={[
            { text: "Reserve Now", href: "contact" },
            { text: "View Menu", href: "#menu" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766416778445-zl3jwowr.jpg"
          imageAlt="Elegant restaurant interior with warm lighting"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="Our Story"
          description="At Trattoria, we celebrate the art of Italian gastronomy. For over two decades, we have crafted exceptional dishes using the finest ingredients and time-honored recipes passed down through generations."
          tag="Heritage"
          tagIcon={Award}
          buttons={[
            { text: "Explore More", href: "#menu" }
          ]}
          bulletPoints={[
            {
              title: "Authentic Recipes",
              description: "Traditional Italian dishes prepared with passion and precision",
              icon: ChefHat
            },
            {
              title: "Premium Ingredients",
              description: "Sourced directly from Italy and local suppliers",
              icon: Leaf
            },
            {
              title: "Expert Sommelier",
              description: "Curated wine selection to complement every dish",
              icon: Wine
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766758611877-qebmb4nc.jpg"
          imageAlt="Authentic Italian pasta and traditional dishes"
          imagePosition="right"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="menu" data-section="menu">
        <FeatureCardThirteen
          features={[
            {
              id: "01",
              title: "Appetizers",
              description: "Start your meal with our signature bruschetta, fresh mozzarella, and cured meats selection",
              rating: 4.8
            },
            {
              id: "02",
              title: "Pasta Dishes",
              description: "House-made pasta prepared with classic sauces and seasonal ingredients",
              rating: 4.9
            },
            {
              id: "03",
              title: "Main Courses",
              description: "Premium seafood, veal, and chicken prepared with authentic Italian techniques",
              rating: 5.0
            },
            {
              id: "04",
              title: "Desserts",
              description: "Traditional tiramisu, panna cotta, and fresh gelato to finish your meal",
              rating: 4.7
            }
          ]}
          carouselMode="buttons"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          title="Our Menu"
          description="Discover our carefully curated selection of Italian cuisine"
          tag="Menu"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="highlights" data-section="highlights">
        <MetricCardSix
          metrics={[
            {
              id: "1",
              value: "20+",
              tag: "Years",
              tagIcon: Award,
              title: "Years of Excellence"
            },
            {
              id: "2",
              value: "500+",
              tag: "Guests",
              tagIcon: Users,
              title: "Happy Guests Monthly"
            },
            {
              id: "3",
              value: "50+",
              tag: "Wines",
              tagIcon: Wine,
              title: "Curated Wine Selection"
            },
            {
              id: "4",
              value: "24/7",
              tag: "Available",
              tagIcon: Clock,
              title: "Online Reservations"
            }
          ]}
          carouselMode="buttons"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          title="Why Choose Trattoria"
          description="Excellence in every detail"
          tag="Statistics"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          testimonials={[
            {
              id: "1",
              name: "Maria Rossi",
              role: "Guest",
              company: "Regular Customer",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502912600-84fr3x4z.jpg",
              imageAlt: "Maria Rossi"
            },
            {
              id: "2",
              name: "Giovanni Ferrari",
              role: "Food Critic",
              company: "Milano Gazette",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502913367-8j5yog7q.jpg",
              imageAlt: "Giovanni Ferrari"
            },
            {
              id: "3",
              name: "Sofia Landi",
              role: "Guest",
              company: "Special Occasion",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502914968-w4h9h050.jpg",
              imageAlt: "Sofia Landi"
            },
            {
              id: "4",
              name: "Marco Benedetti",
              role: "Guest",
              company: "Corporate Event",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766758616598-m78jdng6.jpg",
              imageAlt: "Marco Benedetti"
            },
            {
              id: "5",
              name: "Lucia Moretti",
              role: "Guest",
              company: "Anniversary Dinner",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766758617428-1ezmaqo4.jpg",
              imageAlt: "Lucia Moretti"
            },
            {
              id: "6",
              name: "Antonio Gallo",
              role: "Wine Enthusiast",
              company: "Sommelier",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697041-9adqfrju.jpg",
              imageAlt: "Antonio Gallo"
            }
          ]}
          title="What Our Guests Say"
          description="Experience authentic feedback from satisfied diners"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFive
          team={[
            {
              id: "1",
              name: "Marco Rossi",
              role: "Head Chef",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502912600-84fr3x4z.jpg",
              imageAlt: "Marco Rossi"
            },
            {
              id: "2",
              name: "Elena Bianchi",
              role: "Sous Chef",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502913367-8j5yog7q.jpg",
              imageAlt: "Elena Bianchi"
            },
            {
              id: "3",
              name: "Paolo Fermi",
              role: "Sommelier",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502914968-w4h9h050.jpg",
              imageAlt: "Paolo Fermi"
            },
            {
              id: "4",
              name: "Giulia Romano",
              role: "Restaurant Manager",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766758616598-m78jdng6.jpg",
              imageAlt: "Giulia Romano"
            }
          ]}
          animationType="slide-up"
          title="Meet Our Team"
          description="Exceptional talent dedicated to your dining experience"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Our Team"
          tagIcon={Users}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Reserve Your Table"
          description="Book your dining experience at Trattoria. Join us for an evening of exquisite Italian cuisine and warm hospitality."
          inputs={[
            {
              name: "name",
              type: "text",
              placeholder: "Your Name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Your Email",
              required: true
            },
            {
              name: "phone",
              type: "tel",
              placeholder: "Phone Number",
              required: true
            },
            {
              name: "date",
              type: "date",
              placeholder: "Preferred Date",
              required: true
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Special requests or dietary requirements",
            rows: 4,
            required: false
          }}
          useInvertedBackground="noInvert"
          buttonText="Reserve Table"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          columns={[
            {
              items: [
                { label: "Home", href: "hero" },
                { label: "About", href: "about" },
                { label: "Menu", href: "menu" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "contact" },
                { label: "Reservations", href: "contact" },
                { label: "Events", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Accessibility", href: "#" }
              ]
            }
          ]}
          logoText="Trattoria"
        />
      </div>
    </ThemeProvider>
  );
}