"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Zap } from "lucide-react";
import Link from "next/link";

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumLarge"
      background="noise"
      cardStyle="outline"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="AutomateAI"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Pricing", id: "/pricing" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" },
          ]}
          bottomLeftText="Innovation Driven"
          bottomRightText="hello@automateai.com"
        />
      </div>

      <div id="about-hero" data-section="about-hero">
        <HeroBillboardCarousel
          title="About AutomateAI"
          description="Pioneering the future of business automation with intelligent AI solutions that transform operations and drive growth."
          tag="Our Story"
          tagIcon={Zap}
          tagAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Join Our Team", href: "#" },
            { text: "Learn Our Values", href: "/#values" },
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AFHEYmmiS2gGfSGgOhIws3MVkx/a-modern-ai-dashboard-showing-real-time--1772497335334-c3e9a334.png?_wi=3",
              imageAlt: "AI Dashboard",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AFHEYmmiS2gGfSGgOhIws3MVkx/abstract-visualization-of-machine-learni-1772497335947-007ba7e4.png?_wi=3",
              imageAlt: "Machine Learning",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AFHEYmmiS2gGfSGgOhIws3MVkx/system-architecture-diagram-showing-mult-1772497335695-857e5984.png?_wi=4",
              imageAlt: "System Architecture",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AFHEYmmiS2gGfSGgOhIws3MVkx/advanced-ai-analytics-dashboard-with-mul-1772497335461-d1a1a51c.png?_wi=5",
              imageAlt: "Analytics",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AFHEYmmiS2gGfSGgOhIws3MVkx/automation-performance-metrics-display-s-1772497335584-dcf97120.png?_wi=3",
              imageAlt: "Performance Metrics",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AFHEYmmiS2gGfSGgOhIws3MVkx/global-client-network-visualization-show-1772497334594-4277ddf1.png?_wi=2",
              imageAlt: "Global Network",
            },
          ]}
          ariaLabel="About Hero Section"
        />
      </div>

      <div id="about-text" data-section="about-text">
        <TextSplitAbout
          title="About AutomateAI"
          description={[
            "We are a forward-thinking AI automation company dedicated to helping businesses unlock their full potential through intelligent technology solutions. With a team of experts in machine learning, software engineering, and business optimization, we design and deploy custom automation systems that drive measurable results.",
            "Our mission is to democratize AI technology and make powerful automation accessible to businesses of all sizes. We believe that intelligent automation is the key to sustainable growth, operational excellence, and competitive advantage in the digital economy.",
          ]}
          buttons={[
            { text: "Explore Our Services", href: "/services" },
            { text: "Contact Our Team", href: "/contact" },
          ]}
          buttonAnimation="slide-up"
          showBorder={true}
          useInvertedBackground={false}
          ariaLabel="About Section"
        />
      </div>

      <div id="values" data-section="values">
        <TextSplitAbout
          title="Our Core Values"
          description={[
            "Innovation is at the heart of everything we do. We constantly push the boundaries of what's possible with AI and automation, investing in research and staying ahead of industry trends to deliver cutting-edge solutions.",
            "We are committed to transparency and trust. Our clients are partners in success, and we believe in clear communication, honest assessments, and delivering on our promises. Your success is our success.",
          ]}
          buttons={[
            { text: "View Case Studies", href: "/#blog" },
            { text: "Schedule Demo", href: "/contact" },
          ]}
          buttonAnimation="slide-up"
          showBorder={false}
          useInvertedBackground={true}
          ariaLabel="Core Values Section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",
              items: [
                { label: "Features", href: "/#features" },
                { label: "Pricing", href: "/pricing" },
                { label: "Security", href: "#" },
                { label: "Integrations", href: "#" },
              ],
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "/contact" },
              ],
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Data Protection", href: "#" },
              ],
            },
          ]}
          copyrightText="© 2025 AutomateAI. All rights reserved."
          ariaLabel="Footer Section"
        />
      </div>
    </ThemeProvider>
  );
}