"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Building, Crown, Facebook, Info, Instagram, Linkedin, MapPin, Star, Twitter, Waves } from 'lucide-react';

export default function PropertyPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="PropertyHub"
          navItems={[
            { name: "Browse", id: "listings" },
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "List Property",            href: "https://example.com/list"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="FIND YOUR HOME"
          description="Discover premium properties tailored to your lifestyle. Search, compare, and schedule viewings with ease."
          buttons={[
            { text: "Browse Listings", href: "#listings" },
            { text: "Schedule Tour", href: "#contact" }
          ]}
          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 exterior"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/two-happy-woman-friends-with-sunglasses-vacation-tropical-country_343596-726.jpg",              imageAlt: "Contemporary apartment interior"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-young-woman-stairs_23-2149204468.jpg",              imageAlt: "Luxury villa with outdoor space"
            }
          ]}
          autoplayDelay={4000}
          showDimOverlay={true}
        />
      </div>

      <div id="filters" data-section="filters">
        <TextSplitAbout
          title="Find Your Perfect Match"
          description={[
            "Use our advanced search filters to narrow down properties by location, price range, property type, and amenities. Whether you're looking for a cozy apartment or a sprawling estate, our intuitive filtering system makes it easy to discover listings that match your criteria.",            "Save your favorite properties, set price alerts, and schedule virtual or in-person viewings directly from the platform. Our dedicated agents are ready to assist you throughout your property journey."
          ]}
          buttons={[
            { text: "View Advanced Filters", href: "#" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="listings" data-section="listings">
        <ProductCardOne
          title="Available Properties"
          description="Browse our current listings with detailed information, high-quality images, and key property metrics."
          products={[
            {
              id: "1",              name: "Modern Downtown Apartment",              price: "$450,000",              imageSrc: "https://img.b2bpic.net/free-photo/two-happy-woman-friends-with-sunglasses-vacation-tropical-country_343596-726.jpg",              imageAlt: "Modern apartment with open floor plan"
            },
            {
              id: "2",              name: "Luxury Villa with Garden",              price: "$1,200,000",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-young-woman-stairs_23-2149204468.jpg",              imageAlt: "Luxury villa exterior with landscaped garden"
            },
            {
              id: "3",              name: "Suburban Family Home",              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: "Two-story suburban family home"
            },
            {
              id: "4",              name: "Urban Studio Loft",              price: "$320,000",              imageSrc: "https://img.b2bpic.net/free-photo/beach-chair-resort_1150-17976.jpg",              imageAlt: "Contemporary loft with city views"
            },
            {
              id: "5",              name: "Luxury Penthouse Suite",              price: "$2,100,000",              imageSrc: "https://img.b2bpic.net/free-photo/happy-caucasian-woman-short-summer-dress-outside-villa-hotel-by-tree-blue-swimming-pool_343596-695.jpg",              imageAlt: "Premium penthouse with panoramic views"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="map" data-section="map">
        <FeatureCardTwentySix
          title="Explore Properties on Map"
          description="View all available properties on an interactive map. Filter by neighborhood, school district, and proximity to amenities."
          features={[
            {
              title: "Location View",              description: "See properties plotted on our interactive map interface with neighborhood details and transit information.",              imageSrc: "https://img.b2bpic.net/free-vector/running-mobile-app-infographic-flat-style_23-2148219821.jpg",              imageAlt: "Map interface showing property locations",              buttonIcon: MapPin
            },
            {
              title: "Neighborhood Insights",              description: "Explore detailed information about each neighborhood including demographics, schools, shopping, and dining options.",              imageSrc: "https://img.b2bpic.net/free-vector/running-mobile-app-infographic-flat-style_23-2148219821.jpg",              imageAlt: "Neighborhood information overlay",              buttonIcon: Info
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="featured" data-section="featured">
        <PricingCardTwo
          title="Featured Properties This Week"
          description="Handpicked premium listings with exceptional value and prime locations."
          plans={[
            {
              id: "1",              badge: "Designer Mansion",              badgeIcon: Crown,
              price: "$2,500,000",              subtitle: "Architectural masterpiece in prestigious hills",              buttons: [
                { text: "Schedule Viewing", href: "#" },
                { text: "Save Property", href: "#" }
              ],
              features: [
                "6 bedrooms, 5 bathrooms",                "10,000+ sq ft living space",                "Smart home automation",                "Resort-style pool and spa",                "Wine cellar and home theater"
              ]
            },
            {
              id: "2",              badge: "Waterfront Estate",              badgeIcon: Waves,
              price: "$1,800,000",              subtitle: "Stunning ocean views with private beach access",              buttons: [
                { text: "Schedule Viewing", href: "#" },
                { text: "Save Property", href: "#" }
              ],
              features: [
                "5 bedrooms, 4 bathrooms",                "Direct beach frontage",                "Panoramic ocean views",                "Private dock and boathouse",                "Outdoor entertainment area"
              ]
            },
            {
              id: "3",              badge: "Urban Penthouse",              badgeIcon: Building,
              price: "$1,400,000",              subtitle: "Contemporary luxury in the heart of the city",              buttons: [
                { text: "Schedule Viewing", href: "#" },
                { text: "Save Property", href: "#" }
              ],
              features: [
                "3 bedrooms, 3 bathrooms",                "Floor-to-ceiling windows",                "Rooftop garden terrace",                "Concierge services",                "Underground parking"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Clients Say"
          description="Real experiences from satisfied homebuyers and investors who found their perfect properties."
          showRating={true}
          testimonials={[
            {
              id: "1",              name: "James Mitchell",              handle: "@jmitchell",              testimonial: "PropertyHub made finding our dream home incredibly easy. The search filters were intuitive and the agents were incredibly helpful throughout the entire process.",              rating: 5,
              icon: Star
            },
            {
              id: "2",              name: "Sarah Chen",              handle: "@sarahchenrealty",              testimonial: "As an investor, I've used many real estate platforms. PropertyHub's market insights and listing accuracy are unmatched. Highly recommended!",              rating: 5,
              icon: Star
            },
            {
              id: "3",              name: "Marcus Johnson",              handle: "@mjohnson_homes",              testimonial: "The virtual tour feature saved me so much time. I could narrow down my options before scheduling in-person viewings. Excellent platform!",              rating: 5,
              icon: Star
            },
            {
              id: "4",              name: "Emily Rodriguez",              handle: "@emilyrodriguez",              testimonial: "Transparent pricing, no hidden fees, and amazing customer support. This is how real estate should be. Thank you PropertyHub!",              rating: 5,
              icon: Star
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactText
          text="Ready to find your perfect property? Let our expert agents guide you through the entire buying or selling process."
          animationType="background-highlight"
          buttons={[
            { text: "Start Your Search", href: "#listings" },
            { text: "Contact an Agent", href: "#contact" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="PropertyHub"
          copyrightText="© 2025 PropertyHub. All rights reserved."
          socialLinks={[
            { icon: Facebook, href: "https://facebook.com/propertyhub", ariaLabel: "Facebook" },
            { icon: Instagram, href: "https://instagram.com/propertyhub", ariaLabel: "Instagram" },
            { icon: Linkedin, href: "https://linkedin.com/company/propertyhub", ariaLabel: "LinkedIn" },
            { icon: Twitter, href: "https://twitter.com/propertyhub", ariaLabel: "Twitter" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}