// shell.jsx — Nav, footer, fab, common chrome for My Lovely Wedding const { useState, useEffect, useRef, useMemo } = React; // Tiny icon set — line glyphs only, no SVG illustration const Icon = { Arrow: (p) => ( ), ArrowDown: (p) => ( ), Plus: (p) => ( ), Whatsapp: (p) => ( ), Mail: (p) => ( ), Phone: (p) => ( ), Close: (p) => ( ), Menu: (p) => ( ), Heart: (p) => ( ), Check: (p) => ( ), }; // Wordmark — rendering the brand in Bodoni Moda + Pinyon Script (the brand uses Bodoni Moda + "Jules" script). // This is an original typographic treatment, NOT a copy of the raster logo. function Wordmark({ small, light }) { const color = light ? 'var(--paper)' : 'var(--ink)'; const accent = light ? 'rgba(251,248,244,.85)' : 'var(--accent-deep)'; return ( MY lovely Wedding ); } // Nav ----------------------------------------------------------- function Nav({ route, lang, onNav, onLang }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const on = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', on, { passive: true }); on(); return () => window.removeEventListener('scroll', on); }, []); const links = lang === 'ar' ? [ ['weddings', 'حفلات حقيقية'], ['styling', 'التنسيق'], ['planning', 'التخطيط'], ['flowers', 'الأزهار والقرطاسية'], ['about', 'عن جويل'], ['journal', 'المدونة'], ] : [ ['weddings', 'Real Weddings'], ['styling', 'Styling'], ['planning', 'Planning'], ['flowers', 'Flowers & Stationery'], ['about', 'About'], ['journal', 'Journal'], ]; const labels = lang === 'ar' ? { enquire: 'استفسر', en: 'EN', ar: 'AR' } : { enquire: 'Enquire', en: 'EN', ar: 'AR' }; return (
{/* Left: links */} {/* Center: wordmark */} {/* Right: more links + utilities */}
); } // Footer -------------------------------------------------------- function Footer({ lang, onNav }) { const ar = lang === 'ar'; return ( ); } function FooterCol({ title, items, onNav }) { return (
{title}
); } // Floating WhatsApp ----------------------------------------------- function WhatsAppFab({ lang }) { return ( {lang==='ar' ? 'دردشة واتساب' : 'Chat on WhatsApp'} ); } // Inline script-accent word ("love", "help", "design"…) — // Centralises sizing + baseline alignment so script words never collide // with the line above/below. Use inside h-display headings. function S({ children, color, size }) { const style = {}; if (color) style.color = color; if (size) style.fontSize = size; return {children}; } // Section heading helper ----------------------------------------- function SectionHead({ eyebrow, title, kicker, align='left', children, accent }) { return (
{eyebrow &&
{eyebrow}
}

{accent && <>{accent}{' '}} {title}

{kicker &&

{kicker}

} {children}
); } // Cinematic wedding card ------------------------------------------ function WeddingCard({ w, onOpen, large }) { return ( {e.preventDefault(); onOpen(w.id);}} style={{ display:'block', color:'inherit' }}>
{w.title}
Photo · {w.photographer}

{w.title}

{w.venue} · {w.season}
{w.style}
); } Object.assign(window, { Icon, Wordmark, Nav, Footer, FooterCol, WhatsAppFab, SectionHead, WeddingCard, S, });