"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Home, Zap, DollarSign, TrendingUp, Target, Building2, Factory, Sparkles, Waves, Trees, Car, Wifi, Users, Award, BarChart3, MessageSquare, Phone, Facebook, Linkedin, Instagram, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmall"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="PropertyHub"
          navItems={[
            { name: "Browse", id: "properties" },
            { name: "About", id: "about" },
            { name: "Services", id: "features" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "List Property", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Discover Your Dream Property"
          description="Explore premium real estate listings with advanced filters and interactive map integration. Find the perfect home in your ideal location."
          background={{ variant: "radial-gradient" }}
          tag="Real Estate"
          tagIcon={Home}
          buttons={[
            { text: "Start Browsing", href: "properties" },
            { text: "View Map", href: "contact" }
          ]}
          mediaItems={[
            { imageSrc: "https://img.b2bpic.net/free-photo/happy-successful-business-team-members-posing-office_1262-20245.jpg", imageAlt: "Luxury modern property" },
            { 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/serious-male-boss-instructing-female-assistant_1262-20385.jpg", imageAlt: "Premium estate property" },
            { imageSrc: "https://img.b2bpic.net/free-photo/attractive-woman-standing-with-coffee-near-window_7502-9288.jpg", imageAlt: "Family home with garden" },
            { imageSrc: "https://img.b2bpic.net/free-photo/modern-villa-with-multiple-lights-sun-loungers-asprovalta-greece_1268-16093.jpg", imageAlt: "Urban residential building" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          useInvertedBackground="invertDefault"
          heading={[
            { type: "text", content: "Find Your Perfect" },
            { type: "image", src: "https://img.b2bpic.net/free-photo/business-leaders-consulting-expert_74855-2095.jpg", alt: "Real estate professionals" },
            { type: "text", content: "Home Today" }
          ]}
          buttons={[
            { text: "Learn More", href: "contact" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Search & Filter Capabilities"
          description="Advanced tools to narrow down your perfect property with detailed filtering options and instant results."
          tag="Features"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          features={[
            {
              title: "Price Range Filter",              description: "Filter properties by your budget with customizable price ranges",              bentoComponent: "icon-info-cards",              items: [
                { icon: DollarSign, label: "Budget", value: "$100k - $2M" },
                { icon: TrendingUp, label: "Market", value: "Stable" },
                { icon: Target, label: "Goals", value: "Find Now" }
              ]
            },
            {
              title: "Location Search",              description: "Search by city, neighborhood, or distance radius",              bentoComponent: "map"
            },
            {
              title: "Property Type Filter",              description: "Filter by house, apartment, condo, commercial, or land",              bentoComponent: "icon-info-cards",              items: [
                { icon: Home, label: "Houses", value: "2,430" },
                { icon: Building2, label: "Apartments", value: "1,890" },
                { icon: Factory, label: "Commercial", value: "340" }
              ]
            },
            {
              title: "Amenities & Features",              description: "Select specific features like parking, pool, garden, etc.",              bentoComponent: "orbiting-icons",              centerIcon: Sparkles,
              items: [
                { icon: Waves, ring: 1 },
                { icon: Trees, ring: 1 },
                { icon: Car, ring: 2 },
                { icon: Wifi, ring: 2 }
              ]
            }
          ]}
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardThree
          title="Featured Listings"
          description="Browse our handpicked selection of premium properties available now"
          tag="Properties"
          tagIcon={Home}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="scale-rotate"
          gridVariant="three-columns-all-equal-width"
          carouselMode="buttons"
          products={[
            {
              id: "1",              name: "Luxe Modern Apartment",              price: "$850,000",              imageSrc: "https://img.b2bpic.net/free-photo/woman-charging-electro-car-by-her-house_1303-18609.jpg",              imageAlt: "Modern luxury apartment",              initialQuantity: 1
            },
            {
              id: "2",              name: "Downtown Loft Studio",              price: "$650,000",              imageSrc: "https://img.b2bpic.net/free-photo/happy-couple-resting-home-with-good-mood_651396-28.jpg",              imageAlt: "Contemporary downtown loft",              initialQuantity: 1
            },
            {
              id: "3",              name: "Beachfront Villa Retreat",              price: "$2,400,000",              imageSrc: "https://img.b2bpic.net/free-photo/outdoor-swimming-pool-with-umbrella-chair-lounge-around-there-leisure-travel_74190-7877.jpg",              imageAlt: "Luxury beachfront villa",              initialQuantity: 1
            },
            {
              id: "4",              name: "Penthouse with Views",              price: "$1,200,000",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-beautiful-woman-luxury-house_23-2149140848.jpg",              imageAlt: "High-rise penthouse",              initialQuantity: 1
            },
            {
              id: "5",              name: "Executive Office Suite",              price: "$450,000",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-young-woman-stairs_23-2149204468.jpg",              imageAlt: "Commercial office space",              initialQuantity: 1
            },
            {
              id: "6",              name: "Countryside Estate",              price: "$1,850,000",              imageSrc: "https://img.b2bpic.net/free-photo/young-beautiful-woman-going-up-stairs-walking-down-city_176420-4026.jpg",              imageAlt: "Rural countryside property",              initialQuantity: 1
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Market Performance"
          description="Real estate market insights and platform statistics"
          tag="Stats"
          tagIcon={BarChart3}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="blur-reveal"
          gridVariant="uniform-all-items-equal"
          metrics={[
            {
              id: "1",              value: "12,500",              title: "Active Listings",              description: "Premium properties available nationwide",              icon: Home
            },
            {
              id: "2",              value: "45,000",              title: "Happy Clients",              description: "Satisfied buyers and sellers",              icon: Users
            },
            {
              id: "3",              value: "$892M",              title: "Total Transactions",              description: "Real estate value traded annually",              icon: TrendingUp
            },
            {
              id: "4",              value: "98%",              title: "Satisfaction Rate",              description: "Client approval rating",              icon: Award
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Clients Say"
          description="Real experiences from real estate buyers and sellers"
          tag="Testimonials"
          tagIcon={MessageSquare}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          carouselMode="buttons"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "Buyer",              company: "Tech Executive",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "James Chen",              role: "Seller",              company: "Business Owner",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              imageAlt: "James Chen"
            },
            {
              id: "3",              name: "Emma Rodriguez",              role: "Investor",              company: "Real Estate Group",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "Michael Thompson",              role: "First-Time Buyer",              company: "Marketing Manager",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              imageAlt: "Michael Thompson"
            },
            {
              id: "5",              name: "Lisa Anderson",              role: "Relocating Family",              company: "Education Professional",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg",              imageAlt: "Lisa Anderson"
            },
            {
              id: "6",              name: "David Park",              role: "Corporate Buyer",              company: "Finance Director",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",              imageAlt: "David Park"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Get Started"
          tagIcon={Phone}
          title="Ready to Find Your Next Home?"
          description="Connect with our expert agents who can help you navigate the real estate market and find the perfect property for your lifestyle and budget."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Schedule Consultation", href: "contact" },
            { text: "View More Listings", href: "properties" }
          ]}
        />
      </div>

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