"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import TextAbout from '@/components/sections/about/TextAbout';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="radialGradient"
      cardStyle="shadow-colored"
      primaryButtonStyle="neon-glow-border"
      secondaryButtonStyle="minimal"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="CoffeeHub"
          navItems={[
            { name: "Menu", id: "menu" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Order Now",
            href: "#menu"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="CoffeeHub"
          description="Premium specialty coffee craft roasted fresh daily. Experience the perfect blend of quality, atmosphere, and exceptional service."
          buttons={[
            { text: "View Menu", href: "#menu" },
            { text: "Visit Us", href: "#contact" }
          ]}
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766926071450-kpn3dy5a.jpg"
          imageAlt="Premium coffee shop interior"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="Crafted with passion. Served with care. We believe every cup tells a story of quality and dedication."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Our Story", href: "#about" }
          ]}
        />
      </div>

      <div id="menu" data-section="menu">
        <ProductCardSeven
          title="Featured Drinks"
          description="Our signature blends and seasonal favorites"
          tag="Menu Highlights"
          products={[
            {
              id: "1",
              name: "Signature Espresso",
              price: "$4.50",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766926072868-mtlzwduc.jpg",
              imageAlt: "Signature espresso with crema"
            },
            {
              id: "2",
              name: "Creamy Latte",
              price: "$5.50",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766926074295-2uiuarc1.jpg",
              imageAlt: "Latte with latte art"
            },
            {
              id: "3",
              name: "Cold Brew",
              price: "$5.00",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766926075348-df8ny601.jpg",
              imageAlt: "Fresh cold brew over ice"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Stay Connected"
          title="Get our latest deals and new flavors"
          description="Subscribe to our newsletter and never miss our seasonal specials and new menu launches."
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="CoffeeHub"
          copyrightText="© 2025 CoffeeHub. All rights reserved."
          columns={[
            {
              title: "Hours",
              items: [
                { label: "Mon - Fri: 7am - 6pm" },
                { label: "Sat - Sun: 8am - 5pm" }
              ]
            },
            {
              title: "Location",
              items: [
                { label: "123 Main Street", href: "contact" },
                { label: "Phone: (555) 123-4567", href: "contact" }
              ]
            },
            {
              title: "Follow Us",
              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Facebook", href: "https://facebook.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}