"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import MediaAbout from '@/components/sections/about/MediaAbout';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

export default function AboutPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="compact"
        sizing="largeSmallSizeMediumTitles"
        background="blurBottom"
        cardStyle="glass-elevated"
        primaryButtonStyle="flat"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarStyleFullscreen
            navItems={[
                { name: "Home", id: "/" },
                { name: "Services", id: "/services" },
                { name: "About", id: "/about" },
                { name: "Reviews", id: "/testimonials" },
                { name: "Contact", id: "/contact" },
            ]}
            brandName="DB Plumbing"
            />
        </div>

        <div id="about-hero">
            <MediaAbout
                title="Our Company History"
                description="Founded with a commitment to reliability, DB Plumbing has grown from a local operation to a premier service provider in the region. We pride ourselves on the relationships we build with every client."
                imageSrc="http://img.b2bpic.net/free-photo/plumber-working-home_23-2150746296.jpg"
                useInvertedBackground={false}
            />
        </div>

        <div id="team">
            <TeamCardOne
                title="Meet Our Team"
                description="The skilled professionals dedicated to keeping your home running smoothly."
                gridVariant="three-columns-all-equal-width"
                animationType="blur-reveal"
                textboxLayout="default"
                useInvertedBackground={false}
                members={[
                    { id: "1", name: "John Doe", role: "Master Plumber" },
                    { id: "2", name: "Jane Smith", role: "Heating Engineer" },
                    { id: "3", name: "Bob Johnson", role: "Customer Support"
                    }
                ]}
            />
        </div>

        <div id="footer">
            <FooterBaseReveal
                logoText="DB Plumbing & Heating"
                columns={[
                    { title: "Quick Links", items: [{ label: "Home", href: "/" }, { label: "Contact", href: "/contact" }] }
                ]}
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}