"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterMedia from "@/components/sections/footer/FooterMedia";

import { Sparkles, Coffee, Star, MapPin, Instagram, Facebook, Twitter, PhoneCall } from "lucide-react";

export default function CoffeeShopPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="soft-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <ReactLenis root>
        <NavbarLayoutFloatingOverlay
          brandName="Bean & Brew"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About Us", id: "about" },
            { name: "Menu", id: "menu" },
            { name: "Gallery", id: "atmosphere" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "Order Now", href: "#menu" }}
        />

        <div id="hero" data-section="hero">
          <HeroOverlay
            title="Taste the Art of Coffee"
            description="Experience artisan roasted beans, handcrafted beverages, and a cozy atmosphere at our local coffee shop."
            tag="Crafting Perfect Moments"
            tagIcon={Sparkles}
            tagAnimation="slide-up"
            buttons={[
              { text: "View Menu", href: "#menu" },
              { text: "Find Us", href: "#contact" },
            ]}
            buttonAnimation="slide-up"
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/coffee-shop/hero-coffee.webp"
            imageAlt="Freshly brewed coffee in a minimalist setting"
            textPosition="bottom"
            showBlur={false}
            showDimOverlay={true}
          />
        </div>

        <div id="about" data-section="about">
          <TestimonialAboutCard
            tag="Our Story"
            tagAnimation="slide-up"
            title="More Than Just Coffee"
            description="We believe in the simple pleasure of a perfectly brewed cup. Our journey began with a passion for exceptional beans and a desire to create a welcoming space for our community."
            subdescription="Every sip tells a story of quality, craft, and care. We source our beans ethically and roast them to perfection, ensuring a rich and unforgettable flavor in every cup."
            icon={Coffee}
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/coffee-shop/about-coffee.webp"
            imageAlt="Barista preparing coffee"
            mediaAnimation="slide-up"
            useInvertedBackground={false}
          />
        </div>

        <div id="menu" data-section="menu">
          <ProductCardTwo
            title="Our Delicious Menu"
            description="From classic espresso to unique house specials, discover your new favorite drink."
            textboxLayout="default"
            useInvertedBackground={false}
            gridVariant="three-columns-all-equal-width"
            animationType="slide-up"
            products={[
              { id: "1", brand: "Espresso", name: "Americano", price: "$3.50", rating: 5, reviewCount: "25", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/coffee-shop/americano.webp" },
              { id: "2", brand: "Espresso", name: "Latte", price: "$4.00", rating: 5, reviewCount: "40", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/coffee-shop/latte.webp" },
              { id: "3", brand: "Espresso", name: "Cappuccino", price: "$4.00", rating: 5, reviewCount: "30", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/coffee-shop/cappuccino.webp" },
              { id: "4", brand: "Specialty", name: "Caramel Macchiato", price: "$4.75", rating: 5, reviewCount: "35", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/coffee-shop/macchiato.webp" },
              { id: "5", brand: "Brewed", name: "Pour Over", price: "$5.00", rating: 5, reviewCount: "15", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/coffee-shop/pourover.webp" },
              { id: "6", brand: "Pastry", name: "Croissant", price: "$3.00", rating: 4, reviewCount: "20", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/coffee-shop/croissant.webp" },
            ]}
          />
        </div>

        <div id="atmosphere" data-section="atmosphere">
          <FeatureCardTwentySix
            title="Our Cozy Atmosphere"
            description="A perfect blend of comfort and charm, designed for relaxation and connection."
            textboxLayout="default"
            useInvertedBackground={false}
            buttons={[]}
            buttonAnimation="slide-up"
            cardClassName="!h-auto aspect-video"
            features={[
              {
                title: "Warm Interiors",                description: "Relax in our inviting space.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/coffee-shop/interior-1.webp",                imageAlt: "Coffee shop interior with warm lighting", buttonIcon: Star},
              {
                title: "Outdoor Seating",                description: "Enjoy your coffee al fresco.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/coffee-shop/outdoor-2.webp",                imageAlt: "Outdoor seating area", buttonIcon: Star},
              {
                title: "Artisan Decor",                description: "Thoughtfully designed spaces.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/coffee-shop/interior-3.webp",                imageAlt: "Coffee shop interior with plants and art", buttonIcon: Star},
              {
                title: "Community Hub",                description: "A place to connect and create.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/coffee-shop/community-4.webp",                imageAlt: "People chatting in a coffee shop", buttonIcon: Star},
              {
                title: "Freshly Baked",                description: "Delicious treats baked daily.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/coffee-shop/pastry-5.webp",                imageAlt: "Fresh pastries on display", buttonIcon: Star},
            ]}
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplit
            tag="Visit Us"
            title="Come Say Hello"
            description="We'd love to welcome you to our shop. Find us at 123 Coffee Lane, Brewville, CA 90210. Open daily 7 AM - 7 PM. Or give us a call at (123) 456-7890."
            background={{ variant: "plain" }}
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/coffee-shop/contact-coffee.webp"
            imageAlt="Coffee shop storefront"
            mediaAnimation="slide-up"
            mediaPosition="left"
            inputPlaceholder="Enter your email for updates"
            buttonText="Subscribe"
            termsText="By clicking Subscribe, you agree to receive promotional emails."
            useInvertedBackground={false}
          />
        </div>

        <FooterMedia
          logoText="Bean & Brew"
          copyrightText="© 2024 Bean & Brew"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/coffee-shop/footer-coffee.webp"
          imageAlt="Coffee beans background"
          columns={[
            {
              title: "Shop",              items: [
                { label: "Menu", href: "#menu" },
                { label: "Our Story", href: "#about" },
                { label: "Gallery", href: "#atmosphere" },
              ],
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "#" },
                { label: "Facebook", href: "#" },
                { label: "Twitter", href: "#" },
              ],
            },
            {
              title: "Visit",              items: [
                { label: "Location", href: "#contact" },
                { label: "Hours", href: "#contact" },
                { label: "Call Us", href: "#contact" },
              ],
            },
          ]}
        />
      </ReactLenis>
    </ThemeProvider>
  );
}
