"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardMetrics from '@/components/sections/hero/HeroBillboardMetrics';
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FeatureCardEleven from '@/components/sections/feature/FeatureCardEleven';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Award, Facebook, HelpCircle, Instagram, Mail, MessageCircle, Package, Sparkles, Star, TrendingUp, Twitter, Users, Zap } from "lucide-react";

export default function SoccerClubPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="small"
      sizing="large"
      background="none"
      cardStyle="gradient-mesh"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="outline"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Soccer Club"
          navItems={[
            {name: "Shop", id: "products"},
            {name: "About", id: "about"},
            {name: "Membership", id: "membership"},
            {name: "FAQ", id: "faq"},
            {name: "Contact", id: "contact"}
          ]}
          button={{text: "Shop Now", href: "#products"}}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardMetrics
          title="Elevate Your Game with Premium Soccer Gear"
          description="From shoes to winter kits, find everything you need to play in style and comfort"
          tag="New Collection"
          tagIcon={Zap}
          buttons={[{text: "Shop Now and Join Our Soccer Club", href: "#products"}]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711876995-m2y2xvp3.jpg"
          imageAlt="Premium soccer gear and athletic equipment"
          frameStyle="card"
          metricsLabel="Trusted by soccer players, coaches, and teams worldwide"
          metrics={[
            {id: "1", value: "10K+", label: "Happy Players"},
            {id: "2", value: "500+", label: "Product Styles"},
            {id: "3", value: "98%", label: "Satisfaction Rate"}
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <ParallaxAbout
          title="Crafted for Champions"
          description="We believe every soccer player deserves access to high-quality, stylish gear that elevates performance without compromising comfort. Our curated collection celebrates the sport we love."
          tag="Our Story"
          buttons={[{text: "Learn More", href: "#features"}]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711893410-qp7gycd3.jpg"
          imageAlt="Soccer team training together"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardThree
          title="Shop Our Collection"
          description="Discover premium soccer gear across all categories"
          tag="Featured Items"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              name: "Pro Elite Soccer Shoes",              price: "$129.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711877328-jczu482c.jpg",              imageAlt: "Professional soccer cleats",              initialQuantity: 1
            },
            {
              id: "2",              name: "Championship Soccer Ball",              price: "$64.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711876995-m2y2xvp3.jpg",              imageAlt: "Official soccer ball",              initialQuantity: 1
            },
            {
              id: "3",              name: "Performance Jersey Set",              price: "$49.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711878204-g3f95oxl.jpg",              imageAlt: "Soccer team jersey",              initialQuantity: 1
            },
            {
              id: "4",              name: "Premium Grip Socks",              price: "$24.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711878667-ku49tlon.jpg",              imageAlt: "High-performance soccer socks",              initialQuantity: 1
            },
            {
              id: "5",              name: "Winter Training Jacket",              price: "$89.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711886195-ouopglqh.jpg",              imageAlt: "Thermal winter soccer gear",              initialQuantity: 1
            },
            {
              id: "6",              name: "All-Weather Kit Bundle",              price: "$179.99",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711886195-ouopglqh.jpg",              imageAlt: "Complete soccer gear bundle",              initialQuantity: 1
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardEleven
          title="Why Soccer Club?"
          description="Experience the difference quality and style make"
          tag="Our Advantages"
          tagIcon={Award}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          usePrimaryButtonImage={false}
          animationType="opacity"
          features={[
            {
              id: 1,
              title: "Premium Quality Materials",              description: "Handpicked brands and materials engineered for durability, performance, and comfort. Every item meets our rigorous quality standards.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711890105-lrwr1p7d.jpg",              imageAlt: "Premium product quality showcase"
            },
            {
              id: 2,
              title: "Stylish Designs",              description: "Stand out on the field with our curated collection of modern, fashionable gear. From classic to cutting-edge, we have your style.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711894035-0ophvks1.jpg",              imageAlt: "Trendy soccer fashion and design"
            },
            {
              id: 3,
              title: "Performance Proven",              description: "Trusted by professional and amateur players alike. Our gear is tested in real-world conditions to ensure peak performance.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711877328-jczu482c.jpg",              imageAlt: "Athletes performing with our gear"
            }
          ]}
        />
      </div>

      <div id="membership" data-section="membership">
        <PricingCardThree
          title="Soccer Club Membership"
          description="Join our community and unlock exclusive benefits"
          tag="Member Rewards"
          tagIcon={Award}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: "basic",              price: "Free",              name: "Standard Member",              buttons: [{text: "Join Today", href: "#contact"}],
              features: [
                "10% discount on all purchases",                "Early access to new collections",                "Free standard shipping on orders over $75",                "Exclusive member-only sales"
              ]
            },
            {
              id: "premium",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$49/year",              name: "Premium Member",              buttons: [{text: "Upgrade Now", href: "#contact"}],
              features: [
                "20% discount on all purchases",                "Free express shipping worldwide",                "Priority customer support",                "Birthday bonus rewards",                "Quarterly exclusive collections",                "Access to member-only events"
              ]
            },
            {
              id: "pro",              price: "$99/year",              name: "Pro Member",              buttons: [{text: "Go Pro", href: "#contact"}],
              features: [
                "25% discount on all purchases",                "Free priority express shipping",                "Dedicated account manager",                "Bulk purchase discounts",                "Custom team gear orders",                "VIP event invitations",                "Free product exchanges"
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Soccer Club has completely transformed how I equip my team. The quality is unmatched, the prices are fair, and their customer service is incredible. We've been ordering for three seasons now."
          rating={5}
          author="Coach Marcus Thompson, State Champions"
          useInvertedBackground="noInvert"
          avatars={[
            {src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711891397-slyek4nk.jpg", alt: "Coach Marcus Thompson"},
            {src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767378010628-m83xd3m3.jpg", alt: "Player testimonial"},
            {src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711890231-wd0937qv.jpg", alt: "Team member testimonial"},
            {src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711891725-ho446n3e.jpg", alt: "Satisfied customer"},
            {src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711892008-ufv1mfch.jpg", alt: "Happy athlete"},
            {src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767711892561-wcbiikch.jpg", alt: "Player testimonial"}
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSix
          title="By The Numbers"
          description="Real impact from real athletes"
          tag="Our Impact"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          metrics={[
            {
              id: "1",              value: "10K+",              tag: "Players",              tagIcon: Users,
              title: "Active Soccer Players"
            },
            {
              id: "2",              value: "500+",              tag: "Products",              tagIcon: Package,
              title: "Unique Items Available"
            },
            {
              id: "3",              value: "98%",              tag: "Satisfaction",              tagIcon: Star,
              title: "Customer Satisfaction"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our products and services"
          tag="Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What's your sizing and fit policy?",              content: "We provide detailed size charts for all products with brand-specific guidance. Most items follow standard athletic sizing. If you receive an incorrect size, we offer free exchanges within 30 days of purchase."
            },
            {
              id: "2",              title: "How long does shipping take?",              content: "Standard shipping typically takes 5-7 business days. Express shipping is 2-3 business days. Premium members receive free express shipping on all orders. International shipping varies by location (10-14 business days)."
            },
            {
              id: "3",              title: "Do you offer bulk discounts?",              content: "Yes! Teams and coaches can contact our sales team for custom bulk pricing. Pro members receive automatic 15% bulk discounts. Contact us for orders over 50 items for additional discounts."
            },
            {
              id: "4",              title: "What's your return policy?",              content: "We offer a 30-day money-back guarantee on all items. Products must be unworn and in original packaging. Returns are free for members; standard customers pay return shipping. Refunds are processed within 5 business days."
            },
            {
              id: "5",              title: "Are all products authentic?",              content: "100% authentic. We source directly from official brand distributors and partners. Every product comes with authenticity assurance. We never carry counterfeit or replica items."
            },
            {
              id: "6",              title: "Do you have a winter collection?",              content: "Yes! Our winter collection features thermal jackets, moisture-wicking base layers, and specialized cold-weather gear. Available September through March with rotating seasonal updates."
            }
          ]}
          buttons={[{text: "Join Thousands of Satisfied Players", href: "#contact"}]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Stay Updated with New Collections"
          description="Join our community of 10K+ players and coaches. Get exclusive deals, early access to new gear, and soccer tips."
          tagIcon={Mail}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe Now"
          termsText="We respect your inbox. Unsubscribe anytime. Check our privacy policy for details."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Soccer Club"
          copyrightText="© 2025 Soccer Club. Premium boutique soccer gear for champions."
          socialLinks={[
            {icon: Instagram, href: "https://instagram.com", ariaLabel: "Follow us on Instagram"},
            {icon: Facebook, href: "https://facebook.com", ariaLabel: "Follow us on Facebook"},
            {icon: Twitter, href: "https://twitter.com", ariaLabel: "Follow us on Twitter"}
          ]}
        />
      </div>
    </ThemeProvider>
  );
}