"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import AboutMetric from '@/components/sections/about/AboutMetric';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Award, Globe, Users, Sparkles, TrendingUp } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="medium"
      background="aurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Globus"
          navItems={[
            { name: "Products", id: "products" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Shop Now",            href: "products"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Discover Premium Cups for Every Moment"
          description="Explore our curated collection of handcrafted cups and mugs. From morning coffee to evening tea, find the perfect vessel for your favorite beverages."
          tag="Premium Collection"
          tagIcon={Sparkles}
          background={{ variant: "animated-grid" }}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/vanilla-cookies-pralines-with-cup-tea_114579-4412.jpg",              imageAlt: "Premium ceramic coffee mug"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/elegant-breakfast-with-coffee-croissants_23-2147658666.jpg",              imageAlt: "Modern glass tumbler"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/winter-clothes-two-cups-mulled-wine_1163-3161.jpg",              imageAlt: "Insulated travel cup"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/sliced-dry-plum-crispbread-cup-tea-wooden-board-marble-surface_114579-61314.jpg",              imageAlt: "Elegant porcelain teacup"
            }
          ]}
          buttons={[
            { text: "Shop Collection", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Globus Cups: Crafting Excellence Since 2010. We blend tradition with innovation to create drinkware that brings joy to every sip."
          useInvertedBackground="invertDefault"
          metrics={[
            { icon: Award, label: "Premium Quality", value: "100%" },
            { icon: Globe, label: "Global Reach", value: "50+ Countries" },
            { icon: Users, label: "Happy Customers", value: "250K+" },
            { icon: Sparkles, label: "Products", value: "500+" }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardTwo
          title="Featured Collections"
          description="Browse our bestselling cups and mugs, each selected for quality, style, and functionality."
          tag="Best Sellers"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          carouselMode="buttons"
          products={[
            {
              id: "1",              brand: "Globus Premium",              name: "Classic White Ceramic Mug",              price: "$24.99",              rating: 5,
              reviewCount: "1.2k",              imageSrc: "https://img.b2bpic.net/free-photo/zebra-pattern-biscuits-cup-tea-marble-surface_114579-73344.jpg",              imageAlt: "Classic white ceramic mug"
            },
            {
              id: "2",              brand: "Globus Modern",              name: "Azure Blue Minimalist Cup",              price: "$32.99",              rating: 5,
              reviewCount: "890",              imageSrc: "https://img.b2bpic.net/free-photo/cup-coffee-biscuits-wooden-plate_114579-57875.jpg",              imageAlt: "Modern blue minimalist cup"
            },
            {
              id: "3",              brand: "Globus Eco",              name: "Sustainable Green Tumbler",              price: "$28.99",              rating: 4,
              reviewCount: "567",              imageSrc: "https://img.b2bpic.net/free-photo/three-cups-coffee-wooden-board_114579-52730.jpg",              imageAlt: "Eco-friendly green tumbler"
            },
            {
              id: "4",              brand: "Globus Luxury",              name: "Gold Rimmed Premium Cup",              price: "$45.99",              rating: 5,
              reviewCount: "423",              imageSrc: "https://img.b2bpic.net/free-photo/leaves-kernels-near-cloth-mug_23-2147885950.jpg",              imageAlt: "Luxury gold rimmed cup"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSix
          title="Why Choose Globus Cups"
          description="Experience the difference quality craftsmanship makes in every daily ritual."
          tag="Our Advantages"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: 1,
              title: "Premium Materials",              description: "Hand-selected ceramic, glass, and sustainable materials ensure durability and exceptional quality.",              imageSrc: "https://img.b2bpic.net/free-photo/zebra-pattern-biscuits-cup-tea-marble-surface_114579-73344.jpg"
            },
            {
              id: 2,
              title: "Eco-Friendly Production",              description: "Our manufacturing process prioritizes environmental responsibility without compromising on quality.",              imageSrc: "https://img.b2bpic.net/free-photo/three-cups-coffee-wooden-board_114579-52730.jpg"
            },
            {
              id: 3,
              title: "Timeless Design",              description: "Each cup is crafted to complement any kitchen aesthetic while standing the test of time.",              imageSrc: "https://img.b2bpic.net/free-photo/cup-coffee-biscuits-wooden-plate_114579-57875.jpg"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="By The Numbers"
          description="See why customers trust Globus for their everyday drinkware."
          tag="Performance"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            { id: "1", value: "98%", description: "Customer Satisfaction Rate" },
            { id: "2", value: "15+ Years", description: "Average Product Lifespan" },
            { id: "3", value: "0% Defects", description: "Quality Guarantee" },
            { id: "4", value: "24h", description: "Shipping Speed" }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Customers Say"
          description="Hear from people who've made Globus cups part of their daily routine."
          tag="Reviews"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          showRating={true}
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              handle: "@sarahm_coffee",              testimonial: "The quality is exceptional. My Globus mug has become my favorite morning companion. It keeps my coffee hot for hours!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "James Chen",              handle: "@jchen_designs",              testimonial: "Beautiful design, impeccable craftsmanship. Every cup feels like a work of art. Highly recommended!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/business-woman-banner-concept-with-copy-space_23-2149601533.jpg",              imageAlt: "James Chen"
            },
            {
              id: "3",              name: "Emma Thompson",              handle: "@emmathompson_life",              testimonial: "Switched to Globus for sustainability. Not only are they eco-friendly, but they're absolutely gorgeous too.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/studio-shot-young-confident-woman-with-long-dark-hair-wearing-blue-jacket-posing_291650-158.jpg",              imageAlt: "Emma Thompson"
            },
            {
              id: "4",              name: "Michael Rodriguez",              handle: "@mrodriguez_coffee",              testimonial: "Ordered 6 cups for my office. Everyone loves them. Great quality, amazing service. Will order again!",              rating: 4,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-young-businesswoman_329181-11388.jpg",              imageAlt: "Michael Rodriguez"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to elevate your daily ritual? Discover your perfect Globus cup today and join thousands of satisfied customers worldwide."
          animationType="reveal-blur"
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Shop Now", href: "products" },
            { text: "Get in Touch", href: "#contact" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Products",              items: [
                { label: "All Cups", href: "products" },
                { label: "Collections", href: "products" },
                { label: "New Arrivals", href: "products" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Sustainability", href: "about" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "contact" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Globus Cups | Premium Drinkware Since 2010"
        />
      </div>
    </ThemeProvider>
  );
}