"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function PropertyPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="gradient-radial"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen 
          navItems={[
            { name: "Browse", id: "properties" },
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Contact", id: "contact" },
            { name: "Blog", id: "blog" }
          ]}
          brandName="PropertyHub"
          bottomLeftText="Find Your Dream Home"
          bottomRightText="hello@propertyhub.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="PropertyHub"
          description="Discover exceptional properties that match your lifestyle. Browse premium listings, connect with expert agents, and find your perfect home today."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Start Browsing", href: "#properties" },
            { text: "Schedule Tour", href: "#contact" }
          ]}
          layoutOrder="default"
          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 exterior"
          frameStyle="browser"
        />
      </div>

      <div id="search-filters" data-section="search-filters">
        <FeatureCardTwentyThree
          title="Smart Search & Filters"
          description="Find your ideal property with our intuitive filtering system. Search by location, price, size, amenities, and more to narrow down your perfect match."
          features={[
            {
              id: "1",              title: "Advanced Location Search",              tags: ["Neighborhoods", "Map View"],
              imageSrc: "https://img.b2bpic.net/free-photo/luxury-travel-full-shot-woman_23-2149204471.jpg",              imageAlt: "Advanced Location Search feature"
            },
            {
              id: "2",              title: "Price Range Filtering",              tags: ["Budget Friendly", "Luxury"],
              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: "Price Range Filtering feature"
            },
            {
              id: "3",              title: "Property Type Selection",              tags: ["House", "Apartment", "Condo"],
              imageSrc: "https://img.b2bpic.net/free-photo/woman-charging-electro-car-by-her-house_1303-18609.jpg",              imageAlt: "Property Type Selection feature"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="featured-properties" data-section="featured-properties">
        <ProductCardFour
          title="Featured Properties"
          description="Handpicked premium listings showcasing the finest properties in your desired locations."
          products={[
            {
              id: "1",              name: "Modern Downtown Penthouse",              price: "$1,250,000",              variant: "3 Bed · 2.5 Bath · 2,400 sq ft",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-young-woman-stairs_23-2149204468.jpg",              imageAlt: "Modern downtown penthouse with city views"
            },
            {
              id: "2",              name: "Contemporary Suburban Home",              price: "$875,000",              variant: "4 Bed · 3 Bath · 3,100 sq ft",              imageSrc: "https://img.b2bpic.net/free-photo/beach-chair-resort_1150-17976.jpg",              imageAlt: "Contemporary suburban home with backyard"
            },
            {
              id: "3",              name: "Luxury Waterfront Villa",              price: "$2,100,000",              variant: "5 Bed · 4 Bath · 4,500 sq ft",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-woman-vacation_23-2149204469.jpg",              imageAlt: "Luxury waterfront villa with pool"
            }
          ]}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          carouselMode="buttons"
        />
      </div>

      <div id="property-grid" data-section="property-grid">
        <ProductCardFour
          title="Browse All Properties"
          description="Explore our complete catalog of available properties with detailed information and virtual tours."
          products={[
            {
              id: "1",              name: "Charming Townhouse in Historic District",              price: "$650,000",              variant: "3 Bed · 2 Bath · 1,800 sq ft",              imageSrc: "https://img.b2bpic.net/free-photo/vertical-shot-person-standing-top-building_181624-14409.jpg",              imageAlt: "Charming townhouse exterior"
            },
            {
              id: "2",              name: "Sleek Urban Studio Apartment",              price: "$425,000",              variant: "1 Bed · 1 Bath · 850 sq ft",              imageSrc: "https://img.b2bpic.net/free-photo/outdoor-swimming-pool-with-umbrella-chair-lounge-around-there-leisure-travel_74190-7877.jpg",              imageAlt: "Modern urban studio apartment"
            },
            {
              id: "3",              name: "Spacious Family Home with Garden",              price: "$950,000",              variant: "4 Bed · 3 Bath · 3,200 sq ft",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-travel-full-shot-woman_23-2149204471.jpg",              imageAlt: "Family home with landscaped garden"
            },
            {
              id: "4",              name: "Premium Corner Office Space",              price: "$1,500,000",              variant: "Commercial · 5,000 sq ft",              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: "Premium commercial office space"
            },
            {
              id: "5",              name: "Beachfront Vacation Property",              price: "$2,250,000",              variant: "4 Bed · 3 Bath · 3,800 sq ft",              imageSrc: "https://img.b2bpic.net/free-photo/woman-charging-electro-car-by-her-house_1303-18609.jpg",              imageAlt: "Beachfront vacation home"
            },
            {
              id: "6",              name: "Investment Duplex Opportunity",              price: "$725,000",              variant: "2x2 Bed · 2x1.5 Bath · 2,500 sq ft",              imageSrc: "https://img.b2bpic.net/free-photo/mosque-pictures-moroccan-wall-pattern_1203-5080.jpg",              imageAlt: "Duplex for investment opportunity"
            }
          ]}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="map-section" data-section="map-section">
        <MediaSplitTabsAbout
          title="Explore Properties on Map"
          description="Visualize property locations and compare neighborhoods with our interactive map integration. Explore demographics, amenities, and local attractions for each area."
          tabs={[
            {
              id: "map-view",              label: "Map View",              description: "Browse properties on our interactive map. Filter by location, price range, and property type to find options in your preferred neighborhoods."
            },
            {
              id: "street-view",              label: "Street View",              description: "Get street-level perspective of properties and surrounding areas. Explore the neighborhood before scheduling your tour."
            },
            {
              id: "neighborhood",              label: "Neighborhood Info",              description: "Discover detailed information about local schools, parks, restaurants, and amenities in each area to make informed decisions."
            }
          ]}
          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="Map view of property locations"
          imagePosition="right"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="Client Success Stories"
          description="Hear from satisfied clients who found their perfect properties through PropertyHub."
          testimonials={[
            {
              id: "1",              name: "Sarah Martinez, Marketing Director",              date: "Date: 15 January 2025",              title: "Found our dream home in just two weeks!",              quote: "PropertyHub made the entire home buying process seamless. The advanced filters helped us find exactly what we were looking for, and the agent support was exceptional throughout.",              tag: "Home Buyer",              avatarSrc: "https://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg",              avatarAlt: "Sarah Martinez",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-young-woman-stairs_23-2149204468.jpg",              imageAlt: "Client success story"
            },
            {
              id: "2",              name: "James Chen, Tech Entrepreneur",              date: "Date: 12 January 2025",              title: "Best real estate platform I've used",              quote: "The map integration and property data made decision-making easy. We were able to compare neighborhoods and amenities quickly, saving us hours of research.",              tag: "Investor",              avatarSrc: "https://img.b2bpic.net/free-photo/businesswoman-glasses-portrait_1262-1461.jpg",              avatarAlt: "James Chen",              imageSrc: "https://img.b2bpic.net/free-photo/beach-chair-resort_1150-17976.jpg",              imageAlt: "Client success story"
            },
            {
              id: "3",              name: "Emily Rodriguez, Business Owner",              date: "Date: 10 January 2025",              title: "Excellent customer service and support",              quote: "From initial search to closing, PropertyHub's team was supportive and professional. They understood our unique commercial needs and delivered beyond expectations.",              tag: "Commercial Buyer",              avatarSrc: "https://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg",              avatarAlt: "Emily Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-woman-vacation_23-2149204469.jpg",              imageAlt: "Client success story"
            },
            {
              id: "4",              name: "Michael Thompson, Retired Professional",              date: "Date: 8 January 2025",              title: "User-friendly and comprehensive platform",              quote: "As someone not tech-savvy, I found PropertyHub incredibly intuitive. The virtual tours and detailed property information gave me confidence in my purchase decision.",              tag: "Residential Buyer",              avatarSrc: "https://img.b2bpic.net/free-photo/cheerful-young-businesswoman-smiling-camera_74855-4022.jpg",              avatarAlt: "Michael Thompson",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-travel-full-shot-woman_23-2149204471.jpg",              imageAlt: "Client success story"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to find your perfect property? Our expert team is here to help you navigate the real estate market and discover homes that match your vision."
          animationType="entrance-slide"
          background={{ variant: "plain" }}
          buttons={[
            { text: "Contact Our Agents", href: "#contact" },
            { text: "Schedule a Consultation", href: "#contact" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="PropertyHub"
          columns={[
            {
              items: [
                { label: "Browse Properties", href: "properties" },
                { label: "Featured Listings", href: "properties" },
                { label: "New Listings", href: "properties" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "about" },
                { label: "Our Team", href: "team" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              items: [
                { label: "Buyer Guide", href: "#" },
                { label: "Seller Resources", href: "#" },
                { label: "Blog", href: "blog" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "contact" },
                { label: "Support", href: "#" },
                { label: "FAQ", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}