class BreadcrumbManager {
    constructor() {
        this.container = document.querySelector('[data-breadcrumb]');
        if (!this.container) return;
        this.updateBreadcrumb();
        window.addEventListener('popstate', () => this.updateBreadcrumb());
    }

    updateBreadcrumb() {
        const path = window.location.pathname;
        const segments = path.split('/').filter(s => s && s !== 'static');
        const crumbs = [{ title: 'Home', url: '/static/index.html' }];
        let currentUrl = '';

        segments.forEach(segment => {
            currentUrl += '/' + segment;
            const title = segment
                .replace(/[-_]/g, ' ')
                .replace(/\b\w/g, c => c.toUpperCase());
            crumbs.push({ title, url: currentUrl });
        });

        this.render(crumbs);
    }

    render(crumbs) {
        this.container.innerHTML = crumbs
            .map((crumb, i) => {
                if (i === crumbs.length - 1) {
                    return `<span class="breadcrumb-item active">${crumb.title}</span>`;
                }
                return `<a href="${crumb.url}" class="breadcrumb-item">${crumb.title}</a>`;
            })
            .join('<span class="breadcrumb-separator">/</span>');
    }
}

window.addEventListener('DOMContentLoaded', () => new BreadcrumbManager());
