"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { MapPin, DollarSign, Home, Maximize, Star, TrendingUp, Map, Building2, Eye, Phone } from 'lucide-react';

export default function PropertyHub() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="aurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="PropertyHub"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Browse", id: "listings" },
            { name: "Favorites", id: "#" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "List Property",            href: "#"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="PropertyHub"
          description="Discover your perfect home with advanced search filters and interactive property maps"
          buttons={[
            { text: "Start Browsing", href: "#listings" },
            { text: "Learn More", href: "#about" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/swimming-pool-beach-luxury-hotel-type-entertainment-complex-amara-dolce-vita-luxury-hotel-resort-tekirova-kemer-turkey_146671-18719.jpg"
          imageAlt="Modern luxury property exterior"
        />
      </div>

      <div id="filters" data-section="filters">
        <FeatureBorderGlow
          title="Smart Filtering Options"
          description="Find properties that match your exact requirements with our advanced search and filter system"
          features={[
            {
              icon: MapPin,
              title: "Location Search",              description: "Search by neighborhood, city, or coordinates to find properties in your desired area"
            },
            {
              icon: DollarSign,
              title: "Price Range",              description: "Set your budget and instantly filter properties within your financial parameters"
            },
            {
              icon: Home,
              title: "Property Type",              description: "Filter by apartment, house, condo, villa, studio, or commercial properties"
            },
            {
              icon: Maximize,
              title: "Size & Rooms",              description: "Choose properties by square footage, number of bedrooms and bathrooms"
            },
            {
              icon: Star,
              title: "Amenities",              description: "Find pools, gyms, parking, gardens, and other premium features you want"
            },
            {
              icon: TrendingUp,
              title: "Availability",              description: "Filter by listing date, price trends, and market insights"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="listings" data-section="listings">
        <ProductCardOne
          title="Available Properties"
          description="Browse our curated selection of premium properties available for purchase or rent"
          products={[
            {
              id: "prop-1",              name: "Modern Downtown Apartment",              price: "$450,000",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-young-woman-stairs_23-2149204468.jpg",              imageAlt: "Modern apartment living room"
            },
            {
              id: "prop-2",              name: "Contemporary Family Home",              price: "$550,000",              imageSrc: "https://img.b2bpic.net/free-photo/beach-chair-resort_1150-17976.jpg",              imageAlt: "Contemporary house bedroom"
            },
            {
              id: "prop-3",              name: "Luxury City Penthouse",              price: "$850,000",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-woman-vacation_23-2149204469.jpg",              imageAlt: "Luxury penthouse with city view"
            },
            {
              id: "prop-4",              name: "Suburban Family Estate",              price: "$650,000",              imageSrc: "https://img.b2bpic.net/free-photo/happy-caucasian-woman-short-summer-dress-outside-villa-hotel-by-tree-blue-swimming-pool_343596-691.jpg",              imageAlt: "Family home with garden"
            },
            {
              id: "prop-5",              name: "Mediterranean Villa",              price: "$750,000",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-travel-full-shot-woman_23-2149204471.jpg",              imageAlt: "Villa with pool"
            },
            {
              id: "prop-6",              name: "Compact Urban Studio",              price: "$250,000",              imageSrc: "https://img.b2bpic.net/free-photo/woman-charging-electro-car-by-her-house_1303-18609.jpg",              imageAlt: "Modern studio apartment"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          carouselMode="buttons"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="map-integration" data-section="map-integration">
        <SplitAbout
          title="Interactive Property Map"
          description="Visualize all available properties on our interactive map. Click on markers to see listings, get directions, and explore neighborhood information."
          tag="Map Features"
          tagIcon={Map}
          bulletPoints={[
            {
              title: "Real-Time Markers",              description: "See all property locations updated in real-time with prices and key details",              icon: MapPin
            },
            {
              title: "Neighborhood Info",              description: "Get insights about schools, transit, restaurants, and local amenities nearby",              icon: Building2
            },
            {
              title: "Street View",              description: "Explore street-level imagery to get a feel for the area before visiting",              icon: Eye
            },
            {
              title: "Commute Analysis",              description: "Calculate commute times to your workplace and view traffic patterns"
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/young-man-with-keys-just-bought-new-appartment_1303-28900.jpg"
          imageAlt="Interactive property map interface"
          imagePosition="right"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="featured" data-section="featured">
        <ProductCardOne
          title="Featured Properties"
          description="Handpicked premium properties with exceptional value and desirable locations"
          products={[
            {
              id: "featured-1",              name: "Luxury Downtown Penthouse",              price: "$1,200,000",              imageSrc: "https://img.b2bpic.net/free-photo/outdoor-swimming-pool-with-umbrella-chair-lounge-around-there-leisure-travel_74190-7877.jpg",              imageAlt: "Luxury penthouse skyline view"
            },
            {
              id: "featured-2",              name: "Historic Estate Mansion",              price: "$950,000",              imageSrc: "https://img.b2bpic.net/free-photo/outdoor-portrait-caucasian-woman-classic-jumpsuit-with-red-lipstick-vacation-outside-villa-hotel_343596-438.jpg",              imageAlt: "Historic mansion estate property"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="scale-rotate"
          carouselMode="buttons"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="benefits" data-section="benefits">
        <MetricCardSeven
          title="Why Choose PropertyHub"
          description="Leading real estate platform trusted by thousands of buyers and sellers"
          metrics={[
            {
              id: "metric-1",              value: "5,000+",              title: "Active Listings",              items: ["Updated daily", "Verified properties", "Multiple neighborhoods"]
            },
            {
              id: "metric-2",              value: "98%",              title: "Customer Satisfaction",              items: ["Professional service", "Expert guidance", "Fast transactions"]
            },
            {
              id: "metric-3",              value: "15+",              title: "Years Experience",              items: ["Market expertise", "Trusted brand", "Success stories"]
            },
            {
              id: "metric-4",              value: "24/7",              title: "Customer Support",              items: ["Live chat available", "Expert advisors", "Quick responses"]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Get in Touch"
          tagIcon={Phone}
          title="Ready to Find Your Dream Property?"
          description="Contact our expert agents today. We're here to help you navigate the real estate market and find the perfect property that matches your needs and budget."
          buttons={[
            { text: "Schedule a Consultation", href: "#" },
            { text: "View More Listings", href: "#listings" }
          ]}
          background={{ variant: "animated-grid" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Browse",              items: [
                { label: "All Properties", href: "#listings" },
                { label: "Featured", href: "#featured" },
                { label: "New Listings", href: "#" },
                { label: "Rentals", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Contact", href: "#contact" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Buyer Guide", href: "#" },
                { label: "Seller Guide", href: "#" },
                { label: "Market Reports", href: "#" },
                { label: "FAQ", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Sitemap", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 PropertyHub. All rights reserved."
          bottomRightText="Made with vision for real estate"
        />
      </div>
    </ThemeProvider>
  );
}