"use client"; import { useState, ChangeEvent, FormEvent, useEffect } from "react"; import Header from "@/components/Header"; import Footer from "@/components/Footer"; import PropertyGallery from "@/components/PropertyGallery"; import PropertyNav from "@/components/PropertyNav"; import InnerBanner from "@/components/InnerBanner"; import { Property } from "@/data/properties"; import axios from "axios"; import { useCompare } from "@/context/CompareContext"; import dynamic from 'next/dynamic'; const ConnectivityMap = dynamic(() => import('./ConnectivityMap'), { ssr: false, loading: () =>
}); interface FormData { name: string; email: string; phone: string; message: string; } interface FormErrors { name?: string; email?: string; phone?: string; } const sections = [ { id: "overview", label: "Overview" }, { id: "pricing", label: "Pricing" }, { id: "connectivity", label: "Connectivity" }, { id: "master-plan", label: "Master Plan" }, { id: "floor-plans", label: "Floor Plans" }, { id: "amenities", label: "Amenities" }, // { id: "challenges", label: "Challenges" }, { id: "approvals", label: "Approvals" }, { id: "builder", label: "Builder" }, { id: "locality", label: "Locality" }, { id: "faq", label: "FAQ's" }, ]; export default function PropertyDetailClient({ property }: { property: Property }) { const [formData, setFormData] = useState({ name: "", email: "", phone: "", message: "", }); const [formErrors, setFormErrors] = useState({}); const [alert, setAlert] = useState<{ show: boolean; type: string; message: string }>({ show: false, type: "", message: "", }); const [isSubmitting, setIsSubmitting] = useState(false); const [isExpanded, setIsExpanded] = useState(false); const [isConnectivityExpanded, setIsConnectivityExpanded] = useState(false); const [activeMapTab, setActiveMapTab] = useState("Transit"); const [isMapEnabled, setIsMapEnabled] = useState(false); const [isLightboxOpen, setIsLightboxOpen] = useState(false); const [activeFloorPlan, setActiveFloorPlan] = useState("30 x 40"); const [isAmenitiesModalOpen, setIsAmenitiesModalOpen] = useState(false); const [isAmenitiesLoading, setIsAmenitiesLoading] = useState(false); const [activeFaqTab, setActiveFaqTab] = useState('Services'); const [expandedFaq, setExpandedFaq] = useState(null); const { addToCompare, removeFromCompare, isInCompare } = useCompare(); const isCompared = isInCompare(property.id); const [isWishlisted, setIsWishlisted] = useState(false); const handleShare = async () => { if (navigator.share) { try { await navigator.share({ title: property.title, text: `Check out this property: ${property.title} in ${property.location}`, url: window.location.href, }); } catch (error) { console.log('Error sharing:', error); } } else { // Fallback to clipboard navigator.clipboard.writeText(window.location.href); setAlert({ show: true, type: 'success', message: 'Link copied to clipboard!' }); } }; const handleWishlist = () => { setIsWishlisted(!isWishlisted); setAlert({ show: true, type: 'success', message: !isWishlisted ? 'Added to your wishlist!' : 'Removed from your wishlist' }); }; const handlePrint = () => { window.print(); }; const handleCompareToggle = () => { if (isCompared) { removeFromCompare(property.id); setAlert({ show: true, type: 'success', message: 'Removed from compare list' }); } else { addToCompare(property); setAlert({ show: true, type: 'success', message: 'Added to compare list' }); } }; const faqData: Record = { 'Project Details': [ { question: "What is the total land area?", answer: "The project is spread across 5 acres of prime land." }, { question: "How many units are there?", answer: "There are a total of 450 luxury units." }, { question: "What is the completion date?", answer: "The project is expected to be completed by Dec 2026." }, { question: "Is it RERA approved?", answer: "Yes, the project is fully RERA approved." }, ], 'Location & Connectivity': [ { question: "How far is the nearest metro station?", answer: "The nearest metro station is just 2km away." }, { question: "Are there schools nearby?", answer: "Yes, there are several international schools within a 3km radius." }, { question: "How is the road connectivity?", answer: "The project is well-connected to the Outer Ring Road and Whitefield." }, { question: "Is there a hospital nearby?", answer: "Manipal Hospital is located 1.5km from the project." }, ], 'Price & Booking': [ { question: "What is the booking amount?", answer: "The booking amount is 10% of the total sale value." }, { question: "Are there any bank offers?", answer: "Yes, we have tie-ups with SBI, HDFC, and ICICI for home loans." }, { question: "What are the additional charges?", answer: "Additional charges include GST, registration, and maintenance deposits." }, { question: "Is the price negotiable?", answer: "Prices are competitive, but we can discuss offers on table." }, ], 'Services': [ { question: "What is Service Guided Home Buying (GHB) and Peace of Mind (POM) service?", answer: "Service Guided Home Buying (GHB) and Peace of Mind (POM) service provide end-to-end assistance in your home buying journey, ensuring a hassle-free and transparent experience from selection to possession." }, { question: "Why should I get an advisor to help me buy a property?", answer: "An advisor acts as your unbiased partner, helping you navigate the complex real estate market, verify documents, negotiate prices, and avoid common pitfalls." }, { question: "Which type of properties do you help with?", answer: "We assist with all types of residential properties including apartments, villas, plots, and gated communities across various budget segments." }, { question: "Can I buy homes via Propsoch?", answer: "Yes, you can explore, shortlist, and book homes directly through Propsoch with the help of our expert advisors." }, { question: "How do I know I am seeing all possible options in the market?", answer: "Our database covers 99% of the market inventory, and our advisors provide unbiased recommendations based on your specific requirements, not just what we want to sell." }, { question: "How can I be assured that I am paying the right price?", answer: "We provide data-backed market analysis and comparative pricing reports to ensure you get the best value for your investment." }, { question: "What other services can Propsoch help me with after booking?", answer: "Post-booking, we assist with legal verification, loan processing, registration, and even interior design and property management services." }, { question: "What is the cost of the services?", answer: "Our basic advisory services are free for home buyers. We charge a nominal fee only for premium services like legal verification and dedicated relationship management." }, ] }; const handleSeeAllAmenities = () => { setIsAmenitiesLoading(true); setTimeout(() => { setIsAmenitiesLoading(false); setIsAmenitiesModalOpen(true); }, 500); }; const floorPlans = [ { id: "30 x 40", price: "₹1.24 Crores", area: "1200 sqft", direction: "North West, South East, North" }, { id: "30 x 50", price: "₹1.55 Crores", area: "1500 sqft", direction: "North West, South East, East, West" }, { id: "30 x 60", price: "₹1.86 Crores", area: "1800 sqft", direction: "North, East, West" }, { id: "40 x 60", price: "₹2.48 Crores", area: "2400 sqft", direction: "East, West" }, { id: "50 x 60", price: "₹3.10 Crores", area: "3000 sqft", direction: "North" }, ]; const activePlanDetails = floorPlans.find(p => p.id === activeFloorPlan) || floorPlans[0]; const amenitiesData = { Lifestyle: [ { name: "Gym - Indoor", available: true, rare: true, icon: }, { name: "Gym - Outdoor", available: true, icon: }, { name: "Kids Play Area", available: true, rare: true, icon: }, { name: "Amphitheatre", available: false, icon: }, { name: "Cafe/Restaurant", available: false, icon: }, ], Sports: [ { name: "Running Track", available: true, rare: true, icon: }, { name: "Badminton", available: false, icon: }, { name: "Basketball", available: false, icon: }, { name: "Cricket Ground", available: false, icon: }, { name: "Cricket Pitch", available: false, icon: }, ], Natural: [ { name: "Army Land", available: false, icon: }, { name: "Forest", available: false, icon: }, { name: "Golf Course", available: false, icon: }, { name: "Lake", available: false, icon: }, { name: "Mountain/Hill", available: false, icon: }, ] }; const handleChange = (e: ChangeEvent) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value })); // Clear error when user types if (formErrors[name as keyof FormErrors]) { setFormErrors(prev => ({ ...prev, [name]: undefined })); } }; const handleSubmit = async (e: FormEvent) => { e.preventDefault(); const errors: FormErrors = {}; if (!formData.name.trim()) errors.name = "Name is required."; if (!formData.phone.trim()) errors.phone = "Phone number is required."; if (!formData.email.trim()) errors.email = "Email is required."; setFormErrors(errors); if (Object.keys(errors).length > 0) return; setIsSubmitting(true); const emailData = { name: formData.name, phone: formData.phone, email: formData.email, subject: `Property Inquiry: ${property?.title} from ${formData.name}`, message: `Property Inquiry

Property: ${property?.title}
Location: ${property?.location}
Price: ${property?.price}

Customer Details:
Name: ${formData.name}
Phone: ${formData.phone}
Email: ${formData.email}
Message: ${formData.message || 'N/A'}`, to: "hello@skyandsoil.com", senderName: "Sky and Soil Property Inquiry", }; try { const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, { headers: { "Content-Type": "application/json" }, }); setAlert({ show: true, type: "success", message: res?.data?.message || "Request sent successfully! We will contact you soon.", }); setFormData({ name: "", email: "", phone: "", message: "" }); setFormErrors({}); } catch (error) { setAlert({ show: true, type: "danger", message: "Failed to send request. Please try again later.", }); } finally { setIsSubmitting(false); } }; useEffect(() => { if (alert.show) { const timer = setTimeout(() => { setAlert(prev => ({ ...prev, show: false })); }, 5000); return () => clearTimeout(timer); } }, [alert.show]); return (
{/* Sticky Navigation */}
{/* Image Gallery */}

{property.title}

{property.status}
{property.location}
Starting from
{property.price}
{/* Quick Stats */}
{property.overview.bhk}
Configuration
{property.overview.size}
Area
{property.overview.possession}
Possession
{property.overview.totalUnits}
Total Units
{/* Main Content */}
{/* Property Header */} {/* Overview Section */}
{/* Header with title and badges */}

Overview

Ivy County by Modern Spaaces

Better Average Subpar
{/* Subtitle */}

Average is based on comparable projects in Varthur

{/* Info Grid - 2 rows x 3 columns */}
{/* Land Area */}
50.00 Acres
Land Area
Avg is 50.00 acres
{/* Closest Metro */}
3.62 kms
Closest Metro
Avg is 0.00 kms
{/* Approach Road */}
15 meters
Approach Road
Avg is 15 meters
{/* Open Area */}
45%
Open Area
Avg is 45%
{/* Unit Density */}
13 units/acre
Unit Density
Avg is 13 units/acre
{/* Club House */}
50000 sqft
Club House
Avg is 50000 sqft

{property.description} {/* Simulating more content if description is short, or just showing description. For the purpose of "Read More", we usually need a longer text. If property.description is short, this might not look like the screenshot. Assuming property.description is the main content. */}

{!isExpanded && (
)}
{/* Info Cards Grid */}
{/* RERA Card */}

{property.title} is approved by RERA

It was approved on Nov 2024

{/* Brochure Card */}

See {property.title} brochure

Beware, beautiful brochures don't show hidden realities

{/* Pros & Cons Card */}

See the truth beyond the brochures

See every risk & potential clearly with our experts

{/* Pricing Section - Moved and Redesigned */}

Pricing

Last updated on 03 Nov 2025

Total Range
{property.price}
Monthly EMI
₹ 73K - ₹ 1.82 L
Project's Avg.
₹ 10326 psft.
Market Avg.
₹ 9700 psft.
{/* Connectivity Section (Formerly Location) */}

Connectivity

{property.title}

✦ {property.title} is located in {property.location}. In its vicinity, the closest metro is Dommasandra Circle Metro Station. It takes approximately 84 mins to reach the Kempegowda Airport from this property. The area is well-connected to major IT hubs, schools, and hospitals, making it an ideal choice for families and professionals alike.

{!isConnectivityExpanded && (
)}
{/* Map Interface */}
{/* Master Plan Section */}

Master Plan

{property.title} is a plotted development with 658 plots.

{/* Master Plan Image */}
setIsLightboxOpen(true)} > Master Plan
Click to zoom
{/* Stats Grid */}
Total Units
658
Water Source
Borewells +1
Park Area
8.00 Acres
Land type
Agricultural
{/* Propsoch Clarity Engine Section */}

The Propsoch Clarity Engine

300+ families found safer homes with Propsoch. You could be next ☝️

{/* Card 1: Compare */}
{/* Decorative Circle */}
{/* House Icon Placeholder - Using SVG for 3D feel */}

Like this project?

Compare it with the rest

Compare 2 properties side by side on 40+ parameters like connectivity, layout, price, specs and more

{/* Card 2: Negotiate (Green) */}
{/* Trusted Badge */}
TRUSTED BY 300+ FAMILIES
{/* Sparkles */}
{/* Trophy Icon */}

Pay less. Get more.

Let us negotiate for you.

Get a free Peace of Mind report, solid negotiations & a loyalty reward up to ₹3.29 Lakhs when you work with us

{/* Card 3: Report (Purple) */}
{/* Decorative Triangle */}
{/* Report Icon */}

Almost convinced?

See what we uncovered

Ideal if you've already visited and close to deciding. Our Peace of Mind report shows you what builders won't.

{/* Floor Plans Section */}

Floor Plans

{property.title} has plots ranging from 1200 sqft to 3000 sqft.

{/* Tabs */}
{floorPlans.map((plan) => ( ))}
{/* Active Plan Details Card */}

{activePlanDetails.id}

{activePlanDetails.price}
Saleable Area
{activePlanDetails.area}
Direction(s)
{activePlanDetails.direction}
{/* Amenities Section */}

Amenities

{property.title}

{/* Lifestyle */}

Lifestyle Amenities

    {amenitiesData.Lifestyle.map((item, idx) => (
  • {item.icon}
    {item.name}
    • ))}
{/* Sports */}

Sports Amenities

    {amenitiesData.Sports.map((item, idx) => (
  • {item.icon}
    {item.name}
    • ))}
{/* Natural */}

Natural Amenities

    {amenitiesData.Natural.map((item, idx) => (
  • {item.icon}
    {item.name}
    • ))}
{/* Approvals Section */}

Approvals

{property.title} by Modern Spaaces has received 4 out of 4 important approvals as per RERA

{/* Approvals List - Two Columns */}
{/* Left Column */}

Approved by BBMP

{/* Right Column */}

Approved by BDA

{/* Left Column */}

Approved by BWSSB

{/* Right Column */}

Approved by MOEF

{/* Documents Subsection */}

Documents

Curated documents from various sources for {property.title} by Modern Spaaces

{/* City Development Plan */}

City Development Plan

Used to identify land types, sensitive zones/flood risks, future developments etc.

{/* Legal Opinion */}

Legal Opinion

Used to only declare any litigations by the builder. Do NOT mistake for a clean title.

{/* Development Rights */}

Development Rights

Outlines the agreed terms of development between the land owner & the builder

{/* About the Builder Section */}

About the builder

Modern Spaaces

Established in 2012, Modern Spaces focuses on delivering thoughtfully designed residential and commercial developments. With over 1 million sq. ft. completed, the company caters to mid-segment and premium buyers in Bengaluru. Key projects like Modern Greens, Modern Heights, and Modern Meadows are recognized for their innovative layouts and contemporary features. Modern Spaces integrates green practices such as energy-efficient construction and landscaped open spaces into its developments. Known for timely delivery and quality construction, Modern Spaces continues to serve Bengaluru's growing real estate market.

See all properties by Modern Spaaces

Established On

2012

Completed Projects

No Data

{/* Locality Section */}

Locality

Varthur

{/* Large Image */}
Varthur Locality

Varthur

Varthur, located in East Bengaluru, is an upcoming residential locality that offers a serene living environment. The area is gaining popularity due to its proximity to tech parks and educational institutions.

{/* Gauges */}
{/* Developing */}

Developing

Living Experience

{/* Medium */}

Medium

Investment Potential

{/* Moderate */}

Moderate

Price Range

{/* Checkout Nearby Properties Section */}

Checkout Nearby Properties

See properties similar to {property.title} by Modern Spaaces in the same neighbourhood

{/* Property 1 */}
Prestige Raintree Park

Prestige Raintree Park

3.07 Crores - 5.67 Crores

Varthur

{/* Property 2 */}
Adarsh Park Heights

Adarsh Park Heights

1.63 Crores - 2.32 Crores

Varthur

{/* Property 3 */}
Tru Aquapolis

Tru Aquapolis

2.22 Crores - 3.51 Crores

Varthur

See all properties in Varthur
{/* FAQ Section */}

Frequently Asked Questions

99% of your queries should get answered here, for others, you can always talk to us

{/* Tabs */}
{['Project Details', 'Location & Connectivity', 'Price & Booking', 'Services'].map((tab) => ( ))}
{/* Accordion List */}
{faqData[activeFaqTab]?.map((item, index) => (
{expandedFaq === index && (
{item.answer}
)}
))}
{/* Sidebar */}
{/* Contact Form */}

Get in Touch

{alert.show && (
{alert.message}
)}
{formErrors.name && {formErrors.name}}
{formErrors.email && {formErrors.email}}
{formErrors.phone && {formErrors.phone}}