"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Star, Sparkles, Quote, Home, Award, TrendingUp, Users, CheckCircle, Clock, Mail } from "lucide-react";

// Navbar
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';

// Sections
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="LUXE DUBAI"
          button={{
            text: "Explore Properties",            href: "#contact"
          }}
          className="backdrop-blur-md bg-white/80 border-b border-black/5"
          buttonClassName="font-bold"
          buttonTextClassName="font-bold text-sm"
        />
      </div>

      {/* Hero Section */}
      <div id="hero" data-section="hero" className="relative overflow-hidden">
        <div className="max-w-7xl mx-auto">
          <HeroSplitKpi
            title="Discover Luxury Properties in Dubai"
            description="Explore the finest real estate opportunities in Dubai. From penthouse apartments with panoramic views to exclusive villas and premium commercial spaces, find your perfect investment in the heart of the UAE."
            tag="Premium Real Estate"
            tagIcon={Sparkles}
            kpis={[
              { value: "500+", label: "Properties Listed" },
              { value: "15M+", label: "AED in Transactions" },
              { value: "98%", label: "Client Satisfaction" }
            ]}
            enableKpiAnimation={true}
            imageSrc="https://img.b2bpic.net/free-photo/hong-kong_649448-956.jpg"
            imageAlt="Dubai skyline with luxury buildings"
            imagePosition="right"
            buttons={[
              { text: "View Properties", href: "#properties" },
              { text: "Schedule Viewing", href: "#contact" }
            ]}
            className="min-h-screen"
            containerClassName="py-20"
            kpiClassName="backdrop-blur-xl bg-white/20 border border-white/30 rounded-2xl p-6 shadow-lg"
          />
        </div>
      </div>

      {/* About Section */}
      <div id="about" data-section="about" className="relative bg-white/50 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto">
          <TestimonialAboutCard
            tag="About LUXE DUBAI"
            tagIcon={Award}
            title="Your Trusted Partner in Dubai Real Estate Excellence"
            description="Ahmed Al-Mansouri"
            subdescription="Founder & CEO"
            icon={Home}
            imageSrc="https://img.b2bpic.net/free-photo/man-looking-away-while-going-upstairs-with-coffee_171337-19937.jpg"
            imageAlt="LUXE DUBAI real estate team"
            useInvertedBackground="noInvert"
            className="py-20"
            containerClassName="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"
            cardClassName="backdrop-blur-lg bg-white/40 border border-white/30 rounded-3xl p-8 shadow-2xl"
            titleClassName="text-4xl md:text-5xl font-bold leading-tight"
            descriptionClassName="text-xl font-semibold"
            subdescriptionClassName="text-lg opacity-75"
          />
        </div>
      </div>

      {/* Featured Properties */}
      <div id="properties" data-section="properties" className="relative">
        <div className="max-w-7xl mx-auto">
          <ProductCardThree
            title="Featured Properties"
            description="Handpicked luxury properties and investment opportunities across Dubai's most prestigious locations"
            tag="Exclusive Listings"
            tagIcon={Star}
            products={[
              {
                id: "1",                name: "Downtown Penthouse - 4 BHK",                price: "3.5M AED",                imageSrc: "https://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920926.jpg",                imageAlt: "Luxury penthouse with views"
              },
              {
                id: "2",                name: "Palm Jumeirah Villa - Waterfront",                price: "8.2M AED",                imageSrc: "https://img.b2bpic.net/free-photo/contemporary-living-room_1150-12613.jpg",                imageAlt: "Luxury villa with pool"
              },
              {
                id: "3",                name: "Business Bay Office Space - Premium",                price: "2.1M AED",                imageSrc: "https://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920931.jpg",                imageAlt: "Modern commercial office space"
              }
            ]}
            gridVariant="three-columns-all-equal-width"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground="invertDefault"
            className="py-20"
            containerClassName="space-y-12"
            cardClassName="backdrop-blur-md bg-white/50 border border-white/30 rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all"
            textBoxTitleClassName="text-4xl md:text-5xl font-bold"
          />
        </div>
      </div>

      {/* Why Choose Us */}
      <div id="features" data-section="features" className="relative bg-white/30">
        <div className="max-w-7xl mx-auto">
          <FeatureCardMedia
            title="Why Choose LUXE DUBAI"
            description="We combine expert market knowledge with personalized service to deliver exceptional real estate solutions"
            tag="Our Expertise"
            features={[
              {
                id: "1",                title: "Market Leadership",                description: "Over 15 years of excellence in Dubai real estate with an unmatched portfolio of successful transactions",                tag: "Experience",                imageSrc: "https://img.b2bpic.net/free-photo/hong-kong_649448-956.jpg",                imageAlt: "Dubai real estate market"
              },
              {
                id: "2",                title: "Premium Listings",                description: "Access to exclusive off-market properties and investment opportunities before they hit the public market",                tag: "Exclusive Access",                imageSrc: "https://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920926.jpg",                imageAlt: "Premium property listings"
              },
              {
                id: "3",                title: "Expert Guidance",                description: "Dedicated agents and consultants providing comprehensive market insights and investment strategies",                tag: "Professional Support",                imageSrc: "https://img.b2bpic.net/free-photo/contemporary-living-room_1150-12613.jpg",                imageAlt: "Expert real estate consultation"
              }
            ]}
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground="noInvert"
            className="py-20"
            containerClassName="space-y-12"
            itemClassName="backdrop-blur-lg bg-white/30 border border-white/30 rounded-2xl overflow-hidden shadow-lg"
            textBoxTitleClassName="text-4xl md:text-5xl font-bold"
          />
        </div>
      </div>

      {/* Investment Metrics */}
      <div id="metrics" data-section="metrics" className="relative">
        <div className="max-w-7xl mx-auto">
          <MetricCardOne
            title="Investment Growth & Success"
            description="Proven track record of exceptional returns and client satisfaction in the Dubai real estate market"
            tag="Performance"
            tagIcon={TrendingUp}
            metrics={[
              {
                id: "1",                value: "12K+",                title: "Happy Clients",                description: "Satisfied investors and property owners",                icon: Users
              },
              {
                id: "2",                value: "25B",                title: "AED in Deals",                description: "Total transaction value managed",                icon: TrendingUp
              },
              {
                id: "3",                value: "98%",                title: "Success Rate",                description: "Successful property transactions",                icon: CheckCircle
              },
              {
                id: "4",                value: "24/7",                title: "Support",                description: "Round-the-clock client assistance",                icon: Clock
              }
            ]}
            gridVariant="four-items-2x2-equal-grid"
            animationType="scale-rotate"
            textboxLayout="default"
            useInvertedBackground="invertDefault"
            className="py-20"
            containerClassName="space-y-12"
            cardClassName="backdrop-blur-xl bg-white/40 border border-white/30 rounded-2xl p-8 shadow-lg"
            valueClassName="text-6xl font-bold bg-gradient-to-r from-black to-gray-600 bg-clip-text text-transparent"
            titleClassName="text-2xl font-bold mt-4"
          />
        </div>
      </div>

      {/* Testimonials */}
      <div id="testimonials" data-section="testimonials" className="relative bg-white/40 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto">
          <TestimonialCardSix
            title="Client Success Stories"
            description="Hear from our satisfied clients about their exceptional experiences with LUXE DUBAI"
            tag="Testimonials"
            tagIcon={Quote}
            testimonials={[
              {
                id: "1",                name: "Fatima Al-Maktoum",                handle: "Luxury Investor",                testimonial: "LUXE DUBAI made finding my dream penthouse effortless. Their expertise and attention to detail transformed my investment journey.",                imageSrc: "https://img.b2bpic.net/free-photo/happy-ethnic-executive-woman-looking-camera_1098-20037.jpg",                imageAlt: "Fatima Al-Maktoum"
              },
              {
                id: "2",                name: "Mohammed Hassan",                handle: "Business Owner",                testimonial: "Outstanding service from start to finish. They handled my commercial property investment with professionalism and care.",                imageSrc: "https://img.b2bpic.net/free-photo/closeup-senior-businessman-with-arms-crossed_1262-1751.jpg",                imageAlt: "Mohammed Hassan"
              },
              {
                id: "3",                name: "Sarah Johnson",                handle: "Expatriate Investor",                testimonial: "As a foreigner, I appreciated their guidance through Dubai's real estate process. Exceptional partners in every way.",                imageSrc: "https://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg",                imageAlt: "Sarah Johnson"
              },
              {
                id: "4",                name: "Ahmed Al-Zaabi",                handle: "Property Developer",                testimonial: "Their market insights and network opened doors I never knew existed. A true leader in Dubai real estate.",                imageSrc: "https://img.b2bpic.net/free-photo/side-view-business-man-city_23-2148479568.jpg",                imageAlt: "Ahmed Al-Zaabi"
              },
              {
                id: "5",                name: "Emma Williams",                handle: "Real Estate Consultant",                testimonial: "Partnering with LUXE DUBAI elevated my business. Their professionalism and integrity are unmatched in the market.",                imageSrc: "https://img.b2bpic.net/free-photo/happy-ethnic-executive-woman-looking-camera_1098-20037.jpg",                imageAlt: "Emma Williams"
              },
              {
                id: "6",                name: "Rashid Al-Mansoori",                handle: "Seasoned Investor",                testimonial: "After 20 years in real estate, LUXE DUBAI remains my top choice for premium properties and strategic investments.",                imageSrc: "https://img.b2bpic.net/free-photo/closeup-senior-businessman-with-arms-crossed_1262-1751.jpg",                imageAlt: "Rashid Al-Mansoori"
              }
            ]}
            animationType="opacity"
            textboxLayout="default"
            useInvertedBackground="noInvert"
            speed={35}
            topMarqueeDirection="left"
            className="py-20"
            containerClassName="space-y-8"
            cardClassName="backdrop-blur-md bg-white/40 border border-white/30 rounded-2xl p-6 shadow-lg"
            testimonialClassName="text-lg font-semibold line-clamp-2"
            titleClassName="text-4xl md:text-5xl font-bold"
          />
        </div>
      </div>

      {/* Contact Section */}
      <div id="contact" data-section="contact" className="relative bg-white/50">
        <div className="max-w-7xl mx-auto">
          <ContactSplit
            tag="Get in Touch"
            tagIcon={Mail}
            title="Start Your Real Estate Journey Today"
            description="Contact our expert team to discuss your property investment needs. Whether you're buying, selling, or investing, we're here to guide you every step of the way."
            useInvertedBackground="invertDefault"
            imageSrc="https://img.b2bpic.net/free-photo/hong-kong_649448-956.jpg"
            imageAlt="Dubai luxury real estate"
            mediaPosition="right"
            inputPlaceholder="Enter your email address"
            buttonText="Get Started"
            termsText="We'll never spam you. Unsubscribe anytime."
            className="py-20"
            containerClassName="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"
            contactFormClassName="backdrop-blur-xl bg-white/50 border border-white/30 rounded-3xl p-12 shadow-2xl"
            formClassName="space-y-6"
            titleClassName="text-4xl md:text-5xl font-bold"
            descriptionClassName="text-lg opacity-90"
          />
        </div>
      </div>

      {/* Footer */}
      <FooterBaseReveal
        columns={[
          {
            title: "Company",            items: [
              { label: "About Us", href: "#about" },
              { label: "Properties", href: "#properties" },
              { label: "Contact", href: "#contact" }
            ]
          },
          {
            title: "Services",            items: [
              { label: "Buy Property", href: "#properties" },
              { label: "Sell Property", href: "#contact" },
              { label: "Investment Advice", href: "#contact" }
            ]
          },
          {
            title: "Connect",            items: [
              { label: "Dubai, UAE", href: "#" },
              { label: "+971 4 XXXX XXXX", href: "#" },
              { label: "info@luxedubai.ae", href: "#" }
            ]
          }
        ]}
        copyrightText="© 2025 LUXE DUBAI. All rights reserved. Premium Real Estate Solutions."
        className="backdrop-blur-md bg-white/50 border-t border-black/10"
        containerClassName="py-16 px-6"
        columnTitleClassName="font-bold text-lg mb-6"
        columnItemClassName="text-base opacity-80 hover:opacity-100 transition-opacity"
      />
    </ThemeProvider>
  );
}