"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Sparkles, Building2, Award, CheckCircle, TrendingUp, Star, HelpCircle } from "lucide-react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function HomePage() {
  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="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Discover Luxury Living in Dubai"
          description="Explore our curated collection of world-class properties in the world's most prestigious address. From stunning penthouses to exclusive villas, find your perfect sanctuary."
          tag="Premium Properties"
          tagIcon={Sparkles}
          background={{ variant: "plain" }}
          buttons={[
            { text: "View Properties", href: "/properties" },
            { text: "Schedule Viewing", href: "/contact" }
          ]}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/train-by-night-dubai_641386-1183.jpg",
              imageAlt: "Dubai Luxury Skyline"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/river-modern-buildings-against-sky_1359-154.jpg",
              imageAlt: "Luxury Penthouse"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/miami-night-scene_649448-854.jpg",
              imageAlt: "Beachfront Villa"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/hong-kong_649448-956.jpg",
              imageAlt: "Modern Townhouse"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/fiance-with-friends-drining-wedding-day-indoors_8353-12087.jpg",
              imageAlt: "Company Office"
            }
          ]}
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardFour
          title="Featured Properties"
          description="Handpicked luxury residences offering exceptional value and prestigious locations across Dubai"
          tag="Exclusive Listings"
          tagIcon={Building2}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          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"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="Your Gateway to Dubai's Most Exclusive Properties"
          description="With over two decades of experience in Dubai's luxury real estate market, we specialize in connecting discerning clients with their dream properties. Our team of expert agents combines deep market knowledge with personalized service to ensure seamless transactions and exceptional value."
          tag="About Us"
          tagIcon={Award}
          imageSrc="https://img.b2bpic.net/free-photo/fiance-with-friends-drining-wedding-day-indoors_8353-12087.jpg"
          imageAlt="Luxe Properties Team"
          metrics={[
            {
              value: "500+",
              title: "Properties Sold"
            },
            {
              value: "AED 5B+",
              title: "Transactions Value"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="expertise" data-section="expertise">
        <FeatureCardTwentyOne
          title="Why Choose Luxe Properties"
          description="Experience the difference with a partner who understands Dubai's luxury real estate market inside and out"
          tag="Our Expertise"
          tagIcon={CheckCircle}
          imageSrc="https://img.b2bpic.net/free-photo/real-estate-mortgage-loan-concept_53876-125138.jpg"
          imageAlt="Real Estate Investment Strategy"
          useInvertedBackground="invertDefault"
          mediaPosition="right"
          accordionItems={[
            {
              id: "1",
              title: "Market Expertise & Insight",
              content: "Two decades of experience navigating Dubai's dynamic luxury real estate market. Our team provides strategic guidance on property values, emerging neighborhoods, and investment opportunities."
            },
            {
              id: "2",
              title: "Personalized Service",
              content: "Every client receives dedicated attention from our expert agents. We understand your unique requirements and work tirelessly to find properties that exceed your expectations."
            },
            {
              id: "3",
              title: "Network & Connections",
              content: "Access to exclusive pre-market listings and off-market properties through our extensive network of international developers and property owners."
            },
            {
              id: "4",
              title: "Seamless Transactions",
              content: "From initial consultation to final handover, we handle all aspects of your property purchase with complete transparency and professional management."
            }
          ]}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <MetricCardEleven
          title="Our Track Record"
          description="Industry-leading performance metrics that demonstrate our commitment to excellence in luxury real estate"
          tag="Results"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",
              value: "98%",
              title: "Client Satisfaction",
              description: "Consistently high ratings from satisfied clients worldwide",
              imageSrc: "https://img.b2bpic.net/free-photo/river-modern-buildings-against-sky_1359-154.jpg",
              imageAlt: "Client Success"
            },
            {
              id: "2",
              value: "2.5M+",
              title: "Square Meters Sold",
              description: "Total property area managed and sold successfully",
              imageSrc: "https://img.b2bpic.net/free-photo/miami-night-scene_649448-854.jpg",
              imageAlt: "Property Portfolio"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Clients Say"
          description="Hear from international investors and residents who have found their perfect properties with Luxe Properties"
          tag="Client Stories"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",
              name: "James Mitchell, International Investor",
              date: "Date: 15 November 2024",
              title: "The best real estate experience in Dubai",
              quote: "Working with Luxe Properties was seamless. Their expertise and attention to detail helped me secure a premium penthouse before it hit the market. Highly recommended for serious investors.",
              tag: "Premium Client",
              avatarSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",
              avatarAlt: "James Mitchell",
              imageSrc: "https://img.b2bpic.net/free-photo/river-modern-buildings-against-sky_1359-154.jpg",
              imageAlt: "Downtown Dubai Penthouse"
            },
            {
              id: "2",
              name: "Fatima Al-Mansouri, Property Owner",
              date: "Date: 22 October 2024",
              title: "Exceeded all expectations",
              quote: "The team went above and beyond to find the perfect beachfront villa for my family. Their knowledge of Dubai's luxury market is unparalleled. They made the entire process effortless.",
              tag: "Residential Client",
              avatarSrc: "https://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3796.jpg",
              avatarAlt: "Fatima Al-Mansouri",
              imageSrc: "https://img.b2bpic.net/free-photo/miami-night-scene_649448-854.jpg",
              imageAlt: "Luxury Beachfront Villa"
            },
            {
              id: "3",
              name: "Mohammed Al-Jahani, Real Estate Developer",
              date: "Date: 08 September 2024",
              title: "Outstanding market knowledge",
              quote: "As a developer, I appreciate their deep understanding of market dynamics and investor requirements. They consistently deliver exceptional results and maintain the highest professional standards.",
              tag: "Developer Partner",
              avatarSrc: "https://img.b2bpic.net/free-photo/friendly-successful-business-woman-posing-with-arms-crossed_74855-2813.jpg",
              avatarAlt: "Mohammed Al-Jahani",
              imageSrc: "https://img.b2bpic.net/free-photo/hong-kong_649448-956.jpg",
              imageAlt: "Palm Jumeirah Townhouse"
            }
          ]}
        />
      </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>
  );
}