"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Home, Target, Sparkles, Users, Mail } from "lucide-react";

export default function PropertyPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="PropertyHub"
          navItems={[
            { name: "Browse", id: "properties" },
            { name: "About", id: "about" },
            { name: "How It Works", id: "features" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="FIND YOUR HOME"
          description="Discover your perfect property with advanced search filters and detailed listings"
          buttons={[
            { text: "Browse Properties", href: "#properties" },
            { text: "Schedule Viewing", href: "#contact" }
          ]}
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/two-happy-woman-friends-with-sunglasses-vacation-tropical-country_343596-726.jpg",              imageAlt: "Luxury modern home"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/happy-successful-business-team-members-posing-office_1262-20245.jpg",              imageAlt: "Urban apartment living"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-house_23-2149571916.jpg",              imageAlt: "Beautiful villa estate"
            }
          ]}
          autoplayDelay={4000}
          showDimOverlay={true}
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardFour
          products={[
            {
              id: "prop-001",              name: "Modern Downtown Penthouse",              price: "$850,000",              variant: "3 Bed, 2 Bath • Downtown",              imageSrc: "https://img.b2bpic.net/free-photo/serious-male-boss-instructing-female-assistant_1262-20385.jpg",              imageAlt: "Downtown penthouse apartment"
            },
            {
              id: "prop-002",              name: "Coastal Beach House",              price: "$1,200,000",              variant: "4 Bed, 3 Bath • Waterfront",              imageSrc: "https://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-house_23-2149571921.jpg",              imageAlt: "Beachfront property with ocean view"
            },
            {
              id: "prop-003",              name: "Family Home in Suburbs",              price: "$650,000",              variant: "4 Bed, 2.5 Bath • Suburban",              imageSrc: "https://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-house_23-2149571926.jpg",              imageAlt: "Suburban family home"
            },
            {
              id: "prop-004",              name: "Urban Loft Conversion",              price: "$575,000",              variant: "2 Bed, 1.5 Bath • City Center",              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: "Modern urban loft"
            },
            {
              id: "prop-005",              name: "Luxury Estate Manor",              price: "$2,500,000",              variant: "6 Bed, 5 Bath • Gated Estate",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-beautiful-woman-luxury-house_23-2149140848.jpg",              imageAlt: "Luxury mansion estate"
            },
            {
              id: "prop-006",              name: "Premium City Condo",              price: "$1,100,000",              variant: "3 Bed, 2 Bath • Skyscraper",              imageSrc: "https://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-house_23-2149571920.jpg",              imageAlt: "High-rise luxury condo"
            }
          ]}
          title="Featured Properties"
          description="Explore our curated selection of premium properties available now"
          tag="Available Now"
          tagIcon={Home}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNine
          features={[
            {
              id: 1,
              title: "Advanced Filters",              description: "Filter by price, location, bedrooms, amenities, and more. Narrow down your search to find exactly what you need.",              phoneOne: {
                imageSrc: "https://img.b2bpic.net/free-photo/serious-male-boss-instructing-female-assistant_1262-20385.jpg"
              },
              phoneTwo: {
                imageSrc: "https://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-house_23-2149571921.jpg"
              }
            },
            {
              id: 2,
              title: "Interactive Map View",              description: "Visualize properties on a map with neighborhood information, transit options, and nearby amenities.",              phoneOne: {
                imageSrc: "https://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-house_23-2149571926.jpg"
              },
              phoneTwo: {
                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"
              }
            },
            {
              id: 3,
              title: "Detailed Listings",              description: "Access comprehensive property information including photos, virtual tours, pricing history, and seller details.",              phoneOne: {
                imageSrc: "https://img.b2bpic.net/free-photo/close-up-beautiful-woman-luxury-house_23-2149140848.jpg"
              },
              phoneTwo: {
                imageSrc: "https://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-house_23-2149571920.jpg"
              }
            }
          ]}
          showStepNumbers={true}
          title="How Our Platform Works"
          description="Streamlined property search with powerful filters and detailed information"
          tag="Smart Search"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Our Mission"
          tagIcon={Target}
          title="Connecting People with Their Dream Homes"
          description="PropertyHub Team"
          subdescription="Real Estate Innovation Leaders"
          icon={Home}
          imageSrc="https://img.b2bpic.net/free-vector/gradient-real-estate-landing-page-template_23-2149086420.jpg"
          imageAlt="Real estate professionals"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "First-Time Homebuyer",              testimonial: "PropertyHub made finding my first home incredibly easy. The search filters were intuitive and the detailed listings gave me all the information I needed.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Real Estate Investor",              testimonial: "The map integration and property analytics features are outstanding. I've closed three deals through PropertyHub in the past year.",              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",              name: "Emily Rodriguez",              role: "Relocating Professional",              testimonial: "As someone moving to a new city, PropertyHub's neighborhood information and virtual tour features were invaluable. Highly recommended!",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Thompson",              role: "Luxury Property Buyer",              testimonial: "The premium property listings and exclusive access to luxury homes made my experience seamless. Excellent customer service throughout.",              imageSrc: "https://img.b2bpic.net/free-photo/serene-businessman-with-glasses_1098-719.jpg",              imageAlt: "David Thompson"
            }
          ]}
          title="What Our Users Say"
          description="Real success stories from satisfied buyers and investors"
          tag="Client Stories"
          tagIcon={Users}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={Mail}
          title="Ready to Find Your Perfect Home?"
          description="Subscribe to our newsletter for exclusive property listings, market insights, and real estate tips delivered to your inbox."
          background={{ variant: "rotated-rays-animated-grid" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="your.email@example.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time. By subscribing, you agree to receive marketing emails."
        />
      </div>

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