"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Heart, TrendingUp } from "lucide-react";

export default function PropertiesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeLargeTitles"
      background="radialGradient"
      cardStyle="solid"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Luxe Properties"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Properties", id: "/properties" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Schedule Tour", href: "/contact" }}
        />
      </div>

      <div id="featured-properties" data-section="featured-properties">
        <ProductCardTwo
          title="Premium Property Collection"
          description="Explore our complete portfolio of luxury properties across Dubai's most prestigious developments and neighborhoods"
          tag="All Properties"
          tagIcon={Heart}
          products={[
            {
              id: "1",
              brand: "Marina District",
              name: "Luxury Beachfront Penthouse",
              price: "AED 8,500,000",
              rating: 5,
              reviewCount: "127",
              imageSrc: "https://img.b2bpic.net/free-photo/inner-courtyard-with-swimming-pool_661209-479.jpg",
              imageAlt: "luxury villa modern Dubai real-estate exterior"
            },
            {
              id: "2",
              brand: "Downtown Dubai",
              name: "Modern Downtown Apartment",
              price: "AED 5,200,000",
              rating: 5,
              reviewCount: "89",
              imageSrc: "https://img.b2bpic.net/free-photo/blue-sun-loungers-swimming-pool_198523-20.jpg",
              imageAlt: "beachfront luxury apartment Dubai waterfront premium"
            },
            {
              id: "3",
              brand: "Arabian Ranches",
              name: "Exclusive Villa with Garden",
              price: "AED 6,750,000",
              rating: 5,
              reviewCount: "156",
              imageSrc: "https://img.b2bpic.net/free-photo/place-relax-sunny-beach-black-sea-bulgaria-summer-vacation-travel-holiday_627829-9817.jpg",
              imageAlt: "downtown Dubai apartment modern city-center luxury"
            },
            {
              id: "4",
              brand: "Palm Jumeirah",
              name: "Iconic Palm Beachfront Villa",
              price: "AED 12,000,000",
              rating: 5,
              reviewCount: "203",
              imageSrc: "https://img.b2bpic.net/free-photo/mosque-pictures-moroccan-wall-pattern_1203-5080.jpg",
              imageAlt: "villa luxury Dubai exterior garden premium"
            },
            {
              id: "5",
              brand: "Business Bay",
              name: "Business Bay Luxury Suite",
              price: "AED 4,100,000",
              rating: 4,
              reviewCount: "72",
              imageSrc: "https://img.b2bpic.net/free-photo/beach-chair-hotel_1150-17975.jpg",
              imageAlt: "penthouse Dubai luxury apartment high-rise modern"
            },
            {
              id: "6",
              brand: "Jumeirah Beach",
              name: "Beachfront Luxury Residence",
              price: "AED 9,200,000",
              rating: 5,
              reviewCount: "94",
              imageSrc: "https://img.b2bpic.net/free-photo/inner-courtyard-with-swimming-pool_661209-479.jpg",
              imageAlt: "luxury beachfront residence with pool"
            },
            {
              id: "7",
              brand: "DIFC",
              name: "Executive Financial District Suite",
              price: "AED 3,800,000",
              rating: 4,
              reviewCount: "67",
              imageSrc: "https://img.b2bpic.net/free-photo/blue-sun-loungers-swimming-pool_198523-20.jpg",
              imageAlt: "modern financial district apartment"
            },
            {
              id: "8",
              brand: "Emirates Hills",
              name: "Golf Course Mansion",
              price: "AED 15,000,000",
              rating: 5,
              reviewCount: "312",
              imageSrc: "https://img.b2bpic.net/free-photo/mosque-pictures-moroccan-wall-pattern_1203-5080.jpg",
              imageAlt: "luxury golf course mansion"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Filter Properties", href: "#filter" },
            { text: "Contact Agent", href: "/contact" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Market Performance"
          description="Dubai real estate market insights and investment performance metrics"
          tag="Market Stats"
          tagIcon={TrendingUp}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          useInvertedBackground="invertDefault"
          metrics={[
            { id: "1", value: "2,500+", description: "Properties Sold" },
            { id: "2", value: "AED 15B+", description: "Total Value Transacted" },
            { id: "3", value: "8.5%", description: "Average Annual ROI" },
            { id: "4", value: "35 Days", description: "Average Selling Time" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Luxe Properties"
          copyrightText="© 2025 Luxe Properties Dubai. All rights reserved."
          columns={[
            {
              title: "Properties",
              items: [
                { label: "Featured Listings", href: "/properties" },
                { label: "New Developments", href: "/properties" },
                { label: "Investment Properties", href: "/properties" },
                { label: "Luxury Villas", href: "/properties" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Careers", href: "/careers" },
                { label: "Press", href: "/press" }
              ]
            },
            {
              title: "Services",
              items: [
                { label: "Property Buying", href: "/services" },
                { label: "Property Selling", href: "/services" },
                { label: "Investment Consulting", href: "/services" },
                { label: "Property Management", href: "/services" }
              ]
            },
            {
              title: "Support",
              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "FAQ", href: "/faq" },
                { label: "Blog", href: "/blog" },
                { label: "Support Center", href: "/support" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}