"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import TextAbout from "@/components/sections/about/TextAbout";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { MessageSquare } from "lucide-react";

const AboutPage = () => {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/services" },
    { name: "Portfolio", id: "/portfolio" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" },
  ];

  const footerColumns = [
    {
      title: "Product",      items: [
        { label: "Services", href: "services" },
        { label: "Portfolio", href: "portfolio" },
        { label: "Pricing", href: "#" },
        { label: "Security", href: "#" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "about" },
        { label: "Our Team", href: "about" },
        { label: "Blog", href: "#" },
        { label: "Contact", href: "contact" },
      ],
    },
    {
      title: "Connect",      items: [
        { label: "LinkedIn", href: "https://linkedin.com" },
        { label: "Twitter", href: "https://twitter.com" },
        { label: "GitHub", href: "https://github.com" },
        { label: "Facebook", href: "https://facebook.com" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="Kraftcode" navItems={navItems} />
      </div>

      {/* About Us Section */}
      <div id="about" data-section="about">
        <TextAbout
          tag="Our Story"
          title="Founded on the belief that technology should empower transformation. At Kraftcode, we combine deep technical expertise with strategic business thinking to deliver solutions that matter. Our team of passionate developers, designers, and strategists work collaboratively to turn your vision into reality."
          useInvertedBackground={false}
          ariaLabel="About us section"
        />
      </div>

      {/* Mission & Values Section */}
      <div id="mission" data-section="mission">
        <TextAbout
          tag="Mission & Vision"
          title="We believe in creating digital solutions that drive real business impact. Our mission is to empower businesses through innovative technology, expert guidance, and unwavering commitment to quality. We envision a future where technology enables every organization to reach its full potential."
          useInvertedBackground={true}
          ariaLabel="Mission and vision section"
        />
      </div>

      {/* Team Testimonials */}
      <div id="team" data-section="team">
        <TestimonialCardTwo
          title="Meet Our Leadership"
          description="Our experienced team brings decades of combined expertise in web development, mobile apps, and digital transformation across diverse industries."
          tag="Our Team"
          tagIcon={MessageSquare}
          tagAnimation="blur-reveal"
          testimonials={[
            {
              id: "1",              name: "Rajesh Kumar",              role: "Founder & CEO",              testimonial:
                "With over 15 years in tech, I'm committed to building solutions that truly transform businesses. Innovation and integrity are at our core.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/professional-headshot-of-a-business-exec-1772536829249-92484298.png",              imageAlt: "Rajesh Kumar"},
            {
              id: "2",              name: "Priya Sharma",              role: "Lead Developer",              testimonial:
                "Our development philosophy centers on clean code, scalability, and user experience. We build solutions that stand the test of time.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/professional-headshot-of-a-business-mana-1772536828421-9ae258e6.png",              imageAlt: "Priya Sharma"},
            {
              id: "3",              name: "Arun Patel",              role: "Design Lead",              testimonial:
                "Great design bridges the gap between business needs and user expectations. We create interfaces that are both beautiful and functional.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtbsTMeGJHQMw356WqTQ94vTH/professional-headshot-of-an-entrepreneur-1772536829312-461ee1ff.png",              imageAlt: "Arun Patel"},
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="blur-reveal"
          ariaLabel="Team section"
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2025 Kraftcode Infosol. All rights reserved."
          ariaLabel="Footer section"
        />
      </div>
    </ThemeProvider>
  );
};

export default AboutPage;