// app.jsx, shell: sidebar nav, theme, scroll-spy, lightbox, footer
(function () {
  const { useState, useEffect, useRef } = React;

  // ⚙️ TODO: when the Sand Simulation game is deployed, set this to its public URL
  //     (e.g. 'https://sand.vercel.app'). Until then it stays '#' (shows a "coming soon" note).
  const GAME_URL = 'https://falling-sand-game-red.vercel.app/';
  // ⚙️ TODO: set this to the public Sidfolio design-system URL when available.
  const DS_URL = '#';

  const { LogoS } = window.UI;
  const { Overview, Journey, Brand } = window.SECTIONS_A;
  const { Buttons, Sizes, Sprites, Physics, Behind } = window.SECTIONS_B;
  const { SECTIONS } = window.CONTENT;

  function Sidebar({ active, dark, setDark, onNav }) {
    return React.createElement('aside', { className: 'sidebar' },
      React.createElement('div', { className: 'sb-brand' },
        React.createElement('img', { src: 'assets/sidfolio-logo.svg', alt: 'Sidfolio', draggable: false,
          style: { display: 'block', height: 42, width: 'auto', filter: dark ? 'invert(1) brightness(1.7)' : 'none' } })
      ),
      React.createElement('nav', { className: 'sb-nav' },
        SECTIONS.map(s => React.createElement('a', {
          key: s.id, href: '#' + s.id, onClick: () => onNav(s.id),
          className: 'sb-link' + (active === s.id ? ' on' : '')
        },
          React.createElement('span', { className: 'sb-num mono' }, s.num),
          React.createElement('span', null, s.label)
        ))
      ),
      React.createElement('div', { className: 'sb-foot' },
        React.createElement('button', { className: 'theme-btn', onClick: () => setDark(d => !d) },
          React.createElement('span', null, dark ? '☾' : '☀'),
          React.createElement('span', null, dark ? 'Dark' : 'Light')
        ),
        React.createElement('a', { className: 'play-btn', href: GAME_URL, target: GAME_URL === '#' ? '_self' : '_blank', rel: 'noopener',
          onClick: (e) => { if (GAME_URL === '#') { e.preventDefault(); alert('The Sand Simulation game isn\u2019t live yet. Once it\u2019s deployed, set GAME_URL at the top of process/app.jsx to its public URL and this button will open it.'); } } }, '\u25B6  Open the game')
      )
    );
  }

  function MobileBar({ active, onNav }) {
    return React.createElement('div', { className: 'mobile-nav' },
      SECTIONS.map(s => React.createElement('a', { key: s.id, href: '#' + s.id, onClick: () => onNav(s.id),
        className: 'mn-link' + (active === s.id ? ' on' : '') }, s.label)));
  }

  function Footer({ dark }) {
    return React.createElement('footer', { className: 'site-foot' },
      React.createElement('div', { className: 'panel', style: { padding: 28, marginBottom: 28 } },
        React.createElement('div', { className: 'overline', style: { marginBottom: 10 } }, 'Wiring it into the game'),
        React.createElement('p', { style: { fontSize: 14.5, lineHeight: 1.6, color: 'var(--fg-2)', maxWidth: 720, margin: 0 } },
          'To let players jump here from the simulation, add a small link into the toolbar’s right-hand cluster in ',
          React.createElement('code', { className: 'mono', style: { background: 'var(--bg-subtle)', padding: '2px 6px', borderRadius: 4, fontSize: 13 } }, 'App.tsx'),
          ', right beside the music and theme controls:'),
        React.createElement('pre', { className: 'mono', style: { background: dark ? '#0c0b22' : '#0A090B', color: '#E6E6F2', padding: '16px 18px', borderRadius: 10, overflowX: 'auto', fontSize: 12.5, lineHeight: 1.6, marginTop: 14 } },
`{/* Process / making-of link */}
<a href="/process" title="See how it was built"
   style={{ fontFamily: 'Jersey 10', fontSize: 20,
            color: darkMode ? '#aaa' : '#373737',
            textDecoration: 'none' }}>
  Process
</a>`)
      ),
      React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12, paddingTop: 8 } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } },
          React.createElement(LogoS, { size: 22, color: dark ? '#B9B6FF' : '#333089' }),
          React.createElement('span', { style: { fontSize: 13, color: 'var(--fg-3)' } }, 'Built with ',
            React.createElement('a', { href: DS_URL, target: DS_URL === '#' ? '_self' : '_blank', rel: 'noopener',
              onClick: (e) => { if (DS_URL === '#') { e.preventDefault(); alert('Set DS_URL at the top of process/app.jsx to the public Sidfolio design-system URL to enable this link.'); } },
              style: { color: 'inherit', textDecoration: 'underline', textUnderlineOffset: 2, textDecorationColor: 'var(--fg-3)' } }, 'Sidfolio design system'))),
        React.createElement('span', { className: 'pixel', style: { fontSize: 22, color: 'var(--fg-3)' } }, 'ponder · prototype · present')
      )
    );
  }

  function TeaserV5({ dark }) {
    const [hooked, setHooked] = useState(false);
    const blobs = [
      { l: '12%', t: '28%', s: 34, c: '#DC8F50' }, { l: '30%', t: '60%', s: 26, c: '#F6D084' },
      { l: '52%', t: '20%', s: 30, c: '#2C7BE5' }, { l: '66%', t: '54%', s: 40, c: '#F0641E' },
      { l: '80%', t: '30%', s: 24, c: '#55AF5F' }, { l: '42%', t: '76%', s: 22, c: '#888780' },
    ];
    return React.createElement('section', { id: 'v5', style: { padding: '56px 0 8px', scrollMarginTop: 20 } },
      React.createElement('div', { className: 'overline', style: { marginBottom: 12 } }, 'Next drop · the horizon'),
      React.createElement('div', { className: 'v5-card' },
        React.createElement('div', { className: 'v5-glow' }),
        React.createElement('div', { className: 'v5-glow two' }),
        React.createElement('div', { className: 'v5-gridlines' }),
        React.createElement('div', { className: 'v5-watermark' }, 'V5'),
        React.createElement('div', { className: 'v5-split' },
          React.createElement('div', null,
            React.createElement('div', { style: { display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 13px', borderRadius: 999, background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.18)', fontSize: 11.5, fontWeight: 700, letterSpacing: '0.16em', color: '#E7E6FF' } },
              React.createElement('span', { style: { width: 8, height: 8, borderRadius: 999, background: '#F0641E', animation: 'v5-pulse 1.4s ease-in-out infinite' } }),
              'CLASSIFIED · DROPPING SOON'),
            React.createElement('h2', { style: { fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 'clamp(30px,4.6vw,58px)', lineHeight: 1.02, letterSpacing: '-0.03em', margin: '18px 0 0' } },
              'Version 5 is coming. And you are ',
              React.createElement('span', { style: { color: '#FFB300', fontStyle: 'italic' } }, 'not ready'),
              ' for it.'),
            React.createElement('p', { style: { fontSize: 16.5, lineHeight: 1.62, color: '#BDBCE0', maxWidth: 560, margin: '18px 0 0' } },
              'We pulled the world apart down to a single grain. Next, the grains pull back. New matter, new weather, physics that refuse to behave, and a making-of you will want to read with the lights on. The page you are standing on is about to get a sequel, and it stays sealed until it lands.'),
            React.createElement('div', { style: { display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 26, alignItems: 'center' } },
              React.createElement('button', { onClick: () => setHooked(true), style: { background: hooked ? 'rgba(255,255,255,0.12)' : '#4E48F0', color: '#fff', border: hooked ? '1px solid rgba(255,255,255,0.25)' : 'none', borderRadius: 10, padding: '12px 22px', fontSize: 14.5, fontWeight: 700, cursor: 'pointer', fontFamily: 'var(--font-sans)' } }, hooked ? 'You are on the list. Patience.' : 'Get the drop alert'),
              React.createElement('span', { className: 'pixel', style: { fontSize: 24, color: '#7170A8' } }, 'eta: soon™'))
          ),
          React.createElement('div', { style: { position: 'relative' } },
            React.createElement('div', { style: { borderRadius: 12, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.16)', boxShadow: '0 24px 60px rgba(0,0,0,0.55)' } },
              React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 7, padding: '10px 13px', background: '#15143A' } },
                ['#FF5F57', '#FEBC2E', '#28C840'].map(c => React.createElement('span', { key: c, style: { width: 11, height: 11, borderRadius: 999, background: c } })),
                React.createElement('span', { style: { marginLeft: 10, fontSize: 11, color: '#8a89b8', fontFamily: 'var(--font-mono)' } }, 'sidfolio.com/sand/process?v=5')),
              React.createElement('div', { style: { position: 'relative', height: 240, background: dark ? '#15151c' : '#fff', overflow: 'hidden' } },
                React.createElement('div', { className: 'v5-peek', style: { position: 'absolute', inset: 0 } },
                  React.createElement('div', { style: { position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(0,0,0,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.06) 1px,transparent 1px)', backgroundSize: '16px 16px' } }),
                  blobs.map((b, i) => React.createElement('div', { key: i, style: { position: 'absolute', left: b.l, top: b.t, width: b.s, height: b.s, background: b.c, borderRadius: 3, animation: `v5-rise ${2.4 + i * 0.3}s ease-in-out infinite` } }))),
                React.createElement('div', { className: 'v5-scanline' }),
                React.createElement('div', { className: 'v5-lock' },
                  React.createElement('svg', { width: 44, height: 44, viewBox: '0 0 24 24', fill: 'none' },
                    React.createElement('rect', { x: 4, y: 10, width: 16, height: 11, rx: 2, fill: '#fff', opacity: 0.92 }),
                    React.createElement('path', { d: 'M8 10V7a4 4 0 1 1 8 0v3', stroke: '#fff', strokeWidth: 2, fill: 'none', opacity: 0.92 }),
                    React.createElement('circle', { cx: 12, cy: 15, r: 1.6, fill: '#0A0922' })),
                  React.createElement('div', { className: 'pixel', style: { fontSize: 28, color: '#fff', letterSpacing: '0.04em' } }, 'access locked'),
                  React.createElement('div', { style: { fontSize: 11.5, color: '#cfceff', letterSpacing: '0.1em', fontWeight: 600 } }, 'V5 PREVIEW · ENCRYPTED'))
              )
            )
          )
        )
      )
    );
  }

  function App() {
    const [dark, setDark] = useState(() => localStorage.getItem('proc-theme') === 'dark');
    const [active, setActive] = useState('overview');
    const [lightbox, setLightbox] = useState(null);
    const navLock = useRef(0);

    useEffect(() => {
      document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
      localStorage.setItem('proc-theme', dark ? 'dark' : 'light');
    }, [dark]);

    useEffect(() => {
      const ids = SECTIONS.map(s => s.id);
      const onScroll = () => {
        if (Date.now() < navLock.current) return;
        let cur = ids[0];
        for (const id of ids) {
          const el = document.getElementById(id);
          if (el && el.getBoundingClientRect().top <= 140) cur = id;
        }
        setActive(cur);
      };
      window.addEventListener('scroll', onScroll, { passive: true });
      onScroll();
      return () => window.removeEventListener('scroll', onScroll);
    }, []);

    const onNav = (id) => { navLock.current = Date.now() + 700; setActive(id); };

    useEffect(() => {
      const onKey = (e) => { if (e.key === 'Escape') setLightbox(null); };
      window.addEventListener('keydown', onKey);
      return () => window.removeEventListener('keydown', onKey);
    }, []);

    return React.createElement(React.Fragment, null,
      React.createElement(Sidebar, { active, dark, setDark, onNav }),
      React.createElement(MobileBar, { active, onNav }),
      React.createElement('main', { className: 'content' },
        React.createElement('div', { className: 'content-inner' },
          React.createElement(Overview, { dark }),
          React.createElement(Journey, { dark }),
          React.createElement(Brand, { dark }),
          React.createElement(Buttons, { dark }),
          React.createElement(Sizes, { dark }),
          React.createElement(Sprites, { dark }),
          React.createElement(Physics, { dark }),
          React.createElement(Behind, { dark, setLightbox }),
          React.createElement(TeaserV5, { dark }),
          React.createElement(Footer, { dark })
        )
      ),
      lightbox && React.createElement('div', { className: 'lightbox', onClick: () => setLightbox(null) },
        React.createElement('img', { src: lightbox, onClick: e => e.stopPropagation() }),
        React.createElement('button', { className: 'lb-close', onClick: () => setLightbox(null) }, '✕')
      )
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));
})();