"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Award, Clock, Coffee, Leaf, MapPin, Sparkles, Users } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="outline"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Luxe Café"
          navItems={[
            { name: "Experience", id: "about" },
            { name: "Menu", id: "products" },
            { name: "Stories", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Reserve Table", href: "contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Elevate Your Coffee Experience"
          description="Discover the art of exceptional coffee crafted with premium beans, precision, and passion. Every cup tells a story of excellence."
          tag="Luxury Coffee Destination"
          tagIcon={Coffee}
          tagAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          buttons={[
            { text: "Explore Our Menu", href: "products" },
            { text: "Visit Us Today", href: "contact" }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-woman-striped-trench-coat-happily-talking-cellphone-sitting-near-big-window-while-spending-time-modern-cafe_574295-4851.jpg", imageAlt: "Luxurious cafe interior" },
            { imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-male-pouring-milk-into-glass-coffee_181624-1769.jpg", imageAlt: "Premium coffee preparation" },
            { imageSrc: "http://img.b2bpic.net/free-photo/making-drip-coffee-cafe_53876-31851.jpg", imageAlt: "Expert barista crafting coffee" },
            { imageSrc: "http://img.b2bpic.net/free-photo/lovely-indian-couple-love-wear-saree-elegant-suit-sitting-restaurant-eating-ice-cream-together_627829-843.jpg", imageAlt: "Elegant cafe setting" },
            { imageSrc: "http://img.b2bpic.net/free-photo/black-bearded-coffee-seller-pouring-coffee-shop_613910-443.jpg?_wi=1", imageAlt: "Specialty coffee creation" }
          ]}
          ariaLabel="Premium cafe hero section"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Where Passion Meets Perfection in Every Cup"
          metrics={[
            { icon: Leaf, label: "Premium Sourced Beans", value: "18+ Origins" },
            { icon: Award, label: "Craft Excellence", value: "Award Winning" },
            { icon: Users, label: "Dedicated Clientele", value: "2000+ Daily" },
            { icon: Clock, label: "Years of Expertise", value: "25+ Years" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="Cafe achievement metrics"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNineteen
          title="The Art of Exceptional Coffee"
          description="Experience our meticulous process that transforms premium beans into extraordinary coffee."
          tag="Our Craft"
          features={[
            {
              id: 1,
              tag: "Selection",              title: "Artisan Bean Selection",              subtitle: "The foundation of excellence",              description: "We partner directly with sustainable farms to source the finest single-origin and specialty blend beans. Each selection undergoes rigorous quality testing to ensure only the most exceptional beans reach our café.",              imageSrc: "http://img.b2bpic.net/free-photo/fragrant-coffee-beans-are-scattered-from-jar-rustic-tabletop-background-closeup-selective-focus-copy-space-banner_166373-2309.jpg",              imageAlt: "Premium coffee beans"
            },
            {
              id: 2,
              tag: "Roasting",              title: "Precision Roasting",              subtitle: "Bringing out hidden flavors",              description: "Our master roasters employ small-batch techniques to unlock each bean's unique characteristics. Every roast is carefully monitored to achieve the perfect balance of flavor, aroma, and body.",              imageSrc: "http://img.b2bpic.net/free-photo/tattooed-barista-hand-holds-raw-green-coffee-beans-from-white-plastic-basket-cotton-bags-europalet-warehouse_346278-886.jpg?_wi=1",              imageAlt: "Artisan roasting process"
            },
            {
              id: 3,
              tag: "Expertise",              title: "Master Barista Craft",              subtitle: "Perfected through passion",              description: "Our certified baristas combine technical precision with artistic passion. Every espresso pull, steam, and pour is executed with meticulous attention to detail, creating latte art and taste profiles that delight.",              imageSrc: "http://img.b2bpic.net/free-photo/black-bearded-coffee-seller-pouring-coffee-shop_613910-443.jpg?_wi=2",              imageAlt: "Professional barista at work"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Coffee craft process"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Our Signature Collection"
          description="Curated selections of premium coffee experiences crafted to perfection."
          tag="Featured Menu"
          tagIcon={Sparkles}
          products={[
            {
              id: "1",              name: "Single Origin Espresso",              price: "$6.50",              imageSrc: "http://img.b2bpic.net/free-photo/leftover-coffee-black-cup-window-sill_23-2147898257.jpg",              imageAlt: "Premium espresso shot"
            },
            {
              id: "2",              name: "Artisan Cappuccino",              price: "$7.25",              imageSrc: "http://img.b2bpic.net/free-photo/cup-coffee-with-foam-flower_1203-1629.jpg",              imageAlt: "Specialty cappuccino with latte art"
            },
            {
              id: "3",              name: "Cold Brew Reserve",              price: "$6.75",              imageSrc: "http://img.b2bpic.net/free-photo/strong-alcoholic-beverage-with-coffee_23-2148722521.jpg",              imageAlt: "Premium cold brew coffee"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Premium coffee menu"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Commitment to Excellence"
          description="Measurable dedication to quality in every aspect of our café experience."
          tag="By The Numbers"
          metrics={[
            {
              id: "1",              value: "100%",              title: "Fair Trade Sourced",              description: "Supporting ethical farming practices",              imageSrc: "http://img.b2bpic.net/free-photo/hands-that-carry-coffee-beans_1150-5773.jpg",              imageAlt: "Coffee sourcing and trade"
            },
            {
              id: "2",              value: "48 Hours",              title: "Fresh Roasted",              description: "Maximum peak flavor guarantee",              imageSrc: "http://img.b2bpic.net/free-photo/tattooed-barista-hand-holds-raw-green-coffee-beans-from-white-plastic-basket-cotton-bags-europalet-warehouse_346278-886.jpg?_wi=2",              imageAlt: "Fresh roasted coffee beans"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Café quality metrics"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="This café has completely transformed my daily coffee ritual. The attention to detail, from bean selection to the final cup, is unmatched. It's not just coffee—it's an experience of pure excellence."
          rating={5}
          author="Alexandra Chen, Coffee Enthusiast"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5367.jpg", alt: "Customer avatar 1" },
            { src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Customer avatar 2" },
            { src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Customer avatar 3" },
            { src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Customer avatar 4" }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="Customer testimonial"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Visit Us"
          title="Reserve Your Premium Coffee Experience"
          description="Join us for an unforgettable café experience. Book a table or send us a message to learn more about our exclusive offerings."
          tagIcon={MapPin}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email to reserve"
          buttonText="Book Table"
          termsText="We respect your privacy. Your information will only be used to confirm your reservation."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Luxe Café"
          columns={[
            {
              items: [
                { label: "Experience", href: "#about" },
                { label: "Our Craft", href: "#features" },
                { label: "Menu", href: "#products" }
              ]
            },
            {
              items: [
                { label: "Stories", href: "#testimonials" },
                { label: "Reserve", href: "#contact" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "About Us", href: "#about" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}