---
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 →</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>