"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitAvatars from '@/components/sections/hero/HeroSplitAvatars';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
import { Award, Heart, HelpCircle, MessageSquare, Shield, Sparkles, TrendingUp, Youtube, Twitter, Instagram, Github, Zap } from "lucide-react";

export default function KeyboardCollectionPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="fluid"
      cardStyle="inset"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Keyboard Collection"
          navItems={[
            { name: "Collection", id: "collection" },
            { name: "Features", id: "features" },
            { name: "Reviews", id: "reviews" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Premium Mechanical Keyboards"
          bottomRightText="info@keyboardcollection.com"
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroSplitAvatars
          title="Discover Your Perfect Keyboard"
          description="Explore our curated collection of premium mechanical keyboards from the world's finest manufacturers. Each piece crafted for performance, precision, and passion."
          tag="Mechanical Excellence"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/ai-powered-device-concept_23-2151924154.jpg"
          imageAlt="Premium mechanical keyboard showcase"
          imagePosition="right"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Collector 1" },
            { src: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", alt: "Collector 2" },
            { src: "https://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg", alt: "Collector 3" },
            { src: "https://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg", alt: "Collector 4" }
          ]}
          avatarText="Join 500+ keyboard enthusiasts"
          buttons={[
            { text: "Browse Collection", href: "collection" },
            { text: "Learn More", href: "features" }
          ]}
        />
      </div>
      
      <div id="collection" data-section="collection">
        <ProductCardTwo
          title="Keyboard Collection"
          description="Handpicked mechanical keyboards representing the pinnacle of switch engineering and aesthetic design"
          tag="Featured Products"
          tagIcon={Award}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              brand: "Keychron",              name: "K2 Pro Wireless",              price: "$89.99",              rating: 5,
              reviewCount: "3.2k",              imageSrc: "https://img.b2bpic.net/free-photo/ai-powered-device-concept_23-2151924152.jpg",              imageAlt: "Keychron K2 Pro Wireless keyboard"
            },
            {
              id: "2",              brand: "Ducky",              name: "One 2 Full Size",              price: "$129.99",              rating: 5,
              reviewCount: "2.8k",              imageSrc: "https://img.b2bpic.net/free-photo/gradient-illuminated-neon-gaming-desk-setup-with-keyboard_23-2149529406.jpg",              imageAlt: "Ducky One 2 Full Size keyboard"
            },
            {
              id: "3",              brand: "Leopold",              name: "FC750R Compact",              price: "$119.99",              rating: 5,
              reviewCount: "2.1k",              imageSrc: "https://img.b2bpic.net/free-photo/gradient-view-illuminated-neon-gaming-desk-setup-with-keyboard_23-2149529385.jpg",              imageAlt: "Leopold FC750R Compact keyboard"
            },
            {
              id: "4",              brand: "GMMK Pro",              name: "GMMK Pro 75%",              price: "$169.99",              rating: 5,
              reviewCount: "4.5k",              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-keyboard-with-neon-lights_23-2149680228.jpg",              imageAlt: "GMMK Pro 75% modular keyboard"
            }
          ]}
        />
      </div>
      
      <div id="features" data-section="features">
        <FeatureCardSixteen
          title="Why Our Collection Stands Out"
          description="Premium quality, meticulous curation, and unmatched expertise in mechanical keyboard selection"
          tag="Collection Advantages"
          tagIcon={Shield}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          negativeCard={{
            title: "Generic Keyboards",            items: [
              "Low-quality plastic construction",              "Inconsistent switch feel",              "Poor ergonomic design",              "Limited customization options",              "Short lifespan expectations"
            ]
          }}
          positiveCard={{
            title: "Our Collection",            items: [
              "Premium aluminum and PBT materials",              "Verified mechanical switch quality",              "Ergonomic design and comfort-tested",              "Full customization and modularity",              "Built to last decades with care"
            ]
          }}
        />
      </div>
      
      <div id="pricing" data-section="pricing">
        <PricingCardNine
          title="Keyboard Tiers"
          description="Choose the collection tier that matches your passion and budget"
          tag="Pricing Plans"
          tagIcon={Zap}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertCard"
          plans={[
            {
              id: "entry",              title: "Entry Collection",              price: "$89",              period: "/keyboard",              imageSrc: "https://img.b2bpic.net/free-photo/white-keyboard-with-lights-high-angle_23-2149680240.jpg",              imageAlt: "Entry level mechanical keyboard",              features: [
                "Budget-friendly starter keyboards",                "Proven reliable brands",                "Standard mechanical switches",                "12-month warranty",                "Basic customization"
              ],
              button: {
                text: "Browse Entry",                href: "collection"
              }
            },
            {
              id: "professional",              title: "Professional Grade",              price: "$149",              period: "/keyboard",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-safety-first-key-keyboard_23-2149919540.jpg",              imageAlt: "Professional mechanical keyboard",              features: [
                "Premium build quality",                "Top-tier mechanical switches",                "Extensive customization",                "24-month warranty",                "Priority support",                "Aluminum case options"
              ],
              button: {
                text: "Explore Professional",                href: "collection"
              }
            },
            {
              id: "collector",              title: "Collector's Edition",              price: "$299",              period: "/keyboard",              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-gaming-setup-arrangement_23-2149680238.jpg",              imageAlt: "Collector's edition custom keyboard",              features: [
                "Ultra-rare limited editions",                "Custom artisan keycaps",                "Hand-assembled by experts",                "Lifetime warranty",                "Exclusive access to new drops",                "White-glove consultation service"
              ],
              button: {
                text: "View Collector's",                href: "collection"
              }
            }
          ]}
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Collection Impact"
          description="Celebrating the reach and dedication of our keyboard community"
          tag="By The Numbers"
          tagIcon={TrendingUp}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="four-items-2x2-equal-grid"
          metrics={[
            {
              id: "1",              value: "2,847",              description: "Keyboards in Collection"
            },
            {
              id: "2",              value: "89+",              description: "Brands Represented"
            },
            {
              id: "3",              value: "15+",              description: "Countries Sourced"
            },
            {
              id: "4",              value: "98%",              description: "Customer Satisfaction"
            }
          ]}
        />
      </div>
      
      <div id="reviews" data-section="reviews">
        <TestimonialCardEight
          title="What Collectors Say"
          description="Hear from keyboard enthusiasts who've found their perfect match in our collection"
          tag="Testimonials"
          tagIcon={Heart}
          textboxLayout="default"
          useInvertedBackground="invertCard"
          testimonials={[
            {
              id: "1",              name: "Marcus Chen",              role: "Mechanical Enthusiast",              company: "Tech Collector Co",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-outdoor-businessman_23-2148763884.jpg",              imageAlt: "Marcus Chen"
            },
            {
              id: "2",              name: "Sarah Williams",              role: "Competitive Gamer",              company: "Esports Pro",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/caucasian-brunette-male-portrait_158595-7921.jpg",              imageAlt: "Sarah Williams"
            },
            {
              id: "3",              name: "Alex Rivera",              role: "Keyboard Designer",              company: "Custom Builds Inc",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-outdoors-successful-business-person_23-2148763862.jpg",              imageAlt: "Alex Rivera"
            },
            {
              id: "4",              name: "Jennifer Park",              role: "Content Creator",              company: "Tech Reviews Daily",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg",              imageAlt: "Jennifer Park"
            },
            {
              id: "5",              name: "David Thompson",              role: "Software Developer",              company: "Code & Keys",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",              imageAlt: "David Thompson"
            },
            {
              id: "6",              name: "Lisa Anderson",              role: "Office Manager",              company: "Executive Solutions",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-confident-businessman_1098-21013.jpg",              imageAlt: "Lisa Anderson"
            }
          ]}
        />
      </div>
      
      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about selecting and maintaining mechanical keyboards"
          tag="Help & Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          faqs={[
            {
              id: "1",              title: "What makes a mechanical keyboard different from regular keyboards?",              content: "Mechanical keyboards use individual mechanical switches under each key, providing tactile feedback, durability, and superior typing experience compared to membrane keyboards. Each switch can be customized for different actuation force and sound profiles."
            },
            {
              id: "2",              title: "How do I choose the right keyboard size?",              content: "Keyboard sizes range from 40% (ultra-compact) to full-size (104 keys). Consider your desk space, typing style, and whether you need a numpad. 60% and 75% keyboards offer a good balance of functionality and compactness for most users."
            },
            {
              id: "3",              title: "What are switch types and which should I choose?",              content: "Switch types include Linear (smooth), Tactile (bumpy feedback), and Clicky (audible click). Choice depends on preference: Linear for gaming, Tactile for balanced use, and Clicky for typing satisfaction. We recommend trying different switches before committing."
            },
            {
              id: "4",              title: "Are custom mechanical keyboards worth the investment?",              content: "Yes, custom keyboards offer superior build quality, premium materials, and personalization options. They're built to last decades with proper care, making them excellent long-term investments for daily users and collectors alike."
            },
            {
              id: "5",              title: "How do I maintain and care for my mechanical keyboard?",              content: "Regular maintenance includes dusting with compressed air, cleaning keycaps with warm soapy water, and occasional lubrication of switches (if applicable). Avoid spills and extreme temperature changes. Proper care extends keyboard lifespan significantly."
            },
            {
              id: "6",              title: "What is the warranty coverage on keyboards?",              content: "Our keyboards come with 12-24 month warranties covering manufacturing defects and switch failures. Collector's Edition keyboards include lifetime warranty. Warranty details are provided with each purchase."
            }
          ]}
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Get In Touch"
          ctaDescription="Have questions about our collection? Our keyboard experts are ready to help you find the perfect mechanical companion."
          ctaButton={{
            text: "Schedule Consultation",            href: "mailto:info@keyboardcollection.com"
          }}
          ctaIcon={MessageSquare}
          useInvertedBackground="invertCard"
          animationType="slide-up"
          faqs={[
            {
              id: "1",              title: "How can I inquire about custom keyboard builds?",              content: "Contact our design team directly via email or phone. We offer personalized consultations to discuss your preferences, budget, and custom configuration options. Response time is typically within 24 hours."
            },
            {
              id: "2",              title: "Do you offer international shipping?",              content: "Yes, we ship to 95+ countries worldwide. International orders include customs documentation and insured shipping. Delivery timeframes vary by location, typically 7-21 business days."
            },
            {
              id: "3",              title: "What is your return policy?",              content: "We offer a 30-day return policy for keyboards in original condition. If a keyboard doesn't meet your expectations, simply contact us within 30 days for a full refund or exchange."
            }
          ]}
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBaseSocial
          logoText="Keyboard Collection"
          description="Curating the world's finest mechanical keyboards for enthusiasts, professionals, and collectors. Every keystroke matters."
          copyrightText="© 2024 Keyboard Collection. All rights reserved."
          columns={[
            {
              title: "Collection",              items: [
                { label: "Browse All", href: "collection" },
                { label: "New Arrivals", href: "collection" },
                { label: "Best Sellers", href: "collection" },
                { label: "Pricing Tiers", href: "pricing" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "FAQ", href: "faq" },
                { label: "Contact Us", href: "contact" },
                { label: "Shipping Info", href: "contact" },
                { label: "Returns & Warranty", href: "contact" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "features" },
                { label: "Our Story", href: "features" },
                { label: "Blog", href: "collection" },
                { label: "Careers", href: "contact" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Youtube, href: "https://youtube.com", ariaLabel: "YouTube" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}