"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import {
  Zap,
  Award,
  Users,
  TrendingUp,
  Target,
} from "lucide-react";

export default function AboutPage() {
  const navItems = [
    { name: "Features", id: "features" },
    { name: "Pricing", id: "pricing" },
    { name: "About", id: "about" },
    { name: "Blog", id: "blog" },
    { name: "Contact", id: "contact" },
  ];

  const footerColumns = [
    {
      title: "Product",      items: [
        { label: "Features", href: "#features" },
        { label: "Pricing", href: "#pricing" },
        { label: "Security", href: "#" },
        { label: "Status", href: "#" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/about" },
        { label: "Blog", href: "#" },
        { label: "Careers", href: "#" },
        { label: "Press", href: "#" },
      ],
    },
    {
      title: "Support",      items: [
        { label: "Help Center", href: "#" },
        { label: "Contact", href: "#contact" },
        { label: "Terms", href: "#" },
        { label: "Privacy", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumLarge"
      background="fluid"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="GradeOptim"
          bottomLeftText="Optimize Your Grades"
          bottomRightText="hello@gradeoptim.com"
        />
      </div>

      <div id="about-mission" data-section="about-mission">
        <FeatureCardNineteen
          title="Our Mission & Values"
          description="We believe every student deserves the tools and insights to succeed academically. Our mission is to democratize academic performance optimization through intelligent, accessible technology."
          tag="About GradeOptim"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              tag: "Mission",              title: "Empower Every Student",              subtitle: "Academic success for all",              description:
                "We're building the future of educational technology by creating tools that help students understand their academic potential and achieve their goals. We believe data transparency and predictive insights are key to academic success.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APzrAl8FUR6Sq885GZcTzaJsFb/a-modern-clean-academic-performance-dash-1772509353097-99ebc96b.png",              imageAlt: "GradeOptim Mission"},
            {
              id: 2,
              tag: "Values",              title: "Accuracy & Transparency",              subtitle: "Trust through precision",              description:
                "Every calculation, prediction, and recommendation is built on rigorous data science and transparent algorithms. Our students trust us with their academic futures, and we take that responsibility seriously.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APzrAl8FUR6Sq885GZcTzaJsFb/a-clean-interface-mockup-showing-weighte-1772509353351-5d519432.png",              imageAlt: "Accuracy and Transparency"},
            {
              id: 3,
              tag: "Innovation",              title: "AI-Powered Insights",              subtitle: "Technology for learning",              description:
                "We harness the power of machine learning and artificial intelligence to deliver personalized, actionable recommendations. Our AI gets smarter as it learns from each student's unique academic patterns.",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APzrAl8FUR6Sq885GZcTzaJsFb/an-ai-powered-recommendation-engine-inte-1772509353241-88fb0cf9.png",              imageAlt: "AI-Powered Innovation"},
          ]}
        />
      </div>

      <div id="about-impact" data-section="about-impact">
        <MetricCardThree
          title="Our Impact on Students"
          description="The proof is in the results. GradeOptim is helping thousands of students achieve their academic goals and reach their full potential."
          tag="Success Stories"
          tagIcon={Award}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          metrics={[
            { id: "1", icon: Users, title: "Students Helped", value: "5,000+" },
            { id: "2", icon: TrendingUp, title: "Avg GPA Improvement", value: "+0.35" },
            { id: "3", icon: Target, title: "Goal Achievement", value: "92%" },
            { id: "4", icon: Award, title: "Success Rate", value: "98%" },
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APzrAl8FUR6Sq885GZcTzaJsFb/a-subtle-modern-educational-background-i-1772509353273-4ef8c2ce.png"
          imageAlt="Academic Success Background"
          logoText="GradeOptim"
          copyrightText="© 2025 GradeOptim. All rights reserved."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}