<?php
$pageTitle = Lang::get('help') . ' - ' . Lang::get('app_name');
$pageDescription = $pageDescription ?? 'Help and documentation for NotaphilyCatalogue.';
$pageUrl = APP_URL . '/help';
$extraJsonLd = Schema::render([
    Schema::webPage($pageUrl, Lang::get('help'), $pageDescription, [
        ['name' => Lang::get('home'), 'item' => APP_URL . '/'],
        ['name' => Lang::get('help'), 'item' => $pageUrl],
    ]),
]);
?>
<?php require APP_ROOT . '/views/layouts/header.php'; ?>

<div class="max-w-3xl mx-auto">
    <h1 class="text-2xl font-bold mb-6"><?= Lang::get('help') ?></h1>

    <div class="space-y-3" id="accordionContainer">
        <?php
        $sections = [
            ['help_registration_title', 'help_registration_body'],
            ['help_login_title', 'help_login_body'],
            ['help_collections_title', 'help_collections_body'],
            ['help_subcollections_title', 'help_subcollections_body'],
            ['help_items_title', 'help_items_body'],
            ['help_owned_title', 'help_owned_body'],
            ['help_sorting_title', 'help_sorting_body'],
            ['help_literature_title', 'help_literature_body'],
            ['help_lists_title', 'help_lists_body'],
            ['help_reminders_title', 'help_reminders_body'],
            ['help_sharing_title', 'help_sharing_body'],
            ['help_pdf_title', 'help_pdf_body'],
            ['help_admin_title', 'help_admin_body'],
            ['help_contact_title', 'help_contact_body'],
        ];
        foreach ($sections as $i => $section):
        ?>
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
            <button type="button" onclick="toggleAccordion(<?= $i ?>)"
                    class="w-full flex items-center justify-between px-6 py-4 text-left font-semibold text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
                    id="accordion-btn-<?= $i ?>">
                <span><?= Lang::get($section[0]) ?></span>
                <svg class="w-5 h-5 text-gray-400 transition-transform duration-200" id="accordion-icon-<?= $i ?>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <div class="hidden px-6 pb-4 text-sm text-gray-600 dark:text-gray-400 leading-relaxed" id="accordion-body-<?= $i ?>">
                <?= Lang::get($section[1]) ?>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>

<script>
function toggleAccordion(index) {
    var body = document.getElementById('accordion-body-' + index);
    var icon = document.getElementById('accordion-icon-' + index);
    if (body.classList.contains('hidden')) {
        body.classList.remove('hidden');
        icon.style.transform = 'rotate(180deg)';
    } else {
        body.classList.add('hidden');
        icon.style.transform = 'rotate(0deg)';
    }
}
</script>

<?php require APP_ROOT . '/views/layouts/footer.php'; ?>
