"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
import ProductCardSix from '@/components/sections/product/ProductCardSix';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
import { Zap, Target, Sparkles, Rocket, Award, Users, HelpCircle, Youtube, Linkedin, Twitter, Github, Star } from "lucide-react";

export default function Page() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="outline"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Start Code"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Courses", id: "courses" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Enroll Now",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Master Modern Technology"
          description="Learn industry-leading IT skills through hands-on training and expert instruction. Build your future in web development, cybersecurity, and data science."
          tag="IT Excellence"
          tagIcon={Zap}
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492693670-lj7ueobz.png",
              imageAlt: "Students coding in classroom"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672727126-a97a9rhj.jpg",
              imageAlt: "Developer working on computer"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672729251-otls1mux.jpg",
              imageAlt: "Programming code on screen"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492694761-e96hadsf.jpg",
              imageAlt: "IT classroom with computers"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672728464-s6bmwda4.jpg",
              imageAlt: "Collaborative team workspace"
            }
          ]}
          buttons={[
            {
              text: "Explore Courses",
              href: "courses"
            },
            {
              text: "Get in Touch",
              href: "contact"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <ParallaxAbout
          title="Building Future Tech Leaders"
          description="Start Code is dedicated to providing comprehensive IT education that bridges the gap between academic theory and real-world industry demands. Our expert instructors bring years of professional experience to every course, ensuring students gain practical skills needed for success."
          titleClassName="text-white"
          tag="About Us"
          tagIcon={Target}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672728464-s6bmwda4.jpg"
          imageAlt="Professional IT workspace"
          buttons={[
            {
              text: "Learn Our Mission",
              href: "contact"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwenty
          title="Why Choose Start Code"
          description="We offer a comprehensive approach to IT education with modern facilities, expert instruction, and job-focused curriculum that prepares you for real-world challenges."
          images={[
            {
              id: 1,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492695669-hy749o3o.jpg",
              imageAlt: "Web development training"
            },
            {
              id: 2,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672730035-e2exv3ex.jpg",
              imageAlt: "Backend programming instruction"
            },
            {
              id: 3,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766750470920-ue3bb9wg.jpg",
              imageAlt: "Database management course"
            },
            {
              id: 4,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672731012-02y7h7no.jpg",
              imageAlt: "Cybersecurity training"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Our Programs"
          tagIcon={Sparkles}
          buttons={[
            {
              text: "View All Programs",
              href: "courses"
            }
          ]}
        />
      </div>

      <div id="courses" data-section="courses">
        <ProductCardSix
          title="Our IT Courses"
          description="Choose from our carefully designed courses tailored to match industry demands and career advancement opportunities."
          tag="Enrollment"
          tagIcon={Rocket}
          products={[
            {
              id: "1",
              name: "Web Development Fundamentals",
              price: "$499",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672731963-dy25hbg0.jpg",
              imageAlt: "Web Development course"
            },
            {
              id: "2",
              name: "Python Programming Essentials",
              price: "$449",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766740382604-lxm5r8ne.jpg",
              imageAlt: "Python Programming course"
            },
            {
              id: "3",
              name: "Data Science & Analytics",
              price: "$599",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766750472136-03c1edmk.jpg",
              imageAlt: "Data Science course"
            },
            {
              id: "4",
              name: "Cybersecurity Mastery",
              price: "$649",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766750473080-tf9sz4t0.jpg",
              imageAlt: "Cybersecurity course"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          carouselMode="buttons"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "Browse All Courses",
              href: "contact"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484714329-4i8nds16.jpg",
              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",
              name: "Michael Chen",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492698706-udp5pns4.jpg",
              imageAlt: "Michael Chen"
            },
            {
              id: "3",
              name: "Emma Rodriguez",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766743064968-mn7r0vxe.jpg",
              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",
              name: "David Kim",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766743065834-k1ycryfc.jpg",
              imageAlt: "David Kim"
            }
          ]}
          cardTitle="Over 5,000 students have successfully completed our IT courses and launched their tech careers"
          cardTag="Student Success"
          cardTagIcon={Award}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFive
          title="Expert Instructors"
          description="Learn from industry professionals with years of real-world experience in software development, cybersecurity, and IT infrastructure."
          tag="Our Team"
          tagIcon={Users}
          team={[
            {
              id: "1",
              name: "Robert Chen",
              role: "Senior Developer & Course Lead",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484712325-ocj12p51.jpg",
              imageAlt: "Robert Chen"
            },
            {
              id: "2",
              name: "Lisa Patterson",
              role: "Cybersecurity Specialist",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484716089-kpbfo3ho.jpg",
              imageAlt: "Lisa Patterson"
            },
            {
              id: "3",
              name: "James Wilson",
              role: "Full Stack Developer",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697041-9adqfrju.jpg",
              imageAlt: "James Wilson"
            },
            {
              id: "4",
              name: "Amanda Foster",
              role: "Data Science Mentor",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484718833-8686x51w.jpg",
              imageAlt: "Amanda Foster"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team-linkedin" data-section="team-linkedin">
        <TeamCardTwo
          title="Connect With Our Team"
          description="Follow our instructors on LinkedIn to stay updated with industry insights and career opportunities."
          tag="Social"
          tagIcon={Users}
          members={[
            {
              id: "1",
              name: "Robert Chen",
              role: "Senior Developer & Course Lead",
              description: "Passionate about full-stack development and mentoring the next generation of tech professionals.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484712325-ocj12p51.jpg",
              imageAlt: "Robert Chen",
              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com/in/robertchen"
                }
              ]
            },
            {
              id: "2",
              name: "Lisa Patterson",
              role: "Cybersecurity Specialist",
              description: "Expert in network security and helping students build secure systems that protect organizations.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484716089-kpbfo3ho.jpg",
              imageAlt: "Lisa Patterson",
              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com/in/lisapatterson"
                }
              ]
            },
            {
              id: "3",
              name: "James Wilson",
              role: "Full Stack Developer",
              description: "Specializes in modern web technologies and helps students master front-end and back-end development.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697041-9adqfrju.jpg",
              imageAlt: "James Wilson",
              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com/in/jameswilson"
                }
              ]
            },
            {
              id: "4",
              name: "Amanda Foster",
              role: "Data Science Mentor",
              description: "Leads our data science curriculum and guides students in machine learning and AI applications.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484718833-8686x51w.jpg",
              imageAlt: "Amanda Foster",
              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com/in/amandafoster"
                }
              ]
            }
          ]}
          gridVariant="uniform-all-items-equal"
          carouselMode="buttons"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our courses, enrollment process, and learning experience."
          tag="Help & Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          faqs={[
            {
              id: "1",
              title: "What is the minimum experience level required?",
              content: "Our courses are designed for learners of all levels. We offer beginner-friendly courses for those new to IT, as well as advanced programs for experienced professionals looking to specialize."
            },
            {
              id: "2",
              title: "How long are the courses?",
              content: "Course duration varies from 4 weeks for intensive bootcamps to 12 weeks for comprehensive programs. We also offer flexible learning options with self-paced modules."
            },
            {
              id: "3",
              title: "Do you offer job placement assistance?",
              content: "Yes! We provide career counseling, resume review, interview preparation, and connect graduates with our network of hiring partners in the IT industry."
            },
            {
              id: "4",
              title: "What is your refund policy?",
              content: "We offer a 14-day money-back guarantee if you're not satisfied with your course. After 14 days, refunds are handled on a case-by-case basis."
            },
            {
              id: "5",
              title: "Do you offer flexible payment options?",
              content: "Yes, we support multiple payment methods including installment plans, corporate training discounts, and financing options for eligible students."
            },
            {
              id: "6",
              title: "Are courses available online?",
              content: "Most of our courses are available both in-person and online. Check individual course pages to see the available learning formats."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your career in technology? Get in touch with our enrollment team to discuss your learning goals and find the perfect course for you."
          animationType="reveal-blur"
          buttons={[
            {
              text: "Contact Us",
              href: "contact"
            },
            {
              text: "Schedule a Call",
              href: "contact"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseSocial
          logoText="Start Code"
          description="Empowering the next generation of IT professionals with quality education and career support."
          copyrightText="© 2025 Start Code. All rights reserved."
          columns={[
            {
              title: "Courses",
              items: [
                {
                  label: "Web Development",
                  href: "courses"
                },
                {
                  label: "Python Programming",
                  href: "courses"
                },
                {
                  label: "Data Science",
                  href: "courses"
                },
                {
                  label: "Cybersecurity",
                  href: "courses"
                }
              ]
            },
            {
              title: "Company",
              items: [
                {
                  label: "About Us",
                  href: "about"
                },
                {
                  label: "Team",
                  href: "team"
                },
                {
                  label: "Careers",
                  href: "contact"
                },
                {
                  label: "Contact",
                  href: "contact"
                }
              ]
            },
            {
              title: "Legal",
              items: [
                {
                  label: "Terms of Service",
                  href: "terms"
                },
                {
                  label: "Privacy Policy",
                  href: "privacy"
                }
              ]
            }
          ]}
          socialLinks={[
            {
              icon: Youtube,
              href: "https://youtube.com",
              ariaLabel: "YouTube"
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com",
              ariaLabel: "LinkedIn"
            },
            {
              icon: Twitter,
              href: "https://twitter.com",
              ariaLabel: "Twitter"
            },
            {
              icon: Github,
              href: "https://github.com",
              ariaLabel: "GitHub"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
