/* global React, LeftSidebar, ReactDOM, Lenis, SiteHeader, SiteFooter */
const { useEffect: useEffectChangelog } = React;

const useLenis = () => {
  useEffectChangelog(() => {
    if (typeof Lenis === 'undefined') return;
    const lenis = new Lenis({
      duration: 1.05,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      smoothWheel: true,
      wheelMultiplier: 1.0,
      touchMultiplier: 1.2,
    });
    let raf;
    const tick = (time) => {
      lenis.raf(time);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => {
      cancelAnimationFrame(raf);
      lenis.destroy();
    };
  }, []);
};



const ChangelogPage = () => {
  useLenis();

  return (
    <>
      <SiteHeader base="../" />
      <LeftSidebar base="../" />

      <main id="main">
        <section className="section-shell" style={{ paddingTop: '3rem', paddingBottom: '1rem' }}>
          <p className="eyebrow">Release History</p>
          <h1>Release Notes & Version History</h1>
          <p className="subtitle" style={{ fontSize: '16px', color: 'var(--t-2)', marginTop: '8px', maxWidth: '720px' }}>
            Official release notes and changelog for Virtue FX Manager (VFxM).
          </p>
        </section>

        <section className="section-shell" style={{ paddingBottom: '4rem' }}>
          <div style={{ display: 'grid', gap: '32px', maxWidth: '840px' }}>
            
            {/* Version 1.2.2 */}
            <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: '16px', padding: '32px' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '16px', borderBottom: '1px solid var(--line)', paddingBottom: '12px' }}>
                <div>
                  <span style={{ background: 'rgba(var(--accent-rgb), 0.15)', color: 'var(--accent-ink)', border: '1px solid rgba(var(--accent-rgb), 0.3)', padding: '4px 10px', borderRadius: '8px', fontSize: '14px', fontWeight: '800', fontFamily: 'var(--mono)' }}>v1.2.2 (Current Stable)</span>
                </div>
                <span style={{ fontSize: '13px', fontFamily: 'var(--mono)', color: 'var(--t-3)' }}>Released: 2026-08-28</span>
              </div>

              <div style={{ display: 'grid', gap: '20px', fontSize: '14px', lineHeight: '1.6', color: 'var(--t-2)' }}>
                <div>
                  <h3 style={{ color: 'var(--ok)', fontSize: '15px', fontWeight: '700', marginBottom: '8px' }}>&#128736;&#65039; Fixed</h3>
                  <ul style={{ paddingLeft: '1.2rem', display: 'grid', gap: '4px' }}>
                    <li><strong>Your Toolbar Is Backed Up Before Anything Touches It:</strong> Installing now copies <code>reaper-menu.ini</code> to <code>REAPER/Virtue/Backups/</code> first, alongside a plain-English file explaining how to put it back. If an earlier version left you with a toolbar containing only the Virtue button, this one rebuilds it from <em>your</em> backup rather than from REAPER&rsquo;s defaults. A machine flattened before 1.2.2 has no backup to read, so it still gets the default repair &mdash; the protection starts here.</li>
                    <li><strong>Uninstalling No Longer Breaks The Toolbar:</strong> The uninstaller removed its own line from the toolbar file entirely. REAPER stops reading at the first missing position, so anyone who had moved the Virtue button towards the front of their toolbar lost everything after it &mdash; and reinstalling added past the gap, so it never came back. The slot is now cleared rather than deleted, and installing repairs a toolbar that already has a gap.</li>
                    <li><strong>Plugins You Removed Stop Appearing:</strong> VFxM was combining plugin lists from every processor architecture, while REAPER only maintains the one it is running. Plugins uninstalled long ago kept showing up from the lists REAPER had stopped updating. It now reads the same list REAPER does.</li>
                    <li><strong>A Crashing Plugin Is Not Tried Twice:</strong> When a plugin crashes REAPER during a thumbnail scan, VFxM records it so the scan can resume past it. That record was being written to one location and read from another, so the same plugin could be opened again and crash again. Both now agree, and <strong>Resume Crashed Scan</strong> works as intended.</li>
                    <li><strong>The Search Box Keeps What You Typed:</strong> The search cleared itself ten seconds after you clicked away &mdash; while you were still reading the results. It is now yours to control in Settings: on or off, with a delay from 0 to 30 seconds. Zero clears it immediately, and the default is twenty.</li>
                    <li><strong>Hidden Panels Stay Hidden:</strong> Updating could bring back panels you had deliberately closed. Your choice is now kept across versions.</li>
                    <li><strong>Scan Files Live In The Virtue Folder:</strong> Two files used by the plugin scanner were written loose in your REAPER folder instead of inside <code>Virtue/</code>. They now move across on update, so an existing scan blocklist is carried over rather than lost.</li>
                  </ul>
                </div>
              </div>
            </div>

            {/* Version 1.2.1 */}
            <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: '16px', padding: '32px' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '16px', borderBottom: '1px solid var(--line)', paddingBottom: '12px' }}>
                <div>
                  <span style={{ background: 'rgba(var(--accent-rgb), 0.15)', color: 'var(--accent-ink)', border: '1px solid rgba(var(--accent-rgb), 0.3)', padding: '4px 10px', borderRadius: '8px', fontSize: '14px', fontWeight: '800', fontFamily: 'var(--mono)' }}>v1.2.1</span>
                </div>
                <span style={{ fontSize: '13px', fontFamily: 'var(--mono)', color: 'var(--t-3)' }}>Released: 2026-08-27</span>
              </div>

              <div style={{ display: 'grid', gap: '20px', fontSize: '14px', lineHeight: '1.6', color: 'var(--t-2)' }}>
                <div>
                  <h3 style={{ color: 'var(--o)', fontSize: '15px', fontWeight: '700', marginBottom: '8px' }}>&#10024; Added</h3>
                  <ul style={{ paddingLeft: '1.2rem', display: 'grid', gap: '4px' }}>
                    <li><strong>Five Languages, Finished:</strong> Portuguese, Spanish, French, German and Italian now cover the whole interface, not part of it. Settings and the Plugin Manager were the largest gap and are complete; so are the trial and licence screens, which had been the first thing a non-English speaker read while deciding whether to buy.</li>
                    <li><strong>A Toolbar That Repairs Itself:</strong> If a previous install left you with a toolbar containing only the Virtue button, installing this version detects that and puts REAPER&rsquo;s own default buttons back. A toolbar you customised yourself is recognised and left alone.</li>
                  </ul>
                </div>

                <div>
                  <h3 style={{ color: 'var(--ok)', fontSize: '15px', fontWeight: '700', marginBottom: '8px' }}>&#128736;&#65039; Fixed</h3>
                  <ul style={{ paddingLeft: '1.2rem', display: 'grid', gap: '4px' }}>
                    <li><strong>The Installer No Longer Replaces Your Toolbar:</strong> REAPER keeps toolbar layouts in <code>reaper-menu.ini</code>. With no <code>[Main toolbar]</code> section, REAPER draws your theme&rsquo;s default toolbar &mdash; but the moment that section exists, it <em>is</em> the toolbar. The installer created that section containing only its own button, which silently replaced everything else. It now writes REAPER&rsquo;s defaults first and adds Virtue after them, on both platforms.</li>
                    <li><strong>VFxM Stays Behind REAPER&rsquo;s Own Windows:</strong> While the startup splash was showing, VFxM was promoted above every window &mdash; including the FX window you had just opened by clicking a track&rsquo;s FX button. From the outside that looked like VFxM had taken over the button. It is now only promoted while VFxM itself is the window you are using.</li>
                    <li><strong>Cancelling A Thumbnail Scan Keeps Your Thumbnails:</strong> Regenerating all thumbnails cleared the existing set before capturing anything, so stopping partway &mdash; or a crash, or quitting REAPER &mdash; lost the lot. Nothing is deleted up front any more. Each thumbnail is replaced as its own capture finishes, and stopping early simply leaves the rest as they were.</li>
                    <li><strong>Thumbnails Take Far Less Memory:</strong> Captures are written at a sensible size rather than full screen resolution, and the images held in video memory are capped and released when unused. On a large library that is roughly 1.8&nbsp;GB down to 256&nbsp;MB.</li>
                    <li><strong>Drop Onto Item Take FX:</strong> The Item Take FX section of the Active FX list now accepts a dropped plugin, as the Track FX section always did. All four section headers are drop targets rather than only the gaps between rows.</li>
                    <li><strong>The macOS Installer Leaves Your Files Alone:</strong> After installing, it offered to move the disk image to the Trash &mdash; and did so for whatever file backed the image, including copies on shared network volumes. It now only offers this for disk images inside your own home folder.</li>
                  </ul>
                </div>
              </div>
            </div>

            {/* Version 1.2.0 */}
            <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: '16px', padding: '32px' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '16px', borderBottom: '1px solid var(--line)', paddingBottom: '12px' }}>
                <div>
                  <span style={{ background: 'rgba(var(--accent-rgb), 0.15)', color: 'var(--accent-ink)', border: '1px solid rgba(var(--accent-rgb), 0.3)', padding: '4px 10px', borderRadius: '8px', fontSize: '14px', fontWeight: '800', fontFamily: 'var(--mono)' }}>v1.2.0</span>
                </div>
                <span style={{ fontSize: '13px', fontFamily: 'var(--mono)', color: 'var(--t-3)' }}>Released: 2026-08-23</span>
              </div>

              <div style={{ display: 'grid', gap: '20px', fontSize: '14px', lineHeight: '1.6', color: 'var(--t-2)' }}>
                <div>
                  <h3 style={{ color: 'var(--o)', fontSize: '15px', fontWeight: '700', marginBottom: '8px' }}>✨ Added</h3>
                  <ul style={{ paddingLeft: '1.2rem', display: 'grid', gap: '4px' }}>
                    <li><strong>Arrange The Window Yourself:</strong> Preview, Favorites, Notes, Plugins and Filters are no longer fixed in place. Drag a panel by its tab to move it, dock it beside another, or drop it onto another so the two share an area as tabs. Drag the dividers to resize. Your arrangement is remembered — positions, sizes, what is hidden, and whether tab bars show — through closing VFxM and quitting REAPER.</li>
                    <li><strong>A Shortcut For Everything, And You Pick The Key:</strong> Every action has a single-key shortcut and every one can be changed in Settings &gt; Shortcuts. Press <strong>H</strong> for the full list inside VFxM, showing the keys you actually bound. A key already in use is refused and the row names the action holding it, so nothing ends up double-bound.</li>
                    <li><strong>Panels On The Number Row:</strong> <strong>1</strong>–<strong>5</strong> show and hide the five panels, <strong>0</strong> resets the layout, <strong>V</strong> hides the tab bar of the panel under the mouse and <strong>A</strong> does it to all of them.</li>
                    <li><strong>Straight To A Bank:</strong> <strong>F1</strong>–<strong>F7</strong> jump directly to a favorites bank. <strong>B</strong> steps to the next bank that actually holds something, wrapping at the end and skipping empty ones.</li>
                    <li><strong>The Bank You Are On, Visible:</strong> The folder button shows the bank number beside its icon. Two banks can share a colour and an uncoloured bank had nothing to identify it; the number always does.</li>
                    <li><strong>Reordering Banks Reads Properly:</strong> Bank names are positional, so swapping two used to renumber both instantly and look like nothing happened. The rows now keep the numbers they arrived with for a moment, then fade into the new ones.</li>
                    <li><strong>Getting Around:</strong> <strong>Q</strong> and <strong>W</strong> move between Library and Active FX, <strong>S</strong> jumps to the search box, <strong>F</strong> finds the selected plugin in the list, <strong>X</strong> clears every filter.</li>
                  </ul>
                </div>

                <div>
                  <h3 style={{ color: 'var(--ok)', fontSize: '15px', fontWeight: '700', marginBottom: '8px' }}>🛠️ Fixed</h3>
                  <ul style={{ paddingLeft: '1.2rem', display: 'grid', gap: '4px' }}>
                    <li><strong>A Finished Trial No Longer Takes REAPER With It:</strong> If your trial had ended — or if VFxM simply could not read its trial file, which could happen after a reinstall — VFxM still stepped in front of REAPER’s own FX window, closed it, and put itself there with nothing to offer. You could not open any effect at all, including in an already-saved project. VFxM now requires a positive entitlement before standing in front of REAPER; anything else and it leaves your FX windows completely alone. The trial itself is unchanged.</li>
                    <li><strong>Filters Recovers Its Width:</strong> Narrowing the window took space from the Filters column and never gave it back, leaving labels stuck reading “Develop” and “Categor”. Widening restores it.</li>
                    <li><strong>Nothing Clipped At Any Size:</strong> The window will not shrink past the point where the toolbar is readable, and the shortcut list measures its own column so a longer name is never cut off by the key beside it.</li>
                    <li><strong>The Window Stops Disappearing:</strong> On macOS, switching to another application could leave VFxM apparently gone. It now stays where you left it and sits behind the app you moved to.</li>
                    <li><strong>What’s New Stays In Its Frame:</strong> On a shorter display its checkbox and OK button could be laid out past the panel’s own background. The notes now scroll inside it and the buttons are always fully visible.</li>
                    <li><strong>One Copy Of The Plug-in, Not Two:</strong> The macOS installer left a second copy in the system-wide folder. REAPER loaded both and could keep running the older one after an update. Only one is installed now.</li>
                    <li><strong>A Cleaner Windows Installer:</strong> It no longer carries stray macOS metadata files into your fonts folder, and is 2 MB smaller for it.</li>
                  </ul>
                </div>
              </div>
            </div>

            {/* Version 1.1.1 */}
            <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: '16px', padding: '32px' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '16px', borderBottom: '1px solid var(--line)', pb: '16px', paddingBottom: '12px' }}>
                <div>
                  <span style={{ background: 'rgba(var(--accent-rgb), 0.15)', color: 'var(--accent-ink)', border: '1px solid rgba(var(--accent-rgb), 0.3)', padding: '4px 10px', borderRadius: '8px', fontSize: '14px', fontWeight: '800', fontFamily: 'var(--mono)' }}>v1.1.1 (Superseded)</span>
                </div>
                <span style={{ fontSize: '13px', fontFamily: 'var(--mono)', color: 'var(--t-3)' }}>Released: 2026-08-13</span>
              </div>

              <div style={{ display: 'grid', gap: '20px', fontSize: '14px', lineHeight: '1.6', color: 'var(--t-2)' }}>
                <div>
                  <h3 style={{ color: 'var(--ok)', fontSize: '15px', fontWeight: '700', marginBottom: '8px' }}>🛠️ Fixed</h3>
                  <ul style={{ paddingLeft: '1.2rem', display: 'grid', gap: '4px' }}>
                    <li><strong>Your Licence Stays Put:</strong> On some machines the serial had to be entered again after every restart. That is resolved, and licences carry over automatically when you update.</li>
                    <li><strong>No More Reconnecting:</strong> Activate once and the machine stays licensed — indefinitely, even on a studio computer that never goes online.</li>
                    <li><strong>Calmer Dialogs:</strong> Windows stay inside VFxM, nothing dims behind them, and Escape closes what is on top rather than the whole app.</li>
                    <li><strong>Imported Chains Behave Like Everything Else:</strong> Artwork, notes and renaming now work on chains brought in from disk.</li>
                    <li><strong>Reliable Reordering:</strong> Dragging effects into a new order in Active FX now takes effect immediately, and changes made in REAPER are reflected straight away.</li>
                    <li><strong>Readable at Every Size:</strong> Buttons fit their labels in all supported languages, and text is no longer clipped on macOS.</li>
                  </ul>
                </div>

                <div>
                  <h3 style={{ color: 'var(--o)', fontSize: '15px', fontWeight: '700', marginBottom: '8px' }}>✨ Added</h3>
                  <ul style={{ paddingLeft: '1.2rem', display: 'grid', gap: '4px' }}>
                    <li><strong>Favorite Banks:</strong> As a favorites collection grows the tab row becomes a long, crowded line to hunt through. Banks add an optional second level above tabs: seven complete, independent sets of favorites, switched from the folder icon at the left of the tab row. Right-click the icon to give a bank its own colour; banks holding favorites show in bold, empty ones dimmed. Each bank remembers which tabs you had open, and any tab can be sent elsewhere with <strong>Move to Bank</strong>.</li>
                    <li><strong>Custom Categories From the Sidebar:</strong> A <strong>+</strong> button creates your own category without opening the Categories manager, and right-clicking any category chip opens a colour wheel to set its colour.</li>
                    <li><strong>Category Protection &amp; Reset:</strong> Renaming, recolouring or deleting a standard category now warns you first and offers to make it a user-defined category instead. A new <strong>Reset Categories to Default</strong> action restores scanned categories and clears overrides.</li>
                    <li><strong>Multi-Category Indicators:</strong> The colour square beside each plugin shows every category it belongs to — up to four — instead of one blended colour, with a hover tooltip listing them all by name. Larger, better spaced and right-aligned so plugin names stay flush left.</li>
                    <li><strong>Categorize as a Normal Window:</strong> The Categorize dialog is a movable, resizable panel rather than a blocking modal, and the right-click menu merges two near-identical entries into a single <strong>Categorize</strong>.</li>
                    <li><strong>Remembered Layout:</strong> VFxM reopens at the position, size and panel arrangement you left it in, and returns to a visible screen if a monitor is removed.</li>
                    <li><strong>Broken Plugins Made Obvious:</strong> Effects that failed to load are flagged in red in Active FX, with controls to take them offline, restore them or remove them.</li>
                    <li><strong>Sortable Browser Columns:</strong> Click Rating, Plugin or the new Developer column to sort; click again to reverse. The header row stays pinned while scrolling, columns have visible dividers, and a Color/Uncolor toggle sits at the bottom of the list.</li>
                    <li><strong>Cleaner Names &amp; Search:</strong> Redundant developer suffixes are stripped from plugin names automatically, and a visible × clears the search box.</li>
                    <li><strong>Drag Preview Thumbnails:</strong> Dragging a plugin to a track carries its thumbnail with the cursor, not just its name.</li>
                    <li><strong>Bring Your REAPER Setup Across:</strong> A new section lists your existing REAPER FX folders and saved .RfxChain files, each with a one-click Import to Favorites. Imported chains appear in the grid with their own badge and load on double-click or drag.</li>
                    <li><strong>Rename Inside a Tab:</strong> Give an individual plugin or chain its own display name within a favorites tab, without changing it anywhere else.</li>
                    <li><strong>Track-less Action Feedback:</strong> Hovering Add FX Preset or Add FX Chain with no track selected shows a clear orange prompt on the button instead of interrupting with a popup.</li>
                    <li><strong>Display Scaling 50%–150%:</strong> Comfortable on a laptop screen or a 4K display, with panels fitted to your real window size on first launch.</li>
                    <li><strong>Splash Screen Controls:</strong> Shows your installed version, can be switched off from the splash itself or Preferences, and has a solid background so it stays readable on light themes.</li>
                  </ul>
                </div>
              </div>
            </div>

            {/* Version 1.1.0 */}
            <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: '16px', padding: '32px', opacity: 0.85 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '16px', borderBottom: '1px solid var(--line)', pb: '16px', paddingBottom: '12px' }}>
                <div>
                  <span style={{ background: 'rgba(148, 163, 184, 0.12)', color: 'var(--t-2)', border: '1px solid var(--line)', padding: '4px 10px', borderRadius: '8px', fontSize: '14px', fontWeight: '800', fontFamily: 'var(--mono)' }}>v1.1.0 (Superseded)</span>
                </div>
                <span style={{ fontSize: '13px', fontFamily: 'var(--mono)', color: 'var(--t-3)' }}>Released: 2026-08-07</span>
              </div>

              <div style={{ display: 'grid', gap: '20px', fontSize: '14px', lineHeight: '1.6', color: 'var(--t-2)' }}>
                <div>
                  <h3 style={{ color: 'var(--o)', fontSize: '15px', fontWeight: '700', marginBottom: '8px' }}>✨ Added</h3>
                  <ul style={{ paddingLeft: '1.2rem', display: 'grid', gap: '4px' }}>
                    <li><strong>Integrated Customer & Analytics Portal:</strong> Real-time download trends and portal tools.</li>
                    <li><strong>Direct Support & Inquiry Service:</strong> Seamless contact support routing and ticket management.</li>
                    <li><strong>Automated Test Verification:</strong> Extended suite of internal stability and integration test coverage.</li>
                  </ul>
                </div>

                <div>
                  <h3 style={{ color: 'var(--warn)', fontSize: '15px', fontWeight: '700', marginBottom: '8px' }}>⚡ Changed</h3>
                  <ul style={{ paddingLeft: '1.2rem', display: 'grid', gap: '4px' }}>
                    <li><strong>Extended 10-Day Evaluation:</strong> Free trial evaluation extended to 10 full days with no credit card required.</li>
                    <li><strong>Enhanced Device Verification:</strong> Improved online verification reliability across different network environments.</li>
                  </ul>
                </div>

                <div>
                  <h3 style={{ color: 'var(--ok)', fontSize: '15px', fontWeight: '700', marginBottom: '8px' }}>🛠️ Fixed</h3>
                  <ul style={{ paddingLeft: '1.2rem', display: 'grid', gap: '4px' }}>
                    <li><strong>Stability & Crash Prevention:</strong> Resolved potential REAPER stability issue when refreshing plugin lists during heavy sessions.</li>
                    <li><strong>Smoother Large Libraries:</strong> Reduced slowdown when working with very large plugin collections.</li>
                    <li><strong>Activation Reliability:</strong> Fixed rare activation response errors when initializing trial licenses.</li>
                  </ul>
                </div>
              </div>
            </div>

            {/* Version 1.0.0 */}
            <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: '16px', padding: '32px', opacity: 0.85 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '16px', borderBottom: '1px solid var(--line)', paddingBottom: '12px' }}>
                <div>
                  <span style={{ background: 'rgba(var(--overlay-rgb), 0.08)', color: 'var(--t-2)', border: '1px solid var(--line)', padding: '4px 10px', borderRadius: '8px', fontSize: '14px', fontWeight: '800', fontFamily: 'var(--mono)' }}>v1.0.0</span>
                </div>
                <span style={{ fontSize: '13px', fontFamily: 'var(--mono)', color: 'var(--t-3)' }}>Released: 2026-08-02</span>
              </div>

              <div style={{ display: 'grid', gap: '12px', fontSize: '14px', lineHeight: '1.6', color: 'var(--t-2)' }}>
                <h3 style={{ color: 'var(--t)', fontSize: '15px', fontWeight: '700' }}>Initial Commercial Launch</h3>
                <ul style={{ paddingLeft: '1.2rem', display: 'grid', gap: '4px' }}>
                  <li>First commercial release of Virtue FX Manager (VFxM) for Cockos REAPER on macOS and Windows.</li>
                  <li>Visual plugin browser with custom thumbnails, favorite tabs, and preset chains.</li>
                  <li>Secure online license activation and multi-machine device management.</li>
                  <li>Signed native installers with Apple Developer ID and notarization validation.</li>
                </ul>
              </div>
            </div>

          </div>
        </section>
      </main>
      <SiteFooter base="../" />
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ChangelogPage />);
