"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import AboutMetric from "@/components/sections/about/AboutMetric";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Award, Lightbulb, Users, Target } from "lucide-react";

export default function AboutPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Features", id: "/features" },
    { name: "Pricing", id: "/pricing" },
    { name: "Solutions", id: "/solutions" },
    { name: "Testimonials", id: "/testimonials" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="none"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      {/* Navigation */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="SYS AI"
          navItems={navItems}
          button={{
            text: "Get Started",
            href: "https://demo.sys-ai.erp/signup",
          }}
          className="fixed top-4 left-4 right-4 z-50"
          buttonClassName="px-6 py-2"
        />
      </div>

      {/* About Hero */}
      <div id="about-hero" data-section="about-hero" className="pt-24 mx-auto px-4 md:px-6">
        <div className="py-12 md:py-20 text-center max-w-3xl mx-auto">
          <h1 className="text-4xl md:text-5xl font-extrabold mb-6 text-foreground">
            About SYS AI
          </h1>
          <p className="text-lg md:text-xl text-foreground/70 mb-8">
            We're transforming how enterprises manage their operations. Founded on principles of innovation, reliability, and customer success, SYS AI has become the trusted ERP platform for over 500 global enterprises.
          </p>
        </div>
      </div>

      {/* Company Metrics */}
      <div id="metrics" data-section="metrics">
        <AboutMetric
          title="SYS AI by the Numbers"
          metrics={[
            {
              icon: Award,
              label: "Industry Awards",
              value: "15+",
            },
            {
              icon: Users,
              label: "Team Members",
              value: "350+",
            },
            {
              icon: Lightbulb,
              label: "Patents Filed",
              value: "8",
            },
            {
              icon: Target,
              label: "Countries Served",
              value: "85+",
            },
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      {/* Mission & Values */}
      <div id="mission-values" data-section="mission-values" className="mx-auto px-4 md:px-6 py-12">
        <div className="max-w-4xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            <div className="bg-card rounded-lg p-8 shadow-sm border border-foreground/10">
              <h3 className="text-2xl font-extrabold mb-4 flex items-center gap-3">
                <span className="text-accent">◆</span>
                Our Mission
              </h3>
              <p className="text-foreground/70">
                To empower enterprises with intelligent, scalable software that streamlines operations, reduces costs, and enables data-driven decision-making at every level of the organization.
              </p>
            </div>
            <div className="bg-card rounded-lg p-8 shadow-sm border border-foreground/10">
              <h3 className="text-2xl font-extrabold mb-4 flex items-center gap-3">
                <span className="text-accent">◆</span>
                Our Values
              </h3>
              <ul className="space-y-2 text-foreground/70">
                <li className="flex items-start gap-2">
                  <span className="text-accent mt-1">→</span>
                  <span><strong>Innovation:</strong> Continuously advancing ERP technology</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-accent mt-1">→</span>
                  <span><strong>Reliability:</strong> 99.99% uptime guaranteed</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-accent mt-1">→</span>
                  <span><strong>Customer Success:</strong> Your success is our success</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* Leadership Team Preview */}
      <div id="leadership" data-section="leadership" className="mx-auto px-4 md:px-6 py-12">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-extrabold mb-12 text-center">
            Leadership Team
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="w-32 h-32 bg-gradient-to-br from-accent/20 to-accent/10 rounded-lg mx-auto mb-4 flex items-center justify-center">
                <span className="text-4xl">👨‍💼</span>
              </div>
              <h4 className="text-lg font-extrabold mb-1">Rajesh Gupta</h4>
              <p className="text-foreground/60 mb-3">Founder & CEO</p>
              <p className="text-foreground/70 text-sm">20+ years in enterprise software. Led digital transformation for Fortune 500 companies.</p>
            </div>
            <div className="text-center">
              <div className="w-32 h-32 bg-gradient-to-br from-accent/20 to-accent/10 rounded-lg mx-auto mb-4 flex items-center justify-center">
                <span className="text-4xl">👩‍💼</span>
              </div>
              <h4 className="text-lg font-extrabold mb-1">Sarah Mitchell</h4>
              <p className="text-foreground/60 mb-3">Chief Product Officer</p>
              <p className="text-foreground/70 text-sm">Former VP of Product at leading SaaS platform. Expert in enterprise software design.</p>
            </div>
            <div className="text-center">
              <div className="w-32 h-32 bg-gradient-to-br from-accent/20 to-accent/10 rounded-lg mx-auto mb-4 flex items-center justify-center">
                <span className="text-4xl">👨‍💻</span>
              </div>
              <h4 className="text-lg font-extrabold mb-1">David Chen</h4>
              <p className="text-foreground/60 mb-3">Chief Technology Officer</p>
              <p className="text-foreground/70 text-sm">Stanford PhD in Computer Science. Architect of scalable cloud systems at major tech firms.</p>
            </div>
          </div>
        </div>
      </div>

      {/* Company History */}
      <div id="history" data-section="history" className="mx-auto px-4 md:px-6 py-12">
        <div className="max-w-3xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-extrabold mb-12 text-center">
            Our Journey
          </h2>
          <div className="space-y-8">
            <div className="flex gap-6">
              <div className="flex flex-col items-center">
                <div className="w-12 h-12 bg-accent rounded-full flex items-center justify-center text-primary-cta font-bold">
                  2015
                </div>
                <div className="w-1 h-20 bg-accent/30 mt-4"></div>
              </div>
              <div>
                <h4 className="text-lg font-bold mb-2">Founded</h4>
                <p className="text-foreground/70">SYS AI founded with vision to revolutionize enterprise resource planning with AI-driven automation.</p>
              </div>
            </div>
            <div className="flex gap-6">
              <div className="flex flex-col items-center">
                <div className="w-12 h-12 bg-accent rounded-full flex items-center justify-center text-primary-cta font-bold">
                  2017
                </div>
                <div className="w-1 h-20 bg-accent/30 mt-4"></div>
              </div>
              <div>
                <h4 className="text-lg font-bold mb-2">First 100 Customers</h4>
                <p className="text-foreground/70">Reached milestone of 100 enterprise customers across manufacturing, retail, and services sectors.</p>
              </div>
            </div>
            <div className="flex gap-6">
              <div className="flex flex-col items-center">
                <div className="w-12 h-12 bg-accent rounded-full flex items-center justify-center text-primary-cta font-bold">
                  2020
                </div>
                <div className="w-1 h-20 bg-accent/30 mt-4"></div>
              </div>
              <div>
                <h4 className="text-lg font-bold mb-2">Series B Funding</h4>
                <p className="text-foreground/70">Raised $50M in Series B funding to accelerate product development and global expansion.</p>
              </div>
            </div>
            <div className="flex gap-6">
              <div className="flex flex-col items-center">
                <div className="w-12 h-12 bg-accent rounded-full flex items-center justify-center text-primary-cta font-bold">
                  2024
                </div>
              </div>
              <div>
                <h4 className="text-lg font-bold mb-2">500+ Enterprise Customers</h4>
                <p className="text-foreground/70">Celebrating 500+ global enterprises trusting SYS AI to power their operations across 85 countries.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="SYS AI"
          leftLink={{
            text: "Privacy Policy",
            href: "/privacy",
          }}
          rightLink={{
            text: "Terms of Service",
            href: "/terms",
          }}
        />
      </div>
    </ThemeProvider>
  );
}