"use client"

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
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 ContactForm from '@/components/form/ContactForm';
import ButtonTextUnderline from '@/components/button/ButtonTextUnderline';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterBase from '@/components/sections/footer/FooterBase';
import TeamCardOne from '@/components/sections/team/TeamCardOne';

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="Fast Performance"
          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="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="contact" data-section="contact">
        <ContactSplitForm
          title="Reach Out"
          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://example.com/new-hero.jpg"
          imageAlt="Contact us for enrollment"
          mediaPosition="right"
          buttonText="Enroll Now"
        />
      </div>
      <div id="contact_form" data-section="contact_form">
        <ContactForm
          useInvertedBackground="noInvert"
        />
      </div>      <div id="button_text_underline" data-section="button_text_underline">
        <ButtonTextUnderline
          text="Explore Our Services"
          scrollToSection={false}
          type="button"
        />
      </div>
      <div id="navbar_layout_floating_inline" data-section="navbar_layout_floating_inline">
        <NavbarLayoutFloatingInline
          navItems={[{ title: "Explore Our Floral Art", description: "Dive into our gallery showcasing Jessica's unique floral designs and arrangements." }, { title: "Contact Our Team", description: "Reach out to our dedicated team for any questions about our services or upcoming events." }]}
          button={{ text: "" }}
        />
      </div>
      <div id="footer_base" data-section="footer_base">
        <FooterBase
          columns={[{ title: "Contact Us", description: "Have questions about our floral arrangements? Reach out to us for expert advice and assistance." }, { title: "Explore More", description: "Discover our floral classes, packages, and services designed to inspire and educate." }]}
          copyrightText="© 2026 TechAcademy. All rights reserved."
        />
      </div>      <div id="team_card_one" data-section="team_card_one">
        <TeamCardOne
          members={[{ name: "Jessica Bloom", role: "Lead Florist & Founder", image: "" }]}
          carouselMode="auto"
          gridVariant="uniform-all-items-equal"
          animationType="none"
          title="Meet Jessica Bloom"
          description="We are passionate about training the next generation of developers"
          tag="Team"
          buttons={[{ label: "View Profile", href: "" }, { label: "Contact", href: "" }]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </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="CodeMasters"
          copyrightText="© 2026 TechAcademy. 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 CodeMasters", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}