"use client"

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Award, Home, TrendingUp, Users } from 'lucide-react';

export default function PropertyLandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="PropertyHub"
          navItems={[
            { name: "Browse", id: "listings" },
            { name: "About", id: "about" },
            { name: "Featured", id: "featured" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "List Property",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Discover Your Next Property"
          description="Browse thousands of verified listings across residential, commercial, and investment properties. Find your perfect home with our advanced search tools and expert guidance."
          tag="Real Estate Marketplace"
          imageSrc="https://img.b2bpic.net/free-photo/two-happy-woman-friends-with-sunglasses-vacation-tropical-country_343596-726.jpg"
          imageAlt="Modern luxury property showcase"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
          buttons={[
            { text: "Browse Listings", href: "#listings" },
            { text: "Contact Agent", href: "#contact" }
          ]}
        />
      </div>

      <div id="listings" data-section="listings">
        <ProductCardThree
          title="Featured Properties"
          description="Browse our curated selection of premium properties available for sale and lease. Filter by location, price, and amenities."
          tag="New Listings"
          products={[
            {
              id: "1",              name: "Modern Downtown Loft - $450,000",              price: "View Details",              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 downtown loft with floor-to-ceiling windows"
            },
            {
              id: "2",              name: "Luxury Penthouse Suite - $1,200,000",              price: "View Details",              imageSrc: "https://img.b2bpic.net/free-photo/happy-successful-business-team-members-posing-office_1262-20245.jpg",              imageAlt: "Luxury penthouse with premium amenities"
            },
            {
              id: "3",              name: "Family Home with Garden - $385,000",              price: "View Details",              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: "Charming family home with spacious garden"
            },
            {
              id: "4",              name: "Executive Apartment - $650,000",              price: "View Details",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-young-woman-stairs_23-2149204468.jpg",              imageAlt: "Executive apartment in prime location"
            },
            {
              id: "5",              name: "Beachfront Villa - $2,500,000",              price: "View Details",              imageSrc: "https://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg",              imageAlt: "Luxury beachfront villa with ocean views"
            },
            {
              id: "6",              name: "Commercial Office Space - $750,000",              price: "View Details",              imageSrc: "https://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-house_23-2149571921.jpg",              imageAlt: "Modern commercial office space"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="PropertyHub connects millions of buyers, sellers, and renters to find properties that match their lifestyle and investment goals through innovative technology and expert guidance."
          useInvertedBackground="invertDefault"
          metrics={[
            { icon: Home, label: "Properties Listed", value: "50,000+" },
            { icon: Users, label: "Active Users", value: "2M+" },
            { icon: TrendingUp, label: "Successful Transactions", value: "100K+" },
            { icon: Award, label: "Industry Awards", value: "25+" }
          ]}
        />
      </div>

      <div id="map-integration" data-section="map-integration">
        <FeatureCardTwentyOne
          title="Advanced Map Search"
          description="Explore properties on an interactive map with real-time filtering, neighborhood insights, and location-based recommendations to help you find the perfect property in your desired area."
          tag="Smart Search"
          imageSrc="https://img.b2bpic.net/free-photo/two-happy-woman-friends-with-sunglasses-vacation-tropical-country_343596-726.jpg"
          imageAlt="Interactive property map interface"
          accordionItems={[
            {
              id: "1",              title: "Location-Based Search",              content: "Browse properties by drawing on the map, selecting neighborhoods, or searching by zip code. Get instant access to all available listings with detailed location information."
            },
            {
              id: "2",              title: "Neighborhood Insights",              content: "Discover comprehensive neighborhood data including schools, transit options, amenities, safety ratings, and market trends to make informed decisions."
            },
            {
              id: "3",              title: "Price & Market Analytics",              content: "View real-time market data, price trends, property valuations, and comparative market analysis to understand property values in your target area."
            },
            {
              id: "4",              title: "Save & Share Properties",              content: "Create personalized lists of favorite properties, share them with family and agents, and receive notifications when similar properties become available."
            }
          ]}
          buttons={[
            { text: "Explore Map", href: "#listings" }
          ]}
          useInvertedBackground="noInvert"
          mediaPosition="right"
        />
      </div>

      <div id="featured" data-section="featured">
        <PricingCardFive
          title="Property Types"
          description="Explore different property categories tailored to various lifestyles and investment goals."
          tag="Property Categories"
          plans={[
            {
              id: "residential",              tag: "Residential Properties",              price: "Diverse Selection",              period: "",              description: "Single-family homes, apartments, condos, and townhouses in various neighborhoods.",              button: {
                text: "Browse Residential",                href: "#listings"
              },
              featuresTitle: "What's Included:",              features: [
                "Urban and suburban options",                "New and established neighborhoods",                "Various price ranges and sizes",                "Proximity to schools and amenities"
              ]
            },
            {
              id: "commercial",              tag: "Commercial Properties",              price: "Business Ready",              period: "",              description: "Office spaces, retail locations, industrial properties, and investment opportunities.",              button: {
                text: "Browse Commercial",                href: "#listings"
              },
              featuresTitle: "What's Included:",              features: [
                "Prime business locations",                "Flexible lease options",                "Growth potential analysis",                "Tenant history and performance data"
              ]
            },
            {
              id: "investment",              tag: "Investment Properties",              price: "ROI Focused",              period: "",              description: "Income-generating properties with strong rental potential and appreciation prospects.",              button: {
                text: "Browse Investments",                href: "#listings"
              },
              featuresTitle: "What's Included:",              features: [
                "Rental income analysis",                "Market growth projections",                "Portfolio diversification",                "Expert investment guidance"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Market Performance"
          description="Real-time statistics showing the strength of our property marketplace."
          metrics={[
            { id: "1", value: "98%", description: "Customer Satisfaction Rate" },
            { id: "2", value: "14 Days", description: "Average Sale Timeline" },
            { id: "3", value: "$2.5B", description: "Annual Transaction Volume" },
            { id: "4", value: "50+", description: "Neighborhoods Served" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to find your ideal property or list your home? Connect with our expert agents who will guide you through every step of the real estate journey."
          animationType="entrance-slide"
          buttons={[
            { text: "Contact Agent", href: "https://example.com/contact" },
            { text: "Schedule Viewing", href: "https://example.com/schedule" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="PropertyHub"
          leftLink={{
            text: "Privacy Policy",            href: "https://example.com/privacy"
          }}
          rightLink={{
            text: "Terms of Service",            href: "https://example.com/terms"
          }}
        />
      </div>
    </ThemeProvider>
  );
}