"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Award, Check, Heart, Leaf, Mail, ShoppingBag, Sparkles, Users } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeMediumTitles"
      background="none"
      cardStyle="gradient-radial"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Luxe & Frame"
          navItems={[
            { name: "Collections", id: "products" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Explore Now",            href: "products"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Crafted Elegance for Refined Living"
          description="Discover our curated collection of luxury furniture pieces that blend timeless design with contemporary craftsmanship. Each piece is thoughtfully selected to transform your space into a sanctuary of sophistication."
          tag="Premium Furniture Collection"
          tagIcon={Sparkles}
          background={{ variant: "plain" }}
          imageSrc="https://img.b2bpic.net/free-photo/living-room-with-modern-beautiful-decoration_181624-30650.jpg"
          imageAlt="Luxury modern furniture showcase"
          buttons={[
            { text: "Shop Collection", href: "products" },
            { text: "View Design Guide", href: "about" }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Featured Collections"
          description="Handpicked pieces that define modern luxury. Each item represents exceptional quality, timeless design, and superior craftsmanship."
          tag="New Arrivals"
          tagIcon={ShoppingBag}
          products={[
            {
              id: "1",              name: "The Milano Sectional",              price: "$4,850",              imageSrc: "https://img.b2bpic.net/free-photo/empty-modern-room-with-furniture_23-2149178339.jpg",              imageAlt: "Luxury sectional sofa in neutral tones"
            },
            {
              id: "2",              name: "The Eames Heritage Chair",              price: "$2,295",              imageSrc: "https://img.b2bpic.net/free-photo/interior-room-design-with-armchair-potted-plants_23-2149427990.jpg",              imageAlt: "Designer accent chair with modern lines"
            },
            {
              id: "3",              name: "The Montparnasse Dining Table",              price: "$3,450",              imageSrc: "https://img.b2bpic.net/free-photo/room-interior-details-with-comfortable-armchair-gray-tapestry-wall-vertical-frame_166373-2415.jpg",              imageAlt: "Luxury dining table with elegant base"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About Luxe & Frame"
          description={[
            "Since 1998, we have been curating the finest luxury furniture from international artisans and renowned designers. Our commitment to excellence ensures that every piece in our collection meets the highest standards of craftsmanship and design.",            "We believe that exceptional furniture should be accessible, combining timeless aesthetics with sustainable practices. Our showrooms across major cities showcase our latest collections, where our design experts are ready to help you find the perfect pieces for your home.",            "From Italian leather sofas to Scandinavian minimalism, we celebrate diverse design traditions while maintaining an unwavering commitment to quality, durability, and customer satisfaction."
          ]}
          showBorder={true}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Visit Our Showroom", href: "contact" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTen
          title="What Sets Us Apart"
          description="Our commitment to excellence extends beyond furniture—it's about creating lasting relationships with our customers through superior quality and unparalleled service."
          tag="Our Promise"
          tagIcon={Award}
          features={[
            {
              id: "1",              title: "Artisan Craftsmanship",              description: "Each piece is meticulously crafted by master artisans using traditional techniques combined with modern innovations. We work exclusively with makers who share our commitment to perfection.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/manufacturer-carving-wood-using-chisel-hammer-wearing-safety-glasses_482257-93673.jpg"
              },
              items: [
                { icon: Check, text: "Hand-selected materials" },
                { icon: Check, text: "Master artisan partnership" },
                { icon: Check, text: "Quality assured craftsmanship" }
              ],
              reverse: false
            },
            {
              id: "2",              title: "Sustainable Design Philosophy",              description: "We prioritize environmental responsibility by sourcing from ethical manufacturers and using sustainable materials. Our furniture is built to last generations, reducing waste and environmental impact.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/manufacturer-carving-wood-using-chisel-hammer-wearing-safety-glasses_482257-93673.jpg"
              },
              items: [
                { icon: Leaf, text: "Eco-friendly materials" },
                { icon: Leaf, text: "Ethical sourcing" },
                { icon: Leaf, text: "Timeless durability" }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Premium Customer Experience",              description: "From design consultation to delivery and beyond, we provide white-glove service that exceeds expectations. Our team of design experts is dedicated to helping you find your perfect match.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/manufacturer-carving-wood-using-chisel-hammer-wearing-safety-glasses_482257-93673.jpg"
              },
              items: [
                { icon: Users, text: "Expert design consultation" },
                { icon: Users, text: "White-glove delivery service" },
                { icon: Users, text: "Lifetime customer support" }
              ],
              reverse: false
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Clients Say"
          description="Discover why discerning customers trust Luxe & Frame for their most important design investments."
          tag="Client Stories"
          tagIcon={Heart}
          testimonials={[
            {
              id: "1",              name: "Margaret Chen",              role: "Interior Designer",              company: "Chen Design Studio",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-good-looking-smiling-friendly-female-trainee-ready-tackle-assignments-smiling-broadly-feeling-lucky-day-work-self-assured-encouraged-achieve-success-goal-white-wall_176420-35567.jpg",              imageAlt: "Margaret Chen, Interior Designer"
            },
            {
              id: "2",              name: "James Richardson",              role: "Architect",              company: "Richardson + Associates",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              imageAlt: "James Richardson, Architect"
            },
            {
              id: "3",              name: "Sofia Moretti",              role: "Lifestyle Curator",              company: "Moretti Interiors",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              imageAlt: "Sofia Moretti, Lifestyle Curator"
            },
            {
              id: "4",              name: "David Park",              role: "Property Developer",              company: "Park Luxury Homes",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              imageAlt: "David Park, Property Developer"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Stay Informed on Exclusive Collections"
          description="Join our curated community and receive invitations to private viewings, exclusive launches, and design inspiration tailored to your preferences."
          tagIcon={Mail}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Join Our Circle"
          termsText="By subscribing, you agree to receive updates from Luxe & Frame. We respect your privacy and never share your information."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Collections", href: "#products" },
                { label: "About Us", href: "#about" },
                { label: "Design Guide", href: "#features" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Customer Service",              items: [
                { label: "Shipping & Delivery", href: "#" },
                { label: "Returns Policy", href: "#" },
                { label: "Care Instructions", href: "#" },
                { label: "Warranty", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "Our Story", href: "#about" },
                { label: "Design Blog", href: "#" },
                { label: "Showrooms", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Luxe & Frame. All rights reserved."
          bottomRightText="Crafted with excellence"
        />
      </div>
    </ThemeProvider>
  );
}