// wiki-sections.jsx — content section components
const { useState, useEffect, useRef } = React;

// Render the raw HTML extracted from the original .docx — preserves
// bold/italic/highlights/colors and embeds the original images.
function ChapterBody({ chapter }) {
  return (
    <div
      className="docx-body"
      dangerouslySetInnerHTML={{ __html: chapter.body || chapter.html || '' }}
    />
  );
}

// --- Setup guide as Tabs ---
function SetupGuideTabs() {
  const chapters = (typeof window !== 'undefined' && window.SETUP_CHAPTERS) || [];
  const [active, setActive] = useState(chapters.length ? chapters[0].id : null);
  if (!chapters.length) return <p>No chapters available.</p>;
  const ch = chapters.find(c => c.id === active) || chapters[0];
  return (
    <div className="guide-tabs">
      <div className="tab-row" style={{ overflowX: 'auto' }}>
        {chapters.map(c => (
          <button
            key={c.id}
            className={'sk-tab' + (active === c.id ? ' active' : '')}
            onClick={() => setActive(c.id)}
          >
            {c.title.replace(/^Appendix [A-E]:\s*/, 'App. ').replace(/\s*\(.*\)$/, '').slice(0, 28)}
          </button>
        ))}
      </div>
      <div className="tab-content">
        <h2 className="sk-wobble">{ch.title}</h2>
        <ChapterBody chapter={ch} />
      </div>
    </div>
  );
}

// --- Setup guide as Stepper (numbered, sequential) ---
function SetupGuideStepper() {
  const chapters = (typeof window !== 'undefined' && window.SETUP_CHAPTERS) || [];
  const [idx, setIdx] = useState(0);
  if (!chapters.length) return <p>No chapters available.</p>;
  const ch = chapters[idx];
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px', flexWrap: 'wrap' }}>
        <span className="sk-pill blue">step {idx + 1} of {chapters.length}</span>
        <div style={{ flex: 1, height: '4px', background: 'var(--paper-shade)', borderRadius: '2px', minWidth: '120px' }}>
          <div style={{ width: `${(idx + 1) / chapters.length * 100}%`, height: '100%', background: 'var(--neon-red)', borderRadius: '2px' }} />
        </div>
        <button className="sk-btn" disabled={idx === 0} onClick={() => setIdx(i => Math.max(0, i - 1))}>← back</button>
        <button className="sk-btn primary" disabled={idx === chapters.length - 1} onClick={() => setIdx(i => Math.min(chapters.length - 1, i + 1))}>next →</button>
      </div>
      <div className="sk-card">
        <h2 className="sk-wobble">{ch.title}</h2>
        <ChapterBody chapter={ch} />
      </div>
    </div>
  );
}

