"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Home, Zap, Building2, Heart, Star, CheckCircle, Bed, Bath, Square, Bookmark, TrendingUp, Quote, Phone } from 'lucide-react';

export default function PropertyHubPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="elevated"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="PropertyHub"
          navItems={[
            { name: "Browse", id: "properties" },
            { name: "About", id: "about" },
            { name: "How It Works", id: "features" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "List Property",            href: "https://example.com/list"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Find Your Dream Property"
          description="Discover premium residential and commercial properties tailored to your lifestyle. Browse thousands of listings with advanced filters, interactive maps, and expert guidance."
          tag="Real Estate Platform"
          tagIcon={Home}
          background={{ variant: "sparkles-gradient" }}
          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 property showcase"
          buttons={[
            { text: "Browse Properties", href: "#properties" },
            { text: "Get Guidance", href: "#contact" }
          ]}
        />
      </div>

      <div id="search-filters" data-section="search-filters">
        <FeatureBento
          title="Smart Search & Filters"
          description="Our intuitive search interface lets you filter properties by location, price, size, amenities, and more. Find exactly what you're looking for with precision."
          tag="Advanced Search Tools"
          tagIcon={Zap}
          features={[
            {
              title: "Location Search",              description: "Filter by neighborhood, city, or proximity to landmarks and schools.",              bentoComponent: "map"
            },
            {
              title: "Price Range",              description: "Set your budget and discover properties within your financial goals.",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Property Details",              description: "Filter by bedrooms, bathrooms, square footage, and property type.",              bentoComponent: "icon-info-cards",              items: [
                { icon: Bed, label: "Bedrooms", value: "1-5+" },
                { icon: Bath, label: "Bathrooms", value: "1-5+" },
                { icon: Square, label: "Sq. Ft.", value: "1000-10000" }
              ]
            },
            {
              title: "Saved Properties",              description: "Save your favorite listings and create personalized property collections.",              bentoComponent: "orbiting-icons",              centerIcon: Heart,
              items: [
                { icon: Star, ring: 1 },
                { icon: CheckCircle, ring: 2 },
                { icon: Bookmark, ring: 3 }
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardFour
          title="Available Properties"
          description="Browse our current listings featuring diverse properties to match every lifestyle and budget."
          tag="Featured Listings"
          tagIcon={Building2}
          products={[
            {
              id: "1",              name: "Modern Downtown Loft",              price: "$425,000",              variant: "2 Bed, 2 Bath · 1,200 sqft",              imageSrc: "https://img.b2bpic.net/free-photo/happy-successful-business-team-members-posing-office_1262-20245.jpg",              imageAlt: "Modern downtown loft with urban views",              isFavorited: false
            },
            {
              id: "2",              name: "Suburban Family Home",              price: "$598,000",              variant: "4 Bed, 3 Bath · 2,500 sqft",              imageSrc: "https://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg",              imageAlt: "Spacious suburban family home",              isFavorited: false
            },
            {
              id: "3",              name: "Contemporary City Apartment",              price: "$525,000",              variant: "3 Bed, 2 Bath · 1,800 sqft",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-young-woman-stairs_23-2149204468.jpg",              imageAlt: "Contemporary city apartment with modern finishes",              isFavorited: false
            },
            {
              id: "4",              name: "Luxury Penthouse Suite",              price: "$1,250,000",              variant: "3 Bed, 3 Bath · 3,200 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 penthouse with panoramic views",              isFavorited: false
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          carouselMode="buttons"
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="Why Choose PropertyHub"
          description="Industry-leading platform connecting buyers and sellers with trusted real estate expertise."
          tabs={[
            {
              id: "expertise",              label: "Expert Team",              description: "Our licensed agents bring decades of combined experience in residential and commercial real estate. We understand local markets deeply and guide clients with integrity and market knowledge."
            },
            {
              id: "technology",              label: "Smart Technology",              description: "Advanced filtering, interactive maps, and real-time notifications keep you informed. Our platform uses AI to match properties to your preferences automatically."
            },
            {
              id: "transparency",              label: "Complete Transparency",              description: "Full disclosure of property details, pricing history, and neighborhood data. We believe in empowering clients with information for confident decisions."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/business-leaders-consulting-expert_74855-2095.jpg"
          imageAlt="Real estate team providing expert guidance"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="featured" data-section="featured">
        <MetricCardOne
          title="Our Platform Impact"
          description="PropertyHub connects thousands of buyers and sellers annually through innovative real estate solutions."
          metrics={[
            {
              id: "1",              value: "15,000",              title: "Active Listings",              description: "Properties available across multiple markets",              icon: Building2
            },
            {
              id: "2",              value: "98%",              title: "Client Satisfaction",              description: "Rated highly by buyers and sellers",              icon: Star
            },
            {
              id: "3",              value: "$2.5B",              title: "Properties Sold",              description: "Total transaction value on platform",              icon: TrendingUp
            },
            {
              id: "4",              value: "12K+",              title: "Successful Deals",              description: "Completed transactions and satisfied clients",              icon: CheckCircle
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-successful-businesswoman-looking-into-camera-sitting-restaurant-business-lady-with-stylish-hairstyle-wears-elegant-suit-business-meeting-attractive-appearance_8353-12611.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "James Chen",              imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",              imageAlt: "James Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/content-beautiful-businesswoman-standing-window_1262-1778.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "Michael Thompson",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",              imageAlt: "Michael Thompson"
            }
          ]}
          cardTitle="Over 12,000 happy clients found their dream properties with PropertyHub"
          cardTag="Customer Success Stories"
          cardTagIcon={Quote}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about browsing, buying, selling, and using our platform."
          faqs={[
            {
              id: "1",              title: "How do I search for properties?",              content: "Use our advanced search filters to narrow by location, price range, property type, bedrooms, bathrooms, and square footage. You can also set saved searches to receive notifications when new listings match your criteria."
            },
            {
              id: "2",              title: "What does the map integration show?",              content: "Our interactive map displays all available properties with pins indicating location. You can zoom in, view neighborhood details, check proximity to schools and transit, and switch between list and map views for better property discovery."
            },
            {
              id: "3",              title: "How can I save favorite properties?",              content: "Click the heart icon on any property card to add it to your favorites. Access your saved properties from your profile dashboard to compare listings and share with family members or agents."
            },
            {
              id: "4",              title: "Do you charge listing fees?",              content: "PropertyHub charges competitive listing fees that vary by property type and location. Contact our team for a personalized quote and let us help you maximize your property's visibility."
            },
            {
              id: "5",              title: "Can I get professional guidance?",              content: "Yes, our licensed agents offer free consultations to discuss your real estate goals. We provide market analysis, pricing guidance, and representation throughout the buying or selling process."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          showCard={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get in Touch"
          title="Ready to Start Your Real Estate Journey?"
          description="Connect with our expert team to discuss your property needs, get market insights, or schedule a consultation. We're here to guide you every step of the way."
          tagIcon={Phone}
          background={{ variant: "gradient-bars" }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/successful-multiethnic-business-team_1262-20833.jpg"
          imageAlt="Real estate consultation and guidance"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Get Started"
          termsText="We respect your privacy. We'll only contact you about your real estate inquiries."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="PropertyHub"
          columns={[
            {
              title: "Explore",              items: [
                { label: "Browse Listings", href: "#properties" },
                { label: "Advanced Search", href: "#search-filters" },
                { label: "Market Reports", href: "#" },
                { label: "Investment Guide", href: "#" }
              ]
            },
            {
              title: "For Sellers",              items: [
                { label: "List Your Property", href: "https://example.com/list" },
                { label: "Pricing Guide", href: "#" },
                { label: "Selling Timeline", href: "#" },
                { label: "Success Stories", href: "#testimonials" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Buyer's Guide", href: "#" },
                { label: "Financing Options", href: "#" },
                { label: "Market Insights", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Contact", href: "#contact" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 PropertyHub. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}