/* ============================================================ Wonderwild — reusable layout sections (Rosewood-style devices) Depends on ww-core.jsx + ww-chrome.jsx ============================================================ */ /* ---------- Reveal on scroll (gentle fade/drift) ---------- */ function Reveal({ children, delay = 0, y = 24, as = "div", style }) { const ref = React.useRef(null); const [shown, setShown] = React.useState(false); React.useEffect(() => { if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setShown(true); return; } const el = ref.current; if (!el) return; const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }), { threshold: 0.12 }); io.observe(el); return () => io.disconnect(); }, []); const Tag = as; return {children}; } /* ---------- Section wrapper ---------- */ function Band({ children, bg = "white", py = "var(--space-7)", pt, pb, id, style }) { const bgs = { white: "#ffffff", cream: "var(--cream-100)", alt: "var(--cream-200)", paper: "var(--cream-50)", ink: "var(--green-700)", "ink-deep": "var(--green-900)" }; const padding = (pt || pb) ? { paddingTop: pt || py, paddingBottom: pb || py } : { padding: `${py} 0` }; return
{children}
; } function Container({ children, width = "1180px", style }) { return
{children}
; } /* ---------- Section heading ---------- */ function SectionHeading({ eyebrow, title, lede, align = "left", onInk, max = "60ch", style }) { const center = align === "center"; return (
{eyebrow && {eyebrow}}

{title}

{lede &&

{lede}

}
); } /* ---------- Interior page hero ---------- */ function PageHero({ eyebrow, title, lede, image, icon = "lotus", height = "66vh", align = "center" }) { return (
{eyebrow && {eyebrow}}

{title}

{lede &&

{lede}

}
); } /* ---------- Alternating image + editorial text band ---------- */ function ImageTextBand({ eyebrow, title, body = [], image, icon = "lotus", reverse, tag, cta, bg = "white", ratio = "4/5" }) { const imgEl = (
{tag && {tag}}
); const txtEl = ( {eyebrow && {eyebrow}}

{title}

{body.map((p, i) =>

{p}

)} {cta &&
{cta}
} ); return (
{imgEl}{txtEl}
); } /* ---------- Pull quote (dark divider) ---------- */ function PullQuote({ quote, attribution, bg = "white", noIcon, py = "var(--space-9)" }) { return ( {!noIcon && }

"{quote}"

{attribution &&
{attribution}
} ); } /* ---------- Feature band (woodcut icons) ---------- */ function FeatureBand({ eyebrow = "Immersed in nature", title = "Find Your Wonder", items }) { const data = items || [ { name: "tent", label: "Bell Tents", cap: "Spacious canvas with fire pit & hanging grill." }, { name: "swim", label: "Wild Swim", cap: "Open water, no motor cruisers — just reeds & birdsong." }, { name: "paddle", label: "Paddleboard", cap: "Drift the broad at your own gentle pace." }, { name: "sauna", label: "Wood-Fired Sauna", cap: "Broadside heat to relax and recharge." }, ]; return (
{data.map((it) => (
{it.label}

{it.cap}

 ))}
); } /* ---------- Tabbed carousel (Rosewood signature) ---------- */ function TabbedCarousel({ eyebrow, heading, tabs, pt, bg = "cream" }) { const [active, setActive] = React.useState(0); const t = tabs[active]; const book = useBook(); return (
{/* tab strip */}
{tabs.map((tab, i) => ( ))}
{/* panel */}
{t.tag &&
{t.tag}
}

{t.title}

{t.body.map((p, i) =>

{p}

)}
{t.href && } {t.bookKey && }
); } /* ---------- Includes / checklist grid ---------- */ function IncludesGrid({ eyebrow, title, lede, items, columns = 2, bg = "white", pt, pb }) { return ( {(title || eyebrow) &&
}
{items.map((it, i) => ( {i % columns === 0 && i > 0 && (
)} {React.cloneElement(Icons.check, { size: 16 })}
{it.label}
{it.desc &&

{it.desc}

}
))}
); } /* ---------- Accordion (FAQ) ---------- */ function Accordion({ items, defaultOpen = -1 }) { const [open, setOpen] = React.useState(defaultOpen); return (
{items.map((it, i) => { const isOpen = open === i; return (
{(Array.isArray(it.a) ? it.a : [it.a]).map((p, j) =>

{p}

)}
); })}
); } /* ---------- Closing CTA band ---------- */ function CtaBand({ eyebrow, title, body, primary, secondary, bg = "white", icon = "lotus", noIcon }) { const onInk = bg === "ink" || bg === "ink-deep"; return ( {!noIcon && } {eyebrow && {eyebrow}}

{title}

{body &&

{body}

}
{primary}{secondary}
 ); } /* ---------- Newsletter / Follow our story ---------- */ function Newsletter() { const [done, setDone] = React.useState(false); return (
One season at a time

Follow Our Story

We're softly bringing this place to life — one tent, one path, one season at a time.

Follow along as our nature-led escape takes shape, and be the first to hear about new dates, sessions and retreats.

{done ? (
{Icons.check}

You're on the list

We'll be in touch as the site takes shape.

) : ( <>

Be the first to know

Latest dates, sessions, discounts and more.

)}
); } /* ---------- Price rows (bordered list: title · desc · meta · price · cta) ---------- */ function PriceRows({ items, note }) { return (
{items.map((s, i) => (

{s.title}

{s.desc &&

{s.desc}

} {s.meta && {s.meta}}
{s.price && {s.price}} {s.cta}
))}
{note &&

{note}

}
); } /* ---------- Price / membership cards ---------- */ function PriceCards({ items, columns = 3, note }) { return (
{items.map((t) => (
{t.feature && {t.feature}}

{t.name}

{t.price} {t.per && {t.per}}
{t.tagline &&

{t.tagline}

}
{(t.points || []).map((p) => (
{React.cloneElement(Icons.check, { size: 15 })} {p}
))}
{t.cta} {t.footnote &&

{t.footnote}

}
))}
{note &&

{note}

}
); } /* ---------- Event rows (What's On) ---------- */ function EventRows({ items }) { return (
{items.map((e, i) => (
{e.date}
{e.month}
{e.tag &&
{e.tag}
}

{e.title}

{e.text}

{e.meta && {e.meta}}
{e.cta &&
{e.cta}
} ))}
); } /* ---------- Story timeline (Our Story) ---------- */ function StoryTimeline({ items }) { return (
{items.map((it, i) => (
{it.year}

{it.title}

{(Array.isArray(it.body) ? it.body : [it.body]).map((p, j) =>

{p}

)}
))}
); } Object.assign(window, { Reveal, Band, Container, SectionHeading, PageHero, ImageTextBand, PullQuote, FeatureBand, TabbedCarousel, IncludesGrid, Accordion, CtaBand, Newsletter, PriceRows, PriceCards, EventRows, StoryTimeline });