"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Home, Users, TrendingUp, MapPin, Heart } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="PropertyHub"
          navItems={[
            { name: "Browse", id: "properties" },
            { name: "Featured", id: "featured" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "List Property",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="FIND YOUR HOME"
          description="Discover premium properties curated for you. Filter by location, price, and amenities to find your perfect match."
          buttons={[
            { text: "Browse Properties", href: "#properties" },
            { text: "Learn More", href: "#about" }
          ]}
          slides={[
            {
              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: "Luxury modern home"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg",              imageAlt: "Contemporary apartment"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-young-woman-stairs_23-2149204468.jpg",              imageAlt: "Beautiful villa"
            }
          ]}
          autoplayDelay={4000}
          showDimOverlay={true}
        />
      </div>

      <div id="search-filters" data-section="search-filters">
        <MediaAbout
          title="Find Your Perfect Property"
          description="Use our advanced search and filtering tools to narrow down properties by location, price range, property type, bedrooms, and more. Real-time availability updates ensure you never miss an opportunity."
          tag="Smart Search"
          imageSrc="https://img.b2bpic.net/free-photo/happy-successful-business-team-members-posing-office_1262-20245.jpg"
          imageAlt="Property search interface"
          buttons={[
            { text: "Start Searching", href: "#properties" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardFour
          title="Available Properties"
          description="Browse our extensive collection of premium properties available for purchase or rent."
          tag="New Listings"
          tagIcon={MapPin}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          products={[
            {
              id: "1",              name: "Modern Downtown Loft",              price: "$450,000",              variant: "2 BD | 2 BA | 850 sqft",              imageSrc: "https://img.b2bpic.net/free-photo/happy-successful-business-team-members-posing-office_1262-20245.jpg",              imageAlt: "Downtown loft exterior"
            },
            {
              id: "2",              name: "Suburban Family Home",              price: "$595,000",              variant: "4 BD | 3 BA | 2,200 sqft",              imageSrc: "https://img.b2bpic.net/free-photo/two-happy-woman-friends-with-sunglasses-vacation-tropical-country_343596-726.jpg",              imageAlt: "Suburban house"
            },
            {
              id: "3",              name: "Luxury High-Rise Condo",              price: "$750,000",              variant: "3 BD | 2.5 BA | 1,500 sqft",              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: "Luxury condo interior"
            },
            {
              id: "4",              name: "Cozy Townhouse",              price: "$325,000",              variant: "2 BD | 1.5 BA | 1,050 sqft",              imageSrc: "https://img.b2bpic.net/free-photo/beach-chair-resort_1150-17976.jpg",              imageAlt: "Townhouse exterior"
            }
          ]}
        />
      </div>

      <div id="map-integration" data-section="map-integration">
        <FeatureCardSixteen
          title="Interactive Map Integration"
          description="Explore properties on an interactive map with real-time location data, neighborhood information, and nearby amenities."
          tag="Map View"
          tagIcon={MapPin}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          negativeCard={{
            items: [
              "Hard to find properties in your area",              "No neighborhood context",              "Manual address entry required"
            ]
          }}
          positiveCard={{
            items: [
              "View all properties on interactive map",              "Explore neighborhoods and amenities",              "Filter by distance and location preferences"
            ]
          }}
        />
      </div>

      <div id="featured" data-section="featured">
        <PricingCardNine
          title="Featured Listings"
          description="Premium properties handpicked by our expert team for quality and value."
          tag="Premium"
          textboxLayout="default"
          animationType="scale-rotate"
          useInvertedBackground="invertDefault"
          plans={[
            {
              id: "penthouse",              title: "Luxury Penthouse",              price: "$2,500,000",              period: "Exclusive",              imageSrc: "https://img.b2bpic.net/free-photo/outdoor-swimming-pool-with-umbrella-chair-lounge-around-there-leisure-travel_74190-7877.jpg",              imageAlt: "Luxury penthouse with pool",              button: {
                text: "Schedule Tour",                href: "#contact"
              },
              features: [
                "5 bedrooms, 4 bathrooms",                "Rooftop terrace with city views",                "Private infinity pool",                "Smart home automation"
              ]
            },
            {
              id: "downtown",              title: "Downtown Tower",              price: "$1,850,000",              period: "Premium",              imageSrc: "https://img.b2bpic.net/free-photo/modern-villa-with-multiple-lights-sun-loungers-asprovalta-greece_1268-16093.jpg",              imageAlt: "Downtown tower penthouse",              button: {
                text: "Schedule Tour",                href: "#contact"
              },
              features: [
                "3 bedrooms, 3 bathrooms",                "Floor-to-ceiling windows",                "Concierge service",                "Gym and spa access"
              ]
            },
            {
              id: "countryside",              title: "Countryside Estate",              price: "$1,200,000",              period: "Exclusive",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-kitchen-interior-design_23-2150976540.jpg",              imageAlt: "Countryside estate",              button: {
                text: "Schedule Tour",                href: "#contact"
              },
              features: [
                "4 bedrooms, 3 bathrooms",                "10 acres of pristine land",                "Guest house included",                "Horse stable facilities"
              ]
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricCardThree
          title="Why Choose PropertyHub"
          description="Our platform combines cutting-edge technology with real estate expertise to help you find your perfect home."
          tag="About Us"
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              icon: Home,
              title: "Properties",              value: "5,000+"
            },
            {
              id: "2",              icon: Users,
              title: "Happy Clients",              value: "25,000+"
            },
            {
              id: "3",              icon: TrendingUp,
              title: "Year in Business",              value: "15+"
            },
            {
              id: "4",              icon: MapPin,
              title: "Cities Covered",              value: "50+"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to Find Your Dream Home?"
          description="Subscribe to our newsletter for exclusive listings, market insights, and special offers. Our team is here to help you every step of the way."
          tagIcon={Heart}
          background={{ variant: "rotated-rays-animated-grid" }}
          useInvertedBackground="invertDefault"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We'll keep you updated with new listings and market trends. Unsubscribe anytime."
        />
      </div>

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