// sections.jsx — Cala Del Mar microsite section components // Expects window.DATA from data.jsx const { useState, useEffect, useRef, useCallback } = React; // ─── Logo monograms ──────────────────────────────────────────────────────── function EGNMark({ size = 22, color }) { // Simple geometric mark inspired by the project's own monogram language — // chevron + diamond — used as a brand stand-in across the prototype. return ( ); } // ─── Reveal-on-scroll wrapper ────────────────────────────────────────────── function Reveal({ children, delay = 0, as: Tag = "div", className = "", ...rest }) { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( (es) => es.forEach((e) => { if (e.isIntersecting) { setTimeout(() => setShown(true), delay); io.disconnect(); } }), { threshold: 0.12 } ); io.observe(el); return () => io.disconnect(); }, [delay]); return {children}; } // ─── Navigation ──────────────────────────────────────────────────────────── function Nav({ onRegister, locale, setLocale, locales }) { const [scrolled, setScrolled] = useState(false); const [locOpen, setLocOpen] = useState(false); useEffect(() => { const onS = () => setScrolled(window.scrollY > 80); window.addEventListener("scroll", onS, { passive: true }); return () => window.removeEventListener("scroll", onS); }, []); return ( ); } // ─── Hero ────────────────────────────────────────────────────────────────── function Hero({ project, motion, onRegister, onBrochure }) { const [loaded, setLoaded] = useState(false); useEffect(() => { const t = setTimeout(() => setLoaded(true), 80); return () => clearTimeout(t); }, []); const heroImgStyle = { backgroundImage: `url('media/project-cala-del-mar.webp')`, ...(motion === "parallax" ? { transform: "scale(1.0)" } : {}), }; return (
{project.district} · {project.emirate}

Cala Del Mar

{project.intro}

AddressAl Hamra Island
FrontageArabian Gulf
StatusOff-plan
EnquiriesBy registration
); } // ─── Pull-quote ──────────────────────────────────────────────────────────── function PullQuote({ project }) { return (
§ 01 · The Hook
{project.hook}
An Ellington Properties launch · Al Hamra Island, RAK
); } // ─── Design & architecture (split, with interior) ────────────────────────── function DesignSection({ project }) { return (
§ 02 · Design & Architecture Atelier note 02 / 06
A study in restraint

A slow, white volume
drawn to the sea.

{project.designStory.map((para, i) => (

{para}

))} Cala Del Mar lobby — interior render
Plate 02 · Arrival lobby Render · subject & credit to confirm
); } // ─── Residences ──────────────────────────────────────────────────────────── function Residences({ project }) { return (
§ 03 · Residences & Concepts

Four typologies, one horizon.

Plans confirmed at RERA/DLD registration. Pricing on request — please register interest to receive the brochure, current availability and a private viewing.

{project.residences.map((r) => (
No. {r.num}

{r.name}

{r.detail}
{r.price} ))}
); } // ─── Amenities ───────────────────────────────────────────────────────────── function AmenityGlyph({ ix }) { // Tiny geometric stand-in glyphs — placeholder marks rather than literal icons. const map = { 0: <>, 1: <>, 2: <>, 3: <>, 4: <>, 5: <>, 6: <>, 7: <>, 8: <>, }; return ( ); } function Amenities({ project }) { return (
§ 04 · Amenities

An island of quiet utility.

{project.amenities.map((a, i) => (
{a.n}

{a.title}

{a.desc}

 ))}
); } // ─── Location ────────────────────────────────────────────────────────────── function MapPlate() { // Stylised abstract map plate — not a literal Google map. Just a place plate. return ( {/* Sea */} {/* Island shape */} {/* Roads */} {/* Site marker */} CALA DEL MAR {/* Labels */} 25.6818° N · 55.7708° E AL HAMRA ISLAND · RAK Arabian Gulf ↑ N ); } function Location({ project }) { return (
§ 05 · Location & Community

An island within an island.

Al Hamra Island is a planned, gated community on the northern emirate's coast — a quieter pace than Dubai's central waterfront, with golf, marina and beach inside the gate.

{project.proximity.map((p) => (
{p.name} {p.unit} {p.dist}
))}

Travel times are indicative · Map plate is illustrative, not to scale

); } // ─── Gallery + Lightbox ──────────────────────────────────────────────────── function Gallery({ project, onOpen }) { return ( ); } function Lightbox({ items, index, onClose, onPrev, onNext }) { useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); if (e.key === "ArrowLeft") onPrev(); if (e.key === "ArrowRight") onNext(); }; window.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [onClose, onPrev, onNext]); if (index == null) return null; const item = items[index]; return (
{item.label} e.stopPropagation()} />
{item.label} · Plate {index + 1} / {items.length}
); } // ─── Trust + Awards strip ───────────────────────────────────────────────── function TrustStrip() { return (
2014
Founded

Founded in Dubai by Robert D. Booth (former Emaar senior executive), Elie Naaman and Joseph Thomas.
25+
Developments delivered & in flight

Across Palm Jumeirah, Dubai Islands, Mina Rashid, MBR City, Business Bay, Dubai Hills, JVC and RAK.
2024 · 2025
International Property Awards

Verified wins in 2024 and 2025; categories and projects available on request. (Issuer: IPA.)
RERA · DLD
Escrow Framework

Buyer funds for off-plan are protected through Dubai's RERA/DLD escrow framework. Project-level statuses to be confirmed per release.
); } // ─── Portfolio ──────────────────────────────────────────────────────────── function Portfolio({ items }) { return (
§ 07 · The Wider Portfolio

Other Ellington developments.

View full portfolio  
{items.map((p, i) => ( {p.name}
{p.name} {p.district}
))}
); } // Export Object.assign(window, { Reveal, Nav, Hero, PullQuote, DesignSection, Residences, Amenities, Location, Gallery, Lightbox, TrustStrip, Portfolio, EGNMark, });