"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Users, TrendingUp, Award, Star } from "lucide-react";
import Link from "next/link";

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="glass-depth"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="TechAcademy"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Courses", id: "/courses" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Enroll Now",            href: "/contact"
          }}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFive
          team={[
            {
              id: "1",              name: "Alex Kumar",              role: "Lead Instructor - Web Development",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-young-business-person-doing-internship_23-2149305396.jpg"
            },
            {
              id: "2",              name: "Maria Garcia",              role: "Python & Backend Specialist",              imageSrc: "https://img.b2bpic.net/free-photo/mature-business-manager-office_1098-21368.jpg"
            },
            {
              id: "3",              name: "James Chen",              role: "Data Science Lead",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-smiley-woman-library_23-2149204753.jpg"
            },
            {
              id: "4",              name: "Emma Wilson",              role: "Academy Director",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-woman-studying-math_23-2150444951.jpg"
            },
            {
              id: "5",              name: "David Rodriguez",              role: "Cybersecurity Expert",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-young-business-person-doing-internship_23-2149305396.jpg"
            },
            {
              id: "6",              name: "Sophie Turner",              role: "Student Success Manager",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-woman-studying-math_23-2150444951.jpg"
            }
          ]}
          animationType="slide-up"
          title="Meet Our Team"
          description="Industry experts dedicated to your success"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Team"
          tagIcon={Users}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          metrics={[
            {
              id: "1",              value: "15",              title: "Years",              description: "Combined teaching experience of our team",              icon: Award
            },
            {
              id: "2",              value: "200",              title: "+",              description: "Industry certifications held by our instructors",              icon: Star
            },
            {
              id: "3",              value: "98",              title: "%",              description: "Student satisfaction rate with our instructors",              icon: TrendingUp
            }
          ]}
          title="Our Expertise"
          description="Why our team makes the difference in your learning journey"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          faqs={[
            {
              id: "1",              title: "What makes TechAcademy different?",              content: "Our unique combination of industry-experienced instructors, hands-on projects, and comprehensive career support sets us apart. We focus on practical skills that employers actually need."
            },
            {
              id: "2",              title: "How do you ensure quality education?",              content: "All our instructors have minimum 10+ years of industry experience. Our curriculum is regularly updated based on industry trends and employer feedback."
            },
            {
              id: "3",              title: "What is your teaching methodology?",              content: "We believe in learning by doing. Our courses combine theory with practical projects, peer collaboration, and real-world case studies."
            },
            {
              id: "4",              title: "Do you offer ongoing support after graduation?",              content: "Yes! Our alumni network provides ongoing mentorship, job referrals, and continued learning opportunities even after course completion."
            },
            {
              id: "5",              title: "How do you stay current with technology trends?",              content: "Our instructors are active professionals who bring current industry practices into the classroom. We continuously update our curriculum based on market demands."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/person-front-computer-working-html_23-2150040428.jpg"
          imageAlt="Customer support team"
          mediaPosition="left"
          title="About TechAcademy"
          description="Learn more about our mission, values, and commitment to student success"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/html-css-collage-concept-with-person_23-2150061986.jpg"
          imageAlt="Graduation and success celebration"
          logoText="TechAcademy"
          copyrightText="© 2025 TechAcademy. 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: "Our Team", href: "/about" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}