"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, Zap, Users, Award, TrendingUp, Globe, Code2, Home, BookOpen, Code, Cloud, Shield, Database, Server, Linkedin, Twitter, Github, Star, HelpCircle, Rocket } from "lucide-react";

export default function TechAcademyPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="compact"
      sizing="large"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="TechAcademy"
          navItems={[
            { name: "Courses", id: "features" },
            { name: "About", id: "about" },
            { name: "Team", id: "team" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Master Technology with Industry-Leading IT Education"
          description="Learn from expert instructors in web development, cloud computing, cybersecurity, and more. Start your tech career journey today with hands-on training and real-world projects."
          tag="Welcome to TechAcademy"
          tagIcon={Sparkles}
          buttons={[
            { text: "Explore Courses", href: "#features" },
            { text: "Start Learning", href: "#contact" }
          ]}
          background={{ variant: "radial-gradient" }}
          dashboard={{
            title: "Learning Analytics Hub",            logoIcon: Code2,
            imageSrc: "https://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169860.jpg",            searchPlaceholder: "Search courses...",            sidebarItems: [
              { icon: Home },
              { icon: BookOpen, active: true },
              { icon: Users }
            ],
            buttons: [
              { text: "Dashboard", href: "#" },
              { text: "My Courses", href: "#" }
            ],
            stats: [
              { title: "Courses", values: [45, 52, 68], description: "Available programs" },
              { title: "Students", values: [1250, 1890, 2450], description: "Active learners" },
              { title: "Completion", values: [87, 91, 94], valueSuffix: "%", description: "Success rate" }
            ],
            chartTitle: "Enrollment Growth",            chartData: [
              { value: 45 },
              { value: 60 },
              { value: 75 },
              { value: 90 },
              { value: 120 }
            ],
            listTitle: "Recent Enrollments",            listItems: [
              { icon: Code, title: "Full Stack Development", status: "Enrolled" },
              { icon: Cloud, title: "AWS Cloud Certification", status: "In Progress" },
              { icon: Shield, title: "Cybersecurity Essentials", status: "Completed" }
            ]
          }}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="TechAcademy is committed to transforming careers through practical, industry-focused IT education. We empower learners with cutting-edge skills and mentorship from experienced professionals."
          useInvertedBackground="invertDefault"
          metrics={[
            { icon: Users, label: "Students Trained", value: "5,000+" },
            { icon: Award, label: "Industry Certifications", value: "15+" },
            { icon: TrendingUp, label: "Job Placement Rate", value: "92%" },
            { icon: Globe, label: "Partner Companies", value: "200+" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Comprehensive Course Features"
          description="Our courses combine interactive learning environments, hands-on projects, and mentorship to ensure you master each technology."
          tag="Learning Tools"
          tagIcon={Zap}
          features={[
            {
              title: "Live Code Editor",              description: "Practice coding in real-time with syntax highlighting and instant feedback",              bentoComponent: "reveal-icon",              icon: Code
            },
            {
              title: "Interactive Assignments",              description: "Complete real-world projects that build your professional portfolio",              bentoComponent: "3d-task-list",              title: "Project Tasks",              items: [
                { icon: Code, label: "Build Web Applications", time: "4 weeks" },
                { icon: Database, label: "Database Design", time: "3 weeks" },
                { icon: Cloud, label: "Cloud Deployment", time: "2 weeks" }
              ]
            },
            {
              title: "Performance Metrics",              description: "Track your learning progress with detailed analytics and performance insights",              bentoComponent: "line-chart"
            },
            {
              title: "Expert Integrations",              description: "Connect with industry-standard tools and technologies used by professionals",              bentoComponent: "orbiting-icons",              centerIcon: Zap,
              items: [
                { icon: Code2, ring: 1 },
                { icon: Server, ring: 1 },
                { icon: Database, ring: 2 },
                { icon: Cloud, ring: 2 },
                { icon: Shield, ring: 3 }
              ]
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Our impact on the tech education industry continues to grow with every cohort of graduates."
          tag="Impact"
          useInvertedBackground="invertDefault"
          metrics={[
            {
              id: "1",              value: "10x",              description: "Increase in graduate salaries compared to industry average within 6 months"
            },
            {
              id: "2",              value: "98%",              description: "Student satisfaction rating based on course quality and instructor expertise"
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTwo
          title="Meet Our Expert Instructors"
          description="Learn from industry professionals with decades of combined experience in software development, cloud architecture, and cybersecurity."
          tag="Our Team"
          tagIcon={Users}
          members={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Lead Web Development Instructor",              description: "Former Senior Developer at major tech company. Specializes in full-stack development and modern JavaScript frameworks.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-young-business-person-doing-internship_23-2149305396.jpg",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Twitter, url: "https://twitter.com" }
              ]
            },
            {
              id: "2",              name: "Michael Chen",              role: "Cloud Architecture Expert",              description: "AWS Solutions Architect with 15+ years experience. Leads our cloud computing and DevOps training programs.",              imageSrc: "https://img.b2bpic.net/free-photo/mature-business-manager-office_1098-21368.jpg",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Github, url: "https://github.com" }
              ]
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Cybersecurity Specialist",              description: "Certified Ethical Hacker and security consultant. Passionate about teaching defensive and offensive security techniques.",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-smiley-woman-library_23-2149204753.jpg",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Globe, url: "https://example.com" }
              ]
            },
            {
              id: "4",              name: "James Wilson",              role: "Data Science & AI Instructor",              description: "PhD in Computer Science. Specializes in machine learning, AI algorithms, and data analytics applications.",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-woman-studying-math_23-2150444951.jpg",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Twitter, url: "https://twitter.com" }
              ]
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="two-columns-alternating-heights"
          carouselMode="buttons"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Success Stories from Our Graduates"
          description="Hear from students who transformed their careers through TechAcademy's comprehensive programs and expert mentorship."
          tag="Testimonials"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              title: "Career transformation through hands-on learning",              quote: "TechAcademy completely changed my career trajectory. The practical projects and expert guidance helped me land my dream job as a full-stack developer within 3 months of graduation.",              name: "Alex Patterson",              role: "Senior Developer at Tech Corp",              imageSrc: "https://img.b2bpic.net/free-photo/cheerful-young-man-holding-folder-outdoor_74855-2121.jpg"
            },
            {
              id: "2",              title: "From zero to cloud architect",              quote: "Starting with no cloud experience, I completed the AWS certification program and now architect cloud solutions for enterprise clients. The instructors were incredibly supportive.",              name: "Maria Garcia",              role: "Cloud Architect at CloudSystems",              imageSrc: "https://img.b2bpic.net/free-photo/blonde-young-woman-smiling-portrait-wearing-blue-gentle-shirt-building_158595-6609.jpg"
            },
            {
              id: "3",              title: "Cybersecurity career breakthrough",              quote: "The cybersecurity bootcamp prepared me perfectly for the CEH exam. I'm now protecting critical infrastructure and earning significantly more than before.",              name: "David Kim",              role: "Security Engineer at DefenseSecure",              imageSrc: "https://img.b2bpic.net/free-photo/blonde-young-woman-smiling-portrait-wearing-blue-gentle-shirt-building_158595-6612.jpg"
            },
            {
              id: "4",              title: "Advanced skills in data science",              quote: "The data science program equipped me with machine learning skills I use daily. My projects from the course impressed my current employer tremendously.",              name: "Jessica Lee",              role: "Data Scientist at Analytics Inc",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg"
            },
            {
              id: "5",              title: "Accelerated learning experience",              quote: "The curriculum is rigorous yet approachable. The community of learners and instructors created an environment where I could truly excel and grow.",              name: "Robert Taylor",              role: "Software Engineer at InnovateTech",              imageSrc: "https://img.b2bpic.net/free-photo/student-posing-group-study-session-with-colleagues_23-2149211075.jpg"
            },
            {
              id: "6",              title: "Best investment in my future",              quote: "I've completed multiple bootcamps before, but TechAcademy stands out for their world-class instructors and job placement support. Highly recommended!",              name: "Amanda Chen",              role: "DevOps Engineer at CloudFirst",              imageSrc: "https://img.b2bpic.net/free-photo/vertical-portrait-young-successful-woman-employee-entrepreneur-office-hall-tutor-carry-laptop-notebooks-looking-away-with-satisfied-pleased-smile-like-her-job_197531-30584.jpg"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Flexible Learning Plans"
          description="Choose the perfect plan for your learning journey. All plans include lifetime access to course materials and community support."
          tag="Pricing"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: "1",              price: "$499",              name: "Starter Course",              buttons: [
                { text: "Enroll Now", href: "#contact" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "One course access",                "Video lessons and tutorials",                "Project assignments",                "Certificate of completion",                "Email support"
              ]
            },
            {
              id: "2",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$1,299",              name: "Professional Bundle",              buttons: [
                { text: "Get Started", href: "#contact" },
                { text: "Chat with Us", href: "#" }
              ],
              features: [
                "3 courses included",                "Live group sessions",                "1-on-1 mentorship",                "Job placement assistance",                "Industry certifications",                "Priority support"
              ]
            },
            {
              id: "3",              price: "$2,499",              name: "Premium Bootcamp",              buttons: [
                { text: "Join Bootcamp", href: "#contact" },
                { text: "Schedule Demo", href: "#" }
              ],
              features: [
                "All courses unlimited",                "Intensive 12-week program",                "Daily mentorship sessions",                "Guaranteed job placement",                "Tech interview prep",                "Career coaching",                "Lifetime alumni benefits"
              ]
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about our courses, enrollment, and learning experience."
          tag="Help & Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "Do I need prior programming experience?",              content: "No! Our courses are designed for beginners. We start with fundamentals and progress to advanced topics. If you're experienced, you can skip foundational modules."
            },
            {
              id: "2",              title: "What is the course duration?",              content: "Course lengths vary. Starter courses are 4-8 weeks, Professional Bundles are 12 weeks, and our Premium Bootcamp is intensive at 12 weeks full-time. You can also learn at your own pace with lifetime access."
            },
            {
              id: "3",              title: "Will I get a job after completing the course?",              content: "Our Premium Bootcamp includes job placement assistance with a 92% placement rate. We provide interview prep, resume help, and connect you with hiring partners. Other plans include community job board access."
            },
            {
              id: "4",              title: "Can I get a refund?",              content: "Yes, we offer a 14-day money-back guarantee if you're not satisfied. After 14 days, refunds are available for unused courses with 30 days notice."
            },
            {
              id: "5",              title: "Do you offer certificates?",              content: "All courses include completion certificates. Our Professional and Premium plans also include industry-recognized certifications (AWS, CEH, etc.) that boost your resume."
            },
            {
              id: "6",              title: "Is there financial aid available?",              content: "Yes! We offer payment plans, scholarship programs for underrepresented groups, and corporate training discounts. Contact our enrollment team for more details."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Start?"
          tagIcon={Rocket}
          title="Begin Your IT Education Journey Today"
          description="Join thousands of successful graduates who have transformed their careers with TechAcademy. Our expert instructors and comprehensive curriculum are ready to guide you every step of the way."
          buttons={[
            { text: "Enroll Now", href: "#" },
            { text: "Free Consultation", href: "#" }
          ]}
          background={{ variant: "gradient-bars" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="TechAcademy"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}