"use client";

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="largeSmallSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Ginger & Baker"
          navItems={[
            { name: "Bakery", id: "bakery" },
            { name: "Dining", id: "dining" },
            { name: "Events", id: "events" },
            { name: "About", id: "about-us" },
            { name: "Contact", id: "contact-us" }
          ]}
          button={{
            text: "Reservations",            href: "#reservations"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Where Community Meets Craft."
          description="Elevated comfort food, artisan bakery, and unforgettable gatherings—all under one roof."
          background={{ variant: "plain" }}
          buttons={[
            { text: "Reserve a Table", href: "#reservations" },
            { text: "Explore the Menu", href: "#menu" }
          ]}
          videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2y1ic8"
          mediaAnimation="slide-up"
          imagePosition="right"
          fixedMediaHeight={true}
          videoAriaLabel="slow motion pouring chai"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          names={[
            "“Absolutely love the biscuits & chai.”",            "“An amazing wedding venue.”",            "“Beautiful space with patios.”",            "⭐⭐⭐⭐⭐ Google Reviews"
          ]}
          title="What Our Community Says"
          description="Authentic feedback from our cherished guests."
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          showCard={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSixteen
          title="Why People Love Ginger & Baker"
          description="We blend artisan craft with a community-driven experience. Discover what sets us apart from typical dining options."
          textboxLayout="default"
          negativeCard={{
            items: [
              "Generic Dining Experience",              "Limited Menu Options",              "Lackluster Ambiance",              "Impersonal Service"
            ]
          }}
          positiveCard={{
            items: [
              "Artisan Bakery & Cafe",              "Full Refined Dining",              "Rooftop & Private Events",              "Community-Centered Experience"
            ]
          }}
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="menu" data-section="menu">
        <ProductCardFour
          title="Our Top Loved Items"
          description="Handcrafted with passion, these dishes are the heart of Ginger & Baker."
          textboxLayout="default"
          products={[
            { id: "1", name: "Buttermilk Biscuits", price: "$8", variant: "Flaky & Golden", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=iu5y3o", imageAlt: "buttermilk biscuits golden brown" },
            { id: "2", name: "Turkey Pesto Sandwich", price: "$16", variant: "Fresh Baked Bread", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zplg2r", imageAlt: "turkey pesto sandwich gourmet" },
            { id: "3", name: "Coconut Chai Latte", price: "$7", variant: "Warm & Spicy", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fi3az9", imageAlt: "coconut chai latte warm beverage" },
            { id: "4", name: "Seasonal Bakery Pies", price: "$32", variant: "Local Ingredients", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ywp1cn", imageAlt: "seasonal bakery pies rustic" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="events" data-section="events">
        <MediaAbout
          title="Celebrate Something Worth Remembering"
          description="From intimate rooftop gatherings to full-scale weddings, Ginger & Baker is where moments turn into memories. Inquire about our versatile spaces and tailored services."
          buttons={[
            { text: "Inquire About Events", href: "#contact-us" },
            { text: "View Event Gallery", href: "#" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dpe702"
          imageAlt="Elegant wedding setup at Ginger & Baker event venue"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact-us" data-section="contact-us">
        <ContactFaq
          ctaTitle="Join the Inner Circle"
          ctaDescription="Get exclusive invites to rooftop events, seasonal menus, and private tastings. Stay connected with Ginger & Baker."
          ctaButton={{ text: "Join Now", onClick: () => console.log('Join Inner Circle clicked') }}
          ctaIcon={Mail}
          faqs={[
            { id: "1", title: "What are your operating hours?", content: "We are open from 7 AM to 9 PM, Monday through Saturday, and 8 AM to 3 PM on Sundays." },
            { id: "2", title: "Do you offer catering services?", content: "Yes, we offer full-service catering for a variety of events. Please contact our events team for details." },
            { id: "3", title: "Can I host a private event at Ginger & Baker?", content: "Absolutely! Our unique spaces, including the rooftop, are perfect for private parties, weddings, and corporate events. Visit our events page or inquire directly." },
            { id: "4", title: "Are reservations required?", content: "Reservations are recommended, especially for dinner and weekend brunch, but walk-ins are always welcome for the bakery and cafe." }
          ]}
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Ginger & Baker"
          copyrightText="© 2024 Ginger & Baker. All rights reserved."
          columns={[
            { title: "Explore", items: [{ label: "Bakery", href: "#bakery" }, { label: "Dining", href: "#dining" }, { label: "Events", href: "#events" }, { label: "Menu", href: "#menu" }] },
            { title: "About Us", items: [{ label: "Our Story", href: "#about-us" }, { label: "Careers", href: "#careers" }] },
            { title: "Connect", items: [{ label: "Reservations", href: "#reservations" }, { label: "Contact", href: "#contact-us" }, { label: "Facebook", href: "https://facebook.com/gingerandbaker" }, { label: "Instagram", href: "https://instagram.com/gingerandbaker" }] }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
