/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakSelect, TweakText, TweakColor */ const { useEffect, useRef, useState } = React; // ---------- Tweakable defaults (persisted via host) ---------- const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "fontPairing": "marcellus-worksans", "accentColor": "#B08A63", "heroVariant": "centered", "heroEyebrow": "Coastal Staging", "heroTitle": "Elevated Living.\nDesigned to Sell.", "heroSub": "Curated interiors for the coastal luxury market." }/*EDITMODE-END*/; const FONT_PAIRS = { "marcellus-worksans": { display: "'Marcellus', serif", body: "'Work Sans', sans-serif", label: "Marcellus + Work Sans" }, "cormorant-worksans": { display: "'Cormorant Garamond', serif", body: "'Work Sans', sans-serif", label: "Cormorant + Work Sans" }, "fraunces-inter": { display: "'Fraunces', serif", body: "'Inter', sans-serif", label: "Fraunces + Inter" }, "playfair-worksans": { display: "'Playfair Display', serif", body: "'Work Sans', sans-serif", label: "Playfair + Work Sans" }, }; // ---------- Portfolio data ---------- const PROJECTS = [ { id: "living", title: "Ocean View Living", tag: "wide", img: "assets/portfolio-01-living.jpg", label: "01 · Living" }, { id: "kitchen", title: "Marble + Blue Island", tag: "tall", img: "assets/portfolio-02-kitchen.jpg", label: "02 · Kitchen" }, { id: "bedroom", title: "Primary Bedroom", tag: "med", img: "assets/portfolio-03-bedroom.png", label: "03 · Bedroom" }, { id: "patio", title: "Covered Patio", tag: "med", img: "assets/portfolio-04-patio.png", label: "04 · Patio" }, { id: "dining", title: "Dining Room", tag: "med", img: "assets/portfolio-05-dining.png", label: "05 · Dining" }, { id: "canopy", title: "Canopy Suite", tag: "half", img: "assets/portfolio-06-canopy.png", label: "06 · Suite" }, { id: "outdoor", title: "Oceanfront Terrace", tag: "half", img: "assets/portfolio-07-outdoor.png", label: "07 · Outdoor" }, ]; // ---------- Reveal hook ---------- function useReveal(deps = []) { useEffect(() => { const els = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .split-rise, .img-reveal, .sunset'); const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.15, rootMargin: '0px 0px -10% 0px' }); els.forEach(el => io.observe(el)); // Safety net: after 2.5s force any remaining .img-reveal elements into `.in` // so cover-wipe overlays never get stuck if the observer misses them. const t = setTimeout(() => { document.querySelectorAll('.img-reveal:not(.in)').forEach(el => el.classList.add('in')); }, 2500); return () => { io.disconnect(); clearTimeout(t); }; }, deps); } // ---------- Scroll-linked image parallax ---------- function useImageParallax() { useEffect(() => { const tiles = Array.from(document.querySelectorAll('[data-parallax]')); if (!tiles.length) return; let raf = 0; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { const vh = window.innerHeight; tiles.forEach(t => { const rect = t.getBoundingClientRect(); const center = rect.top + rect.height / 2; const progress = (center - vh / 2) / (vh * 0.8); // -1..1-ish const y = Math.max(-30, Math.min(30, -progress * 26)); const inner = t.querySelector('.img'); if (inner) inner.style.setProperty('--py', `${y}px`); }); raf = 0; }); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); } // ---------- Nav ---------- function Nav() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); // Lock body scroll when the mobile drawer is open useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]); // Close on resize up to desktop, on Escape, or on hash/route change useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; const onResize = () => { if (window.innerWidth > 900) setOpen(false); }; const onHash = () => setOpen(false); window.addEventListener('keydown', onKey); window.addEventListener('resize', onResize); window.addEventListener('hashchange', onHash); return () => { window.removeEventListener('keydown', onKey); window.removeEventListener('resize', onResize); window.removeEventListener('hashchange', onHash); }; }, []); const close = () => setOpen(false); return ( ); } // ---------- Hero ---------- function Hero({ variant, eyebrow, title, subtitle }) { const mediaRef = useRef(null); const [hasImage, setHasImage] = useState(true); // optimistic: assume the image exists useEffect(() => { const el = mediaRef.current; if (!el) return; const url = "assets/hero.png"; // Optimistically set the background-image immediately with cache-bust so the // browser always re-requests when the file changes. const bust = url + '?v=' + Date.now(); el.style.backgroundImage = `url("${bust}")`; // Probe to decide whether to hide the placeholder label. const img = new Image(); img.onload = () => { if (!mediaRef.current) return; mediaRef.current.classList.add('loaded'); mediaRef.current.classList.remove('ph'); mediaRef.current.classList.remove('hero-ph'); mediaRef.current.removeAttribute('data-label'); setHasImage(true); }; img.onerror = () => { if (!mediaRef.current) return; mediaRef.current.style.backgroundImage = ''; setHasImage(false); }; img.src = bust; // Parallax const onScroll = () => { if (!mediaRef.current) return; const y = Math.min(window.scrollY, 900); mediaRef.current.style.transform = `translateY(${y * 0.3}px) scale(${1.05 + y * 0.0002})`; }; window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const titleLines = (title || "").split("\n"); return (
{eyebrow}

