"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import { TrendingUp, Users, Globe } from 'lucide-react';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Luxe Dubai Properties"
          navItems={[
            { name: "Properties", id: "properties" },
            { name: "About", id: "about" },
            { name: "Market", id: "metrics" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Schedule Tour",
            href: "contact"
          }}
        />
      </div>

      <div id="premium-properties" data-section="premium-properties">
        <ProductCardOne
          title="Premium Property Portfolio"
          description="Our comprehensive collection of Dubai's finest luxury properties, carefully curated for discerning investors and buyers seeking exceptional quality and prime locations."
          products={[
            {
              id: "1",
              name: "Burj Khalifa Residence",
              price: "AED 12,500,000",
              imageSrc: "https://img.b2bpic.net/free-photo/chicago-night-panorama_649448-1444.jpg",
              imageAlt: "Luxury Burj Khalifa penthouse with panoramic views"
            },
            {
              id: "2",
              name: "Palm Jumeirah Mansion",
              price: "AED 25,000,000",
              imageSrc: "https://img.b2bpic.net/free-photo/train-by-night-dubai_641386-1183.jpg",
              imageAlt: "Exclusive Palm Jumeirah villa with private beach"
            },
            {
              id: "3",
              name: "Dubai Hills Estate",
              price: "AED 8,750,000",
              imageSrc: "https://img.b2bpic.net/free-photo/miami-night-scene_649448-854.jpg",
              imageAlt: "Modern Dubai Hills luxury residence"
            },
            {
              id: "4",
              name: "DIFC Executive Suite",
              price: "AED 6,200,000",
              imageSrc: "https://img.b2bpic.net/free-photo/river-modern-buildings-against-sky_1359-154.jpg",
              imageAlt: "Premium DIFC executive apartment"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="service-categories" data-section="service-categories">
        <FeatureCardTwentyThree
          title="Comprehensive Real Estate Services"
          description="From property acquisition to investment consulting, our full-service approach covers every aspect of Dubai's luxury real estate market."
          features={[
            {
              id: "1",
              title: "Luxury Property Sales & Acquisitions",
              tags: ["Sales", "Purchasing", "Negotiation"],
              imageSrc: "https://img.b2bpic.net/free-photo/river-modern-buildings-against-sky_1359-154.jpg",
              imageAlt: "Luxury property sales consultation"
            },
            {
              id: "2",
              title: "Investment Portfolio Management",
              tags: ["ROI Analysis", "Portfolio Growth", "Market Insights"],
              imageSrc: "https://img.b2bpic.net/free-photo/business-city-landmark-singapore-beautiful_1122-1685.jpg",
              imageAlt: "Investment portfolio analysis"
            },
            {
              id: "3",
              title: "Property Development Consulting",
              tags: ["Development", "Planning", "Project Management"],
              imageSrc: "https://img.b2bpic.net/free-photo/city-sparkles-light-streets-night_23-2149057562.jpg",
              imageAlt: "Property development consultation"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="market-performance" data-section="market-performance">
        <MetricCardThree
          title="Market Excellence"
          description="Our proven track record demonstrates consistent success across Dubai's dynamic luxury real estate landscape."
          metrics={[
            {
              id: "1",
              icon: TrendingUp,
              title: "Portfolio Growth",
              value: "+18.2%"
            },
            {
              id: "2",
              icon: Users,
              title: "Client Satisfaction",
              value: "98.5%"
            },
            {
              id: "3",
              icon: Globe,
              title: "Global Reach",
              value: "85 Countries"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Luxe Dubai Properties"
          columns={[
            {
              title: "Properties",
              items: [
                { label: "Apartments", href: "/#properties" },
                { label: "Villas", href: "/#properties" },
                { label: "Commercial", href: "/#properties" },
                { label: "Land", href: "/#properties" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Market Reports", href: "/#metrics" },
                { label: "Blog", href: "#blog" }
              ]
            },
            {
              title: "Services",
              items: [
                { label: "Buy Property", href: "/services" },
                { label: "Sell Property", href: "/contact" },
                { label: "Rent Property", href: "/services" },
                { label: "Investment Consultation", href: "/contact" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Cookie Policy", href: "/cookies" },
                { label: "Contact Us", href: "/contact" }
              ]
            }
          ]}
          copyrightText="© 2025 Luxe Dubai Properties. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}