import { useEffect, useRef } from 'react'; /** * "Lumière" — a premium, photography-forward wedding-site theme. * * Unlike the palette-only themes in w/show.tsx, this is a self-contained * *layout*: warm ivory paper, a high-contrast romantic serif (Cormorant * Garamond) against spaced geometric labels (Jost), champagne-gold hairlines * and ornaments, and gentle staggered reveals. It consumes the same section * data model as every other theme, so couples can switch to it with one click. */ interface Props { wedding: { partner_a_name: string; partner_b_name: string; }; content: (id: string) => Record; visible: (id: string) => boolean; timeline?: { id: string; title: string; start_time: string; location?: string }[]; coupleNames: string; weddingDate: string | null; venue: string; t: (key: string, replacements?: Record) => string; } // Monogram initials, e.g. "Amelia & Julian" → "A · J" function monogram(a: string, b: string): string { const i = (s: string) => (s.trim()[0] ?? '').toUpperCase(); return `${i(a)} · ${i(b)}`; } export default function LumiereTheme({ wedding, content, visible, timeline, coupleNames, weddingDate, venue, t }: Props) { const rootRef = useRef(null); // Reveal sections as they scroll into view (load-in stagger handles the hero). useEffect(() => { const els = rootRef.current?.querySelectorAll('[data-reveal]'); if (!els || !els.length) return; const io = new IntersectionObserver( (entries) => entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } }), { rootMargin: '0px 0px -12% 0px', threshold: 0.12 }, ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); const hero = content('hero'); const heroImg = hero.backgroundUrl?.trim(); const story = content('story'); const details = content('details'); const hasCeremony = !!details.ceremonyTime; const hasReception = !!details.receptionTime; const rsvp = content('rsvp'); const registry = content('registry'); const faq = content('faq'); const partnerA = wedding.partner_a_name; const partnerB = wedding.partner_b_name; return (
{/* React 19 hoists these to and dedupes — fonts load (non-blocking) only when this theme actually renders, with preconnect for speed. */} {/* ── Hero ─────────────────────────────────────────────── */} {visible('hero') && (
{heroImg &&
)} {/* ── Story ────────────────────────────────────────────── */} {visible('story') && story.body && (

{t('wsite.chapter_1')}

{story.heading || t('wsite.our_story')}

{story.body}

)} {/* ── Details ──────────────────────────────────────────── */} {visible('details') && (hasCeremony || hasReception) && (

{t('wsite.chapter_2')}

{details.heading || t('wsite.event_details')}

{hasCeremony && (

{t('wsite.ceremony')}

{details.ceremonyTime}

{details.ceremonyVenue &&

{details.ceremonyVenue}

}
)} {hasCeremony && hasReception &&
)} {/* ── Timeline ─────────────────────────────────────────── */} {visible('timeline') && timeline && timeline.length > 0 && (

{t('wsite.the_day')}

{content('timeline').heading?.trim() || t('timeline.title')}

    {timeline.map((ev) => (
  1. {ev.start_time}
    2. ))}
)} {/* ── RSVP ─────────────────────────────────────────────── */} {visible('rsvp') && rsvp.body?.trim() && (

{t('wsite.reply')}

{rsvp.heading?.trim() || t('rsvp.title')}

{rsvp.body}

)} {/* ── Registry ─────────────────────────────────────────── */} {visible('registry') && registry.body?.trim() && (

{t('wsite.with_gratitude')}

{registry.heading?.trim() || t('wsite.registry')}

{registry.body}

)} {/* ── FAQ ──────────────────────────────────────────────── */} {visible('faq') && faq.body?.trim() && (

{t('wsite.good_to_know')}

{faq.heading?.trim() || t('wsite.faq')}

{faq.body}

)} {/* ── Footer ───────────────────────────────────────────── */}
{monogram(partnerA, partnerB)}

{coupleNames}

{weddingDate &&

{weddingDate}

}

{t('common.powered_by')} WedFlow

); } /** Delicate centered gold ornament that opens each section. */ function Ornament() { return (