---
import { Code } from 'astro:components';
import { REPO, CRATES } from '../consts';
// Single source of truth for install commands → site/src/install.json. The README
// regenerates its install block from the same file (gen-readme-check), so the site and
// README can't drift — the site shows every method, the README only the ones
// flagged `readme: true`.
import tabs from '../install.json';
---

<section id="install" class="install" data-floor="1">
  <div class="container">
    <div class="section-head reveal">
      <p class="eyebrow">1F · front desk — get it</p>
      <h2>Install pixtuoid.</h2>
      <p class="lead">
        macOS, Linux &amp; Windows. Then <code>pixtuoid install-hooks</code> and <code
          >pixtuoid run</code
        >.
      </p>
    </div>

    <div class="install__box card reveal">
      <div class="install__tabs" role="group" aria-label="Install method">
        {
          tabs.map((t, i) => (
            <button
              class:list={['install__tab', { 'is-active': i === 0 }]}
              data-tab={t.id}
              aria-pressed={i === 0 ? 'true' : 'false'}
              aria-controls={`install-panel-${t.id}`}
            >
              {t.label}
            </button>
          ))
        }
      </div>

      {
        tabs.map((t, i) => (
          <div
            id={`install-panel-${t.id}`}
            class:list={['install__panel', { 'is-active': i === 0 }]}
            data-panel={t.id}
          >
            <Code code={t.cmds.join('\n')} lang="bash" />
            <button class="install__copy" data-copy={t.cmds.join('\n')} aria-label="Copy command">
              Copy
            </button>
          </div>
        ))
      }

      <p class="install__note">
        Also on <a href={CRATES} target="_blank" rel="noreferrer">crates.io</a> · prebuilt binaries on
        <a href={`${REPO}/releases`} target="_blank" rel="noreferrer">Releases</a>.
      </p>
    </div>
  </div>
</section>

<script is:inline>
  (function () {
    const box = document.querySelector('.install__box');
    if (!box) return;
    box.querySelectorAll('.install__tab').forEach(function (tab) {
      tab.addEventListener('click', function () {
        const id = tab.dataset.tab;
        box.querySelectorAll('.install__tab').forEach(function (t) {
          const on = t === tab;
          t.classList.toggle('is-active', on);
          t.setAttribute('aria-pressed', on ? 'true' : 'false');
        });
        box.querySelectorAll('.install__panel').forEach(function (p) {
          p.classList.toggle('is-active', p.dataset.panel === id);
        });
      });
    });
    box.querySelectorAll('.install__copy').forEach(function (btn) {
      let restore = 0;
      // capture the resting label ONCE — not after a click, or a rapid second
      // click would capture 'Copied ✓' and the button would stick on it
      const LABEL = (btn.textContent || 'Copy').trim();
      function flash(msg) {
        btn.textContent = msg;
        clearTimeout(restore); // a fresh click cancels the previous restore timer
        restore = setTimeout(function () {
          btn.textContent = LABEL;
        }, 1600);
      }
      function manual() {
        // no / blocked Clipboard API (insecure context, old browser): select the
        // command so the user can copy it, and say so — don't fail silently.
        const code = btn.parentElement && btn.parentElement.querySelector('code');
        const sel = window.getSelection && window.getSelection();
        if (code && sel) {
          const range = document.createRange();
          range.selectNodeContents(code);
          sel.removeAllRanges();
          sel.addRange(range);
        }
        flash('Select & copy');
      }
      btn.addEventListener('click', function () {
        if (!navigator.clipboard || !navigator.clipboard.writeText) {
          manual();
          return;
        }
        navigator.clipboard
          .writeText(btn.dataset.copy)
          .then(function () {
            flash('Copied ✓');
          })
          .catch(manual);
      });
    });
  })();
</script>

<style>
  .install__box {
    max-width: 680px;
    padding: 0.6rem;
    overflow: hidden;
  }
  .install__tabs {
    display: flex;
    gap: 0.3rem;
    padding: 0.4rem 0.4rem 0;
  }
  .install__tab {
    flex: 1;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.86rem;
    padding: 0.55rem 0.6rem;
    border: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: transparent;
    color: var(--fg-muted);
    cursor: pointer;
  }
  .install__tab.is-active {
    color: var(--fg);
    background: var(--surface-2);
  }
  .install__panel {
    display: none;
    position: relative;
    margin: 0.4rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
  }
  .install__panel.is-active {
    display: block;
  }
  /* frame the Shiki <Code> output like the old code box (it brings its own
     theme background + per-token colors) */
  .install__panel :global(pre) {
    margin: 0;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    font-size: 0.92rem;
    line-height: 1.6;
  }
  .install__panel :global(pre code) {
    font-family: var(--font-mono);
  }
  .install__copy {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #f3ede3;
    cursor: pointer;
  }
  .install__copy:hover {
    background: var(--coral);
    border-color: var(--coral);
    color: #fff;
  }
  .install__note {
    padding: 0.4rem 0.7rem 0.6rem;
    font-size: 0.9rem;
    color: var(--fg-muted);
  }
</style>
