---
import CopyButton from '../ui/CopyButton.astro';
---

<section class="py-20" id="install">
  <div class="section-divider mb-20"></div>
  <div class="max-w-2xl mx-auto px-6">
    <div class="text-center mb-12">
      <h2 class="font-heading text-2xl sm:text-3xl text-noir-50 mb-3">Install</h2>
    </div>

    <!-- Install commands -->
    <div class="bg-noir-900 border border-noir-800 rounded-xl p-5 mb-4">
      <div class="flex flex-col gap-3 font-mono text-sm">
        <div class="flex items-center justify-between bg-noir-950 border border-noir-800 rounded-md px-4 py-2.5">
          <code class="text-fox">npx foxguard .</code>
          <CopyButton text="npx foxguard ." />
        </div>
        <div class="flex items-center justify-between bg-noir-950 border border-noir-800 rounded-md px-4 py-2.5">
          <code class="text-fox">brew install peaktwilight/tap/foxguard</code>
          <CopyButton text="brew install peaktwilight/tap/foxguard" />
        </div>
        <div class="flex items-center justify-between bg-noir-950 border border-noir-800 rounded-md px-4 py-2.5">
          <code class="text-fox">cargo install foxguard</code>
          <CopyButton text="cargo install foxguard" />
        </div>
      </div>
    </div>

    <!-- VS Code -->
    <a
      href="https://marketplace.visualstudio.com/items?itemName=peaktwilight.foxguard"
      target="_blank"
      rel="noopener"
      class="flex items-center justify-between bg-noir-900 border border-noir-800 rounded-xl p-5 mb-10 no-underline hover:no-underline hover:border-noir-700 transition-colors"
    >
      <div>
        <div class="font-mono text-[10px] uppercase tracking-wider text-noir-600 mb-1">VS Code / Cursor</div>
        <div class="text-sm text-noir-300">Scans on save, shows findings as underlines</div>
      </div>
      <span class="shrink-0 text-fox text-sm font-medium ml-4">Install &rarr;</span>
    </a>

    <!-- Quick start -->
    <div class="bg-noir-900 border border-noir-800 rounded-xl p-5">
      <div class="font-mono text-[10px] uppercase tracking-wider text-noir-600 mb-4">Quick start</div>
      <div class="flex flex-col gap-2.5 font-mono text-[12px]">
        <div class="flex items-start gap-3">
          <span class="text-noir-600 select-none shrink-0">1.</span>
          <div>
            <code class="text-noir-300">foxguard init</code>
            <span class="text-noir-600 ml-2">pre-commit hook + config</span>
          </div>
        </div>
        <div class="flex items-start gap-3">
          <span class="text-noir-600 select-none shrink-0">2.</span>
          <div>
            <code class="text-noir-300">foxguard .</code>
            <span class="text-noir-600 ml-2">scan everything</span>
          </div>
        </div>
        <div class="flex items-start gap-3">
          <span class="text-noir-600 select-none shrink-0">3.</span>
          <div>
            <code class="text-noir-300">foxguard --changed .</code>
            <span class="text-noir-600 ml-2">scan only modified files</span>
          </div>
        </div>
        <div class="flex items-start gap-3">
          <span class="text-noir-600 select-none shrink-0">4.</span>
          <div>
            <code class="text-noir-300">foxguard secrets --changed .</code>
            <span class="text-noir-600 ml-2">check for leaked credentials</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
