---
import fs from 'node:fs';
import path from 'node:path';

// Auto-calculate bundle size from actual dist file
const distPath = path.resolve(import.meta.dirname, '../../../dist/htmx.min.js.br');
const stats = fs.statSync(distPath);
const bundleSize = `~${Math.floor(stats.size / 1024)}k`;

// Auto-calculate extension count
const extensionDocs = import.meta.glob('../content/extensions/*.md', { eager: true }) as Record<string, any>;
const extensionCount = Object.keys(extensionDocs).filter(file => {
    const slug = file.split('/').pop() || '';
    return !slug.includes('overview') && !slug.startsWith('01-');
}).length;
---

<p class="hero-stats">
    <a href="/docs#installation">
        <b>{bundleSize}</b> min.br'd</a>
    <span aria-hidden="true">·</span>
    <a href="https://github.com/bigskysoftware/htmx/blob/master/package.json" target="_blank" rel="noopener noreferrer">
        <b>0</b> dep<span class="full-word">endencie</span>s</a>
    <span aria-hidden="true">·</span>
    <a href="/docs/extensions">
        <b>{extensionCount}</b> extension<span class="full-word">s</span></a>
</p>

<style>
    .hero-stats {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.75rem;
        font-family: var(--font-mono);
        font-weight: 300;
        color: light-dark(var(--color-neutral-650), var(--color-neutral-350));

        @media (min-width: 640px) { gap: 1rem; }

        a {
            text-decoration: none;

            b { font-family: var(--font-chicago); }

            @media (hover: hover) {
                &:hover, &:hover b {
                    color: light-dark(var(--color-blue-600), var(--color-blue-300));
                    text-decoration: underline;
                }
            }

            &:is(:focus-visible, :active),
            &:is(:focus-visible, :active) b {
                color: light-dark(var(--color-blue-600), var(--color-blue-300));
                text-decoration: underline;
            }
        }
    }

    [aria-hidden] { color: light-dark(var(--color-neutral-300), var(--color-neutral-700)); }

    .full-word {
        display: none;
        @media (min-width: 640px) { display: inline; }
    }
</style>
