"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import MediaAbout from '@/components/sections/about/MediaAbout';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="medium"
      background="none"
      cardStyle="elevated"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          navItems={[
            { name: "Home", id: "/" },
            { name: "Properties", id: "/properties" },
            { name: "About", id: "/about" },
            { name: "Services", id: "/services" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Schedule Viewing", href: "/contact" }}
          brandName="LUXE DUBAI"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout 
          title="Redefining Luxury Real Estate Excellence"
          description="For over two decades, LUXE DUBAI has been the premier destination for discerning international buyers seeking exceptional properties in Dubai. Our deep market expertise, exclusive partnerships with developers, and commitment to personalized service have established us as the leading luxury real estate firm in the emirate."
          tag="Our Story"
          imageSrc="https://img.b2bpic.net/free-photo/palm-trees-line-water_23-2148107102.jpg"
          imageAlt="LUXE DUBAI headquarters and team"
          buttons={[
            { text: "Explore Our Services", href: "/services" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFive 
          title="Meet Our Expert Team"
          description="Dedicated professionals committed to delivering exceptional service and results for every client"
          team={[
            {
              id: "1",
              name: "Ahmed Al-Mansouri",
              role: "Chief Executive Officer",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-businessman-sitting-sofa-waiting-area_107420-95816.jpg",
              imageAlt: "Ahmed Al-Mansouri, CEO"
            },
            {
              id: "2",
              name: "Fatima Al-Mazrouei",
              role: "Director of Sales",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-model-sexy-modern-man-dressed-elegant-black-suit-fashion-male-posing-studio-dark-background_158538-21669.jpg",
              imageAlt: "Fatima Al-Mazrouei, Director"
            },
            {
              id: "3",
              name: "Mohammad Al-Hashmi",
              role: "Senior Property Consultant",
              imageSrc: "https://img.b2bpic.net/free-photo/brutal-man-with-beard-black-suit-buttons-up-buttons-his-jacket_343596-7334.jpg",
              imageAlt: "Mohammad Al-Hashmi, Consultant"
            },
            {
              id: "4",
              name: "Layla Al-Suwaidi",
              role: "Investment Specialist",
              imageSrc: "https://img.b2bpic.net/free-photo/man-blue-suit-posing-white-artistic-wall-from-bricks_613910-3011.jpg",
              imageAlt: "Layla Al-Suwaidi, Specialist"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven 
          title="Our Track Record of Success"
          description="Proven excellence and market leadership in Dubai's competitive luxury real estate landscape"
          metrics={[
            {
              id: "1",
              value: "2003",
              title: "Year Established",
              items: [
                "Over 20 years of market presence",
                "Witnessed Dubai's transformation",
                "Built lasting client relationships"
              ]
            },
            {
              id: "2",
              value: "AED 2B+",
              title: "Total Sales Volume",
              items: [
                "Luxury property transactions",
                "Investment portfolio management",
                "Consistently growing market share"
              ]
            },
            {
              id: "3",
              value: "95%",
              title: "Client Retention Rate",
              items: [
                "Repeat investment clients",
                "Referral-based growth",
                "Long-term partnerships"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterMedia 
        imageSrc="https://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920931.jpg"
        imageAlt="Dubai skyline at night"
        logoText="LUXE DUBAI"
        columns={[
          {
            title: "Properties",
            items: [
              { label: "All Properties", href: "/properties" },
              { label: "Villas", href: "/properties" },
              { label: "Apartments", href: "/properties" },
              { label: "Penthouses", href: "/properties" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Our Team", href: "/about" },
              { label: "Services", href: "/services" },
              { label: "Blog", href: "#" }
            ]
          },
          {
            title: "Contact",
            items: [
              { label: "Get in Touch", href: "/contact" },
              { label: "Schedule Viewing", href: "/contact" },
              { label: "Support", href: "/contact" }
            ]
          }
        ]}
        copyrightText="© 2025 LUXE DUBAI. All rights reserved."
      />
    </ThemeProvider>
  );
}