"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import { Award, Facebook, Instagram, Leaf, MessageSquare, Pizza, Sandwich, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="largeSizeMediumTitles"
        background="aurora"
        cardStyle="solid"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About",          id: "#about"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="PIEOUS"
    />
  </div>

  <div id="home" data-section="home">
      <HeroOverlay
      title="PIEOUS"
      description="Experience the unique taste of authentic wood-fired pizzas, handmade pastrami, and artisan cheeses made fresh in-house daily."
      tagAnimation="blur-reveal"
      buttons={[
        {
          text: "VIEW MENU",          href: "#offerings"},
        {
          text: "ORDER ONLINE",          href: "https://www.pieous.com/order-online"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/side-view-chef-baking-delicious-pizza_23-2150134249.jpg"
      imageAlt="Warm and inviting interior of an Italian restaurant with a pizza oven"
      showDimOverlay={true}
      showBlur={true}
      textPosition="bottom"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/one-companions_1098-13516.jpg",          alt: "Happy customer"},
        {
          src: "http://img.b2bpic.net/free-photo/friends-eating-pizza-side-view_23-2149872410.jpg",          alt: "Delighted guest"},
        {
          src: "http://img.b2bpic.net/free-photo/woman-eating-pasta-italian-restaurant_1303-24363.jpg",          alt: "Satisfied diner"},
        {
          src: "http://img.b2bpic.net/free-photo/handsome-smiling-man-eat-salade-restaurant-waiting-woman-with-bouquet-roses_496169-302.jpg",          alt: "Smiling patron"},
        {
          src: "http://img.b2bpic.net/free-photo/smiley-mother-daughter-side-view_23-2149854624.jpg",          alt: "Content foodie"},
      ]}
      avatarText="Loved by thousands of food enthusiasts"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="Our Story & Craftsmanship"
      metrics={[
        {
          icon: Award,
          label: "Years of Passion",          value: "10+"},
        {
          icon: Pizza,
          label: "Handmade Daily",          value: "Pizzas"},
        {
          icon: Star,
          label: "Happy Customers",          value: "Millions"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="offerings" data-section="offerings">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Artisan Pizzas",          description: "Authentic Neapolitan-style pizzas baked to perfection in our custom-built wood-fired oven.",          bentoComponent: "reveal-icon",          icon: Pizza
        },
        {
          title: "Handcrafted Pastrami",          description: "Our legendary pastrami, cured and smoked in-house for days, served in classic sandwiches and platters.",          bentoComponent: "reveal-icon",          icon: Sandwich
        },
        {
          title: "Fresh & Local",          description: "We are committed to using the freshest, locally sourced ingredients whenever possible for unparalleled taste.",          bentoComponent: "reveal-icon",          icon: Leaf
        }
      ]}
      title="Signature Offerings"
      description="Discover the heart of our kitchen – from classic wood-fired pizzas to rich, handmade pastrami and artisan cheeses. Each dish crafted with the finest ingredients and traditional techniques."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq1",          title: "Do you take reservations?",          content: "Yes, we highly recommend making a reservation, especially for weekend evenings. You can book a table through our website or by calling us directly."},
        {
          id: "faq2",          title: "What are your operating hours?",          content: "We are open Tuesday through Sunday, from 11 AM to 9 PM. We are closed on Mondays."},
        {
          id: "faq3",          title: "Do you offer vegetarian or gluten-free options?",          content: "Yes, we have a variety of vegetarian dishes and can accommodate many dietary restrictions. Please inform your server about any allergies or preferences."},
        {
          id: "faq4",          title: "Can I order online for pickup or delivery?",          content: "Absolutely! We offer online ordering for both pickup and local delivery through our website. You can find the link in our menu section."},
        {
          id: "faq5",          title: "Do you have a private dining area for events?",          content: "We have a semi-private dining area that can accommodate up to 20 guests for special events. Please contact us for more details and availability."},
        {
          id: "faq6",          title: "What kind of wine selection do you have?",          content: "Our wine list features a curated selection of Italian and international wines, carefully chosen to complement our menu. Our staff can help you with pairings."},
      ]}
      title="Frequently Asked Questions"
      description="Find quick answers to the most common questions about our restaurant, menu, and services"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "radial-gradient"}}
      tag="Visit Us"
      tagAnimation="blur-reveal"
      title="Make Your Reservation"
      description="Planning a special occasion or just a delightful meal? Book your table with us and experience authentic Italian hospitality."
      buttons={[
        {
          text: "BOOK A TABLE",          href: "https://www.pieous.com/reservations"},
        {
          text: "GET DIRECTIONS",          href: "https://www.google.com/maps/dir/?api=1&destination=PIEOUS"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="PIEOUS"
      copyrightText="© 2024 PIEOUS. All rights reserved."
      socialLinks={[
        {
          icon: Instagram,
          href: "https://www.instagram.com/pieous",          ariaLabel: "Instagram"},
        {
          icon: Facebook,
          href: "https://www.facebook.com/pieous",          ariaLabel: "Facebook"},
        {
          icon: MessageSquare,
          href: "https://www.yelp.com/biz/pieous-austin",          ariaLabel: "Yelp"},
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}