// sectionsB.jsx, Tool buttons, Pixel sizing, Sprites, Physics, Behind the scenes
(function () {
  const { useState } = React;
  const { SectionShell, SpriteCycle, Sprite } = window.UI;

  // ---------- TOOL BUTTONS ----------
  function StateButton({ tool, dark, big = 56 }) {
    const [pressed, setPressed] = useState(false);
    const [selected, setSelected] = useState(false);
    const sfx = dark ? 'dark-' : '';
    const state = pressed ? 'pressed' : selected ? 'selected' : 'default';
    return React.createElement('button', {
      onPointerDown: () => setPressed(true),
      onPointerUp: () => { setPressed(false); setSelected(s => !s); },
      onPointerLeave: () => setPressed(false),
      title: tool.name,
      style: { background: 'none', border: 'none', padding: 0, cursor: 'pointer', lineHeight: 0 }
    }, React.createElement('img', { src: `assets/icons/${tool.id}-${sfx}${state}.svg`, width: big, height: big, alt: tool.name, draggable: false, style: { display: 'block' } }));
  }

  function StateRow({ tool, dark }) {
    const sfx = dark ? 'dark-' : '';
    const states = tool.states === 2 ? ['default', 'pressed'] : ['default', 'pressed', 'selected'];
    return React.createElement('div', { style: { display: 'flex', gap: 10 } },
      states.map(s => React.createElement('div', { key: s, style: { textAlign: 'center' } },
        React.createElement('img', { src: `assets/icons/${tool.id}-${sfx}${s}.svg`, width: 60, height: 60, alt: s, draggable: false, style: { display: 'block' } }),
        React.createElement('div', { style: { fontSize: 10.5, color: 'var(--fg-3)', textTransform: 'capitalize', marginTop: 4 } }, s)
      )));
  }

  function Buttons({ dark }) {
    const { TOOLS, UTIL_TOOLS } = window.CONTENT;
    const all = TOOLS.concat(UTIL_TOOLS);
    return React.createElement(SectionShell, {
      id: 'buttons', num: '04', label: 'Tool buttons', title: 'A button is a tiny card',
      lead: 'Each tool is a 64×64 card: a rounded background, a circular emblem, and a hand-set pixel-font label. Three states carry every interaction, and each has a dark twin.'
    },
      // anatomy
      React.createElement('div', { className: 'panel', style: { padding: 26, marginBottom: 28 } },
        React.createElement('div', { className: 'overline', style: { marginBottom: 18 } }, 'Anatomy · the Sand button'),
        React.createElement('div', { style: { display: 'flex', gap: 36, flexWrap: 'wrap', alignItems: 'center' } },
          React.createElement('img', { src: `assets/icons/sand-${dark ? 'dark-' : ''}selected.svg`, width: 128, height: 128, draggable: false, style: { imageRendering: 'auto', flexShrink: 0 } }),
          React.createElement('div', { style: { display: 'grid', gap: 14, flex: 1, minWidth: 240 } },
            [['Rounded card', '8px-radius background; tints by material when selected (sand → peach).'],
             ['Circular emblem', 'A 28px pixel-art icon, drawn from the same palette as the material on canvas.'],
             ['Pixel label', 'The name set in a blocky bitmap face, the toy, playful half of the system.']].map(([t, d], i) =>
              React.createElement('div', { key: i, style: { display: 'flex', gap: 12 } },
                React.createElement('span', { className: 'pixel', style: { fontSize: 22, color: 'var(--accent)', width: 24 } }, i + 1),
                React.createElement('div', null,
                  React.createElement('div', { style: { fontWeight: 700, fontSize: 14.5 } }, t),
                  React.createElement('div', { style: { fontSize: 13.5, color: 'var(--fg-2)', lineHeight: 1.5 } }, d))
              ))
          )
        )
      ),
      // interactive gallery
      React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8, marginBottom: 14 } },
        React.createElement('span', { className: 'overline' }, 'Try the states'),
        React.createElement('span', { style: { fontSize: 13, color: 'var(--fg-3)' } }, 'Hover & hold = pressed · click = selected')
      ),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(168px,1fr))', gap: 14 } },
        all.map(t => React.createElement('div', { key: t.id, className: 'panel', style: { padding: '20px 16px', display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'center', textAlign: 'center' } },
          React.createElement(StateButton, { tool: t, dark, big: 60 }),
          React.createElement('div', null,
            React.createElement('div', { className: 'pixel', style: { fontSize: 22, lineHeight: 1 } }, t.name),
            React.createElement('div', { style: { fontSize: 12, color: 'var(--fg-2)', lineHeight: 1.45, marginTop: 5 } }, t.blurb))
        ))
      ),
      // full state matrix
      React.createElement('div', { className: 'panel', style: { padding: 24, marginTop: 28 } },
        React.createElement('div', { className: 'overline', style: { marginBottom: 18 } }, 'Every material · default → pressed → selected'),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(210px,1fr))', gap: 24 } },
          window.CONTENT.TOOLS.map(t => React.createElement('div', { key: t.id },
            React.createElement(StateRow, { tool: t, dark }),
            React.createElement('div', { className: 'pixel', style: { fontSize: 18, marginTop: 8, color: 'var(--fg-2)' } }, t.name)
          )))
      )
    );
  }

  // ---------- PIXEL SIZING ----------
  function Sizes({ dark }) {
    const { SIZES } = window.CONTENT;
    const [sel, setSel] = useState(3);
    return React.createElement(SectionShell, {
      id: 'sizes', num: '05', label: 'Pixel sizing', title: 'Six grains of resolution',
      lead: 'One canvas, six pixel scales. The selector reads as clothing sizes, XXS to XXL, mapping to 4px through 24px cells. Smaller pixels mean finer detail; bigger pixels mean chunkier, faster play.'
    },
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 20, alignItems: 'start' } },
        // selector
        React.createElement('div', { className: 'panel', style: { padding: 24 } },
          React.createElement('div', { className: 'overline', style: { marginBottom: 16 } }, 'The selector'),
          React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 6 } },
            SIZES.map((s, i) => {
              const on = sel === i;
              return React.createElement('button', { key: s.label, onClick: () => setSel(i), style: {
                height: 52, borderRadius: 6, border: 'none', cursor: 'pointer',
                background: on ? (dark ? '#555' : '#ccc') : (dark ? '#272727' : '#E6E6E6'),
                color: on ? (dark ? '#fff' : '#000') : (dark ? '#aaa' : '#5a5a5a'),
                fontFamily: 'var(--font-block)', fontSize: 14, fontWeight: 900, display: 'flex', flexDirection: 'column', gap: 2, alignItems: 'center', justifyContent: 'center'
              } }, React.createElement('span', null, s.label), React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 10, opacity: 0.7 } }, s.px + 'px'));
            })
          ),
          React.createElement('p', { style: { fontSize: 13.5, color: 'var(--fg-2)', lineHeight: 1.55, margin: '18px 0 0' } },
            'A 2×3 grid keeps all six options one tap away, no dragging a slider to hunt for a value. The active size darkens like a pressed key.')
        ),
        // sprite at sizes
        React.createElement('div', { className: 'panel', style: { padding: 24 } },
          React.createElement('div', { className: 'overline', style: { marginBottom: 16 } }, 'One sand grain, every scale'),
          React.createElement('div', { style: { display: 'flex', alignItems: 'flex-end', gap: 18, flexWrap: 'wrap' } },
            SIZES.map(s => React.createElement('div', { key: s.px, style: { textAlign: 'center' } },
              React.createElement('div', { style: { width: 24, height: 24, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' } },
                React.createElement('img', { src: 'assets/pixels/sand0.svg', width: s.px, height: s.px, draggable: false, style: { imageRendering: 'pixelated' } })),
              React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', marginTop: 10 } }, s.px)
            ))
          ),
          React.createElement('p', { style: { fontSize: 13.5, color: 'var(--fg-2)', lineHeight: 1.55, margin: '18px 0 0' } },
            'The same three-shape SVG is rasterised fresh at each cell size, so edges stay razor-crisp instead of being scaled up and blurred.')
        )
      )
    );
  }

  // ---------- SPRITES ----------
  function Sprites({ dark }) {
    const { SPRITES } = window.CONTENT;
    return React.createElement(SectionShell, {
      id: 'sprites', num: '06', label: 'Canvas sprites', title: 'The pixel-art bestiary',
      lead: 'Everything you paint is a 24×24 SVG. Granular materials ship three variants so fields never tile; water and fire animate; the palm even swaps its trunk art as it matures.'
    },
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(190px,1fr))', gap: 16 } },
        SPRITES.map(sp => React.createElement('div', { key: sp.id, className: 'panel', style: { padding: 18, display: 'flex', flexDirection: 'column', gap: 12 } },
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: 96, borderRadius: 8, background: dark ? '#161616' : '#FAFAFB', border: '1px solid var(--border)' } },
            React.createElement(SpriteCycle, { files: sp.files, dir: sp.dir || 'pixels', size: 76, interval: sp.anim ? 240 : 520 })),
          React.createElement('div', null,
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
              React.createElement('span', { style: { width: 10, height: 10, borderRadius: 3, background: sp.color, flexShrink: 0 } }),
              React.createElement('span', { className: 'pixel', style: { fontSize: 20 } }, sp.name),
              React.createElement('span', { style: { fontSize: 11, color: 'var(--fg-3)', marginLeft: 'auto' } }, sp.files.length > 1 ? sp.files.length + ' frames' : '1')),
            React.createElement('p', { style: { fontSize: 12.5, color: 'var(--fg-2)', lineHeight: 1.5, margin: '8px 0 0' } }, sp.note),
            React.createElement('div', { style: { display: 'flex', gap: 6, marginTop: 10 } },
              sp.files.map(f => React.createElement('img', { key: f, src: `assets/${sp.dir || 'pixels'}/${f}.svg`, width: 26, height: 26, draggable: false, style: { imageRendering: 'pixelated', border: '1px solid var(--border)', borderRadius: 4, background: dark ? '#161616' : '#fff' } })))
          )
        )),
        // Sunlight — same vertical card as the rest
        React.createElement('div', { key: 'sunlight', className: 'panel', style: { padding: 18, display: 'flex', flexDirection: 'column', gap: 12 } },
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: 96, borderRadius: 8, background: dark ? '#161616' : 'radial-gradient(circle, #FFF6E5, #FFEFD6)', border: '1px solid var(--border)' } },
            React.createElement(SpriteCycle, { files: ['frame0', 'frame1', 'frame2', 'frame3'], dir: 'sunlight', size: 76, interval: 350 })),
          React.createElement('div', null,
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
              React.createElement('span', { style: { width: 10, height: 10, borderRadius: 3, background: '#F2CC4D', flexShrink: 0 } }),
              React.createElement('span', { className: 'pixel', style: { fontSize: 20 } }, 'Sunlight'),
              React.createElement('span', { style: { fontSize: 11, color: 'var(--fg-3)', marginLeft: 'auto' } }, '4 frames')),
            React.createElement('p', { style: { fontSize: 12.5, color: 'var(--fg-2)', lineHeight: 1.5, margin: '8px 0 0' } }, 'A drag-on light source. Its beam lights empty cells and slowly tans the player.'),
            React.createElement('div', { style: { display: 'flex', gap: 6, marginTop: 10 } },
              ['frame0', 'frame1', 'frame2', 'frame3'].map(f => React.createElement('img', { key: f, src: `assets/sunlight/${f}.svg`, width: 26, height: 26, draggable: false, style: { imageRendering: 'pixelated', border: '1px solid var(--border)', borderRadius: 4, background: dark ? '#161616' : '#fff' } })))
          )
        ),
        // Player — same vertical card
        React.createElement('div', { key: 'player', className: 'panel', style: { padding: 18, display: 'flex', flexDirection: 'column', gap: 12 } },
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: 96, borderRadius: 8, background: dark ? '#161616' : '#FAFAFB', border: '1px solid var(--border)' } },
            React.createElement('img', { src: 'assets/human-figure.svg', height: 80, draggable: false, style: { filter: dark ? 'invert(0.92)' : 'none' } })),
          React.createElement('div', null,
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
              React.createElement('span', { style: { width: 10, height: 10, borderRadius: 3, background: '#6B66E8', flexShrink: 0 } }),
              React.createElement('span', { className: 'pixel', style: { fontSize: 20 } }, 'Player'),
              React.createElement('span', { style: { fontSize: 11, color: 'var(--fg-3)', marginLeft: 'auto' } }, '7 states')),
            React.createElement('p', { style: { fontSize: 12.5, color: 'var(--fg-2)', lineHeight: 1.5, margin: '8px 0 0' } }, 'A 3-cell-tall figure: idle, walk, swim, climb, jump, flee and burn.'),
            React.createElement('div', { style: { display: 'flex', gap: 6, marginTop: 10 } },
              React.createElement('img', { src: 'assets/human-figure.svg', height: 26, draggable: false, style: { border: '1px solid var(--border)', borderRadius: 4, padding: 2, background: dark ? '#161616' : '#fff', filter: dark ? 'invert(0.92)' : 'none' } }))
          )
        )
      )
    );
  }

  // ---------- PHYSICS ----------
  function Physics({ dark }) {
    const { PHYSICS } = window.CONTENT;
    const T = window.SAND_T;
    // fire demo: sand pillars set alight at the base
    const fireSeed = ({ set, cols, rows }) => {
      const base = rows - 1;
      for (let x = 0; x < cols; x++) set(x, base, T.STONE);
      const cx = Math.floor(cols / 2);
      for (let x = cx - 10; x <= cx + 10; x++) for (let y = base - 1; y > base - 16; y--) if (Math.abs(x - cx) < 16 - (base - y)) set(x, y, T.SAND, Math.floor(Math.random() * 3));
      for (let x = cx - 3; x <= cx + 3; x++) set(x, base - 1, T.FIRE);
    };
    // growth demo: a palm sprout beside a reservoir of water on a soil bed
    const growSeed = ({ set, cols, rows }) => {
      const base = rows - 1;
      for (let x = 0; x < cols; x++) { set(x, base, T.SOIL); set(x, base - 1, T.SOIL); }
      const tx = Math.floor(cols * 0.5);
      set(tx, base - 2, T.PALM, 4); // young sprout, crown about to appear
      for (let y = base - 2; y > base - 9; y--) for (let dx = -8; dx <= -4; dx++) set(tx + dx, y, T.WATER);
      for (let y = base - 2; y > base - 9; y--) for (let dx = 4; dx <= 8; dx++) set(tx + dx, y, T.WATER);
    };
    return React.createElement(SectionShell, {
      id: 'physics', num: '07', label: 'Physics & growth', title: 'Rules you can feel',
      lead: 'No physics engine, just a grid scanned bottom-to-top each frame, where every cell follows a handful of tiny rules. Out of that, sand piles, water levels, fire spreads and palms climb toward the light.'
    },
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(280px,1fr))', gap: 16 } },
        PHYSICS.map(p => React.createElement('div', { key: p.id, className: 'panel', style: { padding: 22, borderTop: `3px solid ${p.color}` } },
          React.createElement('h3', { style: { fontSize: 17, fontWeight: 700, marginBottom: 12 } }, p.name),
          React.createElement('ul', { style: { margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 10 } },
            p.lines.map((l, i) => React.createElement('li', { key: i, style: { display: 'flex', gap: 10, fontSize: 13.5, lineHeight: 1.55, color: 'var(--fg-2)' } },
              React.createElement('span', { style: { width: 6, height: 6, borderRadius: 99, background: p.color, marginTop: 7, flexShrink: 0 } }), l)))
        ))
      ),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 20, marginTop: 24 } },
        React.createElement('div', null,
          React.createElement('div', { className: 'overline', style: { marginBottom: 10 } }, 'Live · fire climbing a dune'),
          React.createElement(window.SandSim, { dark, cell: 6, height: 260, brush: 2, tools: ['fire', 'water', 'sand', 'wipe'], defaultTool: 'water', seed: fireSeed }),
          React.createElement('p', { style: { fontSize: 12.5, color: 'var(--fg-3)', margin: '8px 0 0' } }, 'Watch fire creep up the sand and turn to smoke. Paint water to fight it back.')
        ),
        React.createElement('div', null,
          React.createElement('div', { className: 'overline', style: { marginBottom: 10 } }, 'Live · a palm reaching up'),
          React.createElement(window.SandSim, { dark, cell: 6, height: 260, brush: 2, tools: ['water', 'soil', 'seed', 'wipe'], defaultTool: 'water', seed: growSeed }),
          React.createElement('p', { style: { fontSize: 12.5, color: 'var(--fg-3)', margin: '8px 0 0' } }, 'The sprout drinks from the pools and climbs. Add water to speed it up; it grows a crown and drops coconuts.')
        )
      )
    );
  }

  // ---------- BEHIND THE SCENES ----------
  function Behind({ dark, setLightbox }) {
    const shots = [
      { src: '_research/Process2.png', cap: 'Annotating pixel behaviour, how sand should read on 24px tiles, and the opacity ramp when a tile is pressed.' },
      { src: '_research/Process3.png', cap: 'The first button-state study: default, pressed and selected for Wipe, Sand, Water, Fire and Stone.' },
      { src: '_research/Process4.png', cap: 'The full system bar, specced in dark and light with every state, the source of truth for the toolbar.' },
      { src: '_research/Process5.png', cap: 'Pixel-size exploration: a slider idea (later replaced by the grid) plus canvas pixels rendered at every scale.' },
      { src: '_research/Process1.png', cap: 'The whole Figma board, wireframes, iPhone frames and pixel experiments scattered across the canvas.' },
    ];
    return React.createElement(SectionShell, {
      id: 'behind', num: '08', label: 'Behind the scenes', title: 'Straight from the Figma',
      lead: 'Before any code, the materials, states and layouts were drawn, annotated and argued with on a single Figma board. These are the working pages, click any to enlarge.'
    },
      React.createElement('div', { style: { columns: '2', columnGap: 16 } },
        shots.map((s, i) => React.createElement('figure', { key: i, className: 'panel', style: { margin: '0 0 16px', breakInside: 'avoid', overflow: 'hidden', cursor: 'zoom-in', padding: 0 }, onClick: () => setLightbox(s.src) },
          React.createElement('img', { src: s.src, style: { width: '100%', display: 'block', background: '#f3f3f5' }, draggable: false }),
          React.createElement('figcaption', { style: { fontSize: 12.5, color: 'var(--fg-2)', lineHeight: 1.5, padding: '12px 14px' } }, s.cap)
        ))
      )
    );
  }

  window.SECTIONS_B = { Buttons, Sizes, Sprites, Physics, Behind };
})();