/* shared.jsx — Nav, Footer, palettes, ornaments, CTA, hooks * Bri Hershberger · The Glass Heart * Loaded BEFORE each page's own .jsx file. */ const { useState, useEffect, useMemo, useRef } = React; /* External booking widget — PLACEHOLDER: replace when Bri provides her booking URL */ const BOOKING_URL = "book.html"; /* ============================================================ * PALETTES — Desert Bloom (Terracotta) is default per intake * ============================================================ */ const PALETTES = { 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)", }, }, 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)", }, }, }; function applyPalette(key) { const pal = PALETTES[key] || PALETTES.desertBloom; 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 ( ); } /* Inline glass heart SVG logo */ function GlassHeartLogo({ size = 28, color = "currentColor" }) { 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 = () => ( Bri Hershberger the glass heart ); return ( ); } /* ============================================================ * Universal CTA block * ============================================================ */ function CTA({ headline = "You don't have to", headlineItalic = "stay invisible.", eyebrow = "✦ Your next step · free discovery call", checklist, }) { const defaultList = [ "Where the childhood wound is still writing the script you keep performing", "Why information and behavior change hasn't produced the transformation you need", "What The Glass Heart Approach actually looks like in a real session", "Whether working together is the right fit for where you are right now", ]; const list = checklist || defaultList; return (
{eyebrow}

{headline}{" "} {headlineItalic}

Book a free discovery call. We'll talk about your story, where you've been, and whether The Glass Heart is the right next step. No judgment. No script. Just an honest conversation with someone who has been in the fire and come out the other side.

Book a Free Call → Follow on Instagram
On the call we'll explore
    {list.map((c, i) => (
  • 0{i + 1} {c}
    • ))}
"If I'm not the right fit for you, I'll say so honestly — and I'll point you toward someone who is."
2 Timothy 1:7 — "God has not given you a spirit of fear, but of power and of love and of a sound mind."
); } /* ============================================================ * Footer * ============================================================ */ function Footer() { return ( ); } /* ============================================================ * Palette tweaks panel * ============================================================ */ const SHARED_TWEAK_DEFAULTS = { palette: "desertBloom" }; function PaletteTweaksPanel() { const [tweaks, setTweak] = useTweaks(SHARED_TWEAK_DEFAULTS); useEffect(() => { applyPalette(tweaks.palette); }, [tweaks.palette]); return (
{Object.entries(PALETTES).map(([key, p]) => ( ))}
); } /* ============================================================ * Stripe placeholder * ============================================================ */ 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 * ============================================================ */ function PageHero({ eyebrow, title, italic, subtitle, verse, verseRef }) { return (
{eyebrow}

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

{subtitle && (

{subtitle}

)} {verse && (
{verseRef}

"{verse}"

)}
); } Object.assign(window, { PALETTES, applyPalette, CrossMark, DiamondMark, CircleMark, GlassHeartLogo, Nav, Footer, CTA, PaletteTweaksPanel, Placeholder, PageHero, SHARED_TWEAK_DEFAULTS, BOOKING_URL, });