"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Home, Users, TrendingUp, Award } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="glass-depth"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Dubai Realty"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Properties", id: "/properties" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Schedule Tour", href: "/contact" }}
          className="backdrop-blur-md border border-white/20"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Your Premier Dubai Real Estate Partner"
          description="With over 15 years of expertise in Dubai's luxury property market, we deliver exceptional service connecting discerning buyers with their dream properties. Our team combines local market knowledge with international standards to ensure seamless transactions."
          tag="About Us"
          imageSrc="https://img.b2bpic.net/free-photo/workers-long-wooden-table_1262-810.jpg"
          imageAlt="Dubai Realty office team"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Our Team", href: "/contact" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Dubai Real Estate Market Excellence"
          description="Demonstrating our leadership position through proven performance metrics and exceptional client satisfaction in Dubai's luxury property sector"
          tag="Market Leadership"
          metrics={[
            { id: "1", icon: Home, title: "Properties Sold", value: "2,400+" },
            { id: "2", icon: Users, title: "Happy Clients", value: "5,800+" },
            { id: "3", icon: TrendingUp, title: "Market Growth", value: "156%" },
            { id: "4", icon: Award, title: "Awards Won", value: "42" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/business-urban-beautiful-landscape-night_1122-1702.jpg"
          imageAlt="Dubai skyline at night"
          logoText="Dubai Realty"
          copyrightText="© 2025 Dubai Realty. All rights reserved."
          columns={[
            {
              title: "Properties",
              items: [
                { label: "Apartments", href: "/properties" },
                { label: "Villas", href: "/properties" },
                { label: "Commercial", href: "/properties" },
                { label: "New Launches", href: "/properties" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Careers", href: "/about" },
                { label: "Contact", href: "/contact" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "Market Insights", href: "/about" },
                { label: "Blog", href: "/about" },
                { label: "FAQs", href: "/contact" },
                { label: "Investment Guide", href: "/about" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}