// Expandable feature guide: renders src/data/features.json as an accordion of
// categories. Lives inside the What's New modal today; built as its own
// component so a future entry point (help menu, login page) can reuse it.
// The json is the single source of truth — docs/FEATURES.md is generated
// from the same file (scripts/build-features-doc.js).

const FeatureGuide = () => {
    const [guide, setGuide] = React.useState(null);
    const [openCategory, setOpenCategory] = React.useState(null);

    React.useEffect(() => {
        fetch('/src/data/features.json')
            .then(r => r.ok ? r.json() : null)
            .then(data => { if (data?.categories?.length) setGuide(data); })
            .catch(() => {}); // the guide is decoration — never block the app over it
    }, []);

    if (!guide) return null;

    return (
        <div className="feature-guide">
            {guide.categories.map(cat => {
                const isOpen = openCategory === cat.name;
                return (
                    <div key={cat.name} className={`feature-guide-category${isOpen ? ' open' : ''}`}>
                        <button
                            className="feature-guide-header"
                            onClick={() => setOpenCategory(isOpen ? null : cat.name)}
                        >
                            <i className={`fas ${cat.icon} feature-guide-icon`}></i>
                            <span className="feature-guide-name">{cat.name}</span>
                            <span className="feature-guide-count">{cat.features.length}</span>
                            <i className={`fas fa-chevron-${isOpen ? 'up' : 'down'} feature-guide-chevron`}></i>
                        </button>
                        {isOpen && (
                            <div className="feature-guide-list">
                                {cat.features.map(f => (
                                    <div key={f.name} className="feature-guide-item">
                                        <div className="feature-guide-item-name">{f.name}</div>
                                        <div className="feature-guide-item-blurb">{f.blurb}</div>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                );
            })}
        </div>
    );
};