"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Star, Facebook, Instagram, Linkedin, Twitter } from 'lucide-react';

export default function PropertiesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Prestige Realty Dubai"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Properties", id: "/properties" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Schedule Viewing",
            href: "/contact"
          }}
          className="bg-white/80 backdrop-blur-md"
          navItemClassName="text-foreground font-semibold hover:text-primary-cta transition-colors"
          buttonClassName="bg-primary-cta hover:bg-primary-cta/90 text-white"
          buttonTextClassName="font-semibold"
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardFour
          title="Featured Properties"
          description="Explore our handpicked selection of premium properties across Dubai's most sought-after neighborhoods."
          tag="Exclusive Listings"
          tagIcon={Star}
          textboxLayout="default"
          products={[
            {
              id: "villa-001",
              name: "Ultra-Luxury Palm Jumeirah Villa",
              price: "AED 45,000,000",
              variant: "5 Bedrooms • Private Beach Access • Smart Home",
              imageSrc: "https://img.b2bpic.net/free-photo/inner-courtyard-with-swimming-pool_661209-479.jpg",
              imageAlt: "Ultra-luxury Palm Jumeirah villa with private beach access"
            },
            {
              id: "apartment-001",
              name: "Downtown Dubai Penthouse",
              price: "AED 28,500,000",
              variant: "4 Bedrooms • Burj Khalifa View • Concierge Service",
              imageSrc: "https://img.b2bpic.net/free-photo/luxury-modern-home-with-pool-tropical-landscape_23-2152008235.jpg",
              imageAlt: "Luxury downtown Dubai penthouse with city views"
            },
            {
              id: "beachfront-001",
              name: "Arabian Ranches Waterfront Estate",
              price: "AED 38,000,000",
              variant: "6 Bedrooms • Golf Course • Premium Amenities",
              imageSrc: "https://img.b2bpic.net/free-photo/blue-sun-loungers-swimming-pool_198523-20.jpg",
              imageAlt: "Premium Arabian Ranches beachfront property"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          className="w-full"
          containerClassName="py-20 px-6"
          textBoxTitleClassName="text-4xl md:text-5xl font-extrabold text-foreground"
          textBoxDescriptionClassName="text-base text-foreground/75"
          cardNameClassName="font-bold text-foreground text-lg"
          cardPriceClassName="text-primary-cta font-extrabold text-xl"
          cardVariantClassName="text-foreground/70 text-sm"
        />
      </div>

      <FooterCard
        logoText="Prestige Realty Dubai"
        copyrightText="© 2025 Prestige Realty Dubai. All rights reserved. | Premium Real Estate Solutions"
        socialLinks={[
          { icon: Facebook, href: "https://facebook.com/prestigerealtydubai", ariaLabel: "Visit our Facebook page" },
          { icon: Instagram, href: "https://instagram.com/prestigerealtydubai", ariaLabel: "Follow us on Instagram" },
          { icon: Linkedin, href: "https://linkedin.com/company/prestigerealtydubai", ariaLabel: "Connect with us on LinkedIn" },
          { icon: Twitter, href: "https://twitter.com/prestigedubai", ariaLabel: "Follow us on Twitter" }
        ]}
        className="w-full"
        containerClassName="py-12 px-6"
        cardClassName="rounded-2xl"
        logoClassName="text-2xl font-extrabold text-foreground"
        copyrightTextClassName="text-foreground/70 text-sm"
      />
    </ThemeProvider>
  );
}