/* Danube Properties — shared components: Navbar, FAB, Modal, Forms, Logo */ const { useState, useEffect, useRef, useCallback } = React; /* ─── Logo (red wordmark with diamond) ──────────────────── */ function DanubeLogo({ light, scale = 1 }) { const wordColor = light ? "#fff" : "#181C24"; return ( DANUBE PROPERTIES ); } /* ─── Navbar ───────────────────────────────────────────── */ function Navbar({ onNav, onCta, currentView, lang, setLang }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60 || currentView !== "home"); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, [currentView]); return ( ); } /* ─── WhatsApp FAB ─────────────────────────────────────── */ function WhatsAppFAB() { return ( ); } /* ─── Modal ────────────────────────────────────────────── */ function Modal({ children, onClose }) { useEffect(() => { document.body.style.overflow = "hidden"; const esc = (e) => e.key === "Escape" && onClose(); window.addEventListener("keydown", esc); return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", esc); }; }, [onClose]); return (
e.stopPropagation()}> {children}
); } /* ─── Lead Capture Form (tri-tab: Interest / Brochure / Viewing) ──── */ function LeadForm({ defaultProject = "Any launch", defaultTab = "interest", compact = false }) { const [tab, setTab] = useState(defaultTab); const [form, setForm] = useState({ name: "", email: "", countryCode: "+971", phone: "", project: defaultProject, budget: "", timeline: "", nationality: "", notes: "", consent: false, }); const [errors, setErrors] = useState({}); const [submitted, setSubmitted] = useState(false); const [submitting, setSubmitting] = useState(false); const set = (k, v) => setForm((f) => ({ ...f, [k]: v })); const validate = () => { const e = {}; if (!form.name.trim()) e.name = "Required"; if (!form.email.trim()) e.email = "Required"; else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Invalid email"; if (!form.phone.trim()) e.phone = "Required"; else if (!/^[\d\s-]{6,}$/.test(form.phone)) e.phone = "Invalid phone"; if (!form.consent) e.consent = "Please consent"; setErrors(e); return Object.keys(e).length === 0; }; const submit = (ev) => { ev.preventDefault(); if (!validate()) return; setSubmitting(true); setTimeout(() => { setSubmitting(false); setSubmitted(true); }, 900); }; const tabCopy = { interest: { title: <>Register your interest, sub: "Direct from the developer. The 1% monthly plan, on enquiry.", cta: "Register interest", }, brochure: { title: <>Download the brochure, sub: "Renders, residences, amenity plates, and 1%-plan terms (sent by email).", cta: "Send me the brochure", }, viewing: { title: <>Book a private viewing, sub: "On-site at the sales gallery, or a private video walkthrough.", cta: "Book a viewing", }, }[tab]; if (submitted) { return (
{["interest", "brochure", "viewing"].map((t) => ( ))}
✓

Thank you, {form.name.split(" ")[0]}.

A senior sales consultant will reach out within 4 hours on {form.email} {" "}and {form.countryCode} {form.phone}.

Reference: DPR-{Math.floor(Math.random() * 90000 + 10000)}

); } return (
{[ ["interest", "Interest"], ["brochure", "Brochure"], ["viewing", "Viewing"], ].map(([k, label]) => ( ))}

{tabCopy.title}

{tabCopy.sub}

set("name", e.target.value)} placeholder="e.g. Adel Mohammed" /> {errors.name &&
{errors.name}
}
set("email", e.target.value)} placeholder="you@email.com" /> {errors.email &&
{errors.email}
}
set("phone", e.target.value)} placeholder="00 000 0000" />
{errors.phone &&
{errors.phone}
}
{!compact && (
)} {tab === "viewing" && (
set("notes", e.target.value)} placeholder="e.g. next Saturday afternoon, or video call" />
)} {tab === "interest" && !compact && (