"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Zap, CheckCircle, Flame, TrendingUp, Shield, Star, Globe, HelpCircle } from "lucide-react";

export default function BettingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumLargeSizeMediumTitles"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="BetPro"
          button={{
            text: "Start Betting",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Real-Time Sports Betting at Your Fingertips"
          description="Experience the thrill of live betting with real-time odds, instant payouts, and 24/7 access to global sports events. Join thousands of winners today."
          tag="Trusted by 50K+ Bettors"
          tagIcon={Zap}
          kpis={[
            {
              value: "50K+",              label: "Active Bettors"
            },
            {
              value: "98%",              label: "Payout Rate"
            },
            {
              value: "1M+",              label: "Daily Bets"
            }
          ]}
          enableKpiAnimation={true}
          imageSrc="https://img.b2bpic.net/free-photo/three-handsome-friends-clenching-fists_329181-20440.jpg"
          imageAlt="Live sports betting platform"
          imagePosition="right"
          buttons={[
            {
              text: "Start Betting Now",              href: "#contact"
            },
            {
              text: "View Live Odds",              href: "#odds"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSixteen
          title="Why Choose BetPro Over Traditional Betting"
          description="See how our platform revolutionizes the betting experience with cutting-edge technology and user-friendly features."
          tag="Platform Advantages"
          tagIcon={CheckCircle}
          negativeCard={{
            items: [
              "Limited betting markets",              "Delayed odds updates",              "Complex user interface",              "Slow payment processing",              "Poor customer support"
            ]
          }}
          positiveCard={{
            items: [
              "1000+ betting markets available",              "Real-time live odds updates",              "Intuitive mobile-first design",              "Instant payouts within 5 minutes",              "24/7 dedicated support team"
            ]
          }}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          buttons={[
            {
              text: "Experience the Difference",              href: "#contact"
            }
          ]}
        />
      </div>

      <div id="odds" data-section="odds">
        <ProductCardTwo
          title="Featured Betting Markets"
          description="Explore our most popular sports and events with competitive odds updated in real-time."
          tag="Live Now"
          tagIcon={Flame}
          products={[
            {
              id: "1",              brand: "Premier League",              name: "Manchester United vs Arsenal",              price: "1.95 / 3.40 / 1.50",              rating: 5,
              reviewCount: "12.3k",              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-hand-holding-smartphone_23-2149743756.jpg",              imageAlt: "Football match"
            },
            {
              id: "2",              brand: "NBA",              name: "Lakers vs Celtics",              price: "2.10 / 3.20 / 1.65",              rating: 5,
              reviewCount: "8.9k",              imageSrc: "https://img.b2bpic.net/free-photo/young-hispanic-man-supporting-soccer-match-using-smartphone-sitting-by-christmas-decor-home_839833-12085.jpg",              imageAlt: "Basketball game"
            },
            {
              id: "3",              brand: "ATP Finals",              name: "Djokovic vs Alcaraz",              price: "1.80 / 4.00 / 1.75",              rating: 5,
              reviewCount: "5.6k",              imageSrc: "https://img.b2bpic.net/free-photo/group-friends-watching-football-home_329181-19100.jpg",              imageAlt: "Tennis match"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "View All Markets",              href: "#contact"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Our Track Record"
          description="Industry-leading performance and customer satisfaction metrics"
          metrics={[
            {
              id: "1",              value: "$100M",              title: "Payouts",              description: "Distributed to winners this year",              icon: TrendingUp
            },
            {
              id: "2",              value: "99.9%",              title: "Uptime",              description: "Platform reliability guaranteed",              icon: Shield
            },
            {
              id: "3",              value: "4.8/5",              title: "Rating",              description: "Customer satisfaction score",              icon: Star
            },
            {
              id: "4",              value: "50+",              title: "Countries",              description: "Available worldwide",              icon: Globe
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="BetPro has completely transformed my betting experience. The real-time odds and seamless interface make it incredibly easy to place bets and track my wins. I've been with them for over a year and couldn't imagine switching platforms."
          rating={5}
          author="Michael Chen, Professional Bettor"
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              alt: "Michael Chen"
            },
            {
              src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Sarah Johnson"
            },
            {
              src: "https://img.b2bpic.net/free-photo/handsome-bearded-guy-looking-wearing-outdoor-clothes_176420-18777.jpg",              alt: "David Martinez"
            },
            {
              src: "https://img.b2bpic.net/free-photo/serene-businessman-with-glasses_1098-719.jpg",              alt: "Emma Wilson"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know about betting on BetPro"
          tag="Support"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "How do I get started with betting?",              content: "Simply sign up with your email, verify your account, deposit funds, and you're ready to place your first bet. The process takes less than 5 minutes."
            },
            {
              id: "2",              title: "What payment methods do you accept?",              content: "We accept credit cards, debit cards, e-wallets, bank transfers, and cryptocurrency. All transactions are encrypted and secure."
            },
            {
              id: "3",              title: "When will I receive my winnings?",              content: "Winning bets are paid out instantly to your account wallet. You can withdraw to your bank account within 1-5 business days depending on your bank."
            },
            {
              id: "4",              title: "Is my personal information safe?",              content: "Yes, we use military-grade encryption and comply with all international data protection regulations. Your privacy is our top priority."
            },
            {
              id: "5",              title: "Can I place bets on mobile?",              content: "Absolutely! Our mobile app is available on iOS and Android with full betting functionality, live streaming, and account management."
            },
            {
              id: "6",              title: "What is your minimum deposit?",              content: "The minimum deposit is $10, making it accessible for all bettors. We also offer welcome bonuses for new users."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/people-working-call-center_23-2149288189.jpg"
          imageAlt="Customer support team"
          mediaPosition="left"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Join the Winning Team"
          description="Ready to start betting? Create your account now and get instant access to thousands of live betting markets with real-time odds."
          inputs={[
            {
              name: "email",              type: "email",              placeholder: "your@email.com",              required: true
            },
            {
              name: "username",              type: "text",              placeholder: "Choose your username",              required: true
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your betting interests (optional)",            rows: 4
          }}
          buttonText="Create Account"
          useInvertedBackground="noInvert"
          mediaPosition="right"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="BetPro"
          copyrightText="© 2025 | BetPro Betting Platform. All rights reserved."
          columns={[
            {
              title: "Betting",              items: [
                {
                  label: "Sports",                  href: "#odds"
                },
                {
                  label: "Live Odds",                  href: "#odds"
                },
                {
                  label: "Promotions",                  href: "#features"
                },
                {
                  label: "Mobile App",                  href: "#features"
                }
              ]
            },
            {
              title: "Company",              items: [
                {
                  label: "About Us",                  href: "#hero"
                },
                {
                  label: "Blog",                  href: "#contact"
                },
                {
                  label: "Careers",                  href: "#contact"
                },
                {
                  label: "News",                  href: "#contact"
                }
              ]
            },
            {
              title: "Support",              items: [
                {
                  label: "Help Center",                  href: "#faq"
                },
                {
                  label: "Contact Us",                  href: "#contact"
                },
                {
                  label: "Responsible Gaming",                  href: "#contact"
                },
                {
                  label: "Terms & Conditions",                  href: "#contact"
                }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}