"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Music, Award } from "lucide-react";

export default function ShopPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Shop", id: "shop" },
    { name: "Services", id: "services" },
    { name: "About", id: "about" },
    { name: "Contact", id: "contact" },
  ];

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

      {/* Shop Products Grid */}
      <div id="shop-products" data-section="shop-products">
        <ProductCardTwo
          title="All Instruments & Equipment"
          description="Browse our complete collection of professional and beginner instruments"
          animationType="slide-up"
          gridVariant="bento-grid"
          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?_wi=2",
              imageAlt: "Fender Stratocaster Classic Guitar",
            },
            {
              id: "2",
              brand: "Gibson",
              name: "Les Paul Standard",
              price: "3,899 AED",
              rating: 5,
              reviewCount: "62",
              imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-playing-guitar-corridor_23-2147769160.jpg",
              imageAlt: "Gibson Les Paul Standard",
            },
            {
              id: "3",
              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?_wi=2",
              imageAlt: "Yamaha P-125 Digital Piano",
            },
            {
              id: "4",
              brand: "Roland",
              name: "FP-30X Portable Piano",
              price: "2,599 AED",
              rating: 5,
              reviewCount: "41",
              imageSrc: "http://img.b2bpic.net/free-photo/closeup-keys-antique-wooden-piano_169016-62087.jpg",
              imageAlt: "Roland FP-30X Portable Piano",
            },
            {
              id: "5",
              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?_wi=2",
              imageAlt: "Bose S1 Pro Speaker System",
            },
            {
              id: "6",
              brand: "JBL",
              name: "PRX815XLFW Speaker",
              price: "4,199 AED",
              rating: 5,
              reviewCount: "58",
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-music-speaker-acoustic-guitar-interior-room_169016-51011.jpg",
              imageAlt: "JBL PRX815XLFW Speaker",
            },
          ]}
        />
      </div>

      {/* Categories Showcase */}
      <div id="shop-categories" data-section="shop-categories">
        <FeatureBento
          title="Shop by Category"
          description="Find exactly what you're looking for in our organized instrument categories"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              title: "Guitars",
              description: "Electric, acoustic, and classical guitars from leading brands",
              bentoComponent: "reveal-icon",
              icon: Music,
            },
            {
              title: "Drums & Percussion",
              description: "Professional drum kits, cymbals, and rhythm instruments",
              bentoComponent: "reveal-icon",
              icon: Award,
            },
            {
              title: "Keyboards & Pianos",
              description: "Digital pianos, synthesizers, and electronic keyboards",
              bentoComponent: "reveal-icon",
              icon: Music,
            },
          ]}
        />
      </div>

      {/* Contact CTA */}
      <div id="shop-contact" data-section="shop-contact">
        <ContactText
          text="Need help finding the right instrument? Contact our music experts for personalized recommendations and support."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          buttons={[
            {
              text: "💬 Chat with Expert",
              href: "https://wa.me/971XXXXXXXXX",
            },
            {
              text: "📞 Call for Advice",
              href: "tel:+971-4-XXXXXXX",
            },
          ]}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Sadek Music"
          leftLink={{
            text: "Privacy Policy",
            href: "/",
          }}
          rightLink={{
            text: "Contact Us",
            href: "/",
          }}
        />
      </div>
    </ThemeProvider>
  );
}