"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles, ArrowRight, TrendingUp } from 'lucide-react';

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Luxury Estates HK"
          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" }}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentySix
          features={[
            {
              title: "Property Sales",
              description: "Exclusive access to Hong Kong's finest residential and commercial properties",
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-real-estate-agent-talking-with-couple-interested-buying-new-home_637285-6081.jpg",
              imageAlt: "Professional property sales consultation",
              buttonIcon: ArrowRight
            },
            {
              title: "Property Leasing",
              description: "Expert guidance for short-term and long-term rental properties",
              imageSrc: "https://img.b2bpic.net/free-photo/female-real-estate-agent-communicating-with-couple-while-showing-them-new-apartment_637285-6079.jpg",
              imageAlt: "Property leasing services",
              buttonIcon: ArrowRight
            },
            {
              title: "Investment Consulting",
              description: "Strategic investment advice for real estate portfolio development",
              imageSrc: "https://img.b2bpic.net/free-photo/middle-aged-couple-meeting-with-notary_74855-2978.jpg",
              imageAlt: "Real estate investment consulting",
              buttonIcon: ArrowRight
            },
            {
              title: "Property Valuation",
              description: "Professional appraisal and market analysis for all property types",
              imageSrc: "https://img.b2bpic.net/free-photo/mid-adult-couple-discussing-with-financial-advisor-while-analyzing-documents-meeting-office_637285-1726.jpg",
              imageAlt: "Property valuation services",
              buttonIcon: ArrowRight
            },
            {
              title: "Interior Design",
              description: "Luxury interior design services to maximize property potential",
              imageSrc: "https://img.b2bpic.net/free-photo/young-couple-real-estate-agent-using-laptop-while-going-through-housing-plan-meeting_637285-3857.jpg",
              imageAlt: "Luxury interior design consultation",
              buttonIcon: ArrowRight
            },
            {
              title: "Legal Support",
              description: "Full legal support and documentation for property transactions",
              imageSrc: "https://img.b2bpic.net/free-photo/rear-estate-agent-young-couple-going-through-blueprints-using-digital-tablet-meeting_637285-3873.jpg",
              imageAlt: "Legal support for property transactions",
              buttonIcon: ArrowRight
            }
          ]}
          title="Our Services"
          description="Comprehensive real estate solutions tailored to your needs"
          tag="What We Offer"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          metrics={[
            { id: "1", value: "6", description: "Comprehensive Service Offerings" },
            { id: "2", value: "500+", description: "Successful Consultations This Year" },
            { id: "3", value: "24/7", description: "Expert Support Available" }
          ]}
          title="Service Excellence"
          description="Our commitment to delivering exceptional real estate services"
          tag="Service Stats"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Luxury Estates HK"
          copyrightText="© 2025 Luxury Estates Hong Kong. All rights reserved."
          columns={[
            {
              title: "Properties",
              items: [
                { label: "Featured Listings", href: "/properties" },
                { label: "New Projects", href: "/properties" },
                { label: "Investment", href: "/services" }
              ]
            },
            {
              title: "Services",
              items: [
                { label: "Property Sales", href: "/services" },
                { label: "Leasing", href: "/services" },
                { label: "Valuation", href: "/services" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Contact", href: "/contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}