"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Zap, Sparkles, Music, Heart, Twitter, Instagram, Linkedin } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSmall"
      background="plain"
      cardStyle="inset"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="BASE"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Technology", id: "technology" },
            { name: "Specs", id: "specs" },
            { name: "Reviews", id: "testimonials" }
          ]}
          button={{
            text: "Experience Now",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="The Future of Sound"
          description="Experience audio redefined. BASE delivers immersive, precision-engineered sound with cutting-edge technology built for discerning listeners."
          tag="Premium Audio Innovation"
          tagIcon={Zap}
          kpis={[
            { value: "360°", label: "Immersive Audio" },
            { value: "99.5dB", label: "Peak Output" },
            { value: "40hr", label: "Battery Life" }
          ]}
          enableKpiAnimation={true}
          imageSrc="https://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170095.jpg"
          imageAlt="BASE Premium Speaker"
          imagePosition="right"
          buttons={[
            { text: "Explore Features", href: "features" },
            { text: "Watch Demo", href: "#" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Crafted for Excellence"
          description={[
            "BASE represents a decade of acoustic engineering, combining biomimetic design with proprietary sound-processing algorithms. Every component is meticulously calibrated to deliver clarity, depth, and presence.",            "Our commitment extends beyond sound quality. We've engineered BASE with sustainable materials, intuitive interfaces, and a modular architecture that evolves with your needs. This is not just a speaker—it's a gateway to audio perfection."
          ]}
          showBorder={true}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Our Story", href: "#" },
            { text: "Technology", href: "technology" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardMedia
          title="Engineered Innovation"
          description="Every detail designed for sonic perfection and user delight"
          features={[
            {
              id: "1",              title: "Immersive 360° Sound",              description: "Omnidirectional audio projection with adaptive spatial rendering creates an enveloping soundscape.",              tag: "Audio Technology",              imageSrc: "https://img.b2bpic.net/free-vector/minimal-banner-with-abstract-soundwave-design_1048-21435.jpg",              imageAlt: "Sound Wave Visualization"
            },
            {
              id: "2",              title: "Minimalist Design",              description: "Sculptural form factor with zero visual clutter. Crafted in premium materials with seamless integration.",              tag: "Industrial Design",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-green-tropical-plant_23-2148229249.jpg",              imageAlt: "Design Showcase"
            },
            {
              id: "3",              title: "Multi-Protocol Connectivity",              description: "Simultaneous WiFi 6E, Bluetooth 5.3, and wired analog inputs. Seamless switching between sources.",              tag: "Smart Technology",              imageSrc: "https://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170090.jpg",              imageAlt: "Connectivity Features"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Premium Features"
          tagIcon={Sparkles}
          buttons={[
            { text: "Specifications", href: "specs" }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFour
          title="BASE Speaker Lineup"
          description="Choose the perfect audio experience for your space"
          tag="Available Now"
          tagIcon={Music}
          products={[
            {
              id: "1",              name: "BASE Pro",              price: "$2,499",              variant: "Premium  Matte Black",              imageSrc: "https://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170096.jpg",              imageAlt: "BASE Pro Speaker",              isFavorited: false
            },
            {
              id: "2",              name: "BASE Studio",              price: "$3,999",              variant: "Reference  Space Gray",              imageSrc: "https://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170096.jpg",              imageAlt: "BASE Studio Speaker",              isFavorited: false
            },
            {
              id: "3",              name: "BASE Compact",              price: "$1,299",              variant: "Portable  Titanium",              imageSrc: "https://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170096.jpg",              imageAlt: "BASE Compact Speaker",              isFavorited: false
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Performance Excellence"
          description="Numbers that speak to our commitment to audio perfection"
          metrics={[
            {
              id: "1",              value: "20Hz-40kHz",              title: "Frequency Response",              items: [
                "Extends beyond human hearing",                "Ultra-precise in mid-range",                "Deep bass foundation"
              ]
            },
            {
              id: "2",              value: "<1ms",              title: "Audio Latency",              items: [
                "Real-time synchronized input",                "Perfect for gaming & streaming",                "Professional monitoring ready"
              ]
            },
            {
              id: "3",              value: "99.2%",              title: "Signal Integrity",              items: [
                "Distortion-free amplification",                "Advanced noise cancellation",                "Crystal clear delivery"
              ]
            },
            {
              id: "4",              value: "48/192",              title: "Studio Resolution",              items: [
                "Master-quality audio support",                "Lossless streaming capability",                "Professional-grade specs"
              ]
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Marcus Chen",              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "Marcus Chen"
            },
            {
              id: "2",              name: "Sarah Williams",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Williams"
            },
            {
              id: "3",              name: "David Park",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204386.jpg",              imageAlt: "David Park"
            },
            {
              id: "4",              name: "Elena Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg",              imageAlt: "Elena Rodriguez"
            },
            {
              id: "5",              name: "James Mitchell",              imageSrc: "https://img.b2bpic.net/free-photo/caucasian-brunette-male-portrait_158595-7921.jpg",              imageAlt: "James Mitchell"
            },
            {
              id: "6",              name: "Lisa Anderson",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-entrepreneur-posing-camera_1262-3636.jpg",              imageAlt: "Lisa Anderson"
            }
          ]}
          cardTitle="Trusted by 50,000+ audio enthusiasts, professionals, and creators worldwide"
          cardTag="Customer Stories"
          cardTagIcon={Heart}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to elevate your audio experience? Join the BASE community of discerning listeners and experience sound like never before."
          animationType="entrance-slide"
          buttons={[
            { text: "Get Started", href: "#" },
            { text: "Contact Sales", href: "#" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="BASE"
          copyrightText="© 2025 BASE Audio. Crafted for those who hear the difference."
          socialLinks={[
            {
              icon: Twitter,
              href: "https://twitter.com/baseaudio",              ariaLabel: "Twitter"
            },
            {
              icon: Instagram,
              href: "https://instagram.com/baseaudio",              ariaLabel: "Instagram"
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com/company/baseaudio",              ariaLabel: "LinkedIn"
            },
            {
              icon: Music,
              href: "https://soundcloud.com/baseaudio",              ariaLabel: "SoundCloud"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}