"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmallSizeLargeTitles"
      background="blurBottom"
      cardStyle="soft-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={[
            { name: "Home", id: "/" },
            { name: "Events", id: "/events" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" },
          ]}
          brandName="Ginger and Baker"
          button={{
            text: "Reserve Table",            href: "/reserve"}}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Where Fort Collins Gathers Beautifully"
          description="Bakery. Café. Restaurant. Event Venue.\nAll under one unforgettable roof."
          background={{
            variant: "plain"}}
          buttons={[
            { text: "Reserve a Table", href: "/reserve" },
            { text: "Explore the Space", href: "/about" },
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7nqvyy"
          imageAlt="Elegant restaurant interior with food and people"
          mediaAnimation="slide-up"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="What Our Guests Say"
          description="Authentic feedback from our community, celebrating the warmth and quality of Ginger and Baker."
          names={[
            "“Amazing venue… 10/10 would love to work here again.”",            "“Super nice building, outdoor patios, bakery, cocktails—everything.”",            "“Cozy atmosphere with standout dishes like biscuits & chai.”",            "“A truly special place for beautiful food and meaningful moments.”",            "“The pies are a must-try – absolutely delicious!”",            "“Perfect for any occasion, from casual coffee to elegant dinners.”",            "“Exceptional service and unforgettable ambiance.”"]}
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="experiences" data-section="experiences">
        <FeatureCardThree
          title="Discover Our Unique Experiences"
          description="From quick bites to unforgettable events, there's a perfect space for every moment."
          features={[
            {
              id: "01",              title: "Restaurant Dining",              description: "From slow mornings with coffee and fresh pastries to intimate dinners and craft cocktails—every moment is designed to feel special.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oioti4&_wi=1",              imageAlt: "Elegant restaurant interior"},
            {
              id: "02",              title: "Bakery & Coffee Shop",              description: "Handmade pies, flaky biscuits, and signature drinks—crafted daily and worth coming back for.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=csb5ll&_wi=1",              imageAlt: "Artisan bakery with coffee and pastries"},
            {
              id: "03",              title: "Events & Weddings",              description: "A space designed for unforgettable moments—weddings, celebrations, and private gatherings with character and charm.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=iemf9m",              imageAlt: "Beautiful wedding venue setup"},
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          useInvertedBackground={false}
        />
      </div>

      <div id="highlights" data-section="highlights">
        <ProductCardTwo
          title="Signature Highlights"
          description="Guest favorites and culinary delights you won't want to miss."
          products={[
            {
              id: "biscuits",              brand: "Ginger & Baker",              name: "Famous Biscuits",              price: "Complimentary",              rating: 5,
              reviewCount: "100+",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=e89h4l",              imageAlt: "Golden flaky biscuits"},
            {
              id: "chai",              brand: "Ginger & Baker",              name: "Coconut Chai",              price: "$6.00",              rating: 5,
              reviewCount: "75+",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h4o79l&_wi=1",              imageAlt: "Gourmet coconut chai latte"},
            {
              id: "pies",              brand: "Ginger & Baker",              name: "Seasonal Pies",              price: "Varies",              rating: 5,
              reviewCount: "50+",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s8jf2j",              imageAlt: "Rustic seasonal fruit pies"},
            {
              id: "patio",              brand: "Ginger & Baker",              name: "Outdoor Patio Dining",              price: "Experience",              rating: 5,
              reviewCount: "120+",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6mju7x",              imageAlt: "Cozy outdoor patio dining"},
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="four-items-2x2-equal-grid"
          useInvertedBackground={false}
        />
      </div>

      <div id="what-to-expect" data-section="what-to-expect">
        <FaqSplitMedia
          title="Designed for Different Moments"
          description="Each of our distinct spaces offers a unique ambiance. Find the perfect fit for your visit."
          faqs={[
            {
              id: "quick-coffee",              title: "Quick Coffee & Bakery",              content: "Our bustling front counter and bakery offer a delightful selection for those on the go. Grab a fresh pastry, a gourmet coffee, or a handmade pie to enjoy in our cozy nooks or to take with you."},
            {
              id: "casual-lunch",              title: "Casual Lunch",              content: "The main floor dining area provides a relaxed atmosphere for a casual lunch. Enjoy our seasonal menu with friends or colleagues in a vibrant, welcoming setting."},
            {
              id: "full-dining",              title: "Full Dining Experience (Upstairs)",              content: "For a more intimate and elevated meal, venture upstairs to our full-service restaurant. Experience chef-driven dishes, craft cocktails, and impeccable service in an elegant setting."},
            {
              id: "private-events",              title: "Private Events",              content: "Our dedicated event spaces are perfect for celebrating life's milestones. From weddings to corporate gatherings, our team will ensure every detail is exquisite. Ask us to guide you to the perfect fit."},
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c9elbr&_wi=1"
          imageAlt="Multiple restaurant spaces and dining areas"
          mediaPosition="right"
          textboxLayout="default"
          faqsAnimation="slide-up"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="final-cta" data-section="final-cta">
        <TextSplitAbout
          title="Come Experience It For Yourself"
          description={[
            "Sunlight through windows. The smell of fresh bread. Conversations that linger. Ready to create your next beautiful memory? Whether it's a casual coffee, an elegant dinner, or a landmark event, we invite you to discover the magic."]}
          buttons={[
            { text: "Reserve Now", href: "/reserve" },
            { text: "Plan an Event", href: "/events" },
          ]}
          showBorder={false}
          useInvertedBackground={false}
          buttonAnimation="entrance-slide"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "Events", href: "/events" },
                { label: "About Us", href: "/about" },
                { label: "Contact", href: "/contact" },
              ],
            },
            {
              items: [
                { label: "Restaurant", href: "/" },
                { label: "Bakery & Cafe", href: "/" },
                { label: "Private Events", href: "/events" },
                { label: "Weddings", href: "/events" },
              ],
            },
            {
              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "Directions", href: "https://maps.google.com" },
              ],
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
              ],
            },
          ]}
          logoText="Ginger and Baker"
        />
      </div>
    </ThemeProvider>
  );
}
