"use client"

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardTwentyTwo from '@/components/sections/feature/FeatureCardTwentyTwo';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Sparkles, BookOpen, Users, TrendingUp, Award, Target } from "lucide-react";
import HeroBillboard1 from '@/components/sections/hero/HeroBillboard1';

export default function TechAcademyPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="none"
      cardStyle="elevated"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="TechMasters"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Courses", id: "courses" },
            { name: "About", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Enroll Now",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Master In-Demand Tech Skills"
          description="Learn from industry experts and transform your career with our comprehensive IT academy. Hands-on courses in web development, data science, cloud computing, and more."
          background={{ variant: "radial-gradient" }}
          tag="Welcome to TechMasters"
          tagIcon={Sparkles}
          buttons={[
            { text: "Start Learning", href: "courses" },
            { text: "Explore Courses", href: "courses" }
          ]}
          mediaItems={[
            { imageSrc: "https://img.b2bpic.net/free-photo/learning-concept-close-up-student-using-laptop-alibrary_1150-16609.jpg", imageAlt: "Student coding on laptop" },
            { imageSrc: "https://img.b2bpic.net/free-photo/young-man-learning-virtual-classroom_23-2149200181.jpg", imageAlt: "Developer at workspace" },
            { imageSrc: "https://img.b2bpic.net/free-photo/row-serious-focused-coworkers-sitting-table-typing-laptops_74855-10363.jpg", imageAlt: "Software engineer professional" },
            { imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-woman-reading-coffee-shop_23-2150183751.jpg", imageAlt: "Online course in progress" },
            { imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-woman-reading-coffee-shop_23-2150183754.jpg", imageAlt: "Training workshop session" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="Empowering the Next Generation of Tech Leaders Through Quality Education and Mentorship"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Learn Our Mission", href: "#" }
          ]}
        />
      </div>

      <div id="courses" data-section="courses">
        <FeatureCardTwentyTwo
          title="Our Popular Courses"
          description="Comprehensive learning pathways designed by industry professionals to prepare you for real-world challenges"
          tag="Courses"
          tagIcon={BookOpen}
          features={[
            {
              id: "1",              title: "Full Stack Web Development: From Frontend to Backend Mastery",              category: ["Web Development", "JavaScript", "React"],
              imageSrc: "https://img.b2bpic.net/free-photo/person-front-computer-working-html_23-2150040428.jpg",              imageAlt: "Web development course"
            },
            {
              id: "2",              title: "Data Science & Machine Learning: Unlock Predictive Analytics Power",              category: ["Data Science", "Python", "AI"],
              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-collage_23-2149901777.jpg",              imageAlt: "Data science course"
            },
            {
              id: "3",              title: "Cloud Computing with AWS: Build Scalable Infrastructure",              category: ["Cloud", "AWS", "DevOps"],
              imageSrc: "https://img.b2bpic.net/free-photo/person-front-computer-working-html_23-2150040416.jpg",              imageAlt: "Cloud computing course"
            },
            {
              id: "4",              title: "Cybersecurity Fundamentals: Protect Your Digital Assets",              category: ["Security", "Networking", "Protection"],
              imageSrc: "https://img.b2bpic.net/free-photo/person-front-computer-working-html_23-2150040428.jpg",              imageAlt: "Cybersecurity course"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View All Courses", href: "#" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Our Impact by Numbers"
          description="Trusted by thousands of students and employers worldwide"
          metrics={[
            {
              id: "1",              value: "5000",              title: "Students Trained",              description: "Successful learners completing our programs",              icon: Users
            },
            {
              id: "2",              value: "95",              title: "% Job Placement",              description: "Graduates landing roles within 3 months",              icon: TrendingUp
            },
            {
              id: "3",              value: "50",              title: "Industry Partners",              description: "Leading tech companies hiring our graduates",              icon: Award
            },
            {
              id: "4",              value: "100",              title: "Expert Instructors",              description: "Certified professionals with real-world experience",              icon: Target
            }
          ]}
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardEleven
          title="Meet Our Expert Team"
          description="World-class instructors dedicated to your success"
          groups={[
            {
              id: "senior-team",              groupTitle: "Senior Instructors",              members: [
                {
                  id: "1",                  title: "Sarah Mitchell",                  subtitle: "Lead Web Developer",                  detail: "sarah.mitchell@techacademy.com",                  imageSrc: "https://img.b2bpic.net/free-photo/mid-shot-counselor-cabinet_23-2148759108.jpg",                  imageAlt: "Sarah Mitchell"
                },
                {
                  id: "2",                  title: "Alex Chen",                  subtitle: "Data Science Lead",                  detail: "alex.chen@techacademy.com",                  imageSrc: "https://img.b2bpic.net/free-photo/closeup-senior-lecturer-with-arms-crossed_1262-1753.jpg",                  imageAlt: "Alex Chen"
                },
                {
                  id: "3",                  title: "Marcus Johnson",                  subtitle: "Cloud Architecture Expert",                  detail: "marcus.johnson@techacademy.com",                  imageSrc: "https://img.b2bpic.net/free-photo/close-up-young-business-person-doing-internship_23-2149305396.jpg",                  imageAlt: "Marcus Johnson"
                }
              ]
            },
            {
              id: "support-team",              groupTitle: "Mentors & Support",              members: [
                {
                  id: "4",                  title: "Emma Wilson",                  subtitle: "Career Mentor",                  detail: "emma.wilson@techacademy.com",                  imageSrc: "https://img.b2bpic.net/free-photo/mature-business-manager-office_1098-21368.jpg",                  imageAlt: "Emma Wilson"
                },
                {
                  id: "5",                  title: "David Park",                  subtitle: "Technical Support Lead",                  detail: "david.park@techacademy.com",                  imageSrc: "https://img.b2bpic.net/free-photo/mid-shot-counselor-cabinet_23-2148759108.jpg",                  imageAlt: "David Park"
                }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Students Say"
          description="Real success stories from graduates who transformed their careers"
          testimonials={[
            {
              id: "1",              name: "James Rodriguez",              role: "Junior Developer",              company: "Tech Startup Inc",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "James Rodriguez"
            },
            {
              id: "2",              name: "Lisa Wong",              role: "Data Analyst",              company: "Fortune 500 Corp",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-bearded-man-busines-clothes-with-crossed-arms-looking-camera-gray_171337-11335.jpg",              imageAlt: "Lisa Wong"
            },
            {
              id: "3",              name: "Ahmed Hassan",              role: "Cloud Engineer",              company: "Global Tech Solutions",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5368.jpg",              imageAlt: "Ahmed Hassan"
            },
            {
              id: "4",              name: "Rachel Green",              role: "Full Stack Developer",              company: "Digital Agency Pro",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/man-button-up-his-jacket-smiles_23-2148401389.jpg",              imageAlt: "Rachel Green"
            },
            {
              id: "5",              name: "Michael Torres",              role: "DevOps Engineer",              company: "Cloud Infrastructure Co",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/handsome-young-man-posing_158595-3050.jpg",              imageAlt: "Michael Torres"
            },
            {
              id: "6",              name: "Sophia Patel",              role: "Machine Learning Engineer",              company: "AI Innovation Labs",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-confident-businessman_107420-84879.jpg",              imageAlt: "Sophia Patel"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          carouselMode="buttons"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardNine
          title="Best Pricing Plans"
          description="Choose the perfect plan for your learning journey and budget"
          plans={[
            {
              id: "starter",              title: "Starter",              price: "$99",              period: "/month",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-holding-face-brushes-smiling_259150-60140.jpg",              imageAlt: "Starter plan",              button: {
                text: "Get Started",                href: "contact"
              },
              features: [
                "Access to 5 beginner courses",                "Community forum access",                "Email support",                "Certificate of completion",                "30-day money-back guarantee"
              ]
            },
            {
              id: "professional",              title: "Professional",              price: "$299",              period: "/month",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-bride-getting-ready-event_23-2149721976.jpg",              imageAlt: "Professional plan",              button: {
                text: "Upgrade to Pro",                href: "contact"
              },
              features: [
                "All Starter features",                "Access to all 20+ courses",                "1-on-1 mentorship",                "Priority support",                "Job placement assistance",                "Career coaching sessions"
              ]
            },
            {
              id: "enterprise",              title: "Enterprise",              price: "$999",              period: "/month",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-young-woman-making-make-up-near-mirror-home_1301-7637.jpg",              imageAlt: "Enterprise plan",              button: {
                text: "Contact Sales",                href: "contact"
              },
              features: [
                "All Professional features",                "Custom curriculum design",                "Dedicated success manager",                "Team training programs",                "Corporate partnerships",                "API access for integrations"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about TechMasters courses, enrollment, and career support"
          faqs={[
            {
              id: "1",              title: "How long are the courses?",              content: "Our courses range from 4 to 12 weeks depending on the program. Full-time immersive programs typically take 12 weeks, while part-time flexible programs can take 6-12 months. Each course includes live sessions, recorded content, and hands-on projects."
            },
            {
              id: "2",              title: "Do I need prior coding experience?",              content: "No prior experience required! We offer beginner-friendly courses for absolute beginners and advanced tracks for experienced developers. Our curriculum is designed to take you from zero to job-ready."
            },
            {
              id: "3",              title: "What is the job placement rate?",              content: "Our graduates have a 95% job placement rate within 3 months of completing their course. We provide career coaching, resume preparation, and direct partnerships with 50+ hiring companies."
            },
            {
              id: "4",              title: "Can I learn part-time while working?",              content: "Absolutely! Our part-time programs are designed for working professionals. Classes are offered in the evenings and weekends with flexible scheduling options."
            },
            {
              id: "5",              title: "What support do I get after graduation?",              content: "We provide lifetime career support including job board access, alumni network, monthly networking events, continued learning resources, and ongoing mentorship from our instructors."
            },
            {
              id: "6",              title: "Is there a money-back guarantee?",              content: "Yes! All our plans include a 30-day money-back guarantee. If you're not satisfied with the course quality or learning experience, you can request a full refund."
            }
          ]}
          textPosition="left"
          useInvertedBackground="invertDefault"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch"
          description="We would love to hear from you"
          inputs={[
            { name: "fullName", type: "text", placeholder: "Your full name", required: true },
            { name: "email", type: "email", placeholder: "your.email@example.com", required: true },
            { name: "phone", type: "tel", placeholder: "+1 (555) 000-0000", required: false },
            { name: "courseInterest", type: "text", placeholder: "Which course interests you?", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your learning goals and experience level...",            rows: 5,
            required: false
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/cheerful-mature-call-center-operator-looking-laptop-screen_74855-4013.jpg"
          imageAlt="Contact us for enrollment"
          mediaPosition="right"
          buttonText="Enroll Now"
        />
      </div>

      <div id="hero_billboard_1" data-section="hero_billboard_1">
        <HeroBillboard1
          title="Unlock Your Tech Potential"
          background={{ variant: "plain" }}
        />
      </div>
      <div id="hero_billboard_gallery" data-section="hero_billboard_gallery">
        <HeroBillboardGallery
          title="Empower Your Tech Journey"
          description="Join the ranks of tech leaders and master in-demand skills with our comprehensive courses and expert mentorship."
          background={{ variant: "plain" }}
          tag="Start"
          buttons={[{ label: "Explore Courses", href: "" }, { label: "Meet Our Team", href: "" }]}
          mediaItems={[{ title: "Cutting-Edge Curriculum", description: "Stay ahead of the curve with our latest tech courses and training materials." }, { title: "Expert Mentorship", description: "Benefit from personalized guidance from industry veterans and top tech professionals." }]}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/digital-particle-flowing-mesh-technology-background_1017-28408.jpg"
          imageAlt="Technology background"
          logoText="TechMasters"
          copyrightText="© 2026 TechMasters. All rights reserved."
          columns={[
            {
              title: "Programs",              items: [
                { label: "Web Development", href: "#" },
                { label: "Data Science", href: "#" },
                { label: "Cloud Computing", href: "#" },
                { label: "Cybersecurity", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Course Catalog", href: "#" },
                { label: "Blog & Articles", href: "#" },
                { label: "Documentation", href: "#" },
                { label: "Career Resources", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Contact Support", href: "#" },
                { label: "Partners", href: "#" },
                { label: "Careers at TechMasters", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}