/* shared.jsx — Nav, Footer, palettes, ornaments, CTA, hooks * Jessica Medler · Wild Prairie Coaching * Loaded BEFORE each page's own .jsx file. */ const { useState, useEffect, useMemo, useRef } = React; /* External booking widget */ const BOOKING_URL = "https://api.leadconnectorhq.com/widget/booking/d6d2wxNruqgKR9GrKKnU"; /* ============================================================ * PALETTES — Sage Studio is default (Jessica's template choice) * ============================================================ */ 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)", }, }, 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)", }, }, 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)", }, }, }; 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 — wildflower / wheat / circle marks (prairie language) * ============================================================ */ function WheatMark({ size = 14, color = "currentColor" }) { return ( ); } function BloomMark({ size = 12, color = "currentColor" }) { return ( ); } function DiamondMark({ size = 10, color = "currentColor" }) { return ( ); } function CircleMark({ size = 10, color = "currentColor", filled = true }) { 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: "Walk 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 = () => ( Wild Prairie Coaching logo Jessica Medler wild prairie coaching ); return ( ); } /* ============================================================ * Universal CTA block (used at bottom of every page) * ============================================================ */ function CTA({ headline = "You don't have to", headlineItalic = "walk this alone.", eyebrow = "✦ Your next step · two free sessions to see if we fit", checklist, }) { const defaultList = [ "Where the lie of performance-based love is still writing the rules you live by", "What inner-healing work actually opens — and why behavior change alone has stopped working", "What walking the Wild Prairie Identity Journey looks like for the season you're in", "Whether the faith-based or non-faith path is the right starting place for you", ]; const list = checklist || defaultList; return (
{eyebrow}

{headline}{" "} {headlineItalic}

Start with two free sessions — no pressure, no pitch. We'll talk about the season you're in, the lies you've been carrying, and whether the Wild Prairie path is the right place for the next twelve weeks of your life.

Book Two Free Sessions → Send a message
On the call we'll explore
    {list.map((c, i) => (
  • 0{i + 1} {c}
    • ))}
"I won't push you. I won't perform for you. I'll walk beside you — asking questions that let you finally hear yourself, and holding the space until you do."
Psalm 139:14 — "I praise you, for I am fearfully and wonderfully made."
); } /* ============================================================ * 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, WheatMark, BloomMark, DiamondMark, CircleMark, Nav, Footer, CTA, PaletteTweaksPanel, Placeholder, PageHero, SHARED_TWEAK_DEFAULTS, BOOKING_URL, });