"use client"

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';
import FeatureCardEighteen from '@/components/sections/feature/FeatureCardEighteen';
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
import PricingCardSix from '@/components/sections/pricing/PricingCardSix';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { CheckCircle, Users, TrendingUp, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="large"
      sizing="small"
      background="radialGradient"
      cardStyle="elevated-accent-light"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="outline"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            {name: "Home", id: "hero"},
            {name: "Courses", id: "pricing"},
            {name: "About", id: "about"},
            {name: "Success", id: "testimonial"},
            {name: "Contact", id: "contact"}
          ]}
          brandName="Rubyroid"
          bottomLeftText="Ruby Programming"
          bottomRightText="hello@rubyroid.io"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Master Ruby Programming at Rubyroid"
          description="Learn professional-grade Ruby and Rails development from industry experts. Build real-world applications and launch your tech career with comprehensive hands-on training."
          kpis={[
            {value: "500+", label: "Successful Graduates"},
            {value: "95%", label: "Job Placement Rate"},
            {value: "12 Weeks", label: "Course Duration"}
          ]}
          tag="Accepted into top tech companies"
          tagIcon={CheckCircle}
          buttons={[
            {text: "Enroll Now", href: "#contact"},
            {text: "Learn More", href: "#about"}
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492693670-lj7ueobz.png"
          imageAlt="Students learning Ruby programming"
          imagePosition="right"
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitAbout
          title="Why Choose Rubyroid"
          description="Rubyroid is a premier IT school dedicated to transforming aspiring developers into industry-ready professionals. Our comprehensive Ruby and Rails curriculum combines theoretical knowledge with practical project experience. We focus on modern development practices, code quality, and real-world problem solving. With mentorship from experienced software engineers and a supportive learning community, students gain the skills and confidence needed to excel in today's competitive tech industry."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484693438-07rkdlqa.jpg"
          imageAlt="Collaborative learning environment"
          imagePosition="right"
          buttons={[
            {text: "View Curriculum", href: "#pricing"}
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardEighteen
          title="Traditional vs Rubyroid Learning"
          description="See how our approach transforms programming education"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          negativeCard={{
            title: "Traditional Learning",
            items: [
              "Outdated teaching materials",
              "Limited hands-on projects",
              "No industry mentorship",
              "Slow paced curriculum",
              "Generic certification"
            ],
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492694761-e96hadsf.jpg",
            imageAlt: "Traditional classroom setup"
          }}
          positiveCard={{
            title: "Rubyroid Method",
            items: [
              "Current industry standards",
              "Real-world production projects",
              "Mentorship from professionals",
              "Intensive accelerated learning",
              "Job-ready portfolio"
            ],
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492695669-hy749o3o.jpg",
            imageAlt: "Modern coding environment"
          }}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSix
          title="Our Impact"
          description="Transforming lives through tech education since 2020"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",
              value: "500+",
              tag: "Graduates",
              tagIcon: Users,
              title: "Skilled developers trained and deployed"
            },
            {
              id: "2",
              value: "95%",
              tag: "Success",
              tagIcon: TrendingUp,
              title: "Job placement rate within 3 months"
            },
            {
              id: "3",
              value: "4.9/5",
              tag: "Satisfaction",
              tagIcon: Star,
              title: "Average student satisfaction rating"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardSix
          title="Flexible Learning Plans"
          description="Choose the program that fits your schedule and goals"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "foundation",
              price: "$1,499",
              subtitle: "Perfect for complete beginners in programming",
              features: [
                "12-week intensive course",
                "Ruby fundamentals and OOP",
                "Git and version control",
                "Community support",
                "Certificate of completion"
              ],
              buttons: [
                {text: "Start Foundation", href: "#contact"}
              ],
              bottomNotes: [
                "Flexible payment plans available",
                "Money-back guarantee"
              ]
            },
            {
              id: "professional",
              price: "$2,999",
              subtitle: "Comprehensive program with job placement focus",
              features: [
                "16-week intensive bootcamp",
                "Ruby on Rails mastery",
                "Database design and SQL",
                "Full-stack web development",
                "1-on-1 mentorship",
                "Portfolio development",
                "Job preparation support"
              ],
              buttons: [
                {text: "Enroll Professional", href: "#contact"}
              ],
              bottomNotes: [
                "95% job placement guarantee",
                "Deferred payment options"
              ]
            },
            {
              id: "advanced",
              price: "$4,499",
              subtitle: "Advanced program for career accelerators",
              features: [
                "20-week master program",
                "Advanced Rails patterns",
                "DevOps and deployment",
                "Performance optimization",
                "Unlimited mentorship",
                "Salary negotiation coaching",
                "6-month job guarantee"
              ],
              buttons: [
                {text: "Start Advanced", href: "#contact"}
              ],
              bottomNotes: [
                "Guaranteed minimum salary placement",
                "Career advancement support"
              ]
            }
          ]}
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardThirteen
          title="Success Stories"
          description="Hear from graduates who transformed their careers through Rubyroid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          showRating={true}
          testimonials={[
            {
              id: "1",
              name: "Sarah Chen",
              handle: "@sarahdev",
              rating: 5,
              testimonial: "Rubyroid completely transformed my career. The hands-on approach and mentorship from industry professionals made all the difference. I landed a job within 2 weeks of graduation at a top-tier company.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697041-9adqfrju.jpg"
            },
            {
              id: "2",
              name: "Michael Rodriguez",
              handle: "@mikerod",
              rating: 5,
              testimonial: "Coming from a non-tech background, I was skeptical about coding bootcamps. Rubyroid proved me wrong. The curriculum is practical, the instructors are amazing, and the community is incredibly supportive.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484714329-4i8nds16.jpg"
            },
            {
              id: "3",
              name: "Emma Thompson",
              handle: "@emmathompson",
              rating: 5,
              testimonial: "The job placement support at Rubyroid goes above and beyond. Not only did I learn Ruby and Rails, but I also gained confidence in interviews and negotiations. My salary doubled after graduation!",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697891-iw1rgx1u.jpg"
            },
            {
              id: "4",
              name: "James Wilson",
              handle: "@jamescode",
              rating: 5,
              testimonial: "Best investment in my career. The mentorship and real-world projects prepared me for professional development like nothing else could. I highly recommend Rubyroid to anyone serious about tech.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492698706-udp5pns4.jpg"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Common Questions"
          description="Find answers about our programs and enrollment process"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          faqs={[
            {
              id: "1",
              title: "Do I need prior programming experience to enroll?",
              content: "No prior experience is required for our Foundation and Professional programs. We start from complete beginner level. Our Advanced program assumes some Ruby or programming knowledge. We offer a free assessment to help you choose the right program level."
            },
            {
              id: "2",
              title: "What is the time commitment?",
              content: "Our programs are full-time intensive courses. Foundation requires 12 weeks, Professional requires 16 weeks, and Advanced requires 20 weeks. Classes run Monday through Friday, approximately 8-10 hours per week including lectures, labs, and projects."
            },
            {
              id: "3",
              title: "Do you offer job placement assistance?",
              content: "Yes! All our programs include comprehensive job placement support including resume review, interview coaching, salary negotiation help, and direct connections to hiring partners. Our Professional program has a 95% job placement rate within 3 months of graduation."
            },
            {
              id: "4",
              title: "What payment options are available?",
              content: "We offer upfront payment, monthly installments, and deferred income share agreements for qualified students. We also partner with financing companies for flexible payment plans. Contact our enrollment team to discuss the best option for you."
            },
            {
              id: "5",
              title: "Is there a money-back guarantee?",
              content: "Yes! If you're not satisfied with your learning experience within the first 2 weeks, we offer a full refund. Additionally, our job guarantee ensures placement in a relevant role or a portion of tuition is refunded."
            },
            {
              id: "6",
              title: "What tools and technologies are covered?",
              content: "We cover Ruby, Rails, HTML, CSS, JavaScript, Git, PostgreSQL, and modern development workflows. You'll build real projects deployed to production and maintain GitHub portfolios. All tools and resources are included in tuition."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Start Your Journey"
          description="Enroll in Rubyroid today and transform your career. Our admissions team is ready to help you get started."
          useInvertedBackground="noInvert"
          buttonText="Submit"
          inputs={[
            {name: "fullName", type: "text", placeholder: "Full Name", required: true},
            {name: "email", type: "email", placeholder: "Email Address", required: true},
            {name: "phone", type: "tel", placeholder: "Phone Number", required: true},
            {name: "program", type: "text", placeholder: "Interested Program (Foundation/Professional/Advanced)", required: true}
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your background and goals",
            rows: 5,
            required: false
          }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Rubyroid"
          columns={[
            {
              title: "Programs",
              items: [
                {label: "Foundation Course", href: "#pricing"},
                {label: "Professional Bootcamp", href: "#pricing"},
                {label: "Advanced Program", href: "#pricing"}
              ]
            },
            {
              title: "Company",
              items: [
                {label: "About Us", href: "#about"},
                {label: "Success Stories", href: "#testimonial"},
                {label: "FAQ", href: "#faq"}
              ]
            },
            {
              title: "Contact",
              items: [
                {label: "hello@rubyroid.io", href: "mailto:hello@rubyroid.io"},
                {label: "Support", href: "#contact"},
                {label: "Careers", href: "#"}
              ]
            },
            {
              title: "Legal",
              items: [
                {label: "Terms of Service", href: "#"},
                {label: "Privacy Policy", href: "#"}
              ]
            }
          ]}
          copyrightText="© 2024 Rubyroid. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}