// sectionsA.jsx, Overview, Journey, Brand & Toolbar (function () { const { useState } = React; const { SectionShell, LogoS } = window.UI; // Live deployed game URL (embedded in the hero + "Open the game" button) const GAME_LIVE_URL = 'https://falling-sand-game-red.vercel.app/'; window.GAME_LIVE_URL = GAME_LIVE_URL; // ---------- OVERVIEW (hero + live sim) ---------- function Overview({ dark }) { const T = window.SAND_T; // Seed a little living scene: a stone basin holding water, sand raining in. const seed = ({ set, cols, rows }) => { const floor = rows - 1, wallTop = rows - 14, left = Math.floor(cols * 0.28), right = Math.floor(cols * 0.72); for (let x = left; x <= right; x++) { set(x, floor, T.STONE); set(x, floor - 1, T.STONE); } for (let y = wallTop; y <= floor; y++) { set(left, y, T.STONE); set(right, y, T.STONE); } for (let y = floor - 2; y >= wallTop + 5; y--) for (let x = left + 1; x < right; x++) if (Math.random() < 0.96) set(x, y, T.WATER); for (let i = 0; i < 90; i++) { const x = left + 2 + Math.floor(Math.random() * (right - left - 4)); set(x, Math.floor(Math.random() * 6), T.SAND, Math.floor(Math.random() * 3)); } }; return React.createElement('div', null, React.createElement('section', { id: 'overview', style: { padding: '8px 0 0', scrollMarginTop: 24 } }, React.createElement('div', { className: 'chip', style: { marginBottom: 22 } }, React.createElement(LogoS, { size: 18, color: dark ? '#B9B6FF' : '#333089' }), React.createElement('a', { href: 'https://sidfolio.framer.website/', target: '_blank', rel: 'noopener', style: { color: 'inherit', textDecoration: 'underline', textUnderlineOffset: 2, textDecorationColor: 'var(--fg-3)' } }, 'Sidfolio'), React.createElement('span', { style: { color: 'var(--fg-3)' } }, 'Sand simulation process website') ), React.createElement('h1', { style: { fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 'clamp(38px,6.4vw,76px)', lineHeight: 1.0, letterSpacing: '-0.03em', margin: 0, maxWidth: 980 } }, 'A grain of sand, ', React.createElement('em', { style: { fontStyle: 'italic', color: 'var(--accent)' } }, 'taken apart.') ), React.createElement('p', { style: { fontSize: 'clamp(17px,2vw,21px)', lineHeight: 1.6, color: 'var(--fg-2)', maxWidth: 'none', margin: '22px 0 0' } }, 'Sand Simulation is a tiny world of falling powder, spreading water, climbing fire and growing palms. This is the workshop behind it, every button, sprite, colour and rule of physics, pulled out and laid on the bench.'), React.createElement('p', { style: { fontFamily: 'var(--font-pixel)', fontSize: 26, color: 'var(--fg-3)', margin: '20px 0 0', letterSpacing: '0.04em' } }, 'Ponder · prototype · present'), // Live game embed — the real deployed game, playable right here React.createElement('div', { style: { marginTop: 40 } }, React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8, marginBottom: 12 } }, React.createElement('span', { className: 'overline' }, 'Play the live game, right here'), React.createElement('a', { href: GAME_LIVE_URL, target: '_blank', rel: 'noopener', style: { fontSize: 13, color: 'var(--accent)', textDecoration: 'none', fontWeight: 600 } }, 'Open in full screen ↗') ), React.createElement('div', { style: { borderRadius: 14, overflow: 'hidden', border: '1px solid var(--border)', boxShadow: 'var(--shadow-md)', background: dark ? '#1E1E1E' : '#fff' } }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '11px 14px', borderBottom: '1px solid var(--border)', background: dark ? '#15143A' : 'var(--bg-subtle)' } }, React.createElement('div', { style: { display: 'flex', gap: 7 } }, ['#FF5F57', '#FEBC2E', '#28C840'].map(c => React.createElement('span', { key: c, style: { width: 11, height: 11, borderRadius: 999, background: c } }))), React.createElement('div', { style: { flex: 1, display: 'flex', justifyContent: 'center' } }, React.createElement('div', { style: { display: 'inline-flex', alignItems: 'center', gap: 7, maxWidth: 360, width: '100%', justifyContent: 'center', padding: '5px 14px', borderRadius: 999, background: dark ? '#0C0B26' : '#fff', border: '1px solid var(--border)', fontSize: 12, color: 'var(--fg-2)', fontFamily: 'var(--font-mono)' } }, React.createElement('span', { style: { width: 7, height: 7, borderRadius: 999, background: '#28C840' } }), 'falling-sand-game-red.vercel.app')) ), React.createElement('iframe', { src: GAME_LIVE_URL, title: 'Sand Simulation — live game', style: { width: '100%', height: 520, border: 0, display: 'block', background: dark ? '#1E1E1E' : '#fff' }, loading: 'lazy', allow: 'autoplay; fullscreen' }) ), React.createElement('p', { style: { fontSize: 12.5, color: 'var(--fg-3)', margin: '8px 0 0' } }, 'The real deployed build, embedded live. Everything below shows how the pieces inside it were made.') ), // quick stat strip React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(150px,1fr))', gap: 1, marginTop: 40, background: 'var(--border)', border: '1px solid var(--border)', borderRadius: 'var(--radius-md)', overflow: 'hidden' } }, [['10', 'materials & tools'], ['3', 'states per button'], ['6', 'pixel sizes'], ['4', 'build versions'], ['1', 'living world']].map(([n, l], i) => React.createElement('div', { key: i, style: { background: 'var(--bg-panel)', padding: '22px 20px' } }, React.createElement('div', { style: { fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 38, lineHeight: 1, letterSpacing: '-0.02em', color: 'var(--accent-2)' } }, n), React.createElement('div', { style: { fontSize: 13, color: 'var(--fg-2)', marginTop: 6 } }, l) ) ) ) ) ); } // ---------- JOURNEY (version timeline) ---------- function Journey({ dark }) { const { VERSIONS } = window.CONTENT; return React.createElement(SectionShell, { id: 'journey', num: '02', label: 'The journey', title: 'Four versions to a world', lead: 'The simulation grew in deliberate layers, first the physics had to feel right, then the materials, then life and light, then a character to inhabit it.' }, React.createElement('div', { className: 'timeline' }, VERSIONS.map(v => React.createElement('div', { key: v.n, className: 'tl-row panel', style: { overflow: 'hidden' } }, React.createElement('div', { className: 'tl-media' }, v.hasVideo ? React.createElement('video', { src: v.file, autoPlay: true, loop: true, muted: true, playsInline: true, style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block', background: '#111' } }) : React.createElement('div', { className: 'tl-placeholder' }, React.createElement('div', { className: 'pixel', style: { fontSize: 64, lineHeight: 1, opacity: 0.85 } }, 'v' + v.n), React.createElement('div', { style: { fontSize: 12, color: 'var(--fg-3)', marginTop: 8, maxWidth: 220, textAlign: 'center' } }, 'Clip too large to embed, drop ' + v.file.split('/').pop() + ' into assets/videos/ to play it here.') ) ), React.createElement('div', { className: 'tl-body' }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } }, React.createElement('span', { className: 'tl-num pixel' }, String(v.n).padStart(2, '0')), React.createElement('h3', { style: { fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.01em' } }, v.title) ), React.createElement('p', { style: { fontSize: 15.5, lineHeight: 1.6, color: 'var(--fg-2)', margin: '12px 0 16px' } }, v.blurb), React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 8 } }, v.tags.map(t => React.createElement('span', { key: t, className: 'chip' }, t))) ) )) ) ); } // ---------- BRAND & TOOLBAR ---------- function ToolbarReplica({ dark }) { const sfx = dark ? 'dark-' : ''; const tools = ['sand', 'water', 'fire', 'stone', 'sun', 'soil', 'seed', 'human']; const sizeLabels = ['XXS', 'XS', 'S', 'L', 'XL', 'XXL']; const [active, setActive] = useState('sand'); const [activeSize, setActiveSize] = useState(2); const icon = (t, sel) => `assets/icons/${t}-${sfx}${sel ? 'selected' : 'default'}.svg`; return React.createElement('div', { style: { background: dark ? '#1E1E1E' : '#fff', border: `1px solid ${dark ? '#333' : 'var(--border)'}`, borderRadius: 14, padding: '10px 20px', boxShadow: 'var(--shadow-sm)', overflowX: 'auto' } }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, minWidth: 760 } }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 24 } }, React.createElement(LogoS, { size: 34, color: dark ? '#aaa' : '#373737' }), React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 4 } }, tools.map(t => React.createElement('button', { key: t, onClick: () => setActive(t), style: { background: 'none', border: 'none', padding: 0, cursor: 'pointer', lineHeight: 0 } }, React.createElement('img', { src: icon(t, active === t), width: 56, height: 56, alt: t, draggable: false, style: { display: 'block' } }))) ) ), React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 14 } }, React.createElement('img', { src: icon('wipe', false), width: 56, height: 56, alt: 'wipe', draggable: false }), React.createElement('img', { src: `assets/icons/music-${sfx}default.svg`, width: 56, height: 56, alt: 'music', draggable: false }), React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,34px)', gridTemplateRows: 'repeat(2,32px)', gap: 4 } }, sizeLabels.map((l, i) => { const on = activeSize === i; return React.createElement('button', { key: l, onClick: () => setActiveSize(i), style: { width: 34, height: 32, borderRadius: 4, border: 'none', cursor: 'pointer', background: on ? (dark ? '#555' : '#ccc') : (dark ? '#272727' : '#E6E6E6'), color: on ? (dark ? '#fff' : '#000') : (dark ? '#aaa' : '#272727'), fontFamily: 'var(--font-block)', fontSize: 10, fontWeight: 900 } }, l); }) ), React.createElement('img', { src: dark ? 'assets/icons/light-mode.svg' : 'assets/icons/dark-mode.svg', width: 34, height: 34, alt: 'theme' }) ) ) ); } function Brand({ dark }) { return React.createElement(SectionShell, { id: 'brand', num: '03', label: 'Brand & toolbar', title: 'One bar, two moods', lead: 'The whole control surface lives in a single top bar. It carries the Sidfolio serif “S”, the eight material tools, and the utility cluster, and it has to feel native in both light and dark.' }, React.createElement('div', { style: { display: 'grid', gap: 16 } }, React.createElement('div', null, React.createElement('div', { className: 'overline', style: { marginBottom: 10 } }, 'Light mode'), React.createElement(ToolbarReplica, { dark: false })), React.createElement('div', null, React.createElement('div', { className: 'overline', style: { marginBottom: 10 } }, 'Dark mode'), React.createElement(ToolbarReplica, { dark: true })) ), React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 16, marginTop: 28 } }, [['The mark', 'A serif “S” drawn in the Sidfolio wordmark style, recoloured, never redrawn, so it stays crisp at 34px in the bar.'], ['Left / right split', 'Materials live on the left next to the logo; destructive and meta controls (wipe, sound, sizing, theme) sit far right, out of the creative flow.'], ['Recolour, don’t rebuild', 'Every icon ships a light and a dark twin. The bar swaps the file set on theme change rather than filtering colours at runtime.']].map(([t, d], i) => React.createElement('div', { key: i, className: 'panel', style: { padding: 20 } }, React.createElement('h3', { style: { fontSize: 15, fontWeight: 700 } }, t), React.createElement('p', { style: { fontSize: 14, lineHeight: 1.55, color: 'var(--fg-2)', margin: '8px 0 0' } }, d))) ) ); } window.SECTIONS_A = { Overview, Journey, Brand }; })();