---
import CopyButton from '../ui/CopyButton.astro';
---
<section class="py-24" id="install">
<div class="max-w-5xl mx-auto px-6">
<h2 class="font-heading text-noir-50 text-3xl sm:text-4xl mb-12">Get started</h2>
<div class="grid md:grid-cols-2 gap-px bg-noir-800 rounded-xl overflow-hidden mb-8">
<!-- Install -->
<div class="bg-noir-950 p-6">
<h3 class="text-noir-100 text-sm font-medium mb-5">Install</h3>
<div class="flex flex-col gap-2 font-mono text-[13px]">
<div class="flex items-center justify-between bg-noir-900/50 rounded-lg px-4 py-2.5">
<code class="text-fox-light">npx foxguard .</code>
<CopyButton text="npx foxguard ." />
</div>
<div class="flex items-center justify-between bg-noir-900/50 rounded-lg px-4 py-2.5">
<code class="text-fox-light">brew install peaktwilight/tap/foxguard</code>
<CopyButton text="brew install peaktwilight/tap/foxguard" />
</div>
<div class="flex items-center justify-between bg-noir-900/50 rounded-lg px-4 py-2.5">
<code class="text-fox-light">cargo install foxguard</code>
<CopyButton text="cargo install foxguard" />
</div>
</div>
<a
href="https://marketplace.visualstudio.com/items?itemName=peaktwilight.foxguard"
target="_blank"
rel="noopener"
class="block mt-4 text-noir-500 hover:text-noir-100 transition-colors no-underline text-sm"
>
VS Code / Cursor extension →
</a>
</div>
<!-- Commands -->
<div class="bg-noir-950 p-6">
<h3 class="text-noir-100 text-sm font-medium mb-5">Commands</h3>
<div class="flex flex-col gap-2.5 font-mono text-[13px]">
<div><code class="text-noir-300">foxguard .</code> <span class="text-noir-600 ml-3">scan</span></div>
<div><code class="text-noir-300">foxguard --changed .</code> <span class="text-noir-600 ml-3">modified files</span></div>
<div><code class="text-noir-300">foxguard diff main</code> <span class="text-noir-600 ml-3">new findings vs branch</span></div>
<div><code class="text-noir-300">foxguard --explain .</code> <span class="text-noir-600 ml-3">dataflow traces</span></div>
<div><code class="text-noir-300">foxguard --github-pr 42 .</code> <span class="text-noir-600 ml-3">PR comments</span></div>
<div><code class="text-noir-300">foxguard secrets .</code> <span class="text-noir-600 ml-3">credentials</span></div>
<div><code class="text-noir-300">foxguard --format sarif .</code> <span class="text-noir-600 ml-3">GitHub Code Scanning</span></div>
</div>
</div>
</div>
</div>
</section>