\n {/* Hero Section */}\n

\n Property Listings\n

\n Browse our extensive collection of premium plots and properties across all garden estates\n

\n\n {/* Filters */}\n

\n \n Garden Estate\n \n setFilters({ ...filters, garden: e.target.value })}\n className=\"form-input\"\n >\n \n {gardens.map(garden => (\n \n ))}\n \n

\n \n

\n \n Price Range\n \n setFilters({ ...filters, priceRange: e.target.value })}\n className=\"form-input\"\n >\n {priceRanges.map(range => (\n \n ))}\n \n

\n \n

\n \n Status\n \n setFilters({ ...filters, status: e.target.value })}\n className=\"form-input\"\n >\n {statusOptions.map(status => (\n \n ))}\n \n

\n \n

\n setFilters({ garden: 'all', priceRange: 'all', status: 'available' })}\n className=\"w-full btn-secondary\"\n >\n \n Reset Filters\n \n

\n \n

\n Showing {filteredProperties.length} of {properties.length} properties\n

\n\n {/* Properties Grid */}\n

\n {loading ? (\n

Loading properties...

\n ) : filteredProperties.length > 0 ? (\n

\n {filteredProperties.map((property) => (\n

\n Plot {property.plotNumber}\n

{getGardenName(property.gardenId)}

\n \n {property.status}\n \n

\n\n

\n Location:\n {getGardenLocation(property.gardenId)}\n

\n Size:\n {property.size}\n

\n Price:\n ₦{property.price.toLocaleString()}\n

\n\n {property.description && (\n

\n {property.description}\n

\n )}\n\n

\n {property.status === 'available' ? (\n <>\n onNavigate('payment')}\n className=\"flex-1 btn-primary text-sm\"\n >\n \n Reserve\n \n onNavigate('garden-detail', property.gardenId)}\n className=\"px-3 py-2 border border-teal-600 text-teal-600 rounded-lg hover:bg-teal-50 transition-colors\"\n >\n \n \n \n ) : (\n onNavigate('garden-detail', property.gardenId)}\n className=\"w-full btn-secondary text-sm\"\n >\n \n View Garden\n \n )}\n

\n ))}\n

\n ) : (\n

\n \n

No properties found

Try adjusting your filters to see more results.

\n setFilters({ garden: 'all', priceRange: 'all', status: 'available' })}\n className=\"btn-primary\"\n >\n \n Reset Filters\n \n

\n )}\n

\n\n {/* Quick Stats */}\n

\n Property Overview\n

\n Current availability across all our garden estates\n

\n\n

\n {properties.filter(p => p.status === 'available').length}\n

Available

\n {properties.filter(p => p.status === 'reserved').length}\n

Reserved

\n {properties.filter(p => p.status === 'sold').length}\n

Sold

\n {properties.length}\n

Total Properties

\n\n {/* Garden Quick Links */}\n

\n Explore by Garden\n

\n Browse properties by specific garden estates\n

\n\n

\n {gardens.map((garden) => {\n const gardenProperties = properties.filter(p => p.gardenId === garden.id);\n const availableCount = gardenProperties.filter(p => p.status === 'available').length;\n \n return (\n

{garden.name}

\n \n {garden.location}\n

\n Available Properties\n {availableCount}\n

\n onNavigate('garden-detail', garden.id)}\n className=\"w-full btn-primary\"\n >\n \n View Properties\n \n

\n );\n })}\n

\n\n {/* CTA Section */}\n

\n Found Your Perfect Property?\n

\n Don't wait! Premium properties in our gardens are selling fast. Secure yours today.\n

\n onNavigate('contact')}\n className=\"btn-primary text-lg px-8 py-4\"\n >\n \n Contact Us Now\n \n onNavigate('dashboard')}\n className=\"btn-secondary text-lg px-8 py-4\"\n >\n \n Create Account\n \n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/godinoarts/Eaglemajdes/code/frontend/components/PropertiesPage.tsx","extension","actionData","errors"]