"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import { Heart } from "lucide-react";

export default function AboutPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="medium"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={[
              { name: "Home", id: "/" },
              { name: "About", id: "/about" },
              { name: "Contact", id: "/contact" }
            ]}
            brandName="Veloura Intimates"
          />
        </div>

        <div id="about-story" data-section="about-story">
          <TestimonialAboutCard
            tag="Our Story"
            title="Feeling Beautiful in Your Own Skin"
            description="At Veloura Intimates, we believe confidence starts from within. Our brand was born from a passion for self-love, creating pieces that honor your unique shape and spirit."
            subdescription="Every design is a celebration of the empowered woman."
            icon={Heart}
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A47KqSdGj7sEG8mcGU4TIVm5ml/close-up-portrait-of-a-confident-woman-s-1774608046311-a423c174.png?_wi=5"
            mediaAnimation="blur-reveal"
            useInvertedBackground={true}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseCard
            logoText="Veloura Intimates"
            columns={[
              {
                title: "Shop",                items: [{ label: "Bras", href: "/shop" }, { label: "Panties", href: "/shop" }, { label: "Sets", href: "/shop" }]
              },
              {
                title: "About",                items: [{ label: "Our Story", href: "/about" }, { label: "FAQ", href: "/faq" }, { label: "Contact", href: "/contact" }]
              }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
