"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="large"
      background="noise"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Artspace Designs"
          navItems={[
            { name: "About", id: "about" },
            { name: "Portfolio", id: "portfolio" },
            { name: "Services", id: "services" },
            { name: "Testimonials", id: "testimonials" },
          ]}
          button={{ text: "Get in Touch", href: "contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Artspace Designs"
          description="Transforming spaces into sanctuaries of beauty and functionality. Premium interior design services for homes and commercial spaces across India."
          buttons={[
            { text: "View Portfolio", href: "portfolio" },
            { text: "Consultation", href: "contact" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/living-room-with-fireplace-large-painting-wall_123827-23876.jpg"
          imageAlt="Luxury interior design showcase"
          showDimOverlay={true}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Us"
          title="We craft exceptional interiors that reflect your vision and lifestyle. With over a decade of experience in residential and commercial design, we combine aesthetic excellence with functional innovation."
          useInvertedBackground={false}
          buttons={[{ text: "Learn More", href: "#" }]}
          tagAnimation="blur-reveal"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <FeatureCardMedia
          title="Recent Projects"
          description="Explore our latest interior design transformations across diverse spaces and styles"
          tag="Portfolio"
          features={[
            {
              id: "1",              title: "Minimalist Bedroom Retreat",              description: "A serene bedroom sanctuary with neutral tones, natural materials, and thoughtful spatial planning",              tag: "Residential",              imageSrc: "http://img.b2bpic.net/free-photo/creative-fengshui-practice-bedroom-arrangement_23-2149135755.jpg?_wi=1",              imageAlt: "Minimalist bedroom design"},
            {
              id: "2",              title: "Contemporary Kitchen Hub",              description: "Modern kitchen combining sleek aesthetics with practical workflow and premium finishes",              tag: "Kitchen Design",              imageSrc: "http://img.b2bpic.net/free-photo/interior-design-house-modern-white-kitchen_657883-328.jpg",              imageAlt: "Modern kitchen interior"},
            {
              id: "3",              title: "Living Room Elegance",              description: "Sophisticated living space featuring curated furnishings, layered lighting, and warm textures",              tag: "Residential",              imageSrc: "http://img.b2bpic.net/free-photo/modern-cafe-interior-design_53876-138977.jpg?_wi=1",              imageAlt: "Contemporary living room"},
            {
              id: "4",              title: "Executive Office Design",              description: "Professional workspace optimized for productivity with premium materials and ergonomic design",              tag: "Commercial",              imageSrc: "http://img.b2bpic.net/free-photo/managers-discussing-reports-with-boss-sitting-meeting-table-with-monitor-holding-documents-business-meeting-teamwork-concept_74855-11867.jpg?_wi=1",              imageAlt: "Modern office workspace"},
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          tagAnimation="blur-reveal"
        />
      </div>

      <div id="services" data-section="services">
        <ProductCardThree
          title="Our Design Services"
          description="Comprehensive interior design solutions tailored to your needs and budget"
          tag="Services"
          products={[
            {
              id: "1",              name: "Residential Design Consultation",              price: "₹15,000",              imageSrc: "http://img.b2bpic.net/free-photo/creative-fengshui-practice-bedroom-arrangement_23-2149135755.jpg?_wi=2",              imageAlt: "Residential design service"},
            {
              id: "2",              name: "Full Home Renovation Package",              price: "₹2,50,000+",              imageSrc: "http://img.b2bpic.net/free-photo/modern-cafe-interior-design_53876-138977.jpg?_wi=2",              imageAlt: "Home renovation service"},
            {
              id: "3",              name: "Commercial Space Design",              price: "₹50,000+",              imageSrc: "http://img.b2bpic.net/free-photo/managers-discussing-reports-with-boss-sitting-meeting-table-with-monitor-holding-documents-business-meeting-teamwork-concept_74855-11867.jpg?_wi=2",              imageAlt: "Commercial design service"},
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Priya Sharma",              imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg?_wi=1",              imageAlt: "Priya Sharma"},
            {
              id: "2",              name: "Rajesh Kumar",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=1",              imageAlt: "Rajesh Kumar"},
            {
              id: "3",              name: "Anjali Verma",              imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg?_wi=2",              imageAlt: "Anjali Verma"},
            {
              id: "4",              name: "Vikram Patel",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=2",              imageAlt: "Vikram Patel"},
          ]}
          cardTitle="Over 500+ satisfied clients trust Artspace Designs to transform their spaces into beautiful sanctuaries"
          cardTag="Client Testimonials"
          useInvertedBackground={false}
          cardAnimation="blur-reveal"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Impact"
          description="Delivering exceptional design results across India"
          tag="Impact"
          metrics={[
            {
              id: "1",              value: "500+",              title: "Projects Completed",              description: "Residential and commercial spaces transformed",              imageSrc: "http://img.b2bpic.net/free-photo/creative-fengshui-practice-bedroom-arrangement_23-2149135755.jpg?_wi=3",              imageAlt: "Projects completed"},
            {
              id: "2",              value: "15+",              title: "Years Experience",              description: "Decades of design expertise",              imageSrc: "http://img.b2bpic.net/free-photo/modern-cafe-interior-design_53876-138977.jpg?_wi=3",              imageAlt: "Years of experience"},
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Let's Connect"
          tagIcon={Sparkles}
          title="Ready to Transform Your Space?"
          description="Schedule a free consultation with our design team to discuss your vision and bring your dream interior to life."
          buttons={[
            { text: "Book Consultation", href: "#" },
            { text: "View Testimonials", href: "#testimonials" },
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Artspace Designs"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Contact Us", href: "#contact" }}
        />
      </div>
    </ThemeProvider>
  );
}
