"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { History } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="medium"
      background="none"
      cardStyle="inset"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="JCode"
          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="about-hero" data-section="about-hero">
        <HeroOverlay 
          title="About JCode IT School"
          description="Founded with a mission to democratize tech education and create career opportunities for talented individuals worldwide."
          tag="Our Story"
          tagIcon={History}
          imageSrc="https://img.b2bpic.net/free-photo/people-working-team-three-young-perspective-business-partners-sitting-library-discussing-startup-project-details-profits-teamwork-concept_176420-8293.jpg"
          imageAlt="JCode IT School campus"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={false}
          buttons={[{ text: "Meet Our Team", href: "#team" }]}
        />
      </div>

      <div id="about-section" data-section="about-section">
        <FeatureCardNineteen 
          title="Our Mission & Values"
          description="We believe quality tech education should be accessible to everyone, regardless of background or location."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: 1,
              tag: "Our Mission",
              title: "Democratize Tech Education",
              subtitle: "Making IT careers accessible to all",
              description: "We're committed to providing world-class programming education that transforms lives and opens doors to lucrative tech careers for people from all backgrounds and geographies.",
              imageSrc: "https://img.b2bpic.net/free-photo/people-working-team-three-young-perspective-business-partners-sitting-library-discussing-startup-project-details-profits-teamwork-concept_176420-8293.jpg",
              imageAlt: "JCode mission"
            },
            {
              id: 2,
              tag: "Our Values",
              title: "Excellence & Innovation",
              subtitle: "Continuously improving education",
              description: "We stay at the forefront of technology trends, updating our curriculum regularly to reflect industry standards. Our instructors are active developers who bring real-world experience to every lesson.",
              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-html_23-2150038852.jpg",
              imageAlt: "Excellence in tech education"
            },
            {
              id: 3,
              tag: "Our Community",
              title: "Global Network",
              subtitle: "Supporting student success together",
              description: "JCode alumni form a thriving community spanning 50+ countries. Our network provides ongoing support, job opportunities, and collaboration possibilities for all graduates.",
              imageSrc: "https://img.b2bpic.net/free-photo/people-working-team-three-young-perspective-business-partners-sitting-library-discussing-startup-project-details-profits-teamwork-concept_176420-8293.jpg",
              imageAlt: "JCode community"
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFive 
          title="Meet Our Expert Instructors"
          description="Learn from industry professionals with decades of combined experience in tech and education"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          team={[
            {
              id: "1",
              name: "Alex Johnson",
              role: "Full Stack Developer",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-confident-young-businessman-with-his-arms-crossed_23-2148176206.jpg",
              imageAlt: "Alex Johnson, Senior Full Stack Developer"
            },
            {
              id: "2",
              name: "Emma Williams",
              role: "Data Science Lead",
              imageSrc: "https://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5367.jpg",
              imageAlt: "Emma Williams, Data Science Lead"
            },
            {
              id: "3",
              name: "James Chen",
              role: "Mobile Development Expert",
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-young-business-person-doing-internship_23-2149305396.jpg",
              imageAlt: "James Chen, Mobile Development Expert"
            },
            {
              id: "4",
              name: "Sofia Rodriguez",
              role: "DevOps Architect",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-successful-young-businessman-with-his-arms-crossed-looking-camera_23-2148176207.jpg",
              imageAlt: "Sofia Rodriguez, DevOps Architect"
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia 
          imageSrc="https://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010129.jpg"
          imageAlt="JCode IT School footer background"
          logoText="JCode"
          copyrightText="© 2024 JCode IT School. All rights reserved."
          columns={[
            {
              title: "Courses",
              items: [
                { label: "Web Development", href: "/courses" },
                { label: "Data Science", href: "/courses" },
                { label: "Mobile Development", href: "/courses" },
                { label: "DevOps", href: "/courses" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "Support", href: "#" },
                { label: "LinkedIn", href: "#" },
                { label: "Twitter", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}