/* global React */ const { useState, useEffect, useRef, useMemo } = React; // ───────────────────────────────────────────────────────────── // Primitives // ───────────────────────────────────────────────────────────── const Eyebrow = ({ children, color, style }) => ( {children} ); const Slash = ({ color, size }) => ( / ); const Hairline = ({ color, style }) => (
); const Button = ({ children, variant = 'primary', href = '#', onClick, style, type }) => { const cls = variant === 'secondary' ? 'cs-btn cs-btn--secondary' : variant === 'ghost' ? 'cs-btn cs-btn--ghost' : variant === 'on-ink' ? 'cs-btn' : 'cs-btn'; const onInk = variant === 'on-ink' ? { background: 'var(--paper)', color: 'var(--ink)', border: '1px solid var(--paper)' } : {}; if (type) { return ( ); } return ( {children} {variant === 'ghost' ? null : →} ); }; const SectionHeader = ({ index, count, eyebrow, action }) => (
{(index || count) && ( {index ? String(index).padStart(2, '0') : ''}{count ? ` / ${String(count).padStart(2, '0')}` : ''} )} {eyebrow}
{action}
); // ───────────────────────────────────────────────────────────── // Editorial Portrait — real photograph, treated for monochrome // CentreStage aesthetic. Drop-in replacement API for Silhouette. // ───────────────────────────────────────────────────────────── const Portrait = ({ src, ratio = '3 / 4', label, code, hoverScale = true, treatment = 'mono', overlay = true, style }) => { const [hover, setHover] = useState(false); const filters = { mono: 'grayscale(100%) contrast(1.06) brightness(0.94)', warm: 'grayscale(70%) sepia(0.18) contrast(1.05) brightness(0.93) saturate(0.9)', cool: 'grayscale(85%) contrast(1.08) brightness(0.9)', color: 'contrast(1.06) brightness(0.96) saturate(0.85)', deep: 'grayscale(100%) contrast(1.15) brightness(0.78)', }; return (
setHover(true)} onMouseLeave={() => setHover(false)} > {label {overlay && (
)} {label && (
{label}
)} {code && (
{code}
)}
); }; // ───────────────────────────────────────────────────────────── // Editorial Silhouette — abstract figure, no faces // ───────────────────────────────────────────────────────────── const SILHOUETTE_VARIANTS = { // Tight portrait, head + shoulders portrait: (color) => ( {/* Figure */} ), // Wider, environmental — figure off-center environmental: (color) => ( {/* Horizon line */} {/* Standing figure */} ), // Three-quarter, head tilted threequarter: (color) => ( {/* Tilted head + shoulder */} ), // Group — two overlapping figures group: (color) => ( ), // Wide, full-bleed pose full: (color) => ( ), }; const Silhouette = ({ variant = 'portrait', tone = 'warm', label, code, ratio, style, hoverScale = true }) => { const palettes = { warm: { lite: '#A8987F', dark: '#3A2E25' }, // sepia cool: { lite: '#7A8693', dark: '#252A33' }, // slate paper: { lite: '#DAD3C2', dark: '#4A4438' }, // bone on dark deep: { lite: '#3A332B', dark: '#0E0E0C' }, // very dark ink spotlight: { lite: '#F2D65A', dark: '#3A2E25' }, // accent warm }; const c = palettes[tone] || palettes.warm; const render = SILHOUETTE_VARIANTS[variant] || SILHOUETTE_VARIANTS.portrait; const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} >
{render(c)}
{/* Soft grain overlay */}
{label && (
{label}
)} {code && (
{code}
)}
); }; // ───────────────────────────────────────────────────────────── // Navigation // ───────────────────────────────────────────────────────────── const NAV_ITEMS = [ { id: 'home', label: 'Home' }, { id: 'about', label: 'Who we are' }, { id: 'youth', label: 'Youth (4–16)' }, { id: 'pro', label: 'Professional (17+)' }, { id: 'faq', label: 'FAQ' }, { id: 'contact', label: 'Contact' }, ]; const Nav = ({ route, navigate }) => { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); // Close drawer when route changes useEffect(() => { setOpen(false); }, [route]); // Lock scroll when drawer open useEffect(() => { if (open) { const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; } }, [open]); return (
{ e.preventDefault(); navigate('home'); }} className="cs-logo-link" style={{ display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none' }} aria-label="CentreStage Agency home"> CentreStage Geelong National {/* Hamburger — mobile only via CSS */}
{/* Mobile inline expansion — expands below the nav row when open */}
); }; // ───────────────────────────────────────────────────────────── // Footer // ───────────────────────────────────────────────────────────── const Footer = ({ navigate }) => { const a = window.CS_DATA.agency; return ( ); }; // ───────────────────────────────────────────────────────────── // Form primitives // ───────────────────────────────────────────────────────────── const FieldLabel = ({ children, required, hint }) => (
{children}{required ? * : null} {hint && ( {hint} )}
); const TextField = ({ label, name, type = 'text', placeholder, required, hint, value, onChange, autoComplete }) => (
{label} onChange && onChange(e.target.value)} autoComplete={autoComplete} style={{ padding: '0 0 10px 0', height: 44, fontSize: 17, borderBottom: '1px solid var(--ink)', }} />
); const SelectField = ({ label, name, options, required, hint, value, onChange }) => (
{label}
); const TextArea = ({ label, name, placeholder, required, hint, rows = 4, value, onChange }) => (
{label}