"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Heart } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="radialGradient"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="CoffeeFlow"
          navItems={[
            { name: "Home", id: "home" },
            { name: "About", id: "about" },
            { name: "Menu", id: "menu" },
            { name: "Contact", id: "contact" },
            { name: "Locations", id: "locations" }
          ]}
          button={{ text: "Order Now", href: "menu" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="CoffeeFlow"
          description="Your perfect brew awaits. Handcrafted espresso, creamy lattes, and seasonal specials made fresh daily."
          buttons={[
            { text: "Browse Menu", href: "menu" },
            { text: "Reserve a Table", href: "contact" }
          ]}
          slides={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766758395555-7mv6t2q9.jpg",
              imageAlt: "Premium specialty latte with latte art"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766758396928-lp7hxsr0.jpg",
              imageAlt: "Fresh espresso shot being poured"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766758398063-ipre35cv.jpg",
              imageAlt: "Cozy coffee shop interior atmosphere"
            }
          ]}
          autoplayDelay={4000}
          showDimOverlay={true}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitAbout
          title="Crafted With Passion Since 2010"
          description="CoffeeFlow represents our commitment to excellence in every cup. We source premium beans directly from ethical suppliers and roast them fresh to perfection. Our baristas are passionate about creating the perfect coffee experience for you."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766758399249-5ptbosia.jpg"
          imageAlt="Coffee beans and roasting process"
          imagePosition="right"
          buttons={[{ text: "Our Story", href: "#" }]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="menu" data-section="menu">
        <ProductCardSeven
          title="Signature Menu"
          description="Expertly crafted beverages featuring our finest blends and seasonal creations"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",
              name: "Classic Espresso",
              price: "$3.50",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766757626429-ve9tnr36.jpg",
              imageAlt: "Classic espresso shot"
            },
            {
              id: "2",
              name: "Signature Latte",
              price: "$5.00",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766758400797-4e6y3l0g.jpg",
              imageAlt: "Latte with latte art"
            },
            {
              id: "3",
              name: "Cold Brew Iced",
              price: "$4.50",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766758402088-wj4zl5un.jpg",
              imageAlt: "Refreshing iced cold brew"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Beloved by Coffee Enthusiasts Everywhere"
          cardTag="Customer Favorites"
          cardTagIcon={Heart}
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766758403855-43mgv6tq.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "James Rodriguez",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766758404950-o6m20jnh.jpg",
              imageAlt: "James Rodriguez"
            },
            {
              id: "3",
              name: "Emma Chen",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766758405904-aktvo27y.jpg",
              imageAlt: "Emma Chen"
            },
            {
              id: "4",
              name: "Michael Thompson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766758407286-habq6wfk.jpg",
              imageAlt: "Michael Thompson"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Stop by our cafe to experience the perfect cup or connect with us online. We're here to serve you amazing coffee every day."
          animationType="entrance-slide"
          buttons={[
            { text: "Contact Us", href: "#" },
            { text: "Find a Location", href: "#" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          columns={[
            {
              title: "Menu",
              items: [
                { label: "Coffee Drinks", href: "#" },
                { label: "Pastries", href: "#" },
                { label: "Breakfast", href: "#" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "about" },
                { label: "Locations", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "Contact", href: "contact" },
                { label: "Instagram", href: "#" },
                { label: "Facebook", href: "#" }
              ]
            }
          ]}
          logoText="CoffeeFlow"
          copyrightText="© 2025 CoffeeFlow. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}