"use client";

import React from 'react';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Award, Guitar, Hammer, MessageCircle, Mic, Music, Sparkles, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="No song"
          navItems={[
            { name: "Hero", id: "hero-section" },
            { name: "About", id: "about-section" },
            { name: "Feature", id: "features-section" },
            { name: "Product", id: "products-section" },
            { name: "Testimonial", id: "testimonials-section" },
            { name: "Contact", id: "contact-section" },
            { name: "Footer", id: "footer-section" },
          ]}
        />
      </div>

      <main className="flex flex-col items-center justify-center">
        <div id="hero-section" data-section="hero-section" className="w-full">
          <HeroBillboardScroll
            title="Elevate Your Sound with Premium Instruments"
            description="Discover meticulously crafted instruments designed for musicians who demand excellence. Each piece is engineered for superior tone, durability, and performance."
            background={{ variant: 'radial-gradient' }}
            tag="Crafted for Professionals"
            tagIcon={Sparkles}
            tagAnimation="slide-up"
            buttons={[
              { text: "Explore Collection", href: "#products-section" },
              { text: "Learn More", href: "#about-section" },
            ]}
            buttonAnimation="slide-up"
            imageSrc="https://img.b2bpic.net/free-photo/electronic-piano-guitar-room-interior_169016-20867.jpg"
            imageAlt="Premium musical instruments displayed elegantly"
            ariaLabel="Hero section featuring premium musical instruments"
          />
        </div>

        <div id="about-section" data-section="about-section" className="w-full">
          <TextAbout
            tag="OUR STORY"
            tagIcon={Music}
            tagAnimation="slide-up"
            title="Crafted for Passionate Musicians"
            buttons={[
              { text: "Explore Instruments", href: "#products-section" },
              { text: "Learn More", href: "#features-section" },
            ]}
            buttonAnimation="slide-up"
            useInvertedBackground={true}
          />
        </div>

        <div id="features-section" data-section="features-section" className="w-full">
          <FeatureCardTwentyFive
            features={[
              {
                title: "Premium Craftsmanship",                description: "Each instrument is meticulously handcrafted by master artisans using traditional techniques and premium materials for unparalleled sound quality.",                icon: Hammer,
                mediaItems: [
                  { imageSrc: "https://img.b2bpic.net/free-photo/part-acoustic-guitar-guitar-fretboard-black-background_169016-51512.jpg", imageAlt: "Handcrafted violin" },
                  { imageSrc: "https://img.b2bpic.net/free-photo/beautiful-girl-plays-cello-with-passion-concrete-environment_150588-132.jpg", imageAlt: "Master craftsman working" },
                ],
              },
              {
                title: "Exceptional Sound Quality",                description: "Our instruments deliver rich, resonant tones that inspire musicians to reach new creative heights with every performance.",                icon: Music,
                mediaItems: [
                  { imageSrc: "https://img.b2bpic.net/free-photo/piano-keys-closeup-blurred-background-with-bokeh_169016-43161.jpg", imageAlt: "Concert hall performance" },
                  { imageSrc: "https://img.b2bpic.net/free-photo/man-recording-music-drum-set-studio_1150-14710.jpg", imageAlt: "Close-up of instrument sound" },
                ],
              },
              {
                title: "Professional Grade",                description: "Designed for serious musicians and professionals who demand the highest standards in their instruments and equipment.",                icon: Star,
                mediaItems: [
                  { imageSrc: "https://img.b2bpic.net/free-photo/bass-guitar-player-stage-with-set-distortion-effect-pedals_169016-13128.jpg", imageAlt: "Professional musician" },
                  { imageSrc: "https://img.b2bpic.net/free-photo/black-electric-guitar-notebook-speaker-closeup_169016-52190.jpg", imageAlt: "Instrument inspection" },
                ],
              },
            ]}
            animationType="slide-up"
            title="Why Choose No Song Instruments"
            description="Discover the difference that premium craftsmanship and exceptional attention to detail makes in your musical journey."
            tag="Premium Quality"
            tagIcon={Award}
            tagAnimation="blur-reveal"
            buttons={[{ text: "Explore Collection", href: "#products-section" }]}
            buttonAnimation="opacity"
            textboxLayout="default"
            useInvertedBackground={true}
            carouselMode="buttons"
            ariaLabel="Features section highlighting premium instrument qualities"
          />
        </div>

        <div id="products-section" data-section="products-section" className="w-full">
          <ProductCardFour
            products={[
              { id: "product-1", name: "Grand Piano Series", price: "$8,500", variant: "Acoustic", imageSrc: "https://img.b2bpic.net/free-photo/acoustic-guitar-blurred-background-autumn-forest_169016-25841.jpg", imageAlt: "Elegant acoustic grand piano in a modern studio setting" },
              { id: "product-2", name: "Electric Guitar Pro", price: "$1,200", variant: "Solid Body", imageSrc: "https://img.b2bpic.net/free-photo/close-up-part-acoustic-guitar-macro-detail_169016-23580.jpg", imageAlt: "Professional electric guitar with sleek design and premium finish" },
              { id: "product-3", name: "Digital Keyboard Studio", price: "$650", variant: "88-Key", imageSrc: "https://img.b2bpic.net/free-photo/saxophone-green-background-top-view_169016-26275.jpg", imageAlt: "Modern digital keyboard with full-size keys and built-in speakers" },
              { id: "product-4", name: "Violin Masterclass", price: "$3,200", variant: "Professional Grade", imageSrc: "https://img.b2bpic.net/free-photo/wooden-piano-interior-decorated-christmas_169016-59862.jpg", imageAlt: "High-quality violin with traditional craftsmanship and rich tone" },
            ]}
            carouselMode="buttons"
            gridVariant="four-items-2x2-equal-grid"
            animationType="slide-up"
            title="Premium Instruments"
            description="Discover our curated collection of high-end musical instruments designed for professionals and serious enthusiasts."
            tag="New Arrivals"
            tagIcon={Sparkles}
            tagAnimation="slide-up"
            buttons={[{ text: "View All Products", href: "#products-section" }]}
            buttonAnimation="opacity"
            textboxLayout="inline-image"
            useInvertedBackground={true}
            ariaLabel="Premium musical instruments showcase"
            gridClassName="gap-6"
            textBoxClassName="bg-white/80 backdrop-blur-sm p-6 rounded-xl shadow-lg"
            cardNameClassName="text-xl font-bold text-gray-900"
            cardPriceClassName="text-lg font-semibold text-red-600"
            cardVariantClassName="text-sm text-gray-600 uppercase tracking-wide"
          />
        </div>

        <div id="testimonials-section" data-section="testimonials-section" className="w-full">
          <TestimonialCardSix
            testimonials={[
              { id: "testimonial-1", name: "Alexandra Chen", handle: "@alex_chen_music", testimonial: "The attention to detail in every No song instrument is unmatched. My violin has transformed my performances.", imageSrc: "https://img.b2bpic.net/free-photo/man-holding-chord-guitar-close-up_23-2148673598.jpg?_wi=1", imageAlt: "Alexandra Chen playing a violin", icon: Music },
              { id: "testimonial-2", name: "Marcus Rodriguez", handle: "@marcus_rodriguez", testimonial: "Professional-grade craftsmanship and sound quality. These instruments are worth every penny.", imageSrc: "https://img.b2bpic.net/free-photo/female-student-playing-violin_107420-64807.jpg?_wi=1", imageAlt: "Marcus Rodriguez with a guitar", icon: Guitar },
              { id: "testimonial-3", name: "Sophie Laurent", handle: "@sophie_laurent", testimonial: "As a conductor, I rely on No song for my ensemble's needs. Their instruments deliver consistent excellence.", imageSrc: "https://img.b2bpic.net/free-photo/drummer-playing-drum-set_107420-96123.jpg?_wi=1", imageAlt: "Sophie Laurent conducting an orchestra", icon: Mic },
              { id: "testimonial-4", name: "Ben Carter", handle: "@bencarterkeys", testimonial: "The quality is simply outstanding. The piano I purchased has a rich and beautiful tone that inspires me daily.", imageSrc: "https://img.b2bpic.net/free-photo/man-holding-chord-guitar-close-up_23-2148673598.jpg?_wi=2", imageAlt: "Ben Carter playing piano", icon: Music },
              { id: "testimonial-5", name: "Olivia Martinez", handle: "@olivia_sings", testimonial: "From the moment I picked it up, I could feel the superior craftsmanship. It's a joy to play.", imageSrc: "https://img.b2bpic.net/free-photo/female-student-playing-violin_107420-64807.jpg?_wi=2", imageAlt: "Olivia Martinez with a guitar", icon: Guitar },
              { id: "testimonial-6", name: "David Lee", handle: "@davidleedrums", testimonial: "I recommend No Song to all my students. The reliability and sound are second to none for professionals.", imageSrc: "https://img.b2bpic.net/free-photo/drummer-playing-drum-set_107420-96123.jpg?_wi=2", imageAlt: "David Lee at his drum set", icon: Mic },
            ]}
            animationType="slide-up"
            title="What Musicians Say"
            description="Hear from professional musicians who have elevated their craft with our premium instruments."
            textboxLayout="inline-image"
            useInvertedBackground={true}
            tag="Trusted by Professionals"
            tagIcon={Star}
            tagAnimation="blur-reveal"
            buttons={[{ text: "Explore Instruments", href: "#products-section" }]}
            buttonAnimation="opacity"
            speed={40}
            topMarqueeDirection="left"
            ariaLabel="Testimonials section featuring musician reviews"
          />
        </div>

        <div id="contact-section" data-section="contact-section" className="w-full">
          <ContactFaq
            faqs={[
              { id: "faq-1", title: "What payment methods do you accept?", content: "We accept all major credit cards, PayPal, and bank transfers for larger purchases. All transactions are secured with 256-bit SSL encryption." },
              { id: "faq-2", title: "Do you offer international shipping?", content: "Yes, we ship worldwide. Shipping times vary by destination, but most international orders arrive within 5-10 business days." },
              { id: "faq-3", title: "What is your return policy?", content: "We offer a 30-day money-back guarantee on all instruments. Items must be returned in original condition with all accessories included." },
              { id: "faq-4", title: "How can I schedule an in-store consultation?", content: "Visit our store or call us to book a personalized session with one of our expert technicians. We recommend scheduling at least 24 hours in advance." },
            ]}
            ctaTitle="Have questions about our instruments?"
            ctaDescription="Our team of experts is ready to help you find the perfect instrument for your musical journey."
            ctaButton={{ text: "Contact Us Now", href: "#contact-section" }}
            ctaIcon={MessageCircle}
            useInvertedBackground={true}
            animationType="slide-up"
            accordionAnimationType="smooth"
            showCard={true}
            ariaLabel="Contact and FAQ section"
            className="py-16"
            containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
            ctaPanelClassName="bg-red-50 rounded-xl p-8 text-center mb-12"
            ctaIconClassName="w-12 h-12 text-red-600 mx-auto mb-4"
            ctaTitleClassName="text-2xl font-bold text-gray-900 mb-2"
            ctaDescriptionClassName="text-gray-600 mb-6"
            ctaButtonClassName="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-red-600 hover:bg-red-700 transition-colors duration-200"
            faqsPanelClassName="bg-white rounded-lg shadow-sm overflow-hidden"
            faqsContainerClassName="divide-y divide-gray-200"
            accordionClassName="transition-all duration-200"
            accordionTitleClassName="text-lg font-semibold text-gray-900 flex items-center justify-between w-full py-4"
            accordionIconContainerClassName="flex-shrink-0 ml-4"
            accordionIconClassName="w-5 h-5 text-red-600 transition-transform duration-200"
            accordionContentClassName="pb-4 text-gray-600"
            separatorClassName="border-t border-gray-200"
          />
        </div>

        <div id="footer-section" data-section="footer-section" className="w-full">
          <FooterMedia
            imageSrc="https://img.b2bpic.net/free-photo/acoustic-guitar-recording-studio-room-musicians-rehearsals_169016-3805.jpg"
            imageAlt="Elegant wooden music instrument shelf with warm red accents"
            columns={[
              { title: "Products", items: [{ label: "Acoustic Guitars", href: "#products-section" }, { label: "Electric Guitars", href: "#products-section" }, { label: "Pianos", href: "#products-section" }, { label: "Drums", href: "#products-section" }] },
              { title: "Company", items: [{ label: "About Us", href: "#about-section" }, { label: "Our Story", href: "#about-section" }, { label: "Careers", href: "#contact-section" }, { label: "Contact", href: "#contact-section" }] },
              { title: "Support", items: [{ label: "Help Center", href: "#contact-section" }, { label: "Warranty", href: "#contact-section" }, { label: "Shipping Info", href: "#contact-section" }, { label: "Returns", href: "#contact-section" }] },
            ]}
            logoText="No song"
            copyrightText="© 2025 | No song Musical Instruments"
            ariaLabel="Site footer"
            className="bg-neutral-50 text-gray-800"
            containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
            mediaWrapperClassName="mb-8 md:mb-0"
            mediaClassName="w-full h-48 object-cover rounded-lg shadow-md"
            logoTextClassName="text-2xl font-bold text-red-600"
            columnsClassName="grid grid-cols-1 md:grid-cols-3 gap-8"
            columnClassName="space-y-4"
            columnTitleClassName="text-lg font-semibold text-gray-900"
            columnItemClassName="text-gray-600 hover:text-red-600 transition-colors duration-200"
            copyrightContainerClassName="pt-8 mt-8 border-t border-gray-200"
            copyrightTextClassName="text-sm text-gray-500"
            privacyButtonClassName="text-sm text-gray-500 hover:text-red-600 transition-colors duration-200"
          />
        </div>
      </main>
    </ThemeProvider>
  );
}
