import React, { useMemo, useState } from "react"; import { motion } from "framer-motion"; import { Search, MapPin, BedDouble, Bath, Square, Heart, ArrowRight, Sparkles, Home, Filter, Star } from "lucide-react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Badge } from "@/components/ui/badge"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; const propertiesSeed = [ { id: 1, status: "For Rent", city: "Houston, TX", title: "Single family home in Houston, TX", address: "2802 Grand Fountains Dr I, Houston, TX 77054", beds: 2, baths: 1, sqft: 1260, price: 463000, image: "https://images.unsplash.com/photo-1600585154526-990dced4db0d?auto=format&fit=crop&w=1200&q=80", accent: "from-cyan-400 to-blue-600", agent: { name: "Marly Wilson", title: "Listing Agent", image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=300&q=80", }, featured: true, }, { id: 2, status: "For Sale", city: "Pembroke Pines, FL", title: "Single family home in Pembroke Pines", address: "400 NW 202nd Way, Pembroke Pines, FL 33029", beds: 3, baths: 3, sqft: 2365, price: 749500, image: "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=1200&q=80", accent: "from-fuchsia-500 to-violet-600", agent: { name: "Pamela Columna", title: "Listing Agent", image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=300&q=80", }, featured: true, }, { id: 3, status: "For Sale", city: "Miami, FL", title: "Single family home in Miami, FL", address: "12254 SW 217th St, Miami, FL 33170-2831", beds: 4, baths: 2, sqft: 1565, price: 599000, image: "https://images.unsplash.com/photo-1570129477492-45c003edd2be?auto=format&fit=crop&w=1200&q=80", accent: "from-emerald-400 to-cyan-500", agent: { name: "Phillip Calloway", title: "Listing Agent", image: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=300&q=80", }, featured: true, }, { id: 4, status: "For Sale", city: "Austin, TX", title: "Modern smart home in Austin, TX", address: "501 Skyline Point, Austin, TX 78704", beds: 5, baths: 4, sqft: 3120, price: 989000, image: "https://images.unsplash.com/photo-1613977257360-a4f1f2eb2de6?auto=format&fit=crop&w=1200&q=80", accent: "from-orange-400 to-pink-500", agent: { name: "Alina Brooks", title: "Listing Agent", image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=300&q=80", }, featured: false, }, { id: 5, status: "For Rent", city: "Orlando, FL", title: "Bright luxury rental in Orlando, FL", address: "89 Nova Crescent, Orlando, FL 32819", beds: 3, baths: 2, sqft: 1890, price: 385000, image: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1200&q=80", accent: "from-sky-400 to-indigo-500", agent: { name: "Jason Reed", title: "Listing Agent", image: "https://images.unsplash.com/photo-1504593811423-6dd665756598?auto=format&fit=crop&w=300&q=80", }, featured: false, }, { id: 6, status: "For Sale", city: "Tampa, FL", title: "Stylish family home in Tampa, FL", address: "14 Palm Circuit, Tampa, FL 33602", beds: 4, baths: 3, sqft: 2145, price: 654000, image: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1200&q=80", accent: "from-purple-500 to-cyan-500", agent: { name: "Nina Carter", title: "Listing Agent", image: "https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?auto=format&fit=crop&w=300&q=80", }, featured: false, }, ]; const formatPrice = (price) => new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0, }).format(price); function GlowOrb({ className = "" }) { return ( ); } function StatPill({ icon: Icon, label, value }) { return ( ); } function PropertyCard({ property, liked, onToggleLike }) { return (

{property.status} {property.featured && ( Featured )}

onToggleLike(property.id)} className="absolute right-4 top-4 rounded-full border border-white/15 bg-slate-950/50 p-3 text-white backdrop-blur-md transition hover:scale-105 hover:bg-slate-900/80" >

{property.city}

{property.title}

Price

{formatPrice(property.price)}

{property.address}

{property.agent.name.split(" ").map((n) => n[0]).join("")}

{property.agent.title}

{property.agent.name}

I'm Interested

); } export default function FeaturedListingsFuturisticSite() { const [properties] = useState(propertiesSeed); const [search, setSearch] = useState(""); const [status, setStatus] = useState("all"); const [sortBy, setSortBy] = useState("featured"); const [liked, setLiked] = useState([2, 3]); const filteredProperties = useMemo(() => { let results = [...properties]; if (search.trim()) { const q = search.toLowerCase(); results = results.filter( (property) => property.title.toLowerCase().includes(q) || property.city.toLowerCase().includes(q) || property.address.toLowerCase().includes(q) || property.agent.name.toLowerCase().includes(q) ); } if (status !== "all") { results = results.filter((property) => property.status === status); } if (sortBy === "price-low") { results.sort((a, b) => a.price - b.price); } else if (sortBy === "price-high") { results.sort((a, b) => b.price - a.price); } else if (sortBy === "size") { results.sort((a, b) => b.sqft - a.sqft); } else { results.sort((a, b) => Number(b.featured) - Number(a.featured)); } return results; }, [properties, search, status, sortBy]); const toggleLike = (id) => { setLiked((current) => current.includes(id) ? current.filter((item) => item !== id) : [...current, id] ); }; return ( ); }