"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSignup from '@/components/sections/hero/HeroSignup';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Home, Star, Zap, DollarSign, Users, Award, Phone } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="floatingGradient"
      cardStyle="inset"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="PropFinder"
          navItems={[
            { name: "Browse Properties", id: "properties" },
            { name: "How It Works", id: "how-it-works" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "List Property",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSignup
          title="Find Your Dream Property Today"
          description="Search thousands of premium listings. Connect with expert agents and discover homes that match your lifestyle and budget."
          background={{ variant: "sparkles-gradient" }}
          tag="Real Estate Platform"
          tagIcon={Home}
          inputPlaceholder="Enter city, address, or zip code"
          buttonText="Start Searching"
          ariaLabel="Hero section - property search signup"
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardTwo
          title="Featured Properties"
          description="Browse our curated selection of premium properties available for immediate viewing"
          tag="Top Listings"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="bento-grid"
          products={[
            {
              id: "1",              brand: "Luxury Residences",              name: "Modern Penthouse Downtown",              price: "$2,450,000",              rating: 5,
              reviewCount: "187",              imageSrc: "https://img.b2bpic.net/free-photo/two-happy-woman-friends-with-sunglasses-vacation-tropical-country_343596-726.jpg",              imageAlt: "Modern luxury penthouse with city views"
            },
            {
              id: "2",              brand: "Coastal Living",              name: "Beachfront Villa with Pool",              price: "$3,200,000",              rating: 5,
              reviewCount: "142",              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: "Beachfront villa with swimming pool"
            },
            {
              id: "3",              brand: "Urban Estates",              name: "Contemporary Town House",              price: "$1,850,000",              rating: 4,
              reviewCount: "96",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-young-woman-stairs_23-2149204468.jpg",              imageAlt: "Contemporary townhouse in urban neighborhood"
            },
            {
              id: "4",              brand: "Skyline Properties",              name: "Executive Suite Apartment",              price: "$2,100,000",              rating: 5,
              reviewCount: "178",              imageSrc: "https://img.b2bpic.net/free-photo/beach-chair-resort_1150-17976.jpg",              imageAlt: "Executive penthouse apartment with skyline views"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTen
          title="Available Opportunities"
          description="Discover premium properties across diverse neighborhoods and price points"
          tag="Current Market"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              title: "Luxury Waterfront Estate",              subtitle: "Miami Beach, FL · 5 Beds · 6 Baths",              category: "Waterfront",              value: "$4,500,000",              buttons: [{ text: "View Details", href: "#" }]
            },
            {
              id: "2",              title: "Mountain View Country Home",              subtitle: "Aspen, CO · 6 Beds · 5 Baths",              category: "Mountain",              value: "$3,750,000",              buttons: [{ text: "Schedule Tour", href: "#" }]
            },
            {
              id: "3",              title: "Historic Downtown Loft",              subtitle: "Brooklyn, NY · 3 Beds · 2 Baths",              category: "Urban",              value: "$1,200,000",              buttons: [{ text: "Contact Agent", href: "#" }]
            },
            {
              id: "4",              title: "Suburban Family Home",              subtitle: "Austin, TX · 4 Beds · 3 Baths",              category: "Suburban",              value: "$895,000",              buttons: [{ text: "View Photos", href: "#" }]
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Why Choose PropFinder: Industry-Leading Real Estate Platform Connecting Buyers, Sellers, and Agents with Verified Properties and Expert Guidance"
          useInvertedBackground="noInvert"
          metrics={[
            { icon: Home, label: "Properties Listed", value: "50,000+" },
            { icon: Users, label: "Active Buyers", value: "250K+" },
            { icon: DollarSign, label: "Transaction Volume", value: "$8.5B" },
            { icon: Award, label: "Years Experience", value: "15+" }
          ]}
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <FeatureCardSixteen
          title="Traditional Listing Sites vs PropFinder"
          description="Discover why thousands of agents and buyers prefer our advanced platform for seamless property transactions"
          tag="Platform Comparison"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          negativeCard={{
            items: [
              "Limited search filters",              "Slow property updates",              "Poor mobile experience",              "Hidden pricing information",              "Difficult contact process"
            ]
          }}
          positiveCard={{
            items: [
              "Advanced AI-powered search",              "Real-time property updates",              "Responsive design",              "Transparent pricing",              "One-click agent contact"
            ]
          }}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Trusted by Home Buyers and Sellers"
          description="Real feedback from satisfied customers who found their perfect property or sold successfully"
          tag="Customer Stories"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              title: "Found Our Dream Home in Days",              quote: "The advanced search filters and detailed property information made finding our perfect home incredibly easy. The agent recommendations were spot-on!",              name: "Sarah Mitchell",              role: "Homebuyer",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              title: "Sold Property Above Asking Price",              quote: "PropFinder's platform gave us exposure to serious buyers. We received multiple offers within two weeks and sold above our asking price.",              name: "Michael Chen",              role: "Property Seller",              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: "Michael Chen"
            },
            {
              id: "3",              title: "Best Tool for Real Estate Agents",              quote: "As an agent, I appreciate the comprehensive client database and transaction tracking. It's streamlined my entire workflow and increased my sales.",              name: "Jessica Rodriguez",              role: "Real Estate Agent",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-outdoor-businessman_23-2148763884.jpg",              imageAlt: "Jessica Rodriguez"
            },
            {
              id: "4",              title: "Transparent and Trustworthy",              quote: "No hidden fees, no surprises. PropFinder's transparency throughout the buying process gave us complete confidence in our decision.",              name: "David Kim",              role: "First-Time Buyer",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",              imageAlt: "David Kim"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Get answers to common questions about browsing, buying, and selling properties"
          tag="Help & Support"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          mediaPosition="left"
          imageSrc="https://img.b2bpic.net/free-vector/running-mobile-app-infographic-flat-design_52683-15795.jpg"
          imageAlt="Customer support representative assisting homebuyer"
          faqs={[
            {
              id: "1",              title: "How do I search for properties on PropFinder?",              content: "Simply use our search bar to enter your desired location, price range, and property type. You can also use advanced filters to narrow down by amenities, square footage, year built, and more. Save your favorite properties to view later."
            },
            {
              id: "2",              title: "What fees does PropFinder charge?",              content: "For buyers: listing search and agent communication are completely free. For sellers: a transparent 2.5% commission on successful sales. There are no hidden fees or surprise charges at any stage."
            },
            {
              id: "3",              title: "How quickly can I schedule a property viewing?",              content: "Most properties can be viewed within 24-48 hours. Use the 'Schedule Tour' button on any listing to check availability. Our agents coordinate viewings at times that work best for you, with flexible scheduling."
            },
            {
              id: "4",              title: "Is my personal information secure on PropFinder?",              content: "Yes, we use bank-level encryption to protect all your data. Your information is never shared with third parties without your consent, and you can control your privacy settings at any time."
            },
            {
              id: "5",              title: "Can I get pre-approval for a mortgage through PropFinder?",              content: "We partner with leading mortgage lenders who offer pre-approval services directly through our platform. Simply click 'Get Pre-Approved' on any property to connect with lenders offering competitive rates."
            },
            {
              id: "6",              title: "What if I want to list my own property?",              content: "Click 'List Property' in the navigation menu to get started. Our step-by-step process includes professional photography, pricing guidance, and marketing support to help you attract qualified buyers quickly."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Find Your Next Home?"
          ctaDescription="Get personalized property recommendations and connect with our expert agents today."
          ctaButton={{
            text: "Start Your Search",            href: "#properties"
          }}
          ctaIcon={Phone}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          accordionAnimationType="smooth"
          showCard={true}
          faqs={[
            {
              id: "1",              title: "Do you have properties in my area?",              content: "PropFinder operates in 50+ states with an extensive network. Use our location search to check property availability in your desired area immediately."
            },
            {
              id: "2",              title: "How do I contact an agent?",              content: "Every property listing includes agent information and a direct contact button. Agents typically respond within hours and can schedule viewings at your convenience."
            },
            {
              id: "3",              title: "What's included in a property listing?",              content: "Each listing features high-quality photos, detailed property information, neighborhood data, tax history, and comparable sales data to help you make informed decisions."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="PropFinder"
          copyrightText="© 2025 PropFinder. All rights reserved."
          columns={[
            {
              title: "Browse",              items: [
                { label: "All Properties", href: "#properties" },
                { label: "New Listings", href: "#properties" },
                { label: "Open Houses", href: "#properties" }
              ]
            },
            {
              title: "For Agents",              items: [
                { label: "Become an Agent", href: "#contact" },
                { label: "Agent Resources", href: "#" },
                { label: "Training & Support", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Contact Support", href: "contact" },
                { label: "Careers", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}