<?php 
$pageTitle = Lang::get('support') . ' - ' . Lang::get('app_name');
$pageDescription = 'Get comprehensive support for NotaphilyCatalogue. Find FAQs, technical help, customer service, and warranty information for your numismatic collection management platform.';
$pageUrl = APP_URL . '/support';

$faqKeys = [
    ['faq_registration_title', 'faq_registration_body'],
    ['faq_login_title', 'faq_login_body'],
    ['faq_collections_title', 'faq_collections_body'],
    ['faq_subcollections_title', 'faq_subcollections_body'],
    ['faq_items_title', 'faq_items_body'],
    ['faq_sharing_title', 'faq_sharing_body'],
    ['faq_templates_title', 'faq_templates_body'],
    ['faq_privacy_title', 'faq_privacy_body'],
];
$faqEntries = [];
foreach ($faqKeys as [$qKey, $aKey]) {
    $faqEntries[] = [
        'question' => Lang::get($qKey),
        'answer' => strip_tags(Lang::get($aKey)),
    ];
}

$extraJsonLd = Schema::render([
    Schema::webPage($pageUrl, Lang::get('support'), $pageDescription, [
        ['name' => Lang::get('home'), 'item' => APP_URL . '/'],
        ['name' => Lang::get('support'), 'item' => $pageUrl],
    ]),
    Schema::faqPage($faqEntries),
]);
?>
<?php require APP_ROOT . '/views/layouts/header.php'; ?>

