const state = { view: 'home', user: null, filter: 'All', listings: [ { id: 1, title: "Glasshouse Pavillion", price: "$2,450,000", loc: "Vancouver, BC", type: "Sale", img: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1200", desc: "A architectural statement of transparency and strength. This pavilion features self-tinting glass walls and a reclaimed cedar framework.", tags: ["Modern", "Ocean View", "3 Bed"] }, { id: 2, title: "The Brutalist Penthouse", price: "$6,200/mo", loc: "Berlin, DE", type: "Rent", img: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1200", desc: "Raw concrete aesthetics met with ultra-luxurious Italian marble. Located in the heart of Berlin's design district.", tags: ["Industrial", "City View", "2 Bed"] }, { id: 3, title: "Serene Desert Courtyard", price: "$4,100,000", loc: "Joshua Tree, CA", type: "Sale", img: "https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=1200", desc: "An inward-facing sanctuary designed for maximum privacy and astronomical observation.", tags: ["Minimalist", "Pool", "4 Bed"] }, { id: 4, title: "Old World Revival Loft", price: "$1,850,000", loc: "Barcelona, ES", type: "Sale", img: "https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?auto=format&fit=crop&w=1200", desc: "Restored vaulted ceilings meet contemporary lighting systems in this Eixample district gem.", tags: ["Classic", "Historic", "2 Bed"] }, { id: 5, title: "Zen Forest Retreat", price: "$950,000", loc: "Kyoto, JP", type: "Sale", img: "https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?auto=format&fit=crop&w=1200", desc: "Built using traditional Japanese carpentry methods without a single nail. Surrounded by bamboo groves.", tags: ["Organic", "Spa", "1 Bed"] }, { id: 6, title: "The Horizon Estate", price: "$12,000,000", loc: "Malibu, CA", type: "Sale", img: "https://images.unsplash.com/photo-1513584684374-8bdb7489feef?auto=format&fit=crop&w=1200", desc: "A sprawling coastal estate with 200 feet of private beach access and a subterranean garage.", tags: ["Luxury", "Beachfront", "6 Bed"] } ] }; // --- NAVIGATION --- function navigate(view, extra = null) { state.view = view; window.scrollTo({ top: 0, behavior: 'smooth' }); render(extra); } function toggleMobileMenu() { const menu = document.getElementById('mobile-menu'); menu.classList.toggle('translate-x-full'); } function render(extra) { const app = document.getElementById('app'); app.innerHTML = ''; if (state.view === 'home') renderHome(app); else if (state.view === 'listings') renderListings(app); else if (state.view === 'services') renderServices(app); else if (state.view === 'inspiration') renderInspiration(app); else if (state.view === 'guidance') renderGuidance(app); else if (state.view === 'about') renderAbout(app); else if (state.view === 'legal') renderLegal(app, extra); updateAuthUI(); lucide.createIcons(); initReveal(); } // --- PAGE RENDERING FUNCTIONS --- function renderHome(app) { app.innerHTML = `
Now Touring: Vancouver 2026

Find the
Right Place.

thehomesdircet is a digital protection shield for your future lifestyle โ€” clean, confident, and meticulously curated.

${['1.4B Curated Listings', '24+ Countries Active', '98% Client Match', 'Top 10 Design Platform'].map(stat => ` ${stat} `).join('')}
${[ { t: 'The Collection', d: 'Hand-picked homes from across the globe.', icon: 'search', link: 'listings' }, { t: 'Interior Journal', d: 'Design trends for the high-end minimalist.', icon: 'feather', link: 'inspiration' }, { t: 'Bespoke Services', d: 'Maintenance and styling from experts.', icon: 'award', link: 'services' }, { t: 'Market Intel', d: 'The data behind the worlds best addresses.', icon: 'line-chart', link: 'guidance' } ].map((item, i) => `

${item.t}

${item.d}

`).join('')}

The Weekly
Selection.

Our curators traveled to 12 cities to find these 4 masterpieces.

${state.listings.slice(0, 4).map(l => renderListingCard(l)).join('')}
Our Ethos

"A home is not just an asset. It is the architectural manifestation of your internal philosophy."

โ€” The Design Committee, 2026

A Digital
Shield.

We protect you from the noise of the standard market. Our vetting process ensures every listing is a genuine architectural masterpiece.

${[ { t: 'Visual Purity', d: 'High-quality interior imagery as standard.' }, { t: 'Verified Specs', d: 'Every square foot is laser-measured and confirmed.' }, { t: 'Direct Link', d: 'No middleman noise. Direct contact with verified brokers.' } ].map(point => `

${point.t}

${point.d}

`).join('')}

Confidence by Design.

Verified Platform 2026

`; } function renderListings(app) { const filtered = state.filter === 'All' ? state.listings : state.listings.filter(l => l.type === state.filter); app.innerHTML = `
Global Collection

Catalog.

