"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Sparkles, Users } from "lucide-react";

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

  const navLinks = [
    { href: "/", label: "Home" },
    { href: "/features", label: "Features" },
    { href: "/pricing", label: "Pricing" },
    { href: "/about", label: "About" },
    { href: "/contact", label: "Contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="large"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="OpusClip"
          navItems={navItems}
          button={{
            text: "Start Free",
            href: "#about-hero",
          }}
        />
      </div>

      <div id="about-hero" data-section="about-hero" className="mx-auto px-4 md:px-6">
        <HeroLogo
          logoText="About OpusClip"
          description="We're on a mission to democratize video editing. Empowering creators worldwide with professional-grade tools, completely free, forever."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BF8nYLAeDcNMjxCzQZn47kydbi/a-modern-sleek-video-editing-dashboard-i-1774159923054-24485574.png?_wi=3"
          imageAlt="OpusClip team and vision"
          buttonAnimation="slide-up"
          buttons={[
            {
              text: "Join Our Community",
              href: "/",
            },
          ]}
        />
      </div>

      <div id="about-values" data-section="about-values" className="mx-auto px-4 md:px-6">
        <FeatureHoverPattern
          tag="Our Values"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          title="Built on Core Principles"
          description="Everything we do at OpusClip is guided by our commitment to accessibility, innovation, and user empowerment."
          features={[
            {
              icon: "Heart",
              title: "Accessibility First",
              description: "We believe powerful tools should be free and accessible to everyone, regardless of their background or budget. No gatekeeping, no paywalls.",
            },
            {
              icon: "Brain",
              title: "Innovation Driven",
              description: "We continuously invest in cutting-edge AI and machine learning to deliver the most advanced video processing technology available.",
            },
            {
              icon: "Globe",
              title: "Global Community",
              description: "Supporting 50+ languages and creators in every timezone, we're building a truly global platform for content creators.",
            },
            {
              icon: "Shield",
              title: "Privacy & Security",
              description: "Your content is yours. We use enterprise-grade encryption and maintain full compliance with international privacy regulations.",
            },
            {
              icon: "Zap",
              title: "Speed & Efficiency",
              description: "Lightning-fast processing powered by distributed cloud infrastructure ensures your clips are ready instantly.",
            },
            {
              icon: "Users",
              title: "Creator-Centric",
              description: "Every feature is designed based on feedback from our creator community. Your needs drive our development roadmap.",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            {
              text: "Read Our Story",
              href: "/about",
            },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about-community" data-section="about-community" className="mx-auto px-4 md:px-6">
        <SocialProofOne
          title="Trusted by Global Creators"
          description="From independent creators to content agencies, OpusClip powers professional video workflows worldwide. Join 500K+ creators who've already transformed their content."
          tag="Community"
          tagIcon={Users}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          names={[
            "YouTube Creators",
            "TikTok Influencers",
            "Instagram Content Producers",
            "Podcast Networks",
            "Marketing Agencies",
            "Educational Institutions",
            "Corporate Media Teams",
          ]}
          speed={40}
          showCard={true}
        />
      </div>

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