// components.jsx // Shared chrome: Nav, Footer, Marquee, abstract-art primitives, anonymized speaker card. const NAV_LINKS = [ { href: '#/', label: 'Index', n: '00' }, { href: '#/about', label: 'About', n: '01' }, { href: '#/program', label: 'Program', n: '02' }, { href: '#/speakers', label: 'Speakers', n: '03' }, { href: '#/riyadh', label: 'Riyadh', n: '04' }, { href: '#/partner', label: 'Partner', n: '05' }, { href: '#/resources', label: 'Resources', n: '06' }, { href: '#/faq', label: 'FAQ', n: '07' }, { href: '#/contact', label: 'Contact', n: '08' }, ]; // ───────── Top status bar (live ticker, dates, coords) ───────── function StatusBar() { const [now, setNow] = React.useState(new Date()); React.useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []); // Target date: 19 Mar 2027 at 09:00 Riyadh (UTC+3) const target = new Date(Date.UTC(2027, 2, 19, 6, 0, 0)); const diff = Math.max(0, target.getTime() - now.getTime()); const d = Math.floor(diff / 86400000); const h = Math.floor((diff % 86400000) / 3600000); const m = Math.floor((diff % 3600000) / 60000); const s = Math.floor((diff % 60000) / 1000); const pad = (n) => String(n).padStart(2, '0'); const stamp = now.toISOString().slice(11, 19) + ' UTC'; return (
 Live 24°44′N · 46°43′E Riyadh, KSA
