"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { BookOpen, Award, Zap } from "lucide-react";

const AboutPage = () => {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "How It Works", id: "how-it-works" },
    { name: "Features", id: "features" },
    { name: "Pricing", id: "pricing" },
    { name: "Dashboard", id: "https://app.interviewiq.io/dashboard" },
  ];

  const footerColumns = [
    {
      title: "Product",
      items: [
        { label: "Features", href: "/#features" },
        { label: "Pricing", href: "/#pricing" },
        { label: "Dashboard", href: "https://app.interviewiq.io/dashboard" },
        { label: "API Docs", href: "https://docs.interviewiq.io" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About", href: "/about" },
        { label: "Blog", href: "https://blog.interviewiq.io" },
        { label: "Careers", href: "/careers" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Resources",
      items: [
        { label: "Interview Tips", href: "https://blog.interviewiq.io/interview-tips" },
        { label: "Community", href: "https://community.interviewiq.io" },
        { label: "Status", href: "https://status.interviewiq.io" },
        { label: "Help Center", href: "https://help.interviewiq.io" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "/privacy" },
        { label: "Terms of Service", href: "/terms" },
        { label: "Cookie Policy", href: "/cookies" },
        { label: "Security", href: "/security" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumSizeLargeTitles"
      background="noiseDiagonalGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav" className="fixed top-6 left-0 right-0 z-50 flex justify-center">
        <NavbarLayoutFloatingOverlay
          brandName="InterviewIQ"
          navItems={navItems}
          button={{
            text: "Start Free Trial",
            href: "https://app.interviewiq.io/signup",
          }}
          className="fixed top-6 left-0 right-0 z-50 flex justify-center"
          buttonClassName="bg-gradient-to-r from-[#b82b40] to-[#b90941] hover:shadow-lg transition-all"
        />
      </div>

      <div id="about-intro" data-section="about-intro" className="bg-[#e8a8b6] bg-opacity-10 pt-32">
        <TextAbout
          tag="About Us"
          tagIcon={BookOpen}
          tagAnimation="slide-up"
          title="We're Building the Future of Interview Preparation with Intelligent AI Technology"
          useInvertedBackground={true}
          buttons={[
            {
              text: "Learn More",
              href: "/#features",
            },
          ]}
          buttonAnimation="slide-up"
          ariaLabel="About InterviewIQ mission"
        />
      </div>

      <div id="our-mission" data-section="our-mission" className="bg-white">
        <FeatureCardTwentyThree
          title="Our Mission & Values"
          description="We believe everyone deserves access to world-class interview coaching, regardless of their background or budget. Our platform democratizes interview prep through AI."
          tag="Our Story"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              id: "1",
              title: "Accessibility First",
              tags: ["Democratizing Opportunities", "No Gatekeeping"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP7ZP7ycINDkviXGWw0GTrynpk/an-ai-agent-interface-showing-a-conversa-1772482484398-55234532.png?_wi=2",
              imageAlt: "Accessible interview coaching platform",
            },
            {
              id: "2",
              title: "Quality Over Profit",
              tags: ["User Success", "Genuine Impact"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP7ZP7ycINDkviXGWw0GTrynpk/a-resume-upload-interface-showing-pdf-pa-1772482484664-c1ea8ca2.png?_wi=2",
              imageAlt: "Quality focused development",
            },
            {
              id: "3",
              title: "Continuous Innovation",
              tags: ["Cutting-Edge AI", "Always Improving"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP7ZP7ycINDkviXGWw0GTrynpk/multi-dimensional-scoring-dashboard-show-1772482485170-9376820a.png?_wi=2",
              imageAlt: "AI innovation research",
            },
          ]}
        />
      </div>

      <div id="testimonials-about" data-section="testimonials-about" className="bg-gradient-to-b from-transparent via-[#f5f5f5] to-transparent">
        <TestimonialCardThirteen
          title="What Our Community Says"
          description="Real feedback from real users who've transformed their interview skills"
          tag="Community Love"
          tagIcon={Award}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          showRating={true}
          carouselMode="buttons"
          uniformGridCustomHeightClasses="min-h-none"
          testimonials={[
            {
              id: "1",
              name: "Sarah Chen",
              handle: "@sarahtech",
              testimonial: "InterviewIQ helped me practice 50+ technical interviews and gave me the confidence I needed. I landed my FAANG offer!",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP7ZP7ycINDkviXGWw0GTrynpk/professional-headshot-of-sarah-chen-dive-1772482482136-859b2ac9.png?_wi=2",
              imageAlt: "Sarah Chen",
            },
            {
              id: "2",
              name: "Michael Rodriguez",
              handle: "@mikedev",
              testimonial: "The agentic interview loop felt like talking to a real recruiter. The feedback was incredibly detailed and actionable.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP7ZP7ycINDkviXGWw0GTrynpk/professional-headshot-of-michael-rodrigu-1772482482756-c60dc057.png?_wi=2",
              imageAlt: "Michael Rodriguez",
            },
            {
              id: "3",
              name: "Emily Watson",
              handle: "@emilypm",
              testimonial: "I improved my communication clarity by 40% in just two weeks. The speech analysis feature is game-changing.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP7ZP7ycINDkviXGWw0GTrynpk/professional-headshot-of-emily-watson-di-1772482482674-7d24a8e5.png?_wi=2",
              imageAlt: "Emily Watson",
            },
          ]}
        />
      </div>

      <div id="footer" data-section="footer" className="bg-[#1c1c1c] text-white">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2025 InterviewIQ. All rights reserved."
          bottomRightText="Powered by GPT-4o & Advanced AI"
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
};

export default AboutPage;