"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import Link from 'next/link';

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="medium"
      background="none"
      cardStyle="elevated"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          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" }}
          brandName="LUXE DUBAI"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo 
          logoText="LUXE DUBAI"
          description="Experience the pinnacle of luxury living in Dubai's most prestigious properties"
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/inner-courtyard-with-swimming-pool_661209-479.jpg",
              imageAlt: "Modern luxury villa in Dubai"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/blue-sun-loungers-swimming-pool_198523-20.jpg",
              imageAlt: "Penthouse with city skyline view"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/place-relax-sunny-beach-black-sea-bulgaria-summer-vacation-travel-holiday_627829-9817.jpg",
              imageAlt: "Luxury mansion with private pool"
            }
          ]}
          buttons={[
            { text: "Explore Properties", href: "/properties" },
            { text: "Get in Touch", href: "/contact" }
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardOne 
          title="Featured Properties"
          description="Discover our handpicked selection of luxury residences across Dubai's most exclusive neighborhoods"
          products={[
            {
              id: "1",
              name: "Palm Jumeirah Villa",
              price: "AED 8,500,000",
              imageSrc: "https://img.b2bpic.net/free-photo/beach-chair-hotel_1150-17975.jpg",
              imageAlt: "Luxury villa with modern architecture"
            },
            {
              id: "2",
              name: "Downtown Penthouse",
              price: "AED 12,000,000",
              imageSrc: "https://img.b2bpic.net/free-photo/mosque-pictures-moroccan-wall-pattern_1203-5080.jpg",
              imageAlt: "Penthouse with waterfront views"
            },
            {
              id: "3",
              name: "Emirates Hills Mansion",
              price: "AED 15,500,000",
              imageSrc: "https://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920949.jpg",
              imageAlt: "Exclusive mansion in Emirates Hills"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "View All Properties", href: "/properties" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout 
          title="Premier Luxury Real Estate Partner"
          description="With over 20 years of expertise in Dubai's luxury property market, LUXE DUBAI specializes in connecting discerning international buyers and investors with exceptional residences in the emirate's most coveted locations."
          tag="About LUXE DUBAI"
          imageSrc="https://img.b2bpic.net/free-photo/palm-trees-line-water_23-2148107102.jpg"
          imageAlt="LUXE DUBAI office team"
          buttons={[
            { text: "Learn More", href: "/about" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureProcessSteps 
          title="Our Comprehensive Services"
          description="We provide end-to-end real estate solutions tailored to your unique requirements, ensuring a seamless experience from property search to ownership"
          tag="What We Offer"
          steps={[
            {
              number: "01",
              title: "Property Consultation",
              tag: "Initial Stage",
              description: "Expert guidance to identify properties matching your investment goals and lifestyle preferences in Dubai's luxury market"
            },
            {
              number: "02",
              title: "Private Viewings",
              tag: "Viewing Phase",
              description: "Exclusive access to premium properties with personalized tours and detailed market insights from our specialists"
            },
            {
              number: "03",
              title: "Legal & Documentation",
              tag: "Closing Phase",
              description: "Complete support with contracts, permits, and regulatory compliance to ensure a smooth and secure transaction"
            }
          ]}
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Schedule Consultation", href: "/contact" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven 
          title="Our Market Leadership"
          description="Proven excellence in Dubai's luxury real estate sector"
          metrics={[
            {
              id: "1",
              value: "500+",
              title: "Luxury Properties Sold",
              items: [
                "Premium locations across Dubai",
                "Average transaction value AED 5M+",
                "98% client satisfaction rate"
              ]
            },
            {
              id: "2",
              value: "20+",
              title: "Years of Market Experience",
              items: [
                "Deep knowledge of Dubai's real estate",
                "Established relationships with developers",
                "Access to exclusive off-market properties"
              ]
            },
            {
              id: "3",
              value: "15+",
              title: "Expert Agents",
              items: [
                "Multilingual professionals",
                "Certified real estate specialists",
                "Dedicated client relationship managers"
              ]
            },
            {
              id: "4",
              value: "40+",
              title: "Nationalities Served",
              items: [
                "International buyer expertise",
                "Global network of investors",
                "Multicultural transaction experience"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen 
          title="Client Testimonials"
          description="Hear from satisfied international investors and homeowners who've partnered with LUXE DUBAI"
          testimonials={[
            {
              id: "1",
              name: "James Mitchell",
              handle: "@jmitchell_investor",
              testimonial: "LUXE DUBAI found us the perfect investment property in Downtown Dubai. Their expertise and professionalism made the entire process seamless. Highly recommended!",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/handsome-businessman-wearing-fashion-eyeglasses-stylish-suit-sitting-sofa-modern-studio_496169-1399.jpg",
              imageAlt: "James Mitchell"
            },
            {
              id: "2",
              name: "Sophia Rodriguez",
              handle: "@sophiarodriguez",
              testimonial: "Exceptional service from start to finish. The team understood exactly what we were looking for in a Palm Jumeirah villa. Couldn't be happier with our choice!",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",
              imageAlt: "Sophia Rodriguez"
            },
            {
              id: "3",
              name: "David Chen",
              handle: "@davidchen_dubai",
              testimonial: "As a first-time buyer in Dubai, LUXE DUBAI's guidance was invaluable. They handled all the complexities with expertise and made me feel confident in my investment.",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg",
              imageAlt: "David Chen"
            },
            {
              id: "4",
              name: "Emma Thompson",
              handle: "@emmathompson_uk",
              testimonial: "Outstanding property selection and market knowledge. The team's attention to detail and personalized approach set them apart from other agencies.",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-businessman-holding-mobile-phone-coffee-cup-waiting-area_107420-95820.jpg",
              imageAlt: "Emma Thompson"
            },
            {
              id: "5",
              name: "Marcus Weber",
              handle: "@marcusweber_de",
              testimonial: "Professional, trustworthy, and results-oriented. LUXE DUBAI delivered beyond expectations. Their network and resources are unmatched in the Dubai market.",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/front-view-elegant-groom-posing_23-2150327171.jpg",
              imageAlt: "Marcus Weber"
            },
            {
              id: "6",
              name: "Isabella Romano",
              handle: "@bellaromano_italy",
              testimonial: "Exceptional experience from consultation to closing. The team's multilingual support and understanding of international buyers made everything straightforward and stress-free.",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/elegant-young-handsome-man-classic-black-costume-studio-fashion-portrait_1328-2218.jpg",
              imageAlt: "Isabella Romano"
            }
          ]}
          showRating={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <FooterMedia 
        imageSrc="https://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920931.jpg"
        imageAlt="Dubai skyline at night"
        logoText="LUXE DUBAI"
        columns={[
          {
            title: "Properties",
            items: [
              { label: "All Properties", href: "/properties" },
              { label: "Villas", href: "/properties" },
              { label: "Apartments", href: "/properties" },
              { label: "Penthouses", href: "/properties" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Our Team", href: "/about" },
              { label: "Services", href: "/services" },
              { label: "Blog", href: "#" }
            ]
          },
          {
            title: "Contact",
            items: [
              { label: "Get in Touch", href: "/contact" },
              { label: "Schedule Viewing", href: "/contact" },
              { label: "Support", href: "/contact" }
            ]
          }
        ]}
        copyrightText="© 2025 LUXE DUBAI. All rights reserved."
      />
    </ThemeProvider>
  );
}