// ui.jsx, shared building blocks for the process site
(function () {
  const { useState, useEffect, useRef } = React;

  // The Sidfolio serif "S" mark (ported from the game toolbar)
  function LogoS({ size = 36, color = '#373737' }) {
    const w = size * (28 / 36);
    return React.createElement('svg', { width: w, height: size, viewBox: '42 22 28 36', fill: 'none', style: { flexShrink: 0, display: 'block' } },
      React.createElement('mask', { id: 'pm0', maskUnits: 'userSpaceOnUse', x: 44, y: 26, width: 23, height: 32, style: { maskType: 'alpha' } },
        React.createElement('path', { d: 'M55.1975 26.7419C56.7526 26.7419 58.0205 26.9122 58.9573 27.2888L58.9583 27.2878C58.9602 27.2886 58.9621 27.29 58.9641 27.2908C58.9673 27.292 58.9707 27.2924 58.9739 27.2937L58.9729 27.2947C59.8207 27.6134 60.5637 27.9619 61.1956 28.3455L61.8821 28.7429C61.998 28.7831 62.0944 28.8009 62.1741 28.8054C62.1773 28.798 62.1831 28.7902 62.1868 28.78L62.1956 28.7576L62.2053 28.7361C62.2982 28.5316 62.3926 28.1729 62.468 27.6199L62.5393 27.0935H64.6096L64.5754 27.7341C64.5492 28.2335 64.5104 28.8357 64.4583 29.5398C64.4327 30.2085 64.4078 31.0947 64.3821 32.199V37.198H62.3127L62.2688 36.6355C62.1698 35.3484 61.8733 34.098 61.3772 32.8826C60.8913 31.6921 60.2066 30.7366 59.3284 30.0007L59.3147 29.989C58.5023 29.2669 57.4944 28.8963 56.2502 28.8962C55.1239 28.8962 54.247 29.2094 53.5706 29.7986C52.9207 30.3647 52.5715 31.1588 52.5715 32.2625C52.5715 33.1928 52.8018 33.963 53.2395 34.6003C53.7086 35.2564 54.4064 35.9248 55.3557 36.5994C56.3641 37.2974 57.5778 38.1371 58.9973 39.1179L59.9202 39.7302C60.8199 40.3432 61.6479 40.9576 62.4036 41.574C63.442 42.4212 64.284 43.3843 64.9211 44.4646C65.5839 45.5883 65.9016 46.9083 65.9016 48.3992C65.9016 50.2233 65.4159 51.7805 64.4055 53.0251C63.4489 54.235 62.189 55.1417 60.6438 55.7488L60.635 55.7517C59.1037 56.3259 57.4315 56.6091 55.6262 56.6091C53.9846 56.6091 52.6265 56.4517 51.5793 56.1121C50.597 55.7935 49.7579 55.4563 49.0696 55.0984L49.0461 55.0857L49.0237 55.072C48.4736 54.722 48.1639 54.6255 48.0354 54.6208C48.0278 54.6309 48.0177 54.6489 48.0042 54.6765C47.9259 54.903 47.845 55.2719 47.7717 55.8093L47.6995 56.3367H45.6096L45.6653 55.6765C45.7155 55.0742 45.7405 54.3643 45.7405 53.5447V53.5251C45.7662 52.7026 45.7795 51.6313 45.7795 50.3093V50.2976C45.8054 48.9517 45.8186 47.2536 45.8186 45.2029V44.5945H47.8977L47.9319 45.1667C48.0329 46.8323 48.3093 48.3906 48.759 49.8435C49.2245 51.2398 49.9127 52.3403 50.8098 53.1687C51.688 53.9569 52.8705 54.3777 54.4182 54.3777C55.2552 54.3777 55.9719 54.2343 56.5813 53.9646C57.2097 53.6722 57.7074 53.2507 58.0852 52.6951C58.4441 52.1671 58.6418 51.4877 58.6418 50.6208C58.6418 49.6302 58.4078 48.8001 57.9602 48.1062L57.9524 48.0945L58.4719 47.7761L57.9524 48.0935C57.5024 47.3594 56.8656 46.6575 56.0276 45.9919L56.0208 45.9861C55.1855 45.3027 54.2047 44.6029 53.0774 43.8855L53.0696 43.8796C51.8384 43.0676 50.6844 42.2543 49.6077 41.4402C48.4884 40.5939 47.5784 39.6173 46.886 38.5095L46.8801 38.5007C46.1902 37.3509 45.8577 36.0037 45.8577 34.4841C45.8577 32.7458 46.2868 31.2665 47.1936 30.0964L47.1946 30.0945C48.0975 28.9377 49.2686 28.0935 50.6917 27.5623L51.2288 27.3699C52.4921 26.9508 53.816 26.742 55.1975 26.7419Z', fill: 'black', stroke: 'black', strokeWidth: 1.21806 })),
      React.createElement('g', { mask: 'url(#pm0)' }, React.createElement('rect', { x: 45.054, y: 40.7502, width: 21.925, height: 17.0528, fill: color })),
      React.createElement('mask', { id: 'pm1', maskUnits: 'userSpaceOnUse', x: 42, y: 22, width: 25, height: 32, style: { maskType: 'alpha' } },
        React.createElement('path', { d: 'M53.9729 23.333C55.6632 23.333 57.0375 23.5024 58.051 23.877C58.9789 24.1966 59.7917 24.5473 60.4827 24.9326L61.2317 25.3301C61.3697 25.3743 61.485 25.3942 61.5813 25.3975C61.5821 25.3955 61.5843 25.3938 61.5852 25.3916L61.595 25.3662L61.6077 25.3418C61.7028 25.1496 61.8035 24.8021 61.885 24.2529L61.969 23.6846H64.2268L64.1858 24.3887C64.1571 24.8892 64.1147 25.4925 64.0579 26.1973C64.0301 26.8647 64.0027 27.749 63.9749 28.8506V33.9043H61.719L61.6682 33.293C61.5614 32.0182 61.2406 30.7782 60.7043 29.5713C60.1811 28.3939 59.4423 27.445 58.4885 26.7109L58.4807 26.7051L58.4739 26.6992C57.591 25.9784 56.4868 25.6025 55.1184 25.6025C53.8794 25.6026 52.9183 25.9204 52.1829 26.5088C51.4832 27.0687 51.1174 27.8411 51.1174 28.9111C51.1174 29.8203 51.3618 30.5717 51.8303 31.1973C52.3357 31.8454 53.0894 32.5093 54.1184 33.1816C55.2214 33.8831 56.551 34.7275 58.1067 35.7148H58.1057C59.474 36.5273 60.7054 37.3423 61.7981 38.1611C62.9293 39.0088 63.8499 39.975 64.5481 41.0625C65.2785 42.2001 65.6301 43.5385 65.6301 45.0479C65.6301 46.8963 65.0923 48.4744 63.9827 49.7305L63.9836 49.7314C62.9368 50.9476 61.5615 51.852 59.885 52.457L59.8762 52.4609C58.2137 53.0336 56.3993 53.3154 54.4397 53.3154C52.6556 53.3154 51.1832 53.1581 50.0491 52.8203C48.981 52.5021 48.0686 52.1649 47.3206 51.8076L47.2961 51.7959L47.2717 51.7822C46.6605 51.425 46.3132 51.3271 46.1653 51.3271C46.1639 51.3272 46.1626 51.3271 46.1614 51.3271C46.1556 51.3343 46.1485 51.3472 46.1379 51.3662C46.0569 51.5836 45.9707 51.9426 45.8918 52.4736L45.8069 53.043H43.5266L43.592 52.3154C43.6463 51.7172 43.6741 51.0107 43.6741 50.1934V50.1816L43.675 50.1709C43.703 49.35 43.717 48.2795 43.717 46.958V46.9443C43.7452 45.5995 43.759 43.9019 43.759 41.8516V41.1855H46.0256L46.0667 41.8076C46.1762 43.4676 46.4768 45.0201 46.9651 46.4668C47.4677 47.8476 48.211 48.9378 49.1848 49.7617H49.1838C50.1382 50.5458 51.4301 50.9687 53.1243 50.9688C54.0414 50.9688 54.8275 50.8241 55.4954 50.5527C56.1848 50.2583 56.7238 49.8376 57.1292 49.29C57.5099 48.7757 57.719 48.116 57.719 47.2695C57.719 46.2998 57.4699 45.4888 56.9915 44.8076L56.9875 44.8008L56.9827 44.7939C56.4975 44.0669 55.808 43.3676 54.8958 42.7021L54.8879 42.6963C53.9791 42.0133 52.9121 41.3131 51.6848 40.5957L51.676 40.5898C50.3358 39.7778 49.0788 38.9646 47.9065 38.1504C46.6881 37.3041 45.6941 36.3254 44.9358 35.2109L44.928 35.2002V35.1992C44.1685 34.036 43.802 32.6709 43.802 31.1328C43.802 29.372 44.2758 27.8714 45.2737 26.6885L45.2756 26.6865C46.2036 25.5943 47.3854 24.7847 48.803 24.252L49.0901 24.1484C50.634 23.6038 52.263 23.333 53.9729 23.333Z', stroke: 'black', strokeWidth: 1.33333 })),
      React.createElement('g', { mask: 'url(#pm1)' }, React.createElement('rect', { x: 41.9714, y: 21.8665, width: 26.6666, height: 18.1333, fill: color })),
      React.createElement('path', { d: 'M68.7142 40.857C68.7142 41.3304 68.3305 41.7141 67.8571 41.7141L66.4285 41.7141C65.4817 41.7141 64.7142 40.9466 64.7142 39.9998L67.8571 39.9998C68.3305 39.9998 68.7142 40.3836 68.7142 40.857Z', fill: color }),
      React.createElement('path', { d: 'M45.1332 43.7334L44.0665 43.7334C43.4774 43.7334 42.9999 43.2558 42.9999 42.6667C42.9999 42.0776 43.4774 41.6001 44.0665 41.6001C44.6556 41.6001 45.1332 42.0776 45.1332 42.6667L45.1332 43.7334Z', fill: color })
    );
  }

  // Section wrapper with editorial header
  function SectionShell({ id, num, label, title, lead, children, theme }) {
    return React.createElement('section', { id, className: 'sec', style: { padding: '52px 0 16px', scrollMarginTop: 20 } },
      React.createElement('div', { className: 'sec-head' },
        React.createElement('div', { className: 'overline' }, `${num} · ${label}`),
        React.createElement('h2', { style: { fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 'clamp(27px,3.4vw,42px)', lineHeight: 1.08, margin: '12px 0 0', letterSpacing: '-0.02em' } }, title),
        lead && React.createElement('p', { style: { fontSize: 17, lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: 'none', margin: '12px 0 0' } }, lead)
      ),
      React.createElement('div', { style: { marginTop: 24 } }, children)
    );
  }

  // Animated / static sprite viewer, uses real SVG files, pixelated
  function Sprite({ family, idx = 0, size = 64, dir = 'pixels' }) {
    return React.createElement('img', {
      src: `assets/${dir}/${family}.svg`, width: size, height: size, draggable: false,
      style: { imageRendering: 'pixelated', display: 'block' }
    });
  }

  function SpriteCycle({ files, dir = 'pixels', size = 72, interval = 320 }) {
    const [i, setI] = useState(0);
    useEffect(() => {
      if (files.length < 2) return;
      const t = setInterval(() => setI(p => (p + 1) % files.length), interval);
      return () => clearInterval(t);
    }, [files.length, interval]);
    return React.createElement('img', {
      src: `assets/${dir}/${files[i % files.length]}.svg`, width: size, height: size, draggable: false,
      style: { imageRendering: 'pixelated', display: 'block' }
    });
  }

  window.UI = { LogoS, SectionShell, Sprite, SpriteCycle };
})();