"use client";

import ReactLenis from "lenis/react";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Users } from "lucide-react";

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

    return (
        <ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="primary-glow" secondaryButtonStyle="layered" headingFontWeight="medium">
            <ReactLenis root>
                <NavbarLayoutFloatingInline
                    navItems={navItems}
                    brandName="SaasApp"
                    button={{ text: "Get Started", href: "#" }}
                />
                <div id="about-section" data-section="about-section">
                    <TestimonialAboutCard
                        tag="Who We Are"
                        title="Our Story"
                        description="We started with a vision to simplify complex problems for developers and businesses alike. Our journey began with a small team passionate about innovation and a commitment to quality. Today, we're proud to offer solutions that empower our users to achieve their goals with greater efficiency and creativity."
                        subdescription="Driven by a relentless pursuit of excellence, our team continuously explores new technologies and methodologies to deliver cutting-edge products. We believe in transparency, user-centric design, and fostering a community where ideas can flourish. Join us as we continue to shape the future of modern web experiences."
                        icon={Users}
                        imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/saas-template/about-card-image.webp"
                        imageAlt="Our team working together"
                        mediaAnimation="slide-up"
                        useInvertedBackground={false}
                    />
                </div>
                <FooterBaseReveal
                    logoText="SaaSify"
                    columns={[
                        {
                            title: "Product",                            items: [
                                { label: "Features", href: "#features" },
                                { label: "Pricing", href: "#pricing" },
                                { label: "Integrations", href: "#" },
                                { label: "Changelog", href: "#" }
                            ]
                        },
                        {
                            title: "Company",                            items: [
                                { label: "About", href: "/about" },
                                { label: "Blog", href: "#" },
                                { label: "Careers", href: "#" },
                                { label: "Contact", href: "#contact" }
                            ]
                        },
                        {
                            title: "Resources",                            items: [
                                { label: "Documentation", href: "#" },
                                { label: "Help Center", href: "#" },
                                { label: "Community", href: "#" },
                                { label: "Status", href: "#" }
                            ]
                        },
                        {
                            title: "Legal",                            items: [
                                { label: "Privacy", href: "#" },
                                { label: "Terms", href: "#" },
                                { label: "Security", href: "#" }
                            ]
                        }
                    ]}
                    copyrightText="2024 SaasApp. All rights reserved."
                />
            </ReactLenis>
        </ThemeProvider>
    );
}