"use client"

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Sparkles, Award, Star, Users, Heart, TrendingUp, HelpCircle, Phone, CheckCircle } from "lucide-react";
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Kobula"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Services", id: "features" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Equestrian Excellence"
          bottomRightText="info@kobulaclub.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Welcome to Kobula Horse Club"
          description="Experience the finest equestrian facility with world-class training, premium facilities, and a thriving community of horse enthusiasts and professional riders."
          tag="Est. 2010"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/girl-preparing-ride-horse_1157-4617.jpg"
          imageAlt="Beautiful equestrian landscape with horses grazing"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
          buttons={[
            { text: "Join Our Community", href: "contact" },
            { text: "Learn More", href: "about" }
          ]}
        />
      </div>

      <div id="metric_card_one" data-section="metric_card_one">
        <MetricCardOne
          carouselMode="auto"
          gridVariant="uniform-all-items-equal"
          animationType="none"
          title="World-Class Equestrian Training"
          description="Experience unparalleled training and development for both riders and horses."
          tag="Training"
          buttons={[{ label: "Learn More", href: "#" }, { label: "Enroll Now", href: "#" }]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Our Heritage"
          tagIcon={Award}
          title="Kobula: Where Passion Meets Excellence"
          description="Founded in 2010, Kobula Horse Club has established itself as the premier equestrian destination in the region. We combine traditional horsemanship with modern training techniques, offering comprehensive facilities and personalized instruction for riders of all levels."
          metrics={[
            { value: "15+", title: "Years of Excellence" },
            { value: "250+", title: "Active Members" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/smiling-female-jockey-dapple-gray-horse-walking-through-flowering-garden_613910-4475.jpg"
          imageAlt="Kobula Horse Club facilities and community"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTen
          title="Our Services & Facilities"
          description="Comprehensive equestrian services designed to meet the needs of every rider"
          tag="Premium Offerings"
          tagIcon={Star}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: "1",              title: "Professional Training Programs",              description: "Expert instruction for beginners through advanced riders, including dressage, jumping, western, and leisure riding disciplines.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/beautiful-brown-horse-is-grazing-farm_181624-61142.jpg" },
              items: [
                { icon: CheckCircle, text: "Certified trainers with international experience" },
                { icon: CheckCircle, text: "Customized lesson plans for all skill levels" },
                { icon: CheckCircle, text: "Group and private session options" },
                { icon: CheckCircle, text: "Competition preparation programs" }
              ],
              reverse: false
            },
            {
              id: "2",              title: "State-of-the-Art Facilities",              description: "Well-maintained stables, multiple arenas, and scenic riding trails providing the perfect environment for horsemanship development.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/girl-preparing-ride-horse_1157-4618.jpg" },
              items: [
                { icon: CheckCircle, text: "Indoor and outdoor arenas" },
                { icon: CheckCircle, text: "Premium boarding with daily care" },
                { icon: CheckCircle, text: "Miles of scenic trails" },
                { icon: CheckCircle, text: "Modern veterinary facilities" }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Horse Sales & Leasing",              description: "Carefully selected quality horses available for sale or lease to match riders with their perfect equine partners.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/girl-ride-horse_72229-61.jpg" },
              items: [
                { icon: CheckCircle, text: "Expert horse selection and evaluation" },
                { icon: CheckCircle, text: "Flexible leasing arrangements" },
                { icon: CheckCircle, text: "Pre-purchase veterinary inspections" },
                { icon: CheckCircle, text: "Trial periods available" }
              ],
              reverse: false
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardOne
          title="Meet Our Expert Team"
          description="Experienced professionals dedicated to your equestrian journey"
          tag="Professional Instructors"
          tagIcon={Users}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          members={[
            {
              id: "1",              name: "Elena Rossetti",              role: "Head Trainer",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              imageAlt: "Elena Rossetti, Head Trainer"
            },
            {
              id: "2",              name: "Marco Santoro",              role: "Jumping Specialist",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              imageAlt: "Marco Santoro, Jumping Specialist"
            },
            {
              id: "3",              name: "Sophie Laurent",              role: "Dressage Expert",              imageSrc: "https://img.b2bpic.net/free-photo/serious-beautiful-middle-aged-business-woman_1262-3072.jpg",              imageAlt: "Sophie Laurent, Dressage Expert"
            },
            {
              id: "4",              name: "David Chen",              role: "Facility Manager",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-woman-home_23-2149122066.jpg",              imageAlt: "David Chen, Facility Manager"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="What Our Members Say"
          description="Hear from our thriving community of riders and horse enthusiasts"
          tag="Member Stories"
          tagIcon={Heart}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              title: "A Second Home",              quote: "Kobula has become my second home. The instructors are incredibly knowledgeable, the facilities are pristine, and most importantly, the community is so welcoming. I've improved more in one year here than in all my previous years of riding.",              name: "Sarah Mitchell",              role: "Advanced Rider",              imageSrc: "https://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              title: "Perfect for Beginners",              quote: "I was nervous about starting my riding journey at an older age, but the team at Kobula made me feel completely comfortable. My instructor is patient, encouraging, and genuinely passionate about helping me succeed.",              name: "James Richardson",              role: "Beginner Rider",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg",              imageAlt: "James Richardson"
            },
            {
              id: "3",              title: "Professional Excellence",              quote: "The training programs here are world-class. I've competed nationally, and the preparation I received at Kobula was instrumental in my success. Highly recommended for serious competitors.",              name: "Maria Gonzalez",              role: "Competition Rider",              imageSrc: "https://img.b2bpic.net/free-photo/stylish-businesswoman-with-glasses_23-2147989567.jpg",              imageAlt: "Maria Gonzalez"
            },
            {
              id: "4",              title: "Dream Come True",              quote: "Having my own horse at Kobula has been a dream come true. The boarding facilities are top-notch, and I love the sense of community. Every visit feels special.",              name: "Lucas Thompson",              role: "Horse Owner",              imageSrc: "https://img.b2bpic.net/free-photo/beauty-style-fashion-age-concept-close-up-portrait-positive-elegant-50-year-old-female-with-gray-hair-wrinkled-face-posing-against-white-brick-wall_344912-1852.jpg",              imageAlt: "Lucas Thompson"
            },
            {
              id: "5",              title: "Transformative Experience",              quote: "As a young rider, Kobula has shaped not just my horsemanship but my character. The values of dedication, respect, and perseverance are woven into everything here.",              name: "Alexia Fontaine",              role: "Young Enthusiast",              imageSrc: "https://img.b2bpic.net/free-photo/mature-woman-with-grey-hair-posing-with-violet-jacket_343059-55.jpg",              imageAlt: "Alexia Fontaine"
            },
            {
              id: "6",              title: "Exceeds Expectations",              quote: "From the moment I joined, I knew I'd made the right choice. The facilities, instruction, and community all exceed my expectations. This is equestrian excellence.",              name: "Oliver Schmidt",              role: "Active Member",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-stylish-pretty-young-woman-look-professional-cross-hands-chest-smiling-confident-camera-wear-glasses-standing-near-reception-office-hall-discuss-business_197531-22165.jpg",              imageAlt: "Oliver Schmidt"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Our Impact & Achievements"
          description="Celebrating milestones in our equestrian community"
          tag="By The Numbers"
          tagIcon={TrendingUp}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              value: "250+",              title: "Active Members",              items: [
                "All skill levels welcome",                "Family-friendly community",                "International members"
              ]
            },
            {
              id: "2",              value: "50+",              title: "Horses in Our Care",              items: [
                "Premium boarding available",                "Daily professional care",                "Diverse breeds and disciplines"
              ]
            },
            {
              id: "3",              value: "100+",              title: "Annual Events",              items: [
                "Competitions and shows",                "Educational clinics",                "Social gatherings"
              ]
            },
            {
              id: "4",              value: "95%",              title: "Member Satisfaction",              items: [
                "Continuous improvements",                "Member feedback valued",                "Commitment to excellence"
              ]
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Join Kobula?"
          ctaDescription="Take the first step toward your equestrian journey. Contact us today to schedule a tour or learn about membership options."
          ctaIcon={Phone}
          ctaButton={{
            text: "Schedule a Tour",            href: "https://example.com/contact"
          }}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          accordionAnimationType="smooth"
          faqs={[
            {
              id: "1",              title: "How do I schedule a facility tour?",              content: "Contact us by phone at (555) 123-4567 or email info@kobulaclub.com to arrange a tour at your convenience. We typically offer tours Tuesday through Sunday, 10am-4pm."
            },
            {
              id: "2",              title: "What payment methods do you accept?",              content: "We accept all major credit cards, bank transfers, and monthly automatic payments. Multi-month memberships receive a 5-10% discount."
            },
            {
              id: "3",              title: "Is there a trial period?",              content: "Yes! New members can take a complimentary trial lesson to experience our instruction and facilities before committing to membership. Bring appropriate riding attire and closed-toe shoes."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Kobula"
          columns={[
            {
              title: "Club",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Team", href: "#team" },
                { label: "Facilities", href: "#features" },
                { label: "Events", href: "#metrics" }
              ]
            },
            {
              title: "Membership",              items: [
                { label: "Join Kobula", href: "#contact" },
                { label: "Lesson Programs", href: "#features" },
                { label: "Boarding Options", href: "#features" },
                { label: "FAQ", href: "#faq" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "Email: info@kobulaclub.com", href: "mailto:info@kobulaclub.com" },
                { label: "Phone: (555) 123-4567", href: "tel:+15551234567" },
                { label: "Hours: Tue-Sun 10am-6pm", href: "#" },
                { label: "Location: Find Us", href: "#" }
              ]
            },
            {
              title: "Follow",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "YouTube", href: "https://youtube.com" }
              ]
            }
          ]}
          copyrightText="© 2025 Kobula Horse Club. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}