// Variation C — "Cinematic" // Full-bleed photography, sticky/scroll-driven hero with date reveal, // horizontal-feeling event timeline, warm and quiet. const { useState: uC, useEffect: eC, useRef: rC } = React; function useScrollC() { const [y, setY] = uC(0); eC(() => { const fn = () => setY(window.scrollY); window.addEventListener("scroll", fn, { passive: true }); return () => window.removeEventListener("scroll", fn); }, []); return y; } function useRevealC() { const ref = rC(null); const [s, setS] = uC(false); eC(() => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); if (r.top < window.innerHeight && r.bottom > 0) { setS(true); return; } const io = new IntersectionObserver( ([e]) => e.isIntersecting && (setS(true), io.disconnect()), { threshold: 0.15, rootMargin: "0px 0px -10% 0px" } ); io.observe(ref.current); return () => io.disconnect(); }, []); return [ref, s]; } function RevealC({ children, delay = 0, ...p }) { const [ref, s] = useRevealC(); return (
{children}
); } function CountdownC({ lang }) { const [t, setT] = uC(() => TJ_countdown(TJ_DATE, lang)); eC(() => { const id = setInterval(() => setT(TJ_countdown(TJ_DATE, lang)), 1000); return () => clearInterval(id); }, [lang]); const cell = (v, l, last) => (
{TJ_pad(v)} {l}
); return (
{cell(t.d, t.L.d)} {cell(t.h, t.L.h)} {cell(t.m, t.L.m)} {cell(t.s, t.L.s, true)}
); } function VariationC({ lang, accent }) { const c = TJ_CONTENT[lang]; const y = useScrollC(); const style = { "--rose": accent }; // Parallax hero const heroScale = 1 + Math.min(0.08, y * 0.00012); const heroOpacity = Math.max(0, 1 - y / 900); const titleY = Math.min(60, y * 0.15); return (
{/* NAV overlay */} {/* HERO — full-bleed photo, title layered */}
Tania y Juan
{c.hero.kicker}

Tania{" "} &{" "} Juan

{c.hero.date}
{c.hero.city}
{/* Bottom countdown strip */}
{c.hero.countdown}
↓ Scroll
{/* STORY — cream panel on dark */}
— {c.story.eyebrow} —

{c.story.title}

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

{p}

))}
{/* Full-bleed photo break */}
{lang === "es" ? "“Nueve años sumando personas que se volvieron casa.”" : "“Nine years gathering people who became home.”"}
{/* EVENTS — vertical cinematic list */}
— {c.events.eyebrow} —

{c.events.title}

{c.events.list.map((ev, i) => )}
{/* STAY + GIFTS — two tone bands */}
{[ { id: "stay", data: c.stay, href: TJ_LINKS.stay, bg: "var(--cream)", fg: "var(--ink)", accent: "var(--rose)" }, { id: "gifts", data: c.gifts, href: TJ_LINKS.gifts, bg: "var(--rose)", fg: "var(--cream)", accent: "var(--cream)" }, ].map((b) => (
— {b.data.eyebrow}

{b.data.title}

{b.data.body}

 {b.data.cta}  →
))}
{/* FAQ */}
— {c.faq.eyebrow}

{c.faq.title}

 {c.faq.items.map((it, i) => )}
{/* FOOTER */}
); } function EventBlockC({ ev, idx }) { const [ref, shown] = useRevealC(); return (
{ev.day}
{ev.date}
{ev.time}

{ev.name}

{ev.desc}

{ev.place &&

📍 {ev.place}

}
Dress code

{ev.dress}

{ev.extras?.map((x, j) => (
{x.h}. {x.p}
))} {ev.moodboard && ( {ev.moodboard} ↗ )} {ev.note && (

{ev.note}

)}
); } function FaqRowC({ q, a, i }) { const [open, setOpen] = uC(i === 0); return (

{a}

); } window.VariationC = VariationC;