Component renders but buttons/events don't work

Your Astro component renders as static HTML. You need a hydration directive to make it interactive.

Fix 1: Add a client directive

---
import Counter from './Counter.jsx';
---

<!-- ❌ Static — no interactivity -->
<Counter />

<!-- ✅ Interactive on page load -->
<Counter client:load />

<!-- ✅ Interactive when visible -->
<Counter client:visible />

<!-- ✅ Interactive on idle -->
<Counter client:idle />

Fix 2: Choose the right directive

• client:load — hydrate immediately (above the fold)
• client:idle — hydrate when browser is idle (below the fold)
• client:visible — hydrate when scrolled into view
• client:media — hydrate at a media query breakpoint
• client:only — skip SSR, client-render only