"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Music, Sparkles } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="inset"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Why Us", id: "benefits" },
            { name: "Pricing", id: "pricing" },
            { name: "FAQ", id: "faq" },
            { name: "Join", id: "contact" }
          ]}
          button={{ text: "Join the Movement", href: "contact" }}
          brandName="KortársHipHop"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          title="Feel the Flow. Move with Power."
          description="KortársHipHop Fusion blends contemporary technique with hip-hop groove. Experience structured artistry meets freestyle confidence in a supportive, energetic community."
          background={{ variant: "plain" }}
          tag="Dance Fusion"
          tagIcon={Music}
          tagAnimation="slide-up"
          buttons={[
            { text: "Join the Movement", href: "contact" }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/little-cheerful-teenage-girl-is-showing-her-perfomance-while-posing-photographer-tunnel_613910-14783.jpg?_wi=1",              imageAlt: "Hip-hop dancer in motion"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-blonde-woman-jumping-splits_549566-409.jpg",              imageAlt: "Contemporary dancer performing"
            }
          ]}
          mediaAnimation="slide-up"
          rating={5}
          ratingText="Loved by our community"
        />
      </div>

      <div id="problem" data-section="problem">
        <TextSplitAbout
          title="Tired of Choosing Between Technique and Groove?"
          description={[
            "Contemporary dance often feels too technical and rigid—leaving little room for your authentic self-expression.",            "Hip-hop classes can prioritize freestyle over structure—making it hard to build solid foundational skills.",            "Traditional dance training lacks the creative community and performance energy you crave.",            "You want a space where both precision and freedom matter. Where technique empowers expression."
          ]}
          useInvertedBackground={true}
          buttonAnimation="slide-up"
          showBorder={false}
        />
      </div>

      <div id="benefits" data-section="benefits">
        <FeatureCardTwentyFour
          title="Why KortársHipHop Fusion?"
          description="Discover the transformation that happens when technique meets expression."
          features={[
            {
              id: "1",              title: "Build Strong Technique AND Groove",              author: "Technical Foundation",              description: "Master contemporary fundamentals while developing authentic hip-hop musicality. Get the best of both worlds.",              tags: ["Technique", "Groove"],
              imageSrc: "http://img.b2bpic.net/free-photo/international-summer-dance-school_1385-3166.jpg",              imageAlt: "Dance technique and training"
            },
            {
              id: "2",              title: "Develop Expressive Movement Quality",              author: "Creative Expression",              description: "Find your unique movement voice. Express emotion and personality through controlled, dynamic choreography.",              tags: ["Expression", "Movement"],
              imageSrc: "http://img.b2bpic.net/free-photo/little-cheerful-teenage-girl-is-showing-her-perfomance-while-posing-photographer-tunnel_613910-14783.jpg?_wi=2",              imageAlt: "Expressive dancer"
            },
            {
              id: "3",              title: "Musicality + Freestyle Confidence",              author: "Musical Connection",              description: "Deepen your connection to music. Build improvisation skills grounded in rhythm and beat awareness.",              tags: ["Musicality", "Freestyle"],
              imageSrc: "http://img.b2bpic.net/free-photo/non-binary-person-modern-clothes-posing-outside_23-2148760573.jpg",              imageAlt: "Dancer with music"
            },
            {
              id: "4",              title: "Supportive Creative Community",              author: "Community Love",              description: "Join a tribe of dancers who celebrate growth, creativity, and each other. No judgment. Pure support.",              tags: ["Community", "Support"],
              imageSrc: "http://img.b2bpic.net/free-photo/diversity-people-exercise-class-relax-concept_53876-23477.jpg",              imageAlt: "Dance community"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardNine
          title="Choose Your Flow"
          description="Select the perfect plan to start your fusion dance journey."
          plans={[
            {
              id: "starter",              title: "Starter",              price: "$59",              period: "/month",              imageSrc: "http://img.b2bpic.net/free-photo/mature-ballet-instructor-teaching-her-students-proper-feet-position-ballet-class-copy-space_637285-2357.jpg?_wi=1",              imageAlt: "Starter Plan",              button: { text: "Get Started", href: "contact" },
              features: [
                "1 class per week",                "Community access",                "Email support",                "Beginner-friendly"
              ]
            },
            {
              id: "flow",              title: "Flow",              price: "$119",              period: "/month",              imageSrc: "http://img.b2bpic.net/free-photo/group-women-practising-yoga-stretching-side_1098-19335.jpg",              imageAlt: "Flow Plan",              button: { text: "Choose Flow", href: "contact" },
              features: [
                "2 classes per week",                "Community access",                "Performance eligibility",                "Priority support",                "Workshop access"
              ]
            },
            {
              id: "unlimited",              title: "Unlimited (Most Popular)",              price: "$199",              period: "/month",              imageSrc: "http://img.b2bpic.net/free-photo/mature-ballet-instructor-teaching-her-students-proper-feet-position-ballet-class-copy-space_637285-2357.jpg?_wi=2",              imageAlt: "Unlimited Plan",              button: { text: "Go Unlimited", href: "contact" },
              features: [
                "Unlimited classes",                "Priority workshop access",                "Performance eligibility",                "Full Tutorial Video Library",                "1-on-1 coaching sessions",                "Exclusive community events"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Got Questions?"
          description="Everything you need to know about KortársHipHop Fusion."
          faqs={[
            {
              id: "1",              title: "Do I need previous dance experience?",              content: "Absolutely not! Our Starter classes welcome complete beginners. We build your foundation from the ground up, combining contemporary technique basics with hip-hop fundamentals. Everyone starts somewhere."
            },
            {
              id: "2",              title: "What should I wear?",              content: "Wear comfortable, movement-friendly clothes—joggers, sweatpants, t-shirts, hoodies. Sneakers or clean dance shoes work best. This is about feeling good and moving freely, so wear what makes you confident."
            },
            {
              id: "3",              title: "Is this beginner friendly?",              content: "Yes! Our classes are designed with all levels in mind. We offer modifications and progressions, so whether you're brand new or advancing, you'll find challenges that fit your level."
            },
            {
              id: "4",              title: "Can I try a class first?",              content: "Definitely! We offer a free trial class so you can experience the vibe, meet the community, and see if Fusion is right for you. No commitment—just come and feel the flow."
            },
            {
              id: "5",              title: "What age group is this for?",              content: "Our core community is ages 16+, but we love dancers of all ages. If you're younger or older and interested, reach out—we may have specialized sessions or can chat about what works best."
            },
            {
              id: "6",              title: "Are there performance opportunities?",              content: "Yes! Flow and Unlimited members are eligible for showcase performances throughout the year. These are optional but incredible opportunities to celebrate your growth and express yourself on stage."
            }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/young-man-funny-expression_1194-3018.jpg"
          imageAlt="Dance movement"
          mediaAnimation="slide-up"
          mediaPosition="left"
          textboxLayout="default"
          useInvertedBackground={true}
          faqsAnimation="slide-up"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          faqs={[
            {
              id: "1",              title: "When do classes start?",              content: "Classes run weekly on Tuesdays and Thursdays at 6 PM, Saturdays at 10 AM. New session registrations open monthly. Early registration gets priority spot placement."
            },
            {
              id: "2",              title: "What if I can't make a scheduled class?",              content: "Flow and Unlimited members can attend make-up sessions or access recorded class videos (Unlimited only). We're flexible—life happens, and we've got you covered."
            },
            {
              id: "3",              title: "How do I access the tutorial library?",              content: "Unlimited members get instant access via our online platform. You'll receive login credentials after your first payment. Breakdowns, drills, and freestyle exercises available 24/7."
            }
          ]}
          ctaTitle="Ready to Join?"
          ctaDescription="Reserve your spot in our next session and start your fusion journey today."
          ctaButton={{ text: "Reserve My Spot", href: "#reserve" }}
          ctaIcon={Sparkles}
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="KortársHipHop"
          columns={[
            {
              items: [
                { label: "Home", href: "hero" },
                { label: "Why Us", href: "benefits" },
                { label: "Pricing", href: "pricing" }
              ]
            },
            {
              items: [
                { label: "FAQ", href: "faq" },
                { label: "Join Us", href: "contact" },
                { label: "Community", href: "#community" }
              ]
            },
            {
              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "TikTok", href: "https://tiktok.com" },
                { label: "YouTube", href: "https://youtube.com" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