{titleLines.map((line, i) => ( {line} ))}

{subtitle}
Book a Walkthrough
Scroll
); } // ---------- Portfolio ---------- function Portfolio() { return (
Selected Projects

A quiet discipline in every room.

Curated interiors for the coastal luxury market — designed to photograph beautifully and live honestly.

{PROJECTS.map((p, i) => ( ))}
View Full Portfolio
); } function PortfolioTile({ project, delay }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const bust = project.img + '?v=' + Date.now(); // Optimistically set background so browser fetches it directly. el.style.backgroundImage = `url("${bust}")`; const img = new Image(); img.onload = () => { if (!ref.current) return; ref.current.classList.remove('ph'); ref.current.removeAttribute('data-label'); }; img.onerror = () => { // keep placeholder if (!ref.current) return; ref.current.style.backgroundImage = ''; }; img.src = bust; }, [project.img]); return (
{project.title}
); } // ---------- Narrative ---------- function Narrative() { const photoRef = useRef(null); useEffect(() => { const el = photoRef.current; if (!el) return; const img = new Image(); img.src = "assets/detail.png"; img.onload = () => { el.style.backgroundImage = `url(${img.src})`; el.classList.remove('ph'); el.removeAttribute('data-label'); }; }, []); return (
The Difference

Every home tells a story.
Ours helps it sell.

We combine thoughtful design, curated furnishings, and a working knowledge of the coastal luxury buyer to create spaces that feel both elevated and effortless — the kind of rooms that read instantly in photos and linger in person.

Designed for the
coastal luxury market
Curated materials
and furnishings
Elevated presentation
strategy
); } function Icon({ name }) { const common = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }; if (name === "palm") return ; if (name === "chair") return ; if (name === "vase") return ; return null; } // ---------- Brand mark moment ---------- function BrandMark() { return (
The Coastal Staging Mark
Coastal Staging
Elevated living. Designed to sell.
); } // ---------- Process ---------- function Process() { return (
Our Process

Three steps, quietly executed.

From first walkthrough to final install, every decision is made with the market-ready presentation in mind.

01

Consultation

We walk the home, study the market, and identify the buyer. Every proposal is grounded in the property, not a template.

02

Design & Curation

Furnishings, textiles, and art are selected to elevate the architecture — never compete with it. Restraint is the strategy.

03

Installation

A fully styled, camera-ready home delivered on schedule. We stay until the last book is placed and the light is right.

); } // ---------- Sunset banner ---------- function Sunset() { const mediaRef = useRef(null); useEffect(() => { const el = mediaRef.current; if (!el) return; const img = new Image(); img.src = "assets/sunset.png"; img.onload = () => { el.style.backgroundImage = `url(${img.src})`; el.classList.remove('ph'); el.removeAttribute('data-label'); }; // gentle parallax const onScroll = () => { if (!el) return; const rect = el.parentElement.getBoundingClientRect(); const progress = 1 - Math.max(0, Math.min(1, rect.top / window.innerHeight)); el.style.transform = `translateY(${progress * -40}px) scale(1.08)`; }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); return (
Designed to capture attention.
Curated to create desire.
Positioned to sell.
); } // ---------- Contact ---------- function Contact() { return (
Begin

Book a Walkthrough.

Tell us about your property. We'll take care of the rest — from first impressions to final install.

{ e.preventDefault(); alert('Thank you — we\'ll be in touch shortly.'); }}>