T-minus {pad(d)}d : {pad(h)}h : {pad(m)}m : {pad(s)}s {stamp}
Mar 19 — Mar 22 / 2027
); } // ───────── Logo ───────── // Mark is the brand "FLS" sparkle glyph (img/futureLabsSummit_logo_alone.svg), // inlined so it picks up theme color via currentColor instead of being a flat asset. function Logo({ size = 32 }) { const w = size * (42.5 / 36) * 0.9; // native aspect, narrowed 10% to read less stretched return ( Future Labs / Summit ); } // ───────── Top nav ───────── function Nav({ path }) { const [open, setOpen] = React.useState(false); return ( ); } // ───────── Footer ───────── function Footer() { return ( ); } function NewsletterStrip() { const [email, setEmail] = React.useState(''); const [sent, setSent] = React.useState(false); return (
// Field Dispatch
Three emails a month. No filler.
Mostly: who's announcing what, and when.
{ e.preventDefault(); if (email.includes('@')) setSent(true); }} style={{ display: 'flex', alignItems: 'center', padding: '0 8px 0 28px', gap: 12 }}> {sent ? (
✓ Logged. See you in your inbox.
) : ( <> setEmail(e.target.value)} placeholder="your.name@institute.org" type="email" style={{ flex: 1, height: 56, background: 'transparent', border: 0, color: 'var(--foot-fg)', fontFamily: 'var(--font-mono)', fontSize: 14, letterSpacing: '0.02em', outline: 'none', }} /> )}
); } // ───────── Marquee ───────── function Marquee({ items, signal = false, size = 18, id }) { const doubled = [...items, ...items]; return (
{doubled.map((t, i) => ( {t} ◆ ))}
); } // ───────── Abstract art primitives ───────── // These replace photos with intentional geometric placeholders. function DotField({ rows = 18, cols = 24, accentChance = 0.04, height = 320 }) { const cells = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const accent = Math.random() < accentChance; const size = accent ? 6 : 2; cells.push( , ); } } return ( {cells} ); } function Orbits({ height = 480 }) { return ( ); } function StripePlaceholder({ label, height = 280, dark = false, ratio }) { return (
{label}
); } // Wave-form / topo lines function TopoLines({ height = 240 }) { const lines = []; for (let i = 0; i < 22; i++) { const y = (i / 22) * 100; const amp = 3 + (i % 4); const path = Array.from({ length: 40 }, (_, x) => { const px = (x / 40) * 100; const py = y + Math.sin((x + i) * 0.4) * amp * 0.4; return `${x === 0 ? 'M' : 'L'} ${px} ${py}`; }).join(' '); lines.push(); } return ( {lines} ); } // ───────── Anonymized speaker card ───────── // Variants: 'initial', 'glyph', 'silhouette', 'manifest' const SPEAKERS = [ { id: 'A01', initials: 'AR', role: 'CEO, AI-native drug discovery', sector: 'Pharma · AI', region: 'US' }, { id: 'A02', initials: 'KM', role: 'Founder, longevity therapeutics', sector: 'Longevity', region: 'EU' }, { id: 'A03', initials: 'JN', role: 'Director, gene-edit foundry', sector: 'Bio', region: 'US' }, { id: 'A04', initials: 'DR', role: 'Chief Scientist, lab robotics', sector: 'Automation', region: 'KSA' }, { id: 'A05', initials: 'SY', role: 'Co-founder, DeSci protocol', sector: 'DeSci', region: 'CH' }, { id: 'A06', initials: 'BT', role: 'Lead, autonomous surgery', sector: 'Robotics', region: 'JP' }, { id: 'A07', initials: 'MO', role: 'GP, deep-tech fund', sector: 'Capital', region: 'UK' }, { id: 'A08', initials: 'CL', role: 'Principal, foundation-model bio', sector: 'AI · Bio', region: 'US' }, { id: 'A09', initials: 'EH', role: 'Founder, AI-diagnostic clinic', sector: 'Pharma · AI', region: 'AE' }, { id: 'A10', initials: 'TF', role: 'CSO, protein design platform', sector: 'Bio · AI', region: 'US' }, { id: 'A11', initials: 'NW', role: 'Director, public-health AI', sector: 'Policy', region: 'KE' }, { id: 'A12', initials: 'IS', role: 'Founder, cloud-lab infrastructure', sector: 'Automation', region: 'DE' }, { id: 'A13', initials: 'PG', role: 'Director, biosecurity research', sector: 'Policy', region: 'US' }, { id: 'A14', initials: 'RV', role: 'CEO, synthetic biology foundry', sector: 'Bio', region: 'IN' }, { id: 'A15', initials: 'OB', role: 'Principal investigator, ML4Sci', sector: 'AI · Bio', region: 'IL' }, { id: 'A16', initials: 'XT', role: 'Founder, AI radiology', sector: 'Pharma · AI', region: 'SG' }, { id: 'A17', initials: 'AN', role: 'Director, autonomous diagnostics', sector: 'Automation', region: 'SA' }, { id: 'A18', initials: 'YL', role: 'Lead, agentic research systems', sector: 'AI', region: 'CA' }, { id: 'A19', initials: 'ZK', role: 'Founder, citizen-science network', sector: 'DeSci', region: 'BR' }, { id: 'A20', initials: 'HD', role: 'CSO, cell therapy at scale', sector: 'Bio · Pharma', region: 'CH' }, { id: 'A21', initials: 'GT', role: 'Director, AR for surgery', sector: 'AR · Robotics', region: 'US' }, { id: 'A22', initials: 'PE', role: 'Founder, biomarker discovery', sector: 'Pharma', region: 'UK' }, { id: 'A23', initials: 'MV', role: 'Lead, foundation model alignment', sector: 'AI', region: 'US' }, { id: 'A24', initials: 'QR', role: 'Director, AI-doctor pilot', sector: 'Pharma · AI', region: 'SA' }, { id: 'A25', initials: 'LF', role: 'Founder, decentralized clinical trials', sector: 'DeSci', region: 'US' }, { id: 'A26', initials: 'SD', role: 'Lead, neuroprosthetics platform', sector: 'BCI', region: 'US' }, { id: 'A27', initials: 'BO', role: 'CSO, microbiome therapeutics', sector: 'Bio', region: 'NL' }, { id: 'A28', initials: 'WC', role: 'Co-founder, lab-on-chip platform', sector: 'Automation', region: 'CN' }, { id: 'A29', initials: 'HA', role: 'Director, longevity clinical research', sector: 'Longevity', region: 'AE' }, { id: 'A30', initials: 'RP', role: 'Director, public-good biotech', sector: 'Policy', region: 'ZA' }, ]; function SpeakerCard({ s, variant = 'initial' }) { const common = { border: '1px solid var(--rule)', background: 'var(--paper)', display: 'flex', flexDirection: 'column', color: 'var(--ink)', minHeight: 280, position: 'relative', overflow: 'hidden', }; if (variant === 'glyph') { return (
{[0, 1, 2, 3, 4, 5].map((i) => ( ))} {s.initials}
); } if (variant === 'silhouette') { return (
); } if (variant === 'manifest') { return (
// SPEAKER {s.id}
{s.initials}
{s.role}
{s.sector} {s.region}
); } // 'initial' — default return (
{s.initials}
{s.id}
); } function CardMeta({ s }) { return (
{s.role}
{s.sector} {s.region}
); } // ───────── Section helpers ───────── function SectionHead({ index, eyebrow, title, lede }) { return (
§ {index}
{eyebrow}

{title}

{lede &&

{lede}

}
); } Object.assign(window, { StatusBar, Nav, Footer, Logo, Marquee, SectionHead, NewsletterStrip, DotField, Orbits, StripePlaceholder, TopoLines, SpeakerCard, SPEAKERS, NAV_LINKS, });