"use client";

import Link from 'next/link';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Building2, TrendingUp, HelpCircle } from "lucide-react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function PropertiesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="subtle-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Properties", id: "/properties" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="Luxe Properties"
          bottomLeftText="Dubai, United Arab Emirates"
          bottomRightText="hello@luxeproperties.ae"
        />
      </div>

      <div id="properties-extended" data-section="properties-extended">
        <ProductCardFour
          title="Luxury Property Collection"
          description="Browse through our comprehensive portfolio of Dubai's most exclusive properties, from waterfront penthouses to private villas"
          tag="Premium Listings"
          tagIcon={Building2}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          products={[
            {
              id: "penthouse-downtown",
              name: "Downtown Penthouse",
              price: "AED 8,500,000",
              variant: "4 BED | 5 BATH | MARINA VIEW",
              imageSrc: "https://img.b2bpic.net/free-photo/river-modern-buildings-against-sky_1359-154.jpg",
              imageAlt: "Downtown Dubai Penthouse"
            },
            {
              id: "beachfront-villa",
              name: "Beachfront Villa",
              price: "AED 12,000,000",
              variant: "5 BED | 6 BATH | PRIVATE BEACH",
              imageSrc: "https://img.b2bpic.net/free-photo/miami-night-scene_649448-854.jpg",
              imageAlt: "Luxury Beachfront Villa"
            },
            {
              id: "palm-jumeirah-townhouse",
              name: "Palm Jumeirah Townhouse",
              price: "AED 6,750,000",
              variant: "4 BED | 5 BATH | WATERFRONT",
              imageSrc: "https://img.b2bpic.net/free-photo/hong-kong_649448-956.jpg",
              imageAlt: "Palm Jumeirah Luxury Townhouse"
            },
            {
              id: "emirates-hills-mansion",
              name: "Emirates Hills Mansion",
              price: "AED 15,000,000",
              variant: "6 BED | 7 BATH | GOLF COURSE",
              imageSrc: "https://img.b2bpic.net/free-photo/business-urban-beautiful-landscape-night_1122-1702.jpg",
              imageAlt: "Emirates Hills Luxury Mansion"
            },
            {
              id: "burj-khalifa-apartment",
              name: "Burj Khalifa Apartment",
              price: "AED 4,200,000",
              variant: "2 BED | 3 BATH | SKY VIEW",
              imageSrc: "https://img.b2bpic.net/free-photo/train-by-night-dubai_641386-1183.jpg",
              imageAlt: "Burj Khalifa Luxury Apartment"
            }
          ]}
        />
      </div>

      <div id="investment-metrics" data-section="investment-metrics">
        <MetricCardEleven
          title="Investment Performance"
          description="Our properties consistently deliver exceptional returns and capital appreciation for discerning investors"
          tag="Investment Returns"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          metrics={[
            {
              id: "1",
              value: "12%",
              title: "Average Annual Returns",
              description: "Consistent performance across our luxury property portfolio",
              imageSrc: "https://img.b2bpic.net/free-photo/real-estate-mortgage-loan-concept_53876-125138.jpg",
              imageAlt: "Investment Returns"
            },
            {
              id: "2",
              value: "85%",
              title: "Capital Appreciation",
              description: "Average property value increase over five years",
              imageSrc: "https://img.b2bpic.net/free-photo/hand-tapping-tablet-with-map_23-2147732953.jpg",
              imageAlt: "Property Appreciation"
            }
          ]}
        />
      </div>

      <div id="property-faq" data-section="property-faq">
        <FaqBase
          title="Property Investment FAQ"
          description="Essential information for buyers and investors interested in Dubai's luxury real estate market"
          tag="Investment Guide"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "What are the best areas for luxury property investment in Dubai?",
              content: "Prime locations include Downtown Dubai, Palm Jumeirah, Emirates Hills, and Dubai Marina. These areas offer strong capital appreciation potential, excellent rental yields, and prestigious addresses that attract high-net-worth individuals globally."
            },
            {
              id: "2",
              title: "How do I finance a luxury property purchase in Dubai?",
              content: "Most UAE banks offer mortgages up to 75-80% of property value for residents and 50-60% for non-residents. We work with leading financial institutions to secure competitive rates and assist with the entire financing process from pre-approval to completion."
            },
            {
              id: "3",
              title: "What is the typical rental yield for luxury properties?",
              content: "Luxury properties in prime Dubai locations typically generate 3-6% annual rental yields. Penthouses and beachfront properties often command premium rents, while branded residences and serviced apartments can achieve higher yields through short-term rentals."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Luxe Properties"
          columns={[
            {
              items: [
                { label: "About", href: "/about" },
                { label: "Properties", href: "/properties" },
                { label: "Contact", href: "/contact" }
              ]
            },
            {
              items: [
                { label: "How We Work", href: "#" },
                { label: "Market Insights", href: "#" },
                { label: "Investment Guide", href: "#" }
              ]
            },
            {
              items: [
                { label: "Schedule Viewing", href: "/contact" },
                { label: "Support", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms & Conditions", href: "#" },
                { label: "Legal", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}