/* shared.jsx — Nav, Footer, palettes, ornaments, CTA, hooks * William R. Sherry · River Song Heart and Spirit * Loaded BEFORE each page's own .jsx file. */ const { useState, useEffect, useMemo, useRef } = React; /* External booking widget — William's live booking URL */ const BOOKING_URL = "https://api.leadconnectorhq.com/widget/booking/2mMvEkivWTnblNaByTxv"; /* Contact */ const EMAIL = "riversongheartandspirit@gmail.com"; /* Thematic imagery (Unsplash, people-free) chosen for William's story, in * place of portraits: his intake upload was a family photo of a child, which * should not go on a public site. Swap in real photos of him if he sends them. */ const HERO_IMAGE_URL = "https://images.unsplash.com/photo-1528184039930-bd03972bd974?q=80&w=1400&auto=format&fit=crop"; /* River Song: creek at golden hour */ const CHAIRS_IMAGE_URL = "https://images.unsplash.com/photo-1746537717492-5a8fffc0c43c?q=80&w=1200&auto=format&fit=crop"; /* nearly 50 years, still talking: two chairs by the fire at the water */ const MORNING_RIVER_IMAGE_URL = "https://images.unsplash.com/photo-1759434192768-fe3facebd5f6?q=80&w=1200&auto=format&fit=crop"; /* slow down and listen: still river, misty morning */ const BRIDGE_IMAGE_URL = "https://images.unsplash.com/photo-1625863057797-015fef6be7ea?q=80&w=1200&auto=format&fit=crop"; /* Mike & Kim: a bridge over troubled water */ const SUNRISE_IMAGE_URL = "https://images.unsplash.com/photo-1760019185488-907418046670?q=80&w=1000&auto=format&fit=crop"; /* Monday morning: mist lifting off the river at sunrise */ /* ============================================================ * PALETTES — Sage Studio is default (per intake template preference "Sage") * ============================================================ */ const PALETTES = { sageStudio: { name: "Sage Studio", swatches: ["#EFF1E8", "#2E3A29", "#6B8E5A", "#8FA67D"], vars: { "--cream": "#EFF1E8", "--cream-2": "#E2E7D6", "--cream-3": "#D2DAC0", "--walnut": "#2E3A29", "--walnut-soft": "#46554A", "--terracotta": "#6B8E5A", "--terracotta-deep": "#547047", "--sage": "#8FA67D", "--sage-soft": "#B0C09D", "--ink": "#1F2818", "--rule": "rgba(46, 58, 41, 0.18)", "--rule-strong": "rgba(46, 58, 41, 0.32)", }, }, slate: { name: "Slate", swatches: ["#EEF1F5", "#1F2937", "#5B7A95", "#6B7F94"], vars: { "--cream": "#EEF1F5", "--cream-2": "#E2E7ED", "--cream-3": "#D2DAE3", "--walnut": "#1F2937", "--walnut-soft": "#475569", "--terracotta": "#5B7A95", "--terracotta-deep": "#46637D", "--sage": "#6B7F94", "--sage-soft": "#94A4B7", "--ink": "#0F172A", "--rule": "rgba(31, 41, 55, 0.18)", "--rule-strong": "rgba(31, 41, 55, 0.32)", }, }, slateMidnight: { name: "Slate Midnight", swatches: ["#E8ECF1", "#0F172A", "#475A75", "#5C6F87"], vars: { "--cream": "#E8ECF1", "--cream-2": "#DCE2EA", "--cream-3": "#C8D1DD", "--walnut": "#0F172A", "--walnut-soft": "#334155", "--terracotta": "#475A75", "--terracotta-deep": "#34465E", "--sage": "#5C6F87", "--sage-soft": "#8694A7", "--ink": "#070C16", "--rule": "rgba(15, 23, 42, 0.18)", "--rule-strong": "rgba(15, 23, 42, 0.32)", }, }, warmDevotional: { name: "Warm Devotional", swatches: ["#F5EFE6", "#3D2E1F", "#A66B3F", "#7A8B6F"], vars: { "--cream": "#F5EFE6", "--cream-2": "#EFE7D8", "--cream-3": "#E8DDC8", "--walnut": "#3D2E1F", "--walnut-soft": "#5A4838", "--terracotta": "#A66B3F", "--terracotta-deep": "#8C552F", "--sage": "#7A8B6F", "--sage-soft": "#9DA992", "--ink": "#2A1F14", "--rule": "rgba(61, 46, 31, 0.18)", "--rule-strong": "rgba(61, 46, 31, 0.32)", }, }, desertBloom: { name: "Desert Bloom", swatches: ["#F8F4ED", "#2C2825", "#B85C3D", "#D4A574"], vars: { "--cream": "#F8F4ED", "--cream-2": "#F0E8D8", "--cream-3": "#E5D6BE", "--walnut": "#2C2825", "--walnut-soft": "#4A4239", "--terracotta": "#B85C3D", "--terracotta-deep": "#9B4A2E", "--sage": "#7E8B6E", "--sage-soft": "#A0AB91", "--ink": "#1F1B17", "--rule": "rgba(44, 40, 37, 0.18)", "--rule-strong": "rgba(44, 40, 37, 0.32)", }, }, oliveAndIvory: { name: "Olive & Ivory", swatches: ["#EFE8DC", "#3A2E26", "#9B5D3F", "#7B7A4F"], vars: { "--cream": "#EFE8DC", "--cream-2": "#E5DCC8", "--cream-3": "#D8CCB2", "--walnut": "#3A2E26", "--walnut-soft": "#564539", "--terracotta": "#9B5D3F", "--terracotta-deep": "#80482D", "--sage": "#7B7A4F", "--sage-soft": "#9C9B72", "--ink": "#221B14", "--rule": "rgba(58, 46, 38, 0.20)", "--rule-strong": "rgba(58, 46, 38, 0.34)", }, }, morningChapel: { name: "Morning Chapel", swatches: ["#FAF6F0", "#1F1A14", "#C19A6B", "#6B5B47"], vars: { "--cream": "#FAF6F0", "--cream-2": "#F2EBDD", "--cream-3": "#E8DDC4", "--walnut": "#1F1A14", "--walnut-soft": "#3A322A", "--terracotta": "#C19A6B", "--terracotta-deep": "#A37E51", "--sage": "#6B5B47", "--sage-soft": "#8C7A66", "--ink": "#1A1510", "--rule": "rgba(31, 26, 20, 0.16)", "--rule-strong": "rgba(31, 26, 20, 0.30)", }, }, }; function applyPalette(key) { const pal = PALETTES[key] || PALETTES.sageStudio; const root = document.documentElement; Object.entries(pal.vars).forEach(([k, v]) => root.style.setProperty(k, v)); } /* ============================================================ * Ornaments * ============================================================ */ function CrossMark({ size = 14, color = "currentColor" }) { return ( ); } function DiamondMark({ size = 10, color = "currentColor" }) { return ( ); } function CircleMark({ size = 10, color = "currentColor", filled = true }) { return ( ); } /* RiverMark — placeholder logo until William sends one. Three river currents * that double as a musical staff ("River Song"); the middle current carries * the accent color. Pure currentColor strokes, so it works on light and dark. */ function RiverMark({ size = 44, color = "currentColor", accent }) { const a = accent || color; return ( ); } /* ============================================================ * Nav * ============================================================ */ function Nav({ current = "" }) { const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = mobileOpen ? "hidden" : prev || ""; return () => { document.body.style.overflow = prev || ""; }; }, [mobileOpen]); const links = [ { label: "About", href: "about.html", key: "about" }, { label: "Work With Me", href: "work-with-me.html", key: "work" }, { label: "Stories", href: "testimonials.html", key: "stories" }, { label: "FAQ", href: "faq.html", key: "faq" }, { label: "Contact", href: "contact.html", key: "contact" }, ]; const Logo = () => ( William Sherry river song · heart & spirit ); return ( ); } /* ============================================================ * Universal CTA block (used at bottom of every page) * ============================================================ */ function CTA({ headline = "Tired, and not sure why?", headlineItalic = "Let's talk about it.", eyebrow = "✦ Your next step · free 30-min Riverside Chat", checklist, }) { const defaultList = [ "Why you're so tired, even when you can't put your finger on the reason", "Which lies you've been believing about yourself, and whether Scripture backs up a single one", "What you want most for this season: your walk with God, your marriage, your purpose", "Whether the Wherever You Go 1:1 journey is the right fit, answered honestly", ]; const list = checklist || defaultList; return (
{eyebrow}

{headline}{" "} {headlineItalic}

Book a free 30-minute Riverside Chat. You talk, I listen, and together we see whether walking this stretch of the river side by side is the right next step. No script, no pressure, no judgment. The Lord is already with you wherever you go. This is just a conversation.

Book a Free Call → Send a Message
On the call we'll explore
    {list.map((c, i) => (
  • 0{i + 1} {c}
    • ))}
"You'll get a listening ear that won't run. No judgment, full confidentiality, and you set the direction. If I'm not the right coach for you, I'll tell you so."
Romans 5:20 · "Where sin increased, grace abounded all the more."
); } /* ============================================================ * Footer * ============================================================ */ function Footer() { return ( ); } /* ============================================================ * Page-level palette tweaks panel * ============================================================ */ const SHARED_TWEAK_DEFAULTS = { palette: "sageStudio" }; function PaletteTweaksPanel() { const [tweaks, setTweak] = useTweaks(SHARED_TWEAK_DEFAULTS); useEffect(() => { applyPalette(tweaks.palette); }, [tweaks.palette]); return (
{Object.entries(PALETTES).map(([key, p]) => ( ))}
); } /* ============================================================ * Stripe placeholder (used when photos aren't provided) * ============================================================ */ function Placeholder({ label = "image", style = {}, src, alt, objectPosition, ...rest }) { if (src) { const { aspectRatio, width, height, borderRadius, position, inset, top, left, right, bottom, marginTop, ...frameRest } = style || {}; const frameStyle = { position: position || (inset !== undefined || top !== undefined ? "absolute" : "relative"), inset, top, left, right, bottom, width: width ?? (inset !== undefined ? undefined : "100%"), height, aspectRatio, borderRadius, marginTop, overflow: "hidden", background: "var(--cream-2)", ...frameRest, }; return (
{alt
); } return (
); } /* ============================================================ * Inner page hero — reusable * ============================================================ */ function PageHero({ eyebrow, title, italic, subtitle, verse, verseRef }) { return (
{eyebrow}

{title}{" "} {italic && ( {italic} )}

{subtitle && (

{subtitle}

)} {verse && (
{verseRef}

"{verse}"

)}
); } // Export to window so per-page Babel scripts can use these. Object.assign(window, { PALETTES, applyPalette, CrossMark, DiamondMark, CircleMark, RiverMark, Nav, Footer, CTA, PaletteTweaksPanel, Placeholder, PageHero, SHARED_TWEAK_DEFAULTS, BOOKING_URL, EMAIL, HERO_IMAGE_URL, CHAIRS_IMAGE_URL, MORNING_RIVER_IMAGE_URL, BRIDGE_IMAGE_URL, SUNRISE_IMAGE_URL, });