"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import SplitAbout from '@/components/sections/about/SplitAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { DollarSign, Home, MapPin, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="HomeFind"
          navItems={[
            { name: "Listings", id: "properties" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "List Property",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="HOMEFIND"
          description="Discover your perfect home. Browse premium listings with advanced search filters and interactive map integration."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Explore Listings", href: "#properties" },
            { text: "List Your Property", href: "#contact" }
          ]}
          layoutOrder="default"
          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 real estate property"
          frameStyle="browser"
        />
      </div>

      <div id="search-filters" data-section="search-filters">
        <SplitAbout
          title="Advanced Search & Filters"
          description="Find your ideal property using our intelligent search system. Filter by location, price, property type, amenities, and more to narrow down your options."
          tag="Smart Search"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          bulletPoints={[
            {
              title: "Location-Based Search",              description: "Find properties in your preferred neighborhoods with map visualization",              icon: MapPin
            },
            {
              title: "Price Range Filtering",              description: "Set your budget and instantly see all properties within your price range",              icon: DollarSign
            },
            {
              title: "Property Type Selection",              description: "Filter by apartments, houses, villas, commercial properties, and more",              icon: Home
            },
            {
              title: "Amenities & Features",              description: "Find properties with specific amenities like pools, garages, and gyms",              icon: Sparkles
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/happy-successful-business-team-members-posing-office_1262-20245.jpg"
          imageAlt="Modern apartment interior with search filters"
          imagePosition="right"
          buttons={[
            { text: "Start Searching", href: "#properties" }
          ]}
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardTwo
          title="Available Properties"
          description="Browse our curated selection of premium residential and commercial properties"
          tag="Featured Listings"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          products={[
            {
              id: "1",              brand: "Downtown Living",              name: "Modern Downtown Apartment",              price: "$450,000",              rating: 5,
              reviewCount: "12 views",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-young-woman-stairs_23-2149204468.jpg",              imageAlt: "Modern downtown apartment listing"
            },
            {
              id: "2",              brand: "Suburban Homes",              name: "Family House with Garden",              price: "$580,000",              rating: 5,
              reviewCount: "28 views",              imageSrc: "https://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg",              imageAlt: "Suburban family home with garden"
            },
            {
              id: "3",              brand: "Premium Properties",              name: "Luxury Penthouse Suite",              price: "$1,250,000",              rating: 5,
              reviewCount: "45 views",              imageSrc: "https://img.b2bpic.net/free-photo/two-happy-woman-friends-with-sunglasses-vacation-tropical-country_343596-726.jpg",              imageAlt: "Luxury penthouse with city views"
            },
            {
              id: "4",              brand: "Lakeside Estates",              name: "Waterfront Villa",              price: "$925,000",              rating: 5,
              reviewCount: "32 views",              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: "Waterfront villa property"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
        />
      </div>

      <div id="map-integration" data-section="map-integration">
        <FeatureCardEight
          title="Interactive Map View"
          description="Visualize properties on our interactive map with location details, pricing, and quick access to full listings"
          tag="Map Search"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Property Markers",              description: "Each property is marked on the map with its price and basic details for quick reference",              imageSrc: "https://img.b2bpic.net/free-photo/happy-couple-resting-home-with-good-mood_651396-28.jpg",              imageAlt: "Map with property markers overlay"
            },
            {
              id: 2,
              title: "Neighborhood Filter",              description: "Explore properties grouped by neighborhood with local amenities and transit information",              imageSrc: "https://img.b2bpic.net/free-photo/serious-male-boss-instructing-female-assistant_1262-20385.jpg",              imageAlt: "Neighborhood view on interactive map"
            },
            {
              id: 3,
              title: "Route Planning",              description: "Get directions to properties, check commute times, and explore surrounding areas easily",              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: "Route planning and commute information"
            }
          ]}
        />
      </div>

      <div id="featured" data-section="featured">
        <PricingCardNine
          title="Featured Premium Properties"
          description="Handpicked luxury listings from our most exclusive collection"
          tag="Premium Selection"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          plans={[
            {
              id: "luxury-1",              title: "Waterfront Mansion",              price: "$3,500,000",              period: "Full Purchase",              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 waterfront mansion",              button: {
                text: "View Details",                href: "#contact"
              },
              features: [
                "8 Bedrooms & 7 Bathrooms",                "Private beach access",                "Olympic-size swimming pool",                "Smart home automation",                "Wine cellar & theater room"
              ]
            },
            {
              id: "luxury-2",              title: "Modern City Penthouse",              price: "$2,100,000",              period: "Full Purchase",              imageSrc: "https://img.b2bpic.net/free-photo/happy-couple-resting-home-with-good-mood_651396-28.jpg",              imageAlt: "Modern city penthouse",              button: {
                text: "Schedule Tour",                href: "#contact"
              },
              features: [
                "4 Bedrooms & 4 Bathrooms",                "Panoramic city views",                "Private elevator access",                "Floor-to-ceiling windows",                "Rooftop terrace with spa"
              ]
            },
            {
              id: "luxury-3",              title: "Historic Estate Manor",              price: "$2,750,000",              period: "Full Purchase",              imageSrc: "https://img.b2bpic.net/free-photo/serious-male-boss-instructing-female-assistant_1262-20385.jpg",              imageAlt: "Historic estate manor",              button: {
                text: "Request Info",                href: "#contact"
              },
              features: [
                "10 Bedrooms & 9 Bathrooms",                "25-acre estate grounds",                "Historic architecture preservation",                "Guest house included",                "Equestrian facilities"
              ]
            }
          ]}
          animationType="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Real Estate Market Performance"
          description="Key statistics on our platform's success and market reach"
          tag="Market Data"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              value: "15,000+",              description: "Active Property Listings"
            },
            {
              id: "2",              value: "$8.5B",              description: "Total Market Value"
            },
            {
              id: "3",              value: "250K+",              description: "Active Users"
            },
            {
              id: "4",              value: "98%",              description: "Client Satisfaction Rate"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to find your dream property or list your home? Get in touch with our expert real estate agents today."
          animationType="entrance-slide"
          background={{ variant: "plain" }}
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Contact Agent", href: "#" },
            { text: "Schedule Viewing", href: "#" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/beach-chair-resort_1150-17976.jpg"
          imageAlt="Real estate community and neighborhoods"
          columns={[
            {
              title: "Browse",              items: [
                { label: "All Properties", href: "#properties" },
                { label: "Featured Listings", href: "#featured" },
                { label: "Search", href: "#search-filters" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Contact", href: "#contact" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Help Center", href: "#" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact Support", href: "#contact" }
              ]
            }
          ]}
          logoText="HomeFind"
          copyrightText="© 2025 HomeFind Real Estate. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}