"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Music, Disc, Piano, Volume2, Package, MapPin, Wrench, Radio, Star, Award, Users } from "lucide-react";

const navItems = [
  { name: "Home", id: "home" },
  { name: "Shop", id: "shop" },
  { name: "Services", id: "services" },
  { name: "About", id: "about" },
  { name: "Contact", id: "contact" }
];

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="medium"
      background="blurBottom"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple navItems={navItems} brandName="Sadek Music" />
      </div>

      <div id="hero" data-section="hero">
        <div className="mx-auto px-4 md:px-6">
          <HeroBillboard
            title="Your Sound Starts Here"
            description="Dubai's trusted music store since 1998. Premium instruments, expert service, and passionate musicians serving the community."
            tag="🎵 Dubai Music Store"
            tagIcon={Music}
            tagAnimation="slide-up"
            background={{ variant: "radial-gradient" }}
            buttons={[
              { text: "📞 Call Now", href: "tel:+971-4-XXXXXXX" },
              { text: "💬 WhatsApp Us", href: "https://wa.me/971XXXXXXXXX" },
              { text: "🛒 Browse Shop", href: "/shop" }
            ]}
            buttonAnimation="slide-up"
            imageSrc="http://img.b2bpic.net/free-photo/close-up-man-playing-guitar-studio_23-2148366499.jpg"
            imageAlt="Sadek Musical Instruments Store Dubai"
            mediaAnimation="slide-up"
          />
        </div>
      </div>

      <div id="featured-categories" data-section="featured-categories">
        <div className="mx-auto px-4 md:px-6">
          <FeatureBento
            title="Explore Our Instruments"
            description="Browse our wide range of professional and beginner instruments across multiple categories"
            animationType="slide-up"
            features={[
              {
                title: "Guitars",
                description: "Electric, acoustic, and classical guitars from top brands like Fender and Gibson",
                bentoComponent: "icon-info-cards",
                items: [
                  { icon: Music, label: "Electric", value: "100+ Models" },
                  { icon: Music, label: "Acoustic", value: "75+ Models" },
                  { icon: Music, label: "Classical", value: "40+ Models" }
                ]
              },
              {
                title: "Drums & Percussion",
                description: "Professional drum kits, cymbals, and percussion instruments",
                bentoComponent: "icon-info-cards",
                items: [
                  { icon: Disc, label: "Drum Kits", value: "50+ Models" },
                  { icon: Disc, label: "Cymbals", value: "80+ Models" },
                  { icon: Disc, label: "Percussion", value: "60+ Items" }
                ]
              },
              {
                title: "Keyboards & Pianos",
                description: "Electronic keyboards, synthesizers, and digital pianos for all skill levels",
                bentoComponent: "icon-info-cards",
                items: [
                  { icon: Piano, label: "Digital Pianos", value: "45+ Models" },
                  { icon: Piano, label: "Keyboards", value: "65+ Models" },
                  { icon: Piano, label: "Synthesizers", value: "30+ Models" }
                ]
              },
              {
                title: "Audio & Equipment",
                description: "Professional speakers, amplifiers, microphones, and sound systems",
                bentoComponent: "icon-info-cards",
                items: [
                  { icon: Volume2, label: "Speakers", value: "80+ Models" },
                  { icon: Volume2, label: "Amplifiers", value: "55+ Models" },
                  { icon: Volume2, label: "Microphones", value: "70+ Models" }
                ]
              },
              {
                title: "Accessories",
                description: "Strings, picks, cables, stands, and all essential music accessories",
                bentoComponent: "icon-info-cards",
                items: [
                  { icon: Package, label: "Strings", value: "200+ Brands" },
                  { icon: Package, label: "Cables", value: "150+ Types" },
                  { icon: Package, label: "Stands", value: "100+ Models" }
                ]
              },
              {
                title: "Visit Our Store",
                description: "Come see our full inventory and speak with our expert staff",
                bentoComponent: "reveal-icon",
                icon: MapPin
              }
            ]}
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>
      </div>

      <div id="why-choose-us" data-section="why-choose-us">
        <div className="mx-auto px-4 md:px-6">
          <InlineImageSplitTextAbout
            heading={[
              { type: "text", content: "Why Choose Sadek Music?" }
            ]}
            buttons={[
              { text: "Learn More", href: "/about" },
              { text: "Contact Us", href: "/contact" }
            ]}
            useInvertedBackground={false}
          />
        </div>
      </div>

      <div id="featured-products" data-section="featured-products">
        <div className="mx-auto px-4 md:px-6">
          <ProductCardTwo
            title="Featured Instruments"
            description="Hand-picked selection of bestsellers and premium instruments"
            animationType="slide-up"
            gridVariant="three-columns-all-equal-width"
            textboxLayout="default"
            useInvertedBackground={false}
            products={[
              {
                id: "1",
                brand: "Fender",
                name: "Stratocaster Classic",
                price: "2,499 AED",
                rating: 5,
                reviewCount: "45",
                imageSrc: "http://img.b2bpic.net/free-photo/monochrome-view-person-playing-electric-guitar_23-2151406256.jpg",
                imageAlt: "Fender Stratocaster Classic Guitar"
              },
              {
                id: "2",
                brand: "Yamaha",
                name: "P-125 Digital Piano",
                price: "3,299 AED",
                rating: 5,
                reviewCount: "38",
                imageSrc: "http://img.b2bpic.net/free-photo/handsome-male-piano-player-turning-pages-musical-sheet-piano_23-2148047622.jpg",
                imageAlt: "Yamaha P-125 Digital Piano"
              },
              {
                id: "3",
                brand: "Bose",
                name: "S1 Pro Speaker System",
                price: "2,199 AED",
                rating: 5,
                reviewCount: "52",
                imageSrc: "http://img.b2bpic.net/free-photo/dj-playing-electronic-music-its-sound-board_1268-20198.jpg",
                imageAlt: "Bose S1 Pro Speaker System"
              }
            ]}
          />
        </div>
      </div>

      <div id="services" data-section="services">
        <div className="mx-auto px-4 md:px-6">
          <FeatureBento
            title="Our Professional Services"
            description="Expert technicians ready to help with repairs, setup, and consultation"
            tag="🔧 Professional Support"
            tagIcon={Wrench}
            animationType="slide-up"
            features={[
              {
                title: "Instrument Setup & Repair",
                description: "Professional maintenance and repair for all instruments",
                bentoComponent: "reveal-icon",
                icon: Wrench
              },
              {
                title: "Audio System Consultation",
                description: "Expert advice on selecting the right audio equipment",
                bentoComponent: "reveal-icon",
                icon: Volume2
              },
              {
                title: "Live Sound & Events",
                description: "Sound support and equipment rental for performances",
                bentoComponent: "reveal-icon",
                icon: Radio
              },
              {
                title: "Custom Orders",
                description: "Special instrument requests and customization services",
                bentoComponent: "reveal-icon",
                icon: Package
              }
            ]}
            textboxLayout="default"
            useInvertedBackground={false}
            buttons={[
              { text: "Book Service", href: "/services" }
            ]}
          />
        </div>
      </div>

      <div id="testimonials" data-section="testimonials">
        <div className="mx-auto px-4 md:px-6">
          <TestimonialCardSix
            title="What Our Customers Say"
            description="Trusted by musicians, bands, schools, and professionals across Dubai"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            testimonials={[
              {
                id: "1",
                name: "Ahmed Hassan",
                handle: "Professional Guitarist",
                testimonial: "Best music store in Dubai! Found exactly what I needed and the staff really knows their instruments. Highly recommended!",
                imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-with-love-her-husband_23-2149016102.jpg",
                imageAlt: "Ahmed Hassan",
                icon: Star
              },
              {
                id: "2",
                name: "Fatima Al-Mansouri",
                handle: "Music Teacher",
                testimonial: "I've been buying instruments from Sadek Music for 5 years. Excellent quality and great prices. My students love their new guitars!",
                imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-side-view-young-man-looking-vinyls-store_23-2148237232.jpg",
                imageAlt: "Fatima Al-Mansouri",
                icon: Star
              },
              {
                id: "3",
                name: "Marcus Johnson",
                handle: "Band Manager",
                testimonial: "The repair service here is outstanding. They fixed my drum kit perfectly and it sounds better than ever. Top-notch professionalism!",
                imageSrc: "http://img.b2bpic.net/free-psd/music-instrument-concept-landing-page-template_23-2148806450.jpg",
                imageAlt: "Marcus Johnson",
                icon: Star
              },
              {
                id: "4",
                name: "Layla Ibrahim",
                handle: "Church Music Director",
                testimonial: "Sadek Music helped us set up our entire audio system for the church. Professional service, great support, and fair pricing!",
                imageSrc: "http://img.b2bpic.net/free-vector/flat-design-music-festival-landing-page_23-2149189348.jpg",
                imageAlt: "Layla Ibrahim",
                icon: Star
              }
            ]}
          />
        </div>
      </div>

      <div id="metrics" data-section="metrics">
        <div className="mx-auto px-4 md:px-6">
          <MetricCardOne
            title="Trusted by Thousands"
            description="Serving Dubai's music community with excellence and passion"
            animationType="slide-up"
            gridVariant="uniform-all-items-equal"
            textboxLayout="default"
            useInvertedBackground={false}
            metrics={[
              {
                id: "1",
                value: "800+",
                title: "Customer Reviews",
                description: "Average rating 4.6 stars",
                icon: Star
              },
              {
                id: "2",
                value: "25+",
                title: "Years Experience",
                description: "Serving Dubai since 1998",
                icon: Award
              },
              {
                id: "3",
                value: "5000+",
                title: "Happy Customers",
                description: "Musicians, bands, schools, and studios",
                icon: Users
              }
            ]}
          />
        </div>
      </div>

      <div id="contact" data-section="contact">
        <div className="mx-auto px-4 md:px-6">
          <ContactText
            text="Ready to find your perfect instrument? Contact us today via phone, WhatsApp, or visit our store in downtown Dubai. Our expert staff is ready to help!"
            background={{ variant: "radial-gradient" }}
            useInvertedBackground={false}
            buttons={[
              { text: "📞 Call: +971-4-XXXXXXX", href: "tel:+971-4-XXXXXXX" },
              { text: "💬 WhatsApp", href: "https://wa.me/971XXXXXXXXX" },
              { text: "📍 Visit Store", href: "/contact" }
            ]}
          />
        </div>
      </div>

      <div id="footer" data-section="footer">
        <div className="mx-auto px-4 md:px-6">
          <FooterLogoReveal
            logoText="Sadek Music"
            leftLink={{ text: "Privacy Policy", href: "/" }}
            rightLink={{ text: "Contact Us", href: "/contact" }}
          />
        </div>
      </div>
    </ThemeProvider>
  );
}