// SitePages.jsx — page sections (Home / Services / Portfolio / About / Journal / Contact) // All sections use shared atoms from SiteShared.jsx and pull copy from window.i18nContent[lang] const Section = ({ id, label, children, bleed, dark }) => (
{children}
); const Eyebrow = ({ children }) => (
{children}
); // ─── HOME ───────────────────────────────────────────────────────────────────── const HomeHero = ({ t, accent, motion, theme, navigate }) => { const [mouse, setMouse] = React.useState({ x: 0.5, y: 0.5 }); React.useEffect(() => { if (motion === 'off') return; const h = (e) => setMouse({ x: e.clientX / window.innerWidth, y: e.clientY / window.innerHeight }); window.addEventListener('mousemove', h); return () => window.removeEventListener('mousemove', h); }, [motion]); const txtColor = theme === 'light' ? '#0A0A0F' : 'white'; return (
{/* photo backdrop */}
{/* legibility scrim over photo */}
{/* spotlight bg */}
{/* grid texture */}
{t.hero.eyebrow}

{t.hero.title1}
{t.hero.title2}

{t.hero.lead}

navigate('contact')}>{t.hero.cta1} navigate('portfolio')}>{t.hero.cta2}
{t.hero.pills.map((p, i) => ( {p} ))}
); }; const StatsStrip = ({ t, theme }) => (
{t.stats.map((s, i) => (
{s.num}
{s.label}
{s.sub}
))}
); const Capabilities = ({ t, theme }) => (
{t.capabilities.eyebrow}

{t.capabilities.title}

{t.capabilities.sub}

); // ─── SERVICES ───────────────────────────────────────────────────────────────── const Services = ({ t, theme }) => (
{t.services.eyebrow}

{t.services.title1} {t.services.title2}

{t.services.list.map((s, i) => (
{s.featured &&
}

{s.title}

{s.desc}

{s.specs}
))}
); // ─── PORTFOLIO ──────────────────────────────────────────────────────────────── const Portfolio = ({ t, theme, treatment }) => { const [filter, setFilter] = React.useState(t.portfolio.filters[0]); const cases = t.portfolio.cases.filter(c => filter === t.portfolio.filters[0] || c.tag === filter); return (
{t.portfolio.eyebrow}

{t.portfolio.title}

{t.portfolio.filters.map(f => ( ))}
{treatment === 'grid' && } {treatment === 'mosaic' && } {treatment === 'scroll' && } {treatment === 'fullbleed' && }
); }; const CaseCard = ({ c, idx, theme, height = 280 }) => ( { const ph = e.currentTarget.querySelector('.ph'); if (ph) ph.style.transform = 'scale(1.04)'; }} onMouseLeave={e => { const ph = e.currentTarget.querySelector('.ph'); if (ph) ph.style.transform = 'none'; }}>

{c.title}

{c.meta} · {c.role}
 ); const PortfolioGrid = ({ cases, theme }) => (
{cases.map((c, i) => )}
); const PortfolioMosaic = ({ cases, theme }) => (
{cases.map((c, i) => { // varying span pattern const span = [[7,360],[5,360],[5,300],[7,300],[6,320],[6,320],[8,340],[4,340]][i % 8]; return
; })}
); const PortfolioScroll = ({ cases, theme }) => (
{cases.map((c, i) => (
))}
); const PortfolioFullbleed = ({ cases, theme }) => (
{cases.map((c, i) => (
{c.tag} · {c.meta}

{c.title}

{c.role}
))}
); // ─── ABOUT ──────────────────────────────────────────────────────────────────── const About = ({ t, theme }) => (
{t.about.eyebrow}

{t.about.title1} {t.about.title2}

{t.about.body}

{t.about.principles.map((p, i) => (
{p.t}
{p.d}
))}
{t.about.team.map((m, i) => (
{m.name}
{m.role}
))}
); // ─── JOURNAL ────────────────────────────────────────────────────────────────── const Journal = ({ t, theme }) => (
{t.journal.eyebrow}

{t.journal.title}

{t.journal.sub}

{t.journal.posts.map((p, i) => ( { e.currentTarget.style.background = theme==='light' ? 'rgba(0,0,0,0.02)' : 'rgba(255,255,255,0.02)'; const a = e.currentTarget.querySelector('.arrow'); if(a){a.style.transform='translateX(6px)'; a.style.color='var(--ssl-accent)';} }} onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; const a = e.currentTarget.querySelector('.arrow'); if(a){a.style.transform='none'; a.style.color = theme==='light'?'rgba(10,10,15,0.4)':'rgba(255,255,255,0.4)';} }}>
{p.tag}

{p.title}

{p.date} · {p.read}
 ))}
); // ─── CONTACT ────────────────────────────────────────────────────────────────── const LEAD_INTAKE_URL = 'https://leadintake-ose4knk64a-uc.a.run.app'; const Contact = ({ t, theme, locale }) => { const [status, setStatus] = React.useState('idle'); // 'idle' | 'sending' | 'sent' | 'error' const [errorMsg, setErrorMsg] = React.useState(''); const handleSubmit = async (e) => { e.preventDefault(); if (status === 'sending') return; setStatus('sending'); setErrorMsg(''); const fd = new FormData(e.currentTarget); const payload = { name: fd.get('name') || '', email: fd.get('email') || '', phone: fd.get('phone') || '', event: fd.get('event') || '', date: fd.get('date') || '', kind: fd.get('kind') || '', notes: fd.get('notes') || '', website: fd.get('website') || '', // honeypot locale: locale || 'en', }; try { const resp = await fetch(LEAD_INTAKE_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), }); const data = await resp.json().catch(() => ({})); if (resp.ok && data.ok) { setStatus('sent'); if (window.gtag) { window.gtag('event', 'generate_lead', { value: 1, currency: 'USD' }); } } else { setStatus('error'); setErrorMsg(data.error || (t.contact.errorBody || 'Something went wrong')); } } catch (err) { setStatus('error'); setErrorMsg(t.contact.errorBody || 'Network error. Please try again.'); } }; return (
{t.contact.eyebrow}

{t.contact.title1} {t.contact.title2}

{t.contact.lead}

{t.contact.direct.map((d, i) => (
{d.lbl} {d.val}
))}
{status !== 'sent' ? (
{/* Honeypot — hidden from humans, bots tend to fill all fields */} {status === 'error' && (
{errorMsg}
)}
{status === 'sending' ? (t.contact.labels.sending || 'Sending…') : t.contact.labels.send}
) : (

{t.contact.sent.title}

{t.contact.sent.body}

)}
); }; const FormField = ({ name, label, placeholder, type = 'text', multiline, required, theme }) => (