"use client"

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardTwentyTwo from '@/components/sections/feature/FeatureCardTwentyTwo';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Sparkles, BookOpen, Lightbulb, TrendingUp, Users, Star, HelpCircle, Phone, Github, Linkedin, Globe, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLarge"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="TechAcademy"
          navItems={[
            { name: "Courses", id: "courses" },
            { name: "About", id: "about" },
            { name: "Instructors", id: "team" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Enroll Now",            href: "#contact"
          }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Master In-Demand Tech Skills"
          description="Transform your career with industry-leading IT training. Learn from expert instructors, work on real projects, and launch your tech career with our comprehensive academy programs."
          tag="Professional IT Training"
          tagIcon={Sparkles}
          background={{ variant: "plain" }}
          buttons={[
            { text: "Explore Courses", href: "#courses" },
            { text: "Free Consultation", href: "#contact" }
          ]}
          carouselItems={[
            { id: "1", imageSrc: "https://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891341.jpg", imageAlt: "Web Development Course" },
            { id: "2", imageSrc: "https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg", imageAlt: "Full Stack Development" },
            { id: "3", imageSrc: "https://img.b2bpic.net/free-photo/guy-girl-are-sitting-table-african-girl-computer-science-class-kids-playing-computer-games_1157-42298.jpg", imageAlt: "Data Science Training" },
            { id: "4", imageSrc: "https://img.b2bpic.net/free-photo/close-up-kid-while-having-technology-education-class_23-2149123764.jpg", imageAlt: "Cybersecurity Course" },
            { id: "5", imageSrc: "https://img.b2bpic.net/free-photo/children-having-technology-education-class_23-2149123760.jpg", imageAlt: "Cloud Computing" },
            { id: "6", imageSrc: "https://img.b2bpic.net/free-photo/mixed-race-boy-glasses-rising-hand-answer-lesson_74855-10276.jpg", imageAlt: "IT Training Programs" }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>
      
      <div id="courses" data-section="courses">
        <ProductCardTwo
          title="Featured Courses"
          description="Choose from our carefully curated selection of IT courses designed to meet industry standards and prepare you for real-world challenges."
          tag="Popular Programs"
          tagIcon={BookOpen}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              brand: "Fundamentals",              name: "Web Development Bootcamp",              price: "$1,299",              rating: 5,
              reviewCount: "312",              imageSrc: "https://img.b2bpic.net/free-photo/pupils-doing-task-laptops-focused-teacher-monitoring-them_74855-10356.jpg",              imageAlt: "Web Development Course"
            },
            {
              id: "2",              brand: "Advanced",              name: "Python & Backend Development",              price: "$1,499",              rating: 5,
              reviewCount: "287",              imageSrc: "https://img.b2bpic.net/free-photo/children-learns-work-computer-african-girl-sitting-table-boy-girl-computer-science-class_1157-42301.jpg",              imageAlt: "Python Programming Course"
            },
            {
              id: "3",              brand: "Enterprise",              name: "Cloud Architecture & AWS",              price: "$1,699",              rating: 5,
              reviewCount: "198",              imageSrc: "https://img.b2bpic.net/free-photo/children-having-technology-education-class_23-2149123776.jpg",              imageAlt: "Cloud Computing Course"
            }
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <MediaAbout
          title="About TechAcademy"
          description="We're dedicated to bridging the skills gap in the tech industry. With over 10 years of experience, we've trained thousands of professionals who now work at leading companies worldwide. Our mission is to empower the next generation of tech innovators."
          tag="Our Story"
          imageSrc="https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg"
          imageAlt="TechAcademy Learning Environment"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn More", href: "#" }
          ]}
        />
      </div>
      
      <div id="features" data-section="features">
        <FeatureCardTwentyTwo
          title="Learning Paths for Every Goal"
          description="Our structured learning paths are designed by industry experts to ensure you gain practical, job-ready skills."
          tag="Curriculum"
          tagIcon={Lightbulb}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          features={[
            {
              id: "1",              category: ["Beginner", "12 Weeks"],
              title: "Frontend Fundamentals: HTML, CSS & JavaScript Mastery",              imageSrc: "https://img.b2bpic.net/free-photo/pupils-doing-task-laptops-focused-teacher-monitoring-them_74855-10356.jpg",              imageAlt: "Frontend Development Path"
            },
            {
              id: "2",              category: ["Intermediate", "16 Weeks"],
              title: "Backend Development: Python, Databases & APIs",              imageSrc: "https://img.b2bpic.net/free-photo/children-learns-work-computer-african-girl-sitting-table-boy-girl-computer-science-class_1157-42301.jpg",              imageAlt: "Backend Development Path"
            }
          ]}
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Why Choose TechAcademy"
          description="Our proven track record speaks for itself. See the impact of our training programs."
          tag="By The Numbers"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            { id: "1", icon: Users, title: "Students Trained", value: "5,000+" },
            { id: "2", icon: Sparkles, title: "Job Placements", value: "4,200+" },
            { id: "3", icon: Star, title: "Success Rate", value: "94%" },
            { id: "4", icon: BookOpen, title: "Partner Companies", value: "250+" }
          ]}
        />
      </div>
      
      <div id="team" data-section="team">
        <TeamCardTwo
          title="Meet Our Expert Instructors"
          description="Learn from seasoned professionals with years of industry experience and a passion for teaching."
          tag="Instructors"
          tagIcon={Users}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          gridVariant="four-items-2x2-equal-grid"
          members={[
            {
              id: "1",              name: "Sarah Chen",              role: "Full Stack Engineer",              description: "15+ years at Fortune 500 tech companies. Expert in web development and cloud architecture.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg",              imageAlt: "Sarah Chen",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Github, url: "https://github.com" }
              ]
            },
            {
              id: "2",              name: "Marcus Rodriguez",              role: "Data Science Lead",              description: "PhD in Computer Science. Published researcher specializing in machine learning and AI.",              imageSrc: "https://img.b2bpic.net/free-photo/computer-scientist-server-farm-ensuring-compliance-with-industry-standards_482257-123806.jpg",              imageAlt: "Marcus Rodriguez",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Globe, url: "https://example.com" }
              ]
            },
            {
              id: "3",              name: "Priya Patel",              role: "Cybersecurity Expert",              description: "Certified security architect with hands-on experience securing enterprise systems.",              imageSrc: "https://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg",              imageAlt: "Priya Patel",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Twitter, url: "https://twitter.com" }
              ]
            },
            {
              id: "4",              name: "James Wilson",              role: "DevOps Architect",              description: "Cloud infrastructure specialist with AWS and Kubernetes certifications.",              imageSrc: "https://img.b2bpic.net/free-photo/man-using-laptop-office_23-2147807984.jpg",              imageAlt: "James Wilson",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Github, url: "https://github.com" }
              ]
            }
          ]}
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Success Stories from Our Students"
          description="Hear from graduates who've transformed their careers through TechAcademy training."
          tag="Testimonials"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          testimonials={[
            {
              id: "1",              name: "Alex Thompson",              role: "Frontend Developer",              company: "Tech Startup Inc",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/workers-it-company-working-computer_1303-19431.jpg",              imageAlt: "Alex Thompson"
            },
            {
              id: "2",              name: "Jessica Lee",              role: "Backend Engineer",              company: "Fortune 500 Company",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/woman-man-working-with-laptop_23-2149332972.jpg",              imageAlt: "Jessica Lee"
            },
            {
              id: "3",              name: "Michael Johnson",              role: "DevOps Engineer",              company: "Cloud Solutions Ltd",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/executive-assistant-multinational-company-work-big-business-project_482257-113916.jpg",              imageAlt: "Michael Johnson"
            },
            {
              id: "4",              name: "Emily Rodriguez",              role: "Data Scientist",              company: "Analytics Corp",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-exhausted-workaholic-man-manager-typing-financial-strategy-using-laptop-computer-while-sitting-desk-table-business-company-office_482257-2321.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "5",              name: "David Kim",              role: "Security Analyst",              company: "Cybersecurity Firm",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/financial-department-team-leader-researching-marketing-ideas-while-analyzing-company-expenses-report-startup-project-manager-developing-budget-growth-solutions-while-brainstorming-promoting-strategy_482257-38904.jpg",              imageAlt: "David Kim"
            },
            {
              id: "6",              name: "Sophie Martin",              role: "Full Stack Developer",              company: "Digital Agency",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-labor-union-member_23-2150969905.jpg",              imageAlt: "Sophie Martin"
            }
          ]}
        />
      </div>
      
      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about our courses, enrollment, and career support."
          tag="Help"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/am-i-doing-it-right-group-young-people-casual-clothes-working-modern-office_146671-16514.jpg"
          imageAlt="Learning Support"
          mediaPosition="left"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What are the prerequisites for enrolling?",              content: "Most of our beginner courses require no prior experience. However, intermediate and advanced courses typically expect basic programming knowledge or completion of foundational courses."
            },
            {
              id: "2",              title: "Do you offer job placement assistance?",              content: "Yes! We provide comprehensive career support including resume coaching, interview preparation, and direct connections with our 250+ partner companies."
            },
            {
              id: "3",              title: "What is the course duration and schedule?",              content: "Our courses range from 12 to 16 weeks depending on the program. Classes are offered both full-time and part-time to accommodate different schedules."
            },
            {
              id: "4",              title: "Is there a refund policy?",              content: "We offer a 14-day money-back guarantee if you're not satisfied with the course. After that, we work with students on a case-by-case basis."
            },
            {
              id: "5",              title: "Do you provide certificates upon completion?",              content: "Absolutely! All graduates receive industry-recognized certificates that are valued by employers. Many of our certifications are also stackable toward advanced credentials."
            },
            {
              id: "6",              title: "What learning resources are available?",              content: "Students get access to recorded lectures, live coding sessions, project repositories, peer collaboration spaces, and one-on-one mentoring with instructors."
            }
          ]}
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Start Your Tech Career Today"
          ctaDescription="Get personalized guidance from our enrollment specialists. Book a free consultation to explore the perfect course for your goals."
          ctaButton={{
            text: "Schedule Free Consultation",            href: "https://calendly.com"
          }}
          ctaIcon={Phone}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          faqs={[
            {
              id: "1",              title: "How do I get started?",              content: "Simply click the button below to schedule a free consultation with one of our enrollment advisors who can assess your goals and recommend the best program for you."
            },
            {
              id: "2",              title: "What payment options are available?",              content: "We accept credit cards, bank transfers, and offer flexible payment plans. We also work with eligible students on financing options and scholarships."
            },
            {
              id: "3",              title: "Can I switch courses if needed?",              content: "Yes, we understand that needs change. Within the first two weeks, you can switch to a different course at no additional cost."
            },
            {
              id: "4",              title: "Is there student support during the course?",              content: "Absolutely! Each student has access to a dedicated success coach, peer study groups, and instructor office hours to ensure you stay on track."
            }
          ]}
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="TechAcademy"
          columns={[
            {
              items: [
                { label: "Courses", href: "#courses" },
                { label: "Instructors", href: "#team" },
                { label: "About", href: "#about" }
              ]
            },
            {
              items: [
                { label: "Testimonials", href: "#testimonials" },
                { label: "FAQ", href: "#faq" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              items: [
                { label: "Blog", href: "#" },
                { label: "Community", href: "#" },
                { label: "Support", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}