// --- Setup guide as Accordion ---
function SetupGuideAccordion() {
  const chapters = (typeof window !== 'undefined' && window.SETUP_CHAPTERS) || [];
  const [open, setOpen] = useState(new Set(chapters.length ? [chapters[0].id] : []));
  const toggle = (id) => {
    setOpen(prev => {
      const n = new Set(prev);
      if (n.has(id)) n.delete(id); else n.add(id);
      return n;
    });
  };
  // Expose imperative API so sidebar TOC can open & scroll to a chapter
  useEffect(() => {
    window.__openSetupChapter = (id) => {
      setOpen(prev => {
        const n = new Set(prev);
        n.add(id);
        return n;
      });
      // After it expands, scroll to the head
      setTimeout(() => {
        const el = document.getElementById('ch-' + id);
        if (el) {
          const y = el.getBoundingClientRect().top + window.scrollY - 32;
          window.scrollTo({ top: y, behavior: 'smooth' });
        }
      }, 50);
    };
    return () => { delete window.__openSetupChapter; };
  }, []);
  return (
    <div>
      {chapters.map(ch => (
        <div key={ch.id} id={'ch-' + ch.id} className="accordion-item" data-chapter-id={ch.id}>
          <div className="accordion-head" onClick={() => toggle(ch.id)}>
            <span>{ch.title}</span>
            <span style={{ fontSize: '0.9em', fontFamily: 'var(--font-mono)' }}>{open.has(ch.id) ? '−' : '+'}</span>
          </div>
          {open.has(ch.id) && (
            <div className="accordion-body">
              <ChapterBody chapter={ch} />
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

// --- Setup guide as long scroll ---
function SetupGuideScroll() {
  const chapters = (typeof window !== 'undefined' && window.SETUP_CHAPTERS) || [];
  return (
    <div>
      {chapters.map(ch => (
        <section key={ch.id} id={'sg-' + ch.id} className="scroll-section sk-card">
          <h3 className="sk-wobble">{ch.title}</h3>
          <ChapterBody chapter={ch} />
        </section>
      ))}
    </div>
  );
}

function SetupGuide({ format }) {
  if (format === 'tabs') return <SetupGuideTabs />;
  if (format === 'stepper') return <SetupGuideStepper />;
  if (format === 'accordion') return <SetupGuideAccordion />;
  return <SetupGuideScroll />;
}

// ─── Other content sections ───

function HeroCopy({ onJumpSetup }) {
  return (
    <div>
      <span className="sk-pill red" style={{ marginBottom: 14, display: 'inline-block' }}>NEW · Wireless Edition</span>
      <img
        src="assets/logos/virtuatilt-logo.jpg"
        alt="VirtuaTilt"
        style={{
          display: 'block',
          width: '100%',
          maxWidth: 320,
          height: 'auto',
          borderRadius: 14,
          marginBottom: 18,
          boxShadow: 'var(--shadow-sketch-lg)',
          border: '2px solid var(--ink)',
        }}
      />
      <h1 style={{ fontSize: 'clamp(1.6rem, 2.6vw, 2.2rem)', margin: '0 0 12px', fontWeight: 600, lineHeight: 1.15 }}>
        Wireless Edition
      </h1>
      <p style={{ fontSize: '1.35rem', maxWidth: '62ch', lineHeight: 1.5, color: 'var(--ink-soft)' }}>
        The most advanced virtual pinball controller. Now untethered — Bluetooth Low Energy
        for Meta Quest VR & Windows PC, plus full USB cabinet mode whenever you want it.
      </p>
      <div style={{ display: 'flex', gap: 10, marginTop: 18, flexWrap: 'wrap' }}>
        <button className="sk-btn primary" onClick={onJumpSetup}>read setup guide →</button>
        <a className="sk-btn" href="https://www.3dptronics.com/retro-arcade/wireless-virtuatilt-the-most-advanced-virtual-pinball-controller-by-3dptronics" target="_blank" rel="noreferrer">buy now</a>
      </div>
    </div>
  );
}

function FeaturesSection() {
  const features = [
    { icon: '✦', title: 'Wireless BLE', body: 'Bluetooth Low Energy module pairs to Quest 2/3/Pro and any Windows PC. No cable needed.' },
    { icon: '⌁', title: 'Wired Mode', body: 'Unlock full potential with 3 Solenoids and a Shaker Motor, driven by DOF/DOFLinx.' },
    { icon: '◎', title: 'Profile-identity LED', body: 'Central-button LED with 8 customizable color slots — hold a button at boot to load its profile and show its color.' },
    { icon: '☷', title: 'Bundled profiles', body: 'Plug-and-play Bluetooth + USB profiles for every supported pinball game and host — Quest, PC and more.' },
    { icon: '⚙', title: 'Complete Tuning', body: 'Solenoid strength, shaker cap, accelerometer noise floor, plunger calibration — all in GUI.' },
    { icon: '⤓', title: 'OTA updates', body: 'Optional Wi-Fi setup unlocks over-the-air firmware updates for the wireless module.' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 14 }}>
      {features.map((f, i) => (
        <div key={i} className="feature">
          <div className="icon-blob">{f.icon}</div>
          <div>
            <h4 style={{ margin: '0 0 4px' }}>{f.title}</h4>
            <p style={{ margin: 0, fontSize: '0.95rem', color: 'var(--ink-soft)' }}>{f.body}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

function BoxContents() {
  const items = [
    'Wireless VirtuaTilt cabinet (USB cable pre-attached to the Pico)',
    '12V AC Power Adapter and Power Switch',
    'Spare Fuse (for the MOS board) and extra Solenoid mount',
    '(OPTIONALS) USB-C OTG Adapter / Anti-Slip Discs',
    'Access to Redist/ folder with latest tools and profiles',
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 10 }}>
      {items.map((t, i) => (
        <div key={i} className="sk-box" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="sk-step-num">{i + 1}</span>
          <span>{t}</span>
        </div>
      ))}
    </div>
  );
}

function QuickStart() {
  const steps = [
    'Plug VirtuaTilt into your PC via USB.',
    'Open GUIConfigTool from the redist/ folder.',
    'Configuration tab → File → Import the profile for your Virtual Pinball game.',
    'Click "Program Pico" — wait for the LED to change color.',
    'On Quest/PC: Bluetooth → Pair "VirtuaTilt" or similar (depends on profile).',
    'Launch your Virtual Pinball game and have fun!',
  ];
  return (
    <div className="sk-card">
      <h3 className="sk-wobble">Quick start (60 seconds)</h3>
      <ol style={{ paddingLeft: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {steps.map((s, i) => (
          <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <span className="sk-step-num red">{i + 1}</span>
            <span style={{ paddingTop: 4 }}>{s}</span>
          </li>
        ))}
      </ol>
    </div>
  );
}

function ThemeGallery({ theme, setTheme }) {
  const [zoom, setZoom] = useState(null);
  const themeMeta = [
    { key: 'newtheme', label: 'Current Default Theme', file: 'newtheme-front.png', full: 'newtheme-full.jpg' },
    { key: 'standard', label: 'Previous Theme',        file: 'standard-front.png', full: 'standard-full.jpg' },
    { key: 'nextgen',  label: 'NextGen Theme',         file: 'nextgen-front.png',  full: 'nextgen-full.jpg' },
  ];
  useEffect(() => {
    if (!zoom) return;
    const onKey = e => { if (e.key === 'Escape') setZoom(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [zoom]);
  const zoomMeta = zoom ? themeMeta.find(t => t.key === zoom) : null;
  return (
    <div>
      <p style={{ color: 'var(--ink-soft)', marginTop: 0 }}>
        Three decal themes ship with every Wireless VirtuaTilt — click a theme to preview the full sheet.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 14 }}>
        {themeMeta.map(t => (
          <div
            key={t.key}
            className={'sk-card' + (theme === t.key ? ' sk-card-accent-red' : '')}
            style={{ cursor: 'pointer', padding: 0, overflow: 'hidden' }}
            onClick={() => { setTheme(t.key); setZoom(t.key); }}
          >
            <img
              src={`assets/decals/${t.file}`}
              alt={t.label}
              style={{ width: '100%', height: 130, objectFit: 'cover', display: 'block', borderBottom: '1.5px solid var(--ink)' }}
            />
            <div style={{ padding: '10px 14px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: '1.2rem', fontWeight: 700 }}>
                  {t.label}
                </span>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--ink-faint)', textTransform: 'uppercase', letterSpacing: '0.06em', marginTop: 3 }}>
                click to expand
              </div>
            </div>
          </div>
        ))}
      </div>
      {zoomMeta && (
        <div
          onClick={() => setZoom(null)}
          style={{ position: 'fixed', inset: 0, background: 'rgba(20,18,14,0.88)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 32, cursor: 'zoom-out' }}
        >
          <div style={{ position: 'relative', maxWidth: '95vw', maxHeight: '92vh' }} onClick={e => e.stopPropagation()}>
            <img
              src={`assets/themes/${zoomMeta.full}`}
              alt={zoomMeta.label}
              style={{ maxWidth: '95vw', maxHeight: '88vh', display: 'block', borderRadius: 6, boxShadow: '0 20px 60px rgba(0,0,0,0.6)' }}
            />
            <button
              onClick={() => setZoom(null)}
              style={{ position: 'absolute', top: -14, right: -14, width: 40, height: 40, borderRadius: '50%', border: '2px solid #fff', background: '#1a1a1a', color: '#fff', fontSize: 18, cursor: 'pointer', boxShadow: '0 4px 12px rgba(0,0,0,0.4)' }}
              aria-label="Close"
            >×</button>
            <div style={{ position: 'absolute', bottom: 12, left: 12, padding: '6px 12px', background: 'rgba(0,0,0,0.7)', color: '#fff', borderRadius: 4, fontFamily: 'var(--font-display)', fontSize: '0.95rem', fontWeight: 700, letterSpacing: '0.04em' }}>
              {zoomMeta.label}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function CompatMatrix() {
  const games = ['VPX (PC)', 'Future Pinball (PC)', 'Pinball FX (PC)', 'Steam pinball', 'Pinball FX VR', 'Star Wars Pinball VR', 'VR Classics'];
  const hosts = [
    { name: 'Quest 2/3/Pro (BT)', mode: ['—', '—', '—', '—', 'FXVR_XAM', 'StarWarsVR', 'VRClassics'] },
    { name: 'Windows PC (BT)',   mode: ['VPX-FP', 'VPX-FP', 'STEAM-Xbox', 'STEAM-Xbox', 'STEAM-Xbox', '—', '—'] },
    { name: 'Windows PC (USB)',  mode: ['VPX-DOF', 'FP-DOF', 'FX-DOFLinx', 'STEAM-XInput', '—', '—', '—'] },
  ];
  return (
    <div style={{ overflowX: 'auto' }}>
      <table className="compat">
        <thead>
          <tr>
            <th>Host / Mode</th>
            {games.map(g => <th key={g}>{g}</th>)}
          </tr>
        </thead>
        <tbody>
          {hosts.map(h => (
            <tr key={h.name}>
              <td><b>{h.name}</b></td>
              {h.mode.map((m, i) => (
                <td key={i} className={m === '—' ? 'no' : 'yes'}>{m}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function FAQ() {
  const items = [
    { q: 'Do I need DOF or DOFLinx?', a: 'No — for Bluetooth play with the STEAM-Xbox profile, Steam recognizes the cabinet as an Xbox Wireless Controller natively. Solenoid + shaker + plunger work out of the box. DOF/DOFLinx is only needed for PC-USB profiles.' },
    { q: 'Cabinet doesn\'t show up on Quest Bluetooth scan?', a: 'Confirm a profile is loaded — check the LED is lit and the right color. If the LED is off, no profile is loaded — re-load via GUIConfigTool.' },
    { q: 'USB 3.0 disconnects every few seconds.', a: 'Switch to a USB 2.0 motherboard rear port. Avoid front-panel ports and USB hubs during initial setup.' },
    { q: 'Plunger pairs but stops responding after a few seconds on Quest.', a: 'This was an old issue, fixed in firmware shipped with current redist. Confirm Build IDs match HASHES.txt.' },
    { q: 'Can I use it without Wi-Fi?', a: 'Absolutely. Wi-Fi setup is OPTIONAL — only needed for over-the-air wireless-module updates. Bluetooth pairing works without it.' },
    { q: 'Is the shaker safe at full strength?', a: 'Yes — built-in protective timers prevent overheating regardless of cap value. You can lower it for late-night play in the profile JSON.' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      {items.map((it, i) => (
        <details key={i} className="accordion-item">
          <summary className="accordion-head" style={{ listStyle: 'none' }}>{it.q}</summary>
          <div className="accordion-body">{it.a}</div>
        </details>
      ))}
    </div>
  );
}

function Downloads() {
  const dls = [
    { name: 'Configuration Guides', href: 'https://github.com/3DPTronics/VirtuaTilt/tree/main/Configuration%20Guides/Wireless%20VirtuaTilt' },
    { name: 'LED Reference card', href: 'https://github.com/3DPTronics/VirtuaTilt/blob/main/Configuration%20Guides/Wireless%20VirtuaTilt/VirtuaTilt-LED-Reference.jpg' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 10 }}>
      {dls.map((d, i) => (
        <a key={i} href={d.href} target={d.href.startsWith('http') ? '_blank' : undefined} rel={d.href.startsWith('http') ? 'noreferrer' : undefined} className="sk-card" style={{ display: 'flex', alignItems: 'center', boxShadow: 'none' }}>
          <span><span style={{ fontFamily: 'var(--font-mono)', color: 'var(--ink)' }}>↓</span> {d.name}</span>
        </a>
      ))}
    </div>
  );
}

function Support() {
  return (
    <div className="sk-card">
      <h3 className="sk-wobble" style={{ marginTop: 0 }}>Support & Contact</h3>
      <p>Need help or have questions? Reach out via:</p>
      <ul>
        <li><a href="https://www.3dptronics.com/" target="_blank" rel="noreferrer">3dptronics.com</a> — Official Website</li>
        <li><a href="https://github.com/3DPTronics/VirtuaTilt" target="_blank" rel="noreferrer">github.com/3DPTronics/VirtuaTilt</a> — VirtuaTilt GitHub landing page</li>
        <li><a href="https://www.youtube.com/@3dptronics" target="_blank" rel="noreferrer">youtube.com/@3dptronics</a> — Official 3DPTronics YouTube channel</li>
        <li><a href="https://discordapp.com/users/927614895984365618/" target="_blank" rel="noreferrer">Discord</a> — Discord chat</li>
      </ul>
    </div>
  );
}

// ─── Support Scope (full disclaimer) ───────────────────────────────────────
// Mirrors the canonical disclaimer on GitHub:
// https://github.com/3DPTronics/VirtuaTilt/blob/main/Configuration%20Guides/readme.md
function SupportScope() {
  const supported = [
    ['🎮', 'VirtuaTilt controller', 'Wired and Wireless editions, all hardware components'],
    ['💾', 'Pinscape Pico firmware', 'Updates, OTA flashing, recovery via Updater Tool'],
    ['📋', 'Bundled profiles', 'All BT and USB profiles shipped in the redist'],
    ['⚙️', 'GUIConfigTool', 'Configuration, calibration, profile loading, output testing'],
    ['🔧', 'Wireless Kit', 'Wireless hardware kit for existing VirtuaTilt owners'],
    ['📦', 'Accessories', 'Anything shipped directly by 3DPTronics'],
  ];
  const notSupported = [
    ['🎲', 'Virtual Pinball Game engines', 'VPX, Visual Pinball, Future Pinball, BAM', [['VPForums', 'https://vpforums.org/'], ['VP Universe', 'https://vpuniverse.com/']]],
    ['🕹️', 'Virtual Pinball titles', 'Pinball FX / FX2 / FX3 / VR / M, Star Wars Pinball VR', [['Zen Studios support', 'https://support.zenstudios.com/']]],
    ['💥', 'Feedback frameworks', 'DOF (Direct Output Framework), DOFLinx', [['DOF on GitHub', 'https://github.com/DirectOutput/DirectOutput'], ['DOFLinx wiki', 'https://doflinx.github.io/docs/']]],
    ['🎨', 'DMD / extras', 'DMDExt, PinEvent V2, PuP-Packs / PUP-Stream', [['VP Universe', 'https://vpuniverse.com/']]],
    ['🚀', 'Frontends', 'PinUP Popper, Baller Installer, LaunchBox / BigBox', [['Popper forum', 'https://vpuniverse.com/forums/forum/162-pinup-popper-baller-installer/']]],
    ['🎬', 'Emulators / ROMs', 'MAME, pinball ROMs', [['MAMEdev', 'https://mamedev.org/']]],
    ['💻', 'System-level', 'Windows, GPU/audio drivers, USB controllers', [['Microsoft / vendor support', '#']]],
  ];
  const community = [
    ['Visual Pinball X', [['vpforums.org', 'https://vpforums.org/'], ['vpuniverse.com', 'https://vpuniverse.com/']]],
    ['Future Pinball + BAM', [['VPU Future Pinball forum', 'https://vpuniverse.com/forums/forum/77-future-pinball/']]],
    ['Future Pinball + BAM AIO', [['VPU file 14807 — FP+BAM Essentials AIO', 'https://vpuniverse.com/files/file/14807-future-pinball-and-bam-essentials-all-in-one/']]],
    ['DOF', [['github.com/DirectOutput/DirectOutput', 'https://github.com/DirectOutput/DirectOutput']]],
    ['DOFLinx', [['doflinx.github.io/docs', 'https://doflinx.github.io/docs/index.html']]],
    ['Pinball FX family', [['Zen Studios Support', 'https://support.zenstudios.com/']]],
    ['PinUP Popper', [['VPU PinUP Popper forum', 'https://vpuniverse.com/forums/forum/162-pinup-popper-baller-installer/']]],
    ['MAME', [['mamedev.org', 'https://mamedev.org/']]],
  ];
  return (
    <div>
      <div className="sk-card sk-card-accent-red" style={{ marginBottom: 20, padding: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
          <span style={{ fontSize: '1.8rem' }}>⚠️</span>
          <h3 className="sk-wobble" style={{ margin: 0, fontSize: '1.5rem' }}>Read this first</h3>
        </div>
        <p style={{ margin: 0, fontSize: '1.02rem', lineHeight: 1.55 }}>
          <strong>3DPTronics supports the VirtuaTilt controller hardware only.</strong>{' '}
          These guides are a <em>compendium</em> to help you connect your VirtuaTilt to third-party pinball software (VPX, Future Pinball + BAM, DOF/DOFLinx, PinEvent, PinUP Popper, etc.).{' '}
          We do <strong>not</strong> provide official support for any third-party software referenced here — for software-specific issues, please refer to each project's own documentation and community channels.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 24 }}>
        <div className="sk-card" style={{ borderTop: '4px solid #2b8a3e' }}>
          <h3 style={{ marginTop: 0, color: '#2b8a3e' }}>✅ Officially supported</h3>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.92rem' }}>
            <tbody>
              {supported.map(([icon, name, detail]) => (
                <tr key={name} style={{ borderBottom: '1px solid var(--paper-line)' }}>
                  <td style={{ padding: '8px 6px', verticalAlign: 'top', fontSize: '1.1rem', width: 28 }}>{icon}</td>
                  <td style={{ padding: '8px 6px', verticalAlign: 'top' }}>
                    <strong>{name}</strong><br />
                    <span style={{ color: 'var(--ink-soft)', fontSize: '0.86rem' }}>{detail}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="sk-card" style={{ borderTop: '4px solid var(--neon-red)' }}>
          <h3 style={{ marginTop: 0, color: 'var(--neon-red)' }}>❌ Not supported</h3>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.92rem' }}>
            <tbody>
              {notSupported.map(([icon, cat, examples, links]) => (
                <tr key={cat} style={{ borderBottom: '1px solid var(--paper-line)' }}>
                  <td style={{ padding: '8px 6px', verticalAlign: 'top', fontSize: '1.1rem', width: 28 }}>{icon}</td>
                  <td style={{ padding: '8px 6px', verticalAlign: 'top' }}>
                    <strong>{cat}</strong><br />
                    <span style={{ color: 'var(--ink-soft)', fontSize: '0.86rem' }}>{examples}</span><br />
                    <span style={{ fontSize: '0.82rem', color: 'var(--ink-faint)' }}>
                      Help:{' '}
                      {links.map(([t, u], i) => (
                        <React.Fragment key={t}>
                          {i > 0 && ' · '}
                          {u !== '#'
                            ? <a href={u} target="_blank" rel="noreferrer">{t}</a>
                            : <span>{t}</span>}
                        </React.Fragment>
                      ))}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="sk-card" style={{ marginBottom: 20, background: '#fff9e6', borderColor: '#d4b106' }}>
        <p style={{ margin: 0, fontSize: '0.94rem', lineHeight: 1.55 }}>
          <strong>ⓘ Note:</strong> These configuration guides are a <strong>compendium</strong> — we provide them as a courtesy to save you the hunt across multiple sites. The information is best-effort and kept reasonably current, but is <strong>not</strong> official documentation of those projects.
        </p>
      </div>

      <div className="sk-card" style={{ marginBottom: 20 }}>
        <h3 style={{ marginTop: 0 }}>🌐 Community help for software</h3>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.9rem' }}>
          <thead>
            <tr style={{ borderBottom: '2px solid var(--ink)' }}>
              <th style={{ padding: '8px 10px', textAlign: 'left' }}>Project</th>
              <th style={{ padding: '8px 10px', textAlign: 'left' }}>Community</th>
            </tr>
          </thead>
          <tbody>
            {community.map(([proj, links]) => (
              <tr key={proj} style={{ borderBottom: '1px solid var(--paper-line)' }}>
                <td style={{ padding: '8px 10px', verticalAlign: 'top' }}><strong>{proj}</strong></td>
                <td style={{ padding: '8px 10px', verticalAlign: 'top' }}>
                  {links.map(([t, u], i) => (
                    <React.Fragment key={t}>
                      {i > 0 && ' · '}
                      <a href={u} target="_blank" rel="noreferrer">{t}</a>
                    </React.Fragment>
                  ))}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="sk-card" style={{ background: 'var(--paper-shade)' }}>
        <h3 style={{ marginTop: 0 }}>💡 Why this matters</h3>
        <p style={{ marginBottom: 8 }}>
          Our team is small and our expertise is the VirtuaTilt hardware. We cannot debug VPX scripts, troubleshoot flaky BAM installs, or fix broken DOF chains — those communities have their own experts who will help you far better than we can.
        </p>
        <p style={{ margin: 0 }}>
          The <strong>AI chatbot on this wiki</strong> can help connect VirtuaTilt with most of the software above (we've fed it all the docs). For deeper or vendor-specific issues, please reach out to the appropriate community first.
        </p>
      </div>

    </div>
  );
}

Object.assign(window, {
  SetupGuide, HeroCopy, FeaturesSection, BoxContents, QuickStart,
  ThemeGallery, CompatMatrix, FAQ, Downloads, Support, SupportScope,
});