"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import TeamCardFour from '@/components/sections/team/TeamCardFour';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import PricingCardFour from '@/components/sections/pricing/PricingCardFour';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Users, Award, TrendingUp, Globe, Phone, Linkedin, Twitter, Github, Mail } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={[
            { name: "About", id: "about" },
            { name: "Courses", id: "features" },
            { name: "Team", id: "team" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="Boolba"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Master IT Skills for Tomorrow's Digital World"
          description="Learn coding, web development, and software engineering from industry experts. Join Boolba and transform your career with hands-on training."
          tag="Trusted by 500+ Students"
          tagIcon={Sparkles}
          kpis={[
            { value: "500+", label: "Successful Graduates" },
            { value: "95%", label: "Job Placement Rate" },
            { value: "12 Weeks", label: "Average Course Duration" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697050769-ajyn958r.jpg"
          imageAlt="Students learning IT at Boolba"
          imagePosition="right"
          buttons={[
            { text: "Explore Courses", href: "#features" },
            { text: "Schedule Demo", href: "#contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Boolba is transforming IT education by providing industry-aligned training, hands-on projects, and direct pathways to tech careers for aspiring developers."
          useInvertedBackground="noInvert"
          metrics={[
            { icon: Users, label: "Active Students", value: "1,200+" },
            { icon: Award, label: "Certified Instructors", value: "45+" },
            { icon: TrendingUp, label: "Career Success Rate", value: "95%" },
            { icon: Globe, label: "Global Alumni Network", value: "2,500+" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNineteen
          title="Our Learning Journey"
          description="A structured approach to transform you into a confident, job-ready developer in just 12 weeks."
          tag="How It Works"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              tag: "Foundation",              title: "Curriculum Design",              subtitle: "Expert-crafted learning paths",              description: "We design comprehensive curricula covering fundamentals to advanced topics, aligned with current industry standards and employer needs.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697052769-3x6qa1zf.jpg",              imageAlt: "Curriculum planning and design"
            },
            {
              id: 2,
              tag: "Intensive Training",              title: "Hands-On Learning",              subtitle: "Real-world coding projects",              description: "Engage in live coding sessions, pair programming, and build real applications. Learn by doing with mentorship from industry professionals.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697053390-75pqhb4j.jpg",              imageAlt: "Hands-on coding training"
            },
            {
              id: 3,
              tag: "Portfolio Building",              title: "Project Showcase",              subtitle: "Demonstrate your skills",              description: "Create a portfolio of 5-7 production-ready projects. Showcase your work to potential employers and stand out in the job market.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697054232-a8pbtjxg.jpg",              imageAlt: "Project development and portfolio"
            },
            {
              id: 4,
              tag: "Career Launch",              title: "Job Placement",              subtitle: "Your next opportunity",              description: "Get connected with our network of hiring partners. Receive interview prep, resume coaching, and direct job opportunities.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697054838-bf94komj.jpg",              imageAlt: "Career advancement and job placement"
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFour
          title="Meet Our Expert Faculty"
          description="Experienced instructors from top tech companies bringing real-world expertise to your learning journey."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          tag="Instructors"
          tagIcon={Users}
          speed={35}
          topMarqueeDirection="left"
          team={[
            {
              id: "1",              name: "Sarah Chen",              role: "Full Stack Developer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697055844-bud5ozhp.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "2",              name: "Michael Rodriguez",              role: "DevOps Engineer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697056709-art94pof.jpg",              imageAlt: "Michael Rodriguez"
            },
            {
              id: "3",              name: "Emily Watson",              role: "UI/UX Designer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697057202-nlep5jac.jpg",              imageAlt: "Emily Watson"
            },
            {
              id: "4",              name: "James Park",              role: "Backend Specialist",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697059131-9at7ja7u.jpg",              imageAlt: "James Park"
            },
            {
              id: "5",              name: "Lisa Thompson",              role: "React Specialist",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697059836-z5qzengd.jpg",              imageAlt: "Lisa Thompson"
            },
            {
              id: "6",              name: "David Kumar",              role: "Database Expert",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697060582-20fblxee.jpg",              imageAlt: "David Kumar"
            },
            {
              id: "7",              name: "Amanda Scott",              role: "Mobile Developer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697061917-4yv3f233.jpg",              imageAlt: "Amanda Scott"
            },
            {
              id: "8",              name: "Chris Martinez",              role: "Cloud Architect",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697062506-mz8cwei8.jpg",              imageAlt: "Chris Martinez"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Success Stories from Our Graduates"
          description="Hear directly from students who transformed their careers with Boolba's intensive training programs."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              title: "From Zero to Hired in 3 Months",              quote: "I had no coding experience when I joined Boolba. The structured curriculum and supportive instructors helped me land my first developer job at a startup. The hands-on projects were instrumental in building my confidence.",              name: "Priya Sharma",              role: "Junior Frontend Developer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697063133-6eci8oej.jpg",              imageAlt: "Priya Sharma"
            },
            {
              id: "2",              title: "Career Pivot Made Easy",              quote: "Coming from a non-tech background, I was nervous about switching careers. Boolba's mentors made the transition smooth and manageable. I'm now a full-stack developer earning 40% more than before.",              name: "Marcus Johnson",              role: "Full Stack Developer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697063883-afn1u5vy.jpg",              imageAlt: "Marcus Johnson"
            },
            {
              id: "3",              title: "Real Skills, Real Results",              quote: "The projects I built at Boolba became my portfolio pieces. When I interviewed for jobs, companies were impressed with the quality and complexity. I had 3 offers by week 2 of job searching!",              name: "Jessica Lee",              role: "React Developer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697064540-3eooms2g.jpg",              imageAlt: "Jessica Lee"
            },
            {
              id: "4",              title: "Supportive Community, Excellent Training",              quote: "The community at Boolba is amazing. Even after graduation, the alumni network continues to help. The job placement support was exceptional and helped me negotiate a great package.",              name: "Alex Chen",              role: "Backend Engineer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697065187-2i8urngf.jpg",              imageAlt: "Alex Chen"
            },
            {
              id: "5",              title: "Investment That Paid Off",              quote: "The bootcamp tuition was worth every penny. I increased my salary by 60% and landed a senior role within 6 months of graduation. The skills gap is real, and Boolba fills it perfectly.",              name: "Sophia Rodriguez",              role: "Senior Developer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697065808-2lshpvwb.jpg",              imageAlt: "Sophia Rodriguez"
            },
            {
              id: "6",              title: "More Than Just Coding",              quote: "Boolba teaches not just coding but professional skills, communication, and collaboration. These soft skills matter as much as technical knowledge in the real world.",              name: "Nathan Brooks",              role: "DevOps Engineer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767697066921-5bop817t.jpg",              imageAlt: "Nathan Brooks"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFour
          title="Invest in Your Future"
          tag="Course Pricing"
          tagIcon={Sparkles}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          ctaCards={[
            {
              title: "Talk to an Advisor",              description: "Unsure which course is right for you? Schedule a free consultation with our educational advisors.",              href: "#contact"
            },
            {
              title: "Flexible Payment Plans",              description: "We offer installment options and financing partners to make education accessible to everyone.",              href: "#contact"
            }
          ]}
          plans={[
            {
              id: "foundations",              name: "Web Foundations",              price: "$3,999",              subtitle: "Perfect for complete beginners",              features: [
                "8-week program",                "HTML, CSS, JavaScript basics",                "3 guided projects",                "Career coaching sessions",                "Alumni community access",                "Certificate of completion"
              ]
            },
            {
              id: "fullstack",              name: "Full Stack Bootcamp",              price: "$7,999",              subtitle: "Most popular choice",              features: [
                "12-week intensive program",                "Frontend & Backend mastery",                "7 production projects",                "Resume & portfolio review",                "Weekly mentorship",                "Job placement assistance",                "6-month career support"
              ]
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Get answers to common questions about Boolba's programs, curriculum, and career support."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Help"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "Do I need prior coding experience?",              content: "No! Our Foundations program is designed for complete beginners. If you have some experience, we recommend Full Stack Bootcamp or Advanced Development."
            },
            {
              id: "2",              title: "How long are the courses?",              content: "Our programs range from 8-12 weeks of full-time intensive training. We also offer part-time options that extend over 16-24 weeks."
            },
            {
              id: "3",              title: "What is the job placement rate?",              content: "Our graduates have a 95% job placement rate within 6 months of graduation. We provide resume review, interview coaching, and direct connections to hiring partners."
            },
            {
              id: "4",              title: "Will I actually build projects?",              content: "Absolutely! You'll build 5-7 real projects from concept to deployment. These become portfolio pieces you can show to employers."
            },
            {
              id: "5",              title: "What technologies do you teach?",              content: "We teach modern tech stacks including JavaScript/React, Node.js, MongoDB, PostgreSQL, DevOps tools, and more. Our curriculum is updated quarterly."
            },
            {
              id: "6",              title: "Are there payment options?",              content: "Yes! We offer installment plans, Income Share Agreements (ISA), and partnerships with financing companies to make training accessible."
            },
            {
              id: "7",              title: "What if I can't keep up?",              content: "We provide unlimited tutoring, peer support groups, and mentor office hours. Our instructors are committed to your success."
            },
            {
              id: "8",              title: "Do you offer career support after graduation?",              content: "Yes! We provide 6 months of career support including job search assistance, interview prep, salary negotiation coaching, and alumni networking events."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Start Your IT Journey Today"
          ctaDescription="Schedule a free consultation with our advisors to discuss which program is right for you."
          ctaButton={{
            text: "Book a Free Call",            href: "https://calendly.com/boolba-demo"
          }}
          ctaIcon={Phone}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          showCard={true}
          faqs={[
            {
              id: "1",              title: "What should I prepare for the consultation?",              content: "Come with questions about your career goals, background, and learning preferences. We'll assess your needs and recommend the best program for you."
            },
            {
              id: "2",              title: "How do I apply for a course?",              content: "After your consultation, you'll complete a simple online application. We review your background and provide an admission decision within 48 hours."
            },
            {
              id: "3",              title: "What is your refund policy?",              content: "We offer a 2-week full refund guarantee if you're not satisfied. We're confident you'll love the program, but your satisfaction is our priority."
            },
            {
              id: "4",              title: "Can I defer my start date?",              content: "Yes! You can defer your enrollment for up to 6 months at no additional cost. We understand life happens, and we want to support your timeline."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Boolba"
          copyrightText="© 2025 Boolba IT School. All rights reserved."
          socialLinks={[
            {
              icon: Linkedin,
              href: "https://linkedin.com/company/boolba",              ariaLabel: "LinkedIn"
            },
            {
              icon: Twitter,
              href: "https://twitter.com/boolba_io",              ariaLabel: "Twitter"
            },
            {
              icon: Github,
              href: "https://github.com/boolba",              ariaLabel: "GitHub"
            },
            {
              icon: Mail,
              href: "mailto:hello@boolba.io",              ariaLabel: "Email"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}