<div class="max-w-6xl mx-auto">
    <!-- Hero Section -->
    <div class="bg-gradient-to-r from-primary-600 to-primary-800 rounded-2xl p-8 mb-8 text-white">
        <h1 class="text-3xl font-bold mb-4"><?= Lang::get('support') ?></h1>
        <p class="text-lg opacity-90 max-w-2xl">
            <?= Lang::get('support_welcome') ?>
        </p>
    </div>

    <!-- Quick Links -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <a href="#customer-support" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 hover:shadow-lg transition-all duration-200 group">
            <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4 group-hover:bg-blue-200 dark:group-hover:bg-blue-900/50 transition-colors">
                <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                </svg>
            </div>
            <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2"><?= Lang::get('customer_support') ?></h3>
            <p class="text-sm text-gray-600 dark:text-gray-400"><?= Lang::get('support_help_description') ?></p>
        </a>

        <a href="#technical-support" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 hover:shadow-lg transition-all duration-200 group">
            <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mb-4 group-hover:bg-green-200 dark:group-hover:bg-green-900/50 transition-colors">
                <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
            </div>
            <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2"><?= Lang::get('technical_support') ?></h3>
            <p class="text-sm text-gray-600 dark:text-gray-400"><?= Lang::get('support_tech_description') ?></p>
        </a>

        <a href="#faq" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 hover:shadow-lg transition-all duration-200 group">
            <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-4 group-hover:bg-purple-200 dark:group-hover:bg-purple-900/50 transition-colors">
                <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2"><?= Lang::get('faq') ?></h3>
            <p class="text-sm text-gray-600 dark:text-gray-400"><?= Lang::get('support_faq_description') ?></p>
        </a>

        <a href="#warranty" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 hover:shadow-lg transition-all duration-200 group">
            <div class="w-12 h-12 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center mb-4 group-hover:bg-amber-200 dark:group-hover:bg-amber-900/50 transition-colors">
                <svg class="w-6 h-6 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                </svg>
            </div>
            <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2"><?= Lang::get('warranty_info') ?></h3>
            <p class="text-sm text-gray-600 dark:text-gray-400"><?= Lang::get('support_warranty_description') ?></p>
        </a>
    </div>

    <!-- Customer Support Section -->
    <section id="customer-support" class="mb-12">
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-8">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 flex items-center">
                <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mr-3">
                    <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                    </svg>
                </div>
                <?= Lang::get('customer_support') ?>
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4"><?= Lang::get('contact_information') ?></h3>
                    <div class="space-y-4">
                        <div class="flex items-start space-x-3">
                            <svg class="w-5 h-5 text-gray-400 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                            <div>
                                <p class="font-medium text-gray-900 dark:text-gray-100"><?= Lang::get('email') ?></p>
                                <p class="text-sm text-gray-500 dark:text-gray-500"><?= Lang::get('response_time') ?></p>
                            </div>
                        </div>

                        <div class="flex items-start space-x-3">
                            <svg class="w-5 h-5 text-gray-400 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <div>
                                <p class="font-medium text-gray-900 dark:text-gray-100"><?= Lang::get('working_hours') ?></p>
                                <p class="text-gray-600 dark:text-gray-400"><?= Lang::get('monday_friday') ?></p>
                                <p class="text-gray-600 dark:text-gray-400"><?= Lang::get('saturday') ?></p>
                            </div>
                        </div>                    
                    </div>
                </div>

                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4"><?= Lang::get('send_message') ?></h3>
                    <form method="POST" action="<?= APP_URL ?>/contact" class="space-y-4">
                        <input type="hidden" name="csrf_token" value="<?= Session::getCsrfToken() ?>">
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"><?= Lang::get('first_name') ?></label>
                                <input type="text" name="first_name" required 
                                       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"><?= Lang::get('last_name') ?></label>
                                <input type="text" name="last_name" required 
                                       class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"><?= Lang::get('email') ?></label>
                            <input type="email" name="email" required 
                                   class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"><?= Lang::get('subject') ?></label>
                            <select name="subject" required 
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                                <option value=""><?= Lang::get('select_subject') ?></option>
                                <option value="<?= Lang::get('subject_general') ?>"><?= Lang::get('subject_general') ?></option>
                                <option value="<?= Lang::get('subject_profile') ?>"><?= Lang::get('subject_profile') ?></option>
                                <option value="<?= Lang::get('subject_suggestion') ?>"><?= Lang::get('subject_suggestion') ?></option>
                                <option value="<?= Lang::get('subject_bug') ?>"><?= Lang::get('subject_bug') ?></option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"><?= Lang::get('message') ?></label>
                            <textarea name="message" rows="4" required 
                                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"></textarea>
                        </div>

                        <button type="submit" 
                                class="w-full btn-gradient btn-gradient-blue btn-gradient-lg">
                            <?= Lang::get('send') ?>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section id="faq" class="mb-12">
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-8">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 flex items-center">
                <div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mr-3">
                    <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <?= Lang::get('faq') ?>
            </h2>

            <div class="space-y-4" id="faqAccordion">
                <?php
                $faqSections = [
                    ['faq_registration_title', 'faq_registration_body'],
                    ['faq_login_title', 'faq_login_body'],
                    ['faq_collections_title', 'faq_collections_body'],
                    ['faq_subcollections_title', 'faq_subcollections_body'],
                    ['faq_items_title', 'faq_items_body'],
                    ['faq_sharing_title', 'faq_sharing_body'],
                    ['faq_templates_title', 'faq_templates_body'],
                    ['faq_privacy_title', 'faq_privacy_body'],
                ];
                foreach ($faqSections as $i => $section):
                ?>
                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600 overflow-hidden">
                    <button type="button" onclick="toggleFaqAccordion(<?= $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-100 dark:hover:bg-gray-700 transition-colors"
                            id="faq-btn-<?= $i ?>">
                        <span><?= Lang::get($section[0]) ?></span>
                        <svg class="w-5 h-5 text-gray-400 transition-transform duration-200" id="faq-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="faq-body-<?= $i ?>">
                        <?= Lang::get($section[1]) ?>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- Technical Support Section -->
    <section id="technical-support" class="mb-12">
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-8">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 flex items-center">
                <div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mr-3">
                    <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </div>
                <?= Lang::get('technical_support') ?>
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4"><?= Lang::get('system_requirements') ?></h3>
                    <div class="space-y-3">
                        <div class="flex items-start space-x-3">
                            <div class="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                            <div>
                                <p class="font-medium text-gray-900 dark:text-gray-100"><?= Lang::get('browsers') ?></p>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Chrome 90+, Firefox 88+, Safari 14+, Edge 90+</p>
                            </div>
                        </div>
                        <div class="flex items-start space-x-3">
                            <div class="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                            <div>
                                <p class="font-medium text-gray-900 dark:text-gray-100"><?= Lang::get('screen_resolution') ?></p>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Minimum 1024x768, preporučeno 1920x1080</p>
                            </div>
                        </div>
                        <div class="flex items-start space-x-3">
                            <div class="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                            <div>
                                <p class="font-medium text-gray-900 dark:text-gray-100"><?= Lang::get('internet_connection') ?></p>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Stabilna broadband konekcija</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4"><?= Lang::get('common_issues') ?></h3>
                    <div class="space-y-4">
                        <div class="border-l-4 border-yellow-500 pl-4">
                            <p class="font-medium text-gray-900 dark:text-gray-100"><?= Lang::get('forgot_password') ?></p>
                            <p class="text-sm text-gray-600 dark:text-gray-400"><?= Lang::get('forgot_password_solution') ?></p>
                        </div>
                        <div class="border-l-4 border-blue-500 pl-4">
                            <p class="font-medium text-gray-900 dark:text-gray-100"><?= Lang::get('images_not_loading') ?></p>
                            <p class="text-sm text-gray-600 dark:text-gray-400"><?= Lang::get('images_not_loading_solution') ?></p>
                        </div>
                        <div class="border-l-4 border-green-500 pl-4">
                            <p class="font-medium text-gray-900 dark:text-gray-100"><?= Lang::get('slow_loading') ?></p>
                            <p class="text-sm text-gray-600 dark:text-gray-400"><?= Lang::get('slow_loading_solution') ?></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Warranty Information Section -->
    <section id="warranty" class="mb-12">
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-8">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 flex items-center">
                <div class="w-10 h-10 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center mr-3">
                    <svg class="w-6 h-6 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                    </svg>
                </div>
                <?= Lang::get('warranty_info') ?>
            </h2>

            <div class="prose prose-gray dark:prose-invert max-w-none">
                <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-6 mb-6">
                    <h3 class="text-lg font-semibold text-amber-900 dark:text-amber-100 mb-3"><?= Lang::get('our_warranty') ?></h3>
                    <p class="text-amber-800 dark:text-amber-200">
                        <?= Lang::get('warranty_description') ?>
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-3"><?= Lang::get('what_we_cover') ?></h4>
                        <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
                            <li class="flex items-start space-x-2">
                                <svg class="w-4 h-4 text-green-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span><?= Lang::get('data_security_backup') ?></span>
                            </li>
                            <li class="flex items-start space-x-2">
                                <svg class="w-4 h-4 text-green-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span><?= Lang::get('technical_support_usage') ?></span>
                            </li>
                            <li class="flex items-start space-x-2">
                                <svg class="w-4 h-4 text-green-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                <span><?= Lang::get('regular_updates') ?></span>
                            </li>
                        </ul>
                    </div>

                    <div>
                        <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-3"><?= Lang::get('what_we_dont_cover') ?></h4>
                        <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
                            <li class="flex items-start space-x-2">
                                <svg class="w-4 h-4 text-red-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                                <span><?= Lang::get('data_loss_user_error') ?></span>
                            </li>
                            <li class="flex items-start space-x-2">
                                <svg class="w-4 h-4 text-red-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                                <span><?= Lang::get('third_party_issues') ?></span>
                            </li>
                            <li class="flex items-start space-x-2">
                                <svg class="w-4 h-4 text-red-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                                <span><?= Lang::get('unauthorized_access') ?></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Cookie Policy Section -->
    <section id="cookie-policy" class="mb-12">
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-8">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 flex items-center">
                <div class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center mr-3">
                    <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
                    </svg>
                </div>
                <?= Lang::get('cookie_policy') ?>
            </h2>

            <div class="prose prose-gray dark:prose-invert max-w-none">
                <p class="text-gray-600 dark:text-gray-400 mb-6">
                    <?= Lang::get('cookie_policy_description') ?>
                </p>

                <div class="space-y-6">
                    <div class="border-l-4 border-blue-500 pl-4">
                        <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2"><?= Lang::get('necessary_cookies') ?></h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-2"><?= Lang::get('necessary_cookies_description') ?></p>
                        <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
                            <li><strong>session_id:</strong> <?= Lang::get('session_id_desc') ?></li>
                            <li><strong>csrf_token:</strong> <?= Lang::get('csrf_token_desc') ?></li>
                            <li><strong>language:</strong> <?= Lang::get('language_desc') ?></li>
                        </ul>
                    </div>

                    <div class="border-l-4 border-green-500 pl-4">
                        <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2"><?= Lang::get('functional_cookies') ?></h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-2"><?= Lang::get('functional_cookies_description') ?></p>
                        <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
                            <li><strong>theme:</strong> <?= Lang::get('theme_desc') ?></li>
                            <li><strong>layout_preferences:</strong> <?= Lang::get('layout_preferences_desc') ?></li>
                            <li><strong>search_history:</strong> <?= Lang::get('search_history_desc') ?></li>
                        </ul>
                    </div>

                    <div class="border-l-4 border-purple-500 pl-4">
                        <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2"><?= Lang::get('analytics_cookies') ?></h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-2"><?= Lang::get('analytics_cookies_description') ?></p>
                        <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
                            <li><strong>analytics_id:</strong> <?= Lang::get('analytics_id_desc') ?></li>
                            <li><strong>performance_metrics:</strong> <?= Lang::get('performance_metrics_desc') ?></li>
                            <li><strong>error_logs:</strong> <?= Lang::get('error_logs_desc') ?></li>
                        </ul>
                    </div>
                </div>

                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mt-6">
                    <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-2"><?= Lang::get('managing_cookies') ?></h4>
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        <?= Lang::get('managing_cookies_description') ?>
                    </p>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
function toggleFaqAccordion(index) {
    var body = document.getElementById('faq-body-' + index);
    var icon = document.getElementById('faq-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)';
    }
}

// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});
</script>

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