"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MediaAbout from '@/components/sections/about/MediaAbout';
import { TrendingUp, Users, Building2, Globe } from 'lucide-react';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';

export default function HomePage() {
  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="hero" data-section="hero">
        <HeroLogo
          logoText="Luxe Dubai"
          description="Discover exclusive properties in Dubai's most prestigious locations. Premium residences, villas, and investment opportunities."
          buttons={[
            { text: "Explore Properties", href: "properties" },
            { text: "Schedule Consultation", href: "contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/business-urban-beautiful-landscape-night_1122-1702.jpg"
          imageAlt="Dubai luxury skyline with modern architecture"
          showDimOverlay={true}
          logoLineHeight={1.2}
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardOne
          title="Featured Properties"
          description="Handpicked luxury properties across Dubai's most coveted developments and communities."
          products={[
            {
              id: "1",
              name: "Downtown Penthouse",
              price: "AED 4,500,000",
              imageSrc: "https://img.b2bpic.net/free-photo/chicago-night-panorama_649448-1444.jpg",
              imageAlt: "Luxury penthouse with city views"
            },
            {
              id: "2",
              name: "Emirates Hills Villa",
              price: "AED 8,200,000",
              imageSrc: "https://img.b2bpic.net/free-photo/train-by-night-dubai_641386-1183.jpg",
              imageAlt: "Modern luxury villa with landscaping"
            },
            {
              id: "3",
              name: "Dubai Marina Waterfront",
              price: "AED 5,900,000",
              imageSrc: "https://img.b2bpic.net/free-photo/miami-night-scene_649448-854.jpg",
              imageAlt: "Waterfront property with marina views"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Your Premier Dubai Real Estate Partner"
          description="With over 20 years of expertise in Dubai's luxury property market, we specialize in connecting discerning clients with exceptional properties. Our dedicated team provides personalized service, market insight, and exclusive access to Dubai's most prestigious developments."
          tag="About Us"
          buttons={[
            { text: "Learn More", href: "about" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/landmark-sea-waterfront-dusk-modern_1203-6139.jpg"
          imageAlt="Professional real estate team in modern office"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Market Strength"
          description="Dubai's real estate market continues to demonstrate robust growth and investor confidence."
          metrics={[
            {
              id: "1",
              icon: TrendingUp,
              title: "Property Values",
              value: "+12.5%"
            },
            {
              id: "2",
              icon: Users,
              title: "Active Buyers",
              value: "50,000+"
            },
            {
              id: "3",
              icon: Building2,
              title: "Properties Listed",
              value: "25,000+"
            },
            {
              id: "4",
              icon: Globe,
              title: "International Investors",
              value: "140+ Countries"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",
              name: "Sarah Al Maktoum",
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",
              imageAlt: "Sarah Al Maktoum"
            },
            {
              id: "2",
              name: "Ahmed Al Zaabi",
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",
              imageAlt: "Ahmed Al Zaabi"
            },
            {
              id: "3",
              name: "Fatima Al Noor",
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
              imageAlt: "Fatima Al Noor"
            },
            {
              id: "4",
              name: "Mohammed Al Mansouri",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-businessman-sitting-sofa-waiting-area_107420-95816.jpg",
              imageAlt: "Mohammed Al Mansouri"
            },
            {
              id: "5",
              name: "Layla Al Hamadi",
              imageSrc: "https://img.b2bpic.net/free-photo/handsome-gay-official-suit-looking-camera-front-view-bearded-caucasian-man-smiling-camera-getting-dressed-wedding-ceremony-with-lover-lgbt-love-marriage-concept_74855-22937.jpg",
              imageAlt: "Layla Al Hamadi"
            },
            {
              id: "6",
              name: "Hassan Al Kaabi",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-happy-businesswoman-her-employees-background_1262-20305.jpg",
              imageAlt: "Hassan Al Kaabi"
            }
          ]}
          cardTitle="Trusted by thousands of satisfied buyers, sellers, and investors across Dubai and the region"
          cardTag="Client Success Stories"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="categories" data-section="categories">
        <FeatureCardTwentyThree
          title="Property Categories"
          description="Explore our diverse portfolio across Dubai's most prestigious neighborhoods and property types."
          features={[
            {
              id: "1",
              title: "Luxury Apartments & Penthouses",
              tags: ["Downtown", "Marina", "DIFC"],
              imageSrc: "https://img.b2bpic.net/free-photo/river-modern-buildings-against-sky_1359-154.jpg",
              imageAlt: "Luxury apartment with modern design"
            },
            {
              id: "2",
              title: "Exclusive Villas",
              tags: ["Emirates Hills", "Palm Jumeirah", "Jumeirah Golf Estate"],
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-long-exposure-amazing-urban-complex_1122-1684.jpg",
              imageAlt: "Modern luxury villa architecture"
            },
            {
              id: "3",
              title: "Commercial & Investment",
              tags: ["Office Space", "Retail", "Mixed-Use"],
              imageSrc: "https://img.b2bpic.net/free-photo/business-city-landmark-singapore-beautiful_1122-1685.jpg",
              imageAlt: "Modern commercial real estate building"
            },
            {
              id: "4",
              title: "Prime Land & Development",
              tags: ["Investment", "Development", "Prime Locations"],
              imageSrc: "https://img.b2bpic.net/free-photo/city-sparkles-light-streets-night_23-2149057562.jpg",
              imageAlt: "Prime development land in Dubai"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          title="Stay Updated on Premium Opportunities"
          description="Subscribe to our exclusive newsletter and receive curated property listings, market insights, and investment opportunities before they become available to the general public."
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time to stop receiving updates."
          mediaPosition="right"
        />
      </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: "#properties" },
                { label: "Sell Property", href: "#contact" },
                { label: "Rent Property", href: "#properties" },
                { 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>
  );
}