"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Target, HelpCircle } from "lucide-react";

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="small"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Link AI"
          navItems={[
            { name: "Features", id: "/" },
            { name: "Pricing", id: "/" },
            { name: "About", id: "/about" },
            { name: "Blog", id: "https://blog.example.com" },
            { name: "Contact", id: "/contact" }
          ]}
          bottomLeftText="AI-Powered Automation"
          bottomRightText="hello@linkAI.com"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Our Story"
          tagIcon={Target}
          title="Building the future of conversational AI"
          description="Founded in 2023, Link AI emerged from a simple observation: businesses were losing customers due to slow response times. Our team of AI engineers, customer success experts, and product designers came together to solve this fundamental problem. We built Link AI to democratize access to intelligent automation, making it possible for businesses of all sizes to provide instant, personalized customer support at scale."
          metrics={[
            { value: "50+", title: "Team Members Globally" },
            { value: "2M+", title: "Messages Processed Daily" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg"
          imageAlt="Link AI team collaboration"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="The Link AI team doesn't just provide technology - they provide partnership. Their deep understanding of customer support challenges helped us implement a solution that truly fits our business needs."
          rating={5}
          author="Marcus Rodriguez, Head of Operations"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", alt: "Team member 1" },
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Team member 2" },
            { src: "https://img.b2bpic.net/free-photo/portrait-happy-woman-black-jacket-happy-short-haired-girl-dark-suit-widely-sincerely-smiles-isolated-background_197531-18508.jpg", alt: "Team member 3" },
            { src: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", alt: "Team member 4" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="About Link AI"
          description="Learn more about our mission, values, and approach to AI-powered customer support."
          tag="FAQ"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",
              title: "What inspired the creation of Link AI?",
              content: "We witnessed firsthand how businesses struggled with customer support scalability. Traditional solutions were either too expensive or too complex. We wanted to create an AI platform that was both powerful and accessible."
            },
            {
              id: "2",
              title: "What makes Link AI different from other chatbot solutions?",
              content: "Unlike basic chatbots, Link AI uses advanced natural language processing to understand context and intent. Our agents learn from every interaction and integrate seamlessly with your existing business processes."
            },
            {
              id: "3",
              title: "How does Link AI ensure data privacy and security?",
              content: "Security is built into our DNA. We use enterprise-grade encryption, maintain SOC 2 Type II compliance, and follow strict GDPR and CCPA guidelines. Your data never leaves our secure infrastructure."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <FooterLogoEmphasis
        logoText="Link AI"
        columns={[
          {
            items: [
              { label: "Home", href: "/" },
              { label: "Features", href: "/" },
              { label: "Pricing", href: "/" },
              { label: "About", href: "/about" }
            ]
          },
          {
            items: [
              { label: "Blog", href: "https://blog.linkAI.com" },
              { label: "Documentation", href: "https://docs.linkAI.com" },
              { label: "API Docs", href: "https://api.linkAI.com" },
              { label: "Status", href: "https://status.linkAI.com" }
            ]
          },
          {
            items: [
              { label: "Contact", href: "/contact" },
              { label: "Support", href: "https://support.linkAI.com" },
              { label: "Privacy", href: "/privacy" },
              { label: "Terms", href: "/terms" }
            ]
          },
          {
            items: [
              { label: "Twitter", href: "https://twitter.com/linkAI" },
              { label: "LinkedIn", href: "https://linkedin.com/company/linkAI" },
              { label: "GitHub", href: "https://github.com/linkAI" },
              { label: "Discord", href: "https://discord.gg/linkAI" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}