"Luxury is not about price; it's about the intentionality of space."

${['All', 'Sale', 'Rent'].map(f => ` `).join('')}
${filtered.map(l => renderListingCard(l)).join('')}

New properties added daily

`; } function renderServices(app) { app.innerHTML = `
Premium Care

Services.

${[ { t: 'Interior Staging', d: 'Expert curators who design your home to sell or to live.', icon: 'palette' }, { t: 'Security Systems', d: 'Invisible, high-tech protection for high-value properties.', icon: 'shield-check' }, { t: 'Art Advisory', d: 'Sourcing exclusive contemporary art for your walls.', icon: 'camera' }, { t: 'Smart Home Integration', d: 'Unified controls for lighting, climate, and sound.', icon: 'cpu' }, { t: 'Landscape Design', d: 'Minimalist gardens that require zero maintenance.', icon: 'wind' }, { t: 'Concierge Moving', d: 'White-glove relocation services globally.', icon: 'truck' } ].map((s, i) => `

${s.t}

${s.d}

`).join('')}

Partner with the best.

We only work with vetted service providers who pass our 50-point quality audit.

`; } function renderInspiration(app) { app.innerHTML = `
The Design Journal

Journal.

"Style is a way to say who you are without having to speak."

Spatial Planner 2.0

Drag components to test your minimalist vision.

${[ { n: 'Sofa', e: '๐Ÿ›‹๏ธ' }, { n: 'Lamp', e: '๐Ÿ’ก' }, { n: 'Plant', e: '๐ŸŒฟ' }, { n: 'Table', e: 'โ˜•' }, { n: 'Art', e: '๐Ÿ–ผ๏ธ' }, { n: 'Rug', e: '๐Ÿงถ' } ].map(i => ` `).join('')}

Marketplace Sync

Items placed here can be instantly sourced through our affiliate decor marketplace.

${[ { t: 'The Rise of Soft Brutalism', c: 'Design', d: 'Exploring why raw concrete is returning to luxury interiors, but with a warmer twist.', img: 'https://images.unsplash.com/photo-1518780664697-55e3ad937233?auto=format&fit=crop&w=1200' }, { t: 'Smart Homes that Disappear', c: 'Tech', d: 'The trend toward invisible technology that responds to voice and presence without screens.', img: 'https://images.unsplash.com/photo-1507089947368-19c1da9775ae?auto=format&fit=crop&w=1200' }, { t: '2026 Color Forecast', c: 'Aesthetic', d: 'Sage, Terracotta, and Deep Charcoal. Why earthy palettes are dominating the high-end market.', img: 'https://images.unsplash.com/photo-1556912177-c54030639a09?auto=format&fit=crop&w=1200' }, { t: 'Small Luxury: The $2M Studio', c: 'Real Estate', d: 'How prime locations in NYC and London are redefining luxury in under 500 square feet.', img: 'https://images.unsplash.com/photo-1536376074432-8d63d5929231?auto=format&fit=crop&w=1200' } ].map((post, i) => `
${post.c}

${post.t}

${post.d}

`).join('')}
`; initGame(); } function renderGuidance(app) { app.innerHTML = `
Expert Advisory

Guidance.

The 2026 Wealth
Migration Report.

"We are seeing a massive shift of ultra-high-net-worth individuals moving away from traditional tax havens toward 'lifestyle havens' โ€” cities that offer high aesthetic value and cultural richness."

${[ { q: 'Where should I invest $5M?', a: 'Focus on second-tier cultural hubs like Lisbon, Berlin, and Kyoto.' }, { q: 'Is eco-certification mandatory?', a: 'By 2027, non-certified luxury homes will lose up to 15% in valuation.' } ].map(faq => `

${faq.q}

${faq.a}

`).join('')}

Consult an
Advisor.

Schedule a private 30-minute consultation with our international market experts to discuss your portfolio.

`; } function renderAbout(app) { app.innerHTML = `
The Vision

Modern
Discovery.

thehomesdircet was founded to fix a broken experience. The market was cluttered with noisy data and low-quality imagery. We created a sanctuary for those who value architectural integrity over square footage.

${[ { t: 'Curation First', d: 'We filter out 92% of listings that reach our desk. Only the essential remains.' }, { t: 'Data Privacy', d: 'We are a digital shield. Your search history and preferences are encrypted and never sold.' }, { t: 'Global Reach', d: 'Local expertise at a planetary scale. We speak the language of design in 40+ markets.' } ].map(val => `

${val.t}

${val.d}

`).join('')}
`; } function renderLegal(app, type) { const content = { 'Privacy Policy': 'Your privacy is our highest priority. We use industry-standard encryption to protect your account. We never share your property searches with third parties or advertising networks. Your data belongs to you, and you can export or delete it at any time from your settings.', 'Terms & Conditions': 'By using thehomesdircet, you agree to engage with our platform in good faith. Our listings are provided by verified brokers, but we encourage independent inspection. Our fees are transparently displayed at the point of inquiry.', 'Cookies Policy': 'We use strictly necessary cookies to keep you logged in and functional cookies to remember your property filters. We do not use tracking cookies for external advertising purposes.', 'Accessibility': 'thehomesdircet is designed for everyone. Our platform meets WCAG 2.1 Level AA standards, ensuring high contrast and screen reader compatibility for all property listings.' }; app.innerHTML = `
Governance

${type}

Last Updated: January 2026

${content[type] || 'Full legal disclosure for thehomesdircet platform.'}

Contact Legal Team

For inquiries regarding our compliance or data handling, please contact legal@thehomesdircet.com.

`; } // --- COMPONENTS & UTILS --- function renderListingCard(l) { return `
Detailed View
${l.type}

${l.title}

${l.loc}

${l.price}

`; } function openQuickView(id) { const l = state.listings.find(x => x.id === id); renderModal(`

Beds

${l.tags[2]}

Market

Prime

${l.title}

${l.tags.map(t => `${t}`).join('')}

"${l.desc}"

Asking Price ${l.price}
Listing ID TSD-${Math.floor(Math.random()*10000)}
`); } // --- AUTH & SYSTEM --- function updateAuthUI() { const sec = document.getElementById('auth-section'); if (state.user) { sec.innerHTML = `
U
`; } else { sec.innerHTML = ``; } } function openAuthModal() { renderModal(`

Welcome Back.

Access your curated dashboard and saved properties.

`); } function login() { state.user = { id: 1 }; closeModal(null); render(); showToast("Authenticated successfully."); } function logout() { state.user = null; render(); showToast("Signed out."); } function setFilter(f) { state.filter = f; render(); } // --- INTERACTIVE LAB LOGIC --- function initGame() { const canvas = document.getElementById('canvas-area'); if(!canvas) return; canvas.addEventListener('mousedown', startDrag); canvas.addEventListener('touchstart', startDrag); window.addEventListener('mousemove', drag); window.addEventListener('touchmove', drag, { passive: false }); window.addEventListener('mouseup', endDrag); window.addEventListener('touchend', endDrag); } let draggedItem = null; let offset = { x: 0, y: 0 }; function addItem(name, emoji) { const canvas = document.getElementById('canvas-area'); const el = document.createElement('div'); el.className = 'draggable text-6xl p-6 bg-white/10 backdrop-blur-md rounded-3xl border border-white/20 transition-transform active:scale-95'; el.innerHTML = emoji; el.style.left = '100px'; el.style.top = '100px'; canvas.appendChild(el); } function resetGame() { const canvas = document.getElementById('canvas-area'); canvas.querySelectorAll('.draggable').forEach(i => i.remove()); } function startDrag(e) { if(e.target.classList.contains('draggable')) { draggedItem = e.target; const rect = draggedItem.getBoundingClientRect(); const clientX = e.clientX || e.touches[0].clientX; const clientY = e.clientY || e.touches[0].clientY; offset.x = clientX - rect.left; offset.y = clientY - rect.top; } } function drag(e) { if(!draggedItem) return; e.preventDefault(); const canvas = document.getElementById('canvas-area'); const rect = canvas.getBoundingClientRect(); const clientX = e.clientX || e.touches?.[0]?.clientX; const clientY = e.clientY || e.touches?.[0]?.clientY; let x = clientX - rect.left - offset.x; let y = clientY - rect.top - offset.y; x = Math.max(0, Math.min(x, rect.width - draggedItem.offsetWidth)); y = Math.max(0, Math.min(y, rect.height - draggedItem.offsetHeight)); draggedItem.style.left = x + 'px'; draggedItem.style.top = y + 'px'; } function endDrag() { draggedItem = null; } // --- GLOBAL UTILS --- function renderModal(html) { document.getElementById('modal-body').innerHTML = html; document.getElementById('modal-overlay').classList.remove('hidden'); document.getElementById('modal-overlay').classList.add('flex'); lucide.createIcons(); } function closeModal(e) { if(e && e.target !== e.currentTarget) return; document.getElementById('modal-overlay').classList.add('hidden'); document.getElementById('modal-overlay').classList.remove('flex'); } function showToast(msg) { const existing = document.querySelector('.toast-box'); if(existing) existing.remove(); const toast = document.createElement('div'); toast.className = 'toast-box fixed bottom-12 left-1/2 -translate-x-1/2 z-[2000] bg-charcoal text-white px-12 py-5 rounded-full font-bold text-[10px] uppercase tracking-[0.4em] shadow-2xl transition-all animate-bounce'; toast.innerText = msg; document.body.appendChild(toast); setTimeout(() => toast.remove(), 4000); } function initReveal() { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('active'); }); }, { threshold: 0.1 }); document.querySelectorAll('.reveal').forEach(el => observer.observe(el)); } // --- INITIALIZE --- window.onload = render;