"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Home, Building2, MapPin, DollarSign, Settings, Hexagon, House, MessageSquareText, CircleDollarSign, ArrowLeftRight, Send, Star, Search, BarChart3, Sparkles, Trophy, HelpCircle, Phone } from 'lucide-react';

export default function PropertyPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="small"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="PropertyHub"
          navItems={[
            { name: "Listings", id: "listings" },
            { name: "About", id: "about" },
            { name: "Featured", id: "featured" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Schedule Tour",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          background={{ variant: "radial-gradient" }}
          tag="Find Your Dream Home"
          tagIcon={Home}
          title="Discover Exceptional Properties"
          description="Browse our curated collection of premium homes and investment opportunities. Advanced search filters and interactive maps help you find the perfect property."
          buttons={[
            { text: "Search Properties", href: "listings" },
            { text: "Schedule Consultation", href: "contact" }
          ]}
          dashboard={{
            title: "Property Market Overview",            logoIcon: Building2,
            imageSrc: "https://img.b2bpic.net/free-photo/two-happy-woman-friends-with-sunglasses-vacation-tropical-country_343596-726.jpg",            searchPlaceholder: "Search by location or price range...",            buttons: [
              { text: "Browse Listings", href: "listings" },
              { text: "View Map", href: "featured" }
            ],
            sidebarItems: [
              { icon: MapPin },
              { icon: DollarSign, active: true },
              { icon: Settings }
            ],
            stats: [
              {
                title: "Active Listings",                values: [1250, 1540, 1820],
                description: "Properties available now."
              },
              {
                title: "Avg. Price",                values: [450000, 520000, 585000],
                valuePrefix: "$",                description: "Market average."
              },
              {
                title: "Sold This Month",                values: [125, 180, 220],
                description: "Recent transactions."
              }
            ],
            chartTitle: "Market Activity Trend",            chartData: [
              { value: 65 },
              { value: 80 },
              { value: 55 },
              { value: 90 },
              { value: 75 }
            ],
            listTitle: "Recent Transactions",            listItems: [
              { icon: House, title: "125 Oak Street", status: "Sold" },
              { icon: Building2, title: "750 Park Avenue", status: "Under Offer" },
              { icon: MapPin, title: "42 Riverside Drive", status: "Listed" }
            ]
          }}
        />
      </div>

      <div id="listings" data-section="listings">
        <ProductCardTwo
          title="Featured Listings"
          description="Explore our carefully selected properties with verified details and professional photography."
          tag="Popular"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              brand: "Downtown District",              name: "Modern Penthouse",              price: "$2,850,000",              rating: 5,
              reviewCount: "48",              imageSrc: "https://img.b2bpic.net/free-photo/modern-luxury-bedroom-suite-bathroom_105762-1791.jpg",              imageAlt: "Modern Penthouse with city views"
            },
            {
              id: "2",              brand: "Suburban Area",              name: "Family Home",              price: "$650,000",              rating: 5,
              reviewCount: "32",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111480.jpg",              imageAlt: "Spacious family home"
            },
            {
              id: "3",              brand: "City Center",              name: "Luxury Apartment",              price: "$1,450,000",              rating: 5,
              reviewCount: "56",              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-shot-bedroom-with-interior-stuff-beige-tones_181624-33128.jpg",              imageAlt: "High-end luxury apartment"
            },
            {
              id: "4",              brand: "Hillside Estate",              name: "Executive Villa",              price: "$3,200,000",              rating: 5,
              reviewCount: "41",              imageSrc: "https://img.b2bpic.net/free-photo/cozy-lively-home-interior-design_23-2151118953.jpg",              imageAlt: "Prestigious executive villa"
            },
            {
              id: "5",              brand: "Mid-Town",              name: "Contemporary Townhouse",              price: "$925,000",              rating: 5,
              reviewCount: "29",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg",              imageAlt: "Modern contemporary townhouse"
            },
            {
              id: "6",              brand: "Riverside",              name: "Waterfront Condo",              price: "$1,750,000",              rating: 5,
              reviewCount: "37",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-hotel-bedroom-illuminated-by-modern-lamps-generated-by-ai_188544-27990.jpg",              imageAlt: "Exclusive waterfront condo"
            }
          ]}
        />
      </div>

      <div id="search-filters" data-section="search-filters">
        <FeatureCardSixteen
          title="Advanced Search Filters"
          description="Refine your property search with our comprehensive filtering options to find exactly what you need."
          tag="Smart Search"
          tagIcon={Search}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          negativeCard={{
            items: [
              "Manual property browsing takes hours",              "Limited sorting and filtering options",              "Difficulty comparing multiple properties",              "Unclear pricing and market trends",              "No save favorites functionality"
            ]
          }}
          positiveCard={{
            items: [
              "Advanced filters by price, location, size",              "Multiple sorting options for quick discovery",              "Side-by-side property comparison tools",              "Real-time market analytics and trends",              "Save and track favorite listings"
            ]
          }}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTen
          title="Available Properties by Type"
          description="Browse our diverse portfolio of residential and commercial real estate options."
          tag="Inventory"
          tagIcon={BarChart3}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          carouselMode="buttons"
          metrics={[
            {
              id: "1",              title: "Modern Apartments",              subtitle: "Urban developments · Studio to 3BR",              category: "Residential",              value: "425 Available",              buttons: [
                { text: "View All", href: "listings" }
              ]
            },
            {
              id: "2",              title: "Single Family Homes",              subtitle: "Suburban locations · 2-5 Bedrooms",              category: "Residential",              value: "380 Available",              buttons: [
                { text: "View All", href: "listings" }
              ]
            },
            {
              id: "3",              title: "Luxury Villas",              subtitle: "Premium estates · 4+ Bedrooms",              category: "Luxury",              value: "95 Available",              buttons: [
                { text: "View All", href: "listings" }
              ]
            },
            {
              id: "4",              title: "Commercial Spaces",              subtitle: "Office & retail · Various sizes",              category: "Commercial",              value: "210 Available",              buttons: [
                { text: "View All", href: "listings" }
              ]
            }
          ]}
        />
      </div>

      <div id="featured" data-section="featured">
        <TestimonialCardSixteen
          title="Featured Premium Properties"
          description="Discover our hand-picked collection of the most sought-after properties in the market."
          tag="Spotlight"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sunset Boulevard Estate",              role: "5 Beds · 4 Baths",              company: "Hollywood Hills",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/elegant-modern-room-with-cozy-sofa-design-generated-by-ai_188544-16919.jpg",              imageAlt: "Luxury sunset boulevard estate"
            },
            {
              id: "2",              name: "Oceanfront Residence",              role: "4 Beds · 3.5 Baths",              company: "Malibu Coast",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/modern-elegance-luxury-cozy-bedroom-generated-by-ai_188544-29887.jpg",              imageAlt: "Premium oceanfront property"
            },
            {
              id: "3",              name: "Smart Tech Mansion",              role: "6 Beds · 5 Baths",              company: "Beverly Hills",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/cozy-modern-bedroom-with-elegant-design-elements-generated-by-ai_188544-16559.jpg",              imageAlt: "Modern smart home mansion"
            }
          ]}
          kpiItems={[
            { value: "2,450+", label: "Properties Sold" },
            { value: "$4.2B", label: "Total Transaction Value" },
            { value: "98%", label: "Client Satisfaction" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Our Advantage"
          tagIcon={Trophy}
          title="Why Choose PropertyHub"
          description="With over 15 years of experience in real estate, we combine market expertise with cutting-edge technology. Our professional team ensures every transaction is seamless, transparent, and rewarding."
          metrics={[
            { value: "15+", title: "Years of Excellence" },
            { value: "2,450+", title: "Successful Transactions" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/business-leaders-consulting-expert_74855-2095.jpg"
          imageAlt="Professional real estate team"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about our services, properties, and the buying process."
          tag="Help Center"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How do I schedule a property tour?",              content: "You can schedule a tour directly through our website or by contacting our team. We offer flexible scheduling including evenings and weekends."
            },
            {
              id: "2",              title: "What financing options are available?",              content: "We work with multiple lenders and can guide you through various financing options including conventional mortgages, FHA loans, and investment property financing."
            },
            {
              id: "3",              title: "Are there any hidden fees?",              content: "No. We maintain complete transparency in all transactions. All costs are clearly outlined before you proceed with any agreement."
            },
            {
              id: "4",              title: "How is the property market performing?",              content: "The current market is showing steady growth with competitive pricing in most neighborhoods. We provide regular market updates and analysis to help you make informed decisions."
            },
            {
              id: "5",              title: "Can I make an offer before viewing in person?",              content: "We offer virtual tours for most properties, allowing qualified buyers to make informed offers. We recommend in-person viewings for final decisions."
            },
            {
              id: "6",              title: "What is your closing timeline?",              content: "Standard closing typically takes 30-45 days depending on financing and inspection. We work to expedite the process while ensuring all details are handled properly."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Schedule Your Property Consultation"
          ctaDescription="Let our experts help you find the perfect property. Schedule a free consultation today."
          ctaButton={{
            text: "Book Consultation",            href: "contact"
          }}
          ctaIcon={Phone}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          accordionAnimationType="smooth"
          faqs={[
            {
              id: "1",              title: "What documents do I need for pre-qualification?",              content: "You'll need recent pay stubs, tax returns for 2 years, bank statements, and employment verification. Our team can guide you through the complete process."
            },
            {
              id: "2",              title: "How long does the inspection process take?",              content: "A typical home inspection takes 2-3 hours. We recommend being present to ask questions and understand any issues that may arise."
            },
            {
              id: "3",              title: "Can you help with investment properties?",              content: "Yes! We specialize in investment property analysis and help clients build profitable real estate portfolios with strong ROI projections."
            },
            {
              id: "4",              title: "What makes a property a good investment?",              content: "Strong investment properties combine location desirability, appreciation potential, rental income prospects, and low maintenance costs for maximum returns."
            }
          ]}
        />
      </div>

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