<?php
/**
 * SMM Paket Satış Scripti - Sıkça Sorulan Sorular
 * @version 1.0.0
 */

require_once __DIR__ . '/config.php';

// Aktif SSS'leri çek
try {
    $faqs = $db->query("SELECT * FROM faqs WHERE is_active = 1 ORDER BY sort_order ASC, id ASC")->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $faqs = [];
}

// Sayfa başlığı
$pageTitle = 'Sıkça Sorulan Sorular';
$pageDescription = 'Hizmetlerimiz hakkında en çok sorulan sorular ve cevapları';

require_once __DIR__ . '/header.php';
?>

<style>
/* Hero Section */
.sss-hero {
    background: var(--gradient);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sss-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.sss-hero .container {
    position: relative;
    z-index: 1;
}

.sss-hero-icon {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.15);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 36px;
    color: #fff;
    backdrop-filter: blur(10px);
}

.sss-hero h1 {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 15px;
    letter-spacing: -0.5px;
}

.sss-hero p {
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
}

/* Breadcrumb */
.sss-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
    font-size: 14px;
}

.sss-breadcrumb a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: all 0.3s;
}

.sss-breadcrumb a:hover {
    color: #fff;
}

.sss-breadcrumb span {
    color: rgba(255,255,255,0.5);
}

.sss-breadcrumb .current {
    color: #fff;
}

/* Main Content */
.sss-content {
    padding: 60px 0 80px;
}

.sss-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Search Box */
.sss-search {
    margin-bottom: 40px;
}

.sss-search-box {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

.sss-search-box input {
    width: 100%;
    padding: 18px 25px 18px 55px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-primary);
    font-size: 16px;
    transition: all 0.3s;
}

.sss-search-box input::placeholder {
    color: var(--text-muted);
}

.sss-search-box input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
}

.sss-search-box i {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 18px;
}

.sss-search-clear {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-hover);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sss-search-clear.show {
    display: flex;
}

.sss-search-clear:hover {
    background: var(--primary);
    color: #fff;
}

/* Stats */
.sss-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.sss-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    font-size: 14px;
}

.sss-stat i {
    color: var(--primary);
}

.sss-stat strong {
    color: var(--text-primary);
}

.sss-stat span {
    color: var(--text-secondary);
}

/* FAQ List */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* FAQ Item */
.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s;
}

.faq-item:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.faq-item.active {
    border-color: var(--primary);
    box-shadow: 0 10px 40px rgba(var(--primary-rgb), 0.15);
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px 25px;
    cursor: pointer;
    transition: all 0.3s;
}

.faq-question:hover {
    background: rgba(var(--primary-rgb), 0.03);
}

.faq-number {
    width: 36px;
    height: 36px;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
    transition: all 0.3s;
}

.faq-item.active .faq-number {
    background: var(--primary);
    color: #fff;
}

.faq-question h3 {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.5;
}

.faq-toggle {
    width: 32px;
    height: 32px;
    background: var(--bg-hover);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
    transition: all 0.3s;
}

.faq-item.active .faq-toggle {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
    transform: rotate(180deg);
}

/* FAQ Answer */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer-content {
    padding: 0 25px 25px 76px;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.faq-answer-content p {
    margin: 0;
}

.faq-answer-content ul,
.faq-answer-content ol {
    margin: 10px 0;
    padding-left: 20px;
}

.faq-answer-content li {
    margin-bottom: 8px;
}

.faq-answer-content a {
    color: var(--primary);
    text-decoration: underline;
}

/* No Results */
.no-results {
    text-align: center;
    padding: 60px 20px;
    display: none;
}

.no-results.show {
    display: block;
}

.no-results i {
    font-size: 60px;
    color: var(--text-muted);
    opacity: 0.3;
    margin-bottom: 20px;
}

.no-results h4 {
    font-size: 20px;
    margin-bottom: 10px;
}

.no-results p {
    color: var(--text-secondary);
    margin-bottom: 25px;
}

/* CTA Section */
.sss-cta {
    margin-top: 60px;
    text-align: center;
    padding: 50px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.sss-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient);
}

.sss-cta-icon {
    width: 70px;
    height: 70px;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    color: var(--primary);
}

.sss-cta h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 10px;
}

.sss-cta p {
    color: var(--text-secondary);
    margin: 0 0 25px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.sss-cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--gradient);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.4);
    color: #fff;
}

.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-cta-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
}

.btn-cta-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #25d366;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-cta-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    color: #fff;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 80px 20px;
}

.empty-state i {
    font-size: 80px;
    color: var(--text-muted);
    opacity: 0.2;
    margin-bottom: 25px;
}

.empty-state h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.empty-state p {
    color: var(--text-secondary);
    max-width: 400px;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
    .sss-hero {
        padding: 60px 0;
    }
    
    .sss-hero h1 {
        font-size: 32px;
    }
    
    .sss-hero p {
        font-size: 16px;
    }
    
    .sss-content {
        padding: 40px 0 60px;
    }
    
    .faq-question {
        padding: 18px 20px;
    }
    
    .faq-question h3 {
        font-size: 15px;
    }
    
    .faq-answer-content {
        padding: 0 20px 20px 20px;
    }
    
    .faq-number {
        display: none;
    }
    
    .sss-cta {
        padding: 35px 25px;
    }
    
    .sss-cta h3 {
        font-size: 20px;
    }
    
    .sss-stats {
        gap: 15px;
    }
    
    .sss-stat {
        padding: 10px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .sss-hero h1 {
        font-size: 26px;
    }
    
    .sss-hero-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
    
    .sss-cta-buttons {
        flex-direction: column;
    }
    
    .sss-cta-buttons a {
        width: 100%;
        justify-content: center;
    }
}

/* Animation */
.faq-item {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.faq-item:nth-child(1) { animation-delay: 0.1s; }
.faq-item:nth-child(2) { animation-delay: 0.15s; }
.faq-item:nth-child(3) { animation-delay: 0.2s; }
.faq-item:nth-child(4) { animation-delay: 0.25s; }
.faq-item:nth-child(5) { animation-delay: 0.3s; }
.faq-item:nth-child(6) { animation-delay: 0.35s; }
.faq-item:nth-child(7) { animation-delay: 0.4s; }
.faq-item:nth-child(8) { animation-delay: 0.45s; }
.faq-item:nth-child(9) { animation-delay: 0.5s; }
.faq-item:nth-child(10) { animation-delay: 0.55s; }
</style>

<!-- Hero Section -->
<section class="sss-hero">
    <div class="container">
        <div class="sss-hero-icon">
            <i class="fas fa-question-circle"></i>
        </div>
        <h1>Sıkça Sorulan Sorular</h1>
        <p>Hizmetlerimiz hakkında merak ettiklerinizin cevaplarını burada bulabilirsiniz</p>
        
        <div class="sss-breadcrumb">
            <a href="<?php echo SITE_URL; ?>"><i class="fas fa-home"></i> Ana Sayfa</a>
            <span><i class="fas fa-chevron-right"></i></span>
            <span class="current">SSS</span>
        </div>
    </div>
</section>

<!-- Content Section -->
<section class="sss-content">
    <div class="container">
        <div class="sss-container">
            
            <?php if (!empty($faqs)): ?>
            
            <!-- Search -->
            <div class="sss-search">
                <div class="sss-search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="faqSearch" placeholder="Soru ara...">
                    <button class="sss-search-clear" id="searchClear">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            
            <!-- Stats -->
            <div class="sss-stats">
                <div class="sss-stat">
                    <i class="fas fa-question-circle"></i>
                    <strong><?php echo count($faqs); ?></strong>
                    <span>Soru</span>
                </div>
                <div class="sss-stat">
                    <i class="fas fa-clock"></i>
                    <span>7/24</span>
                    <strong>Destek</strong>
                </div>
                <div class="sss-stat">
                    <i class="fas fa-bolt"></i>
                    <span>Hızlı</span>
                    <strong>Cevaplar</strong>
                </div>
            </div>
            
            <!-- FAQ List -->
            <div class="faq-list" id="faqList">
                <?php $counter = 1; foreach ($faqs as $faq): ?>
                <div class="faq-item" data-question="<?php echo htmlspecialchars(mb_strtolower($faq['question'], 'UTF-8'), ENT_QUOTES, 'UTF-8'); ?>" data-answer="<?php echo htmlspecialchars(mb_strtolower($faq['answer'], 'UTF-8'), ENT_QUOTES, 'UTF-8'); ?>">
                    <div class="faq-question" onclick="toggleFaq(this)">
                        <div class="faq-number"><?php echo $counter++; ?></div>
                        <h3><?php echo htmlspecialchars($faq['question'], ENT_QUOTES, 'UTF-8'); ?></h3>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="faq-answer">
                        <div class="faq-answer-content">
                            <?php echo nl2br(htmlspecialchars($faq['answer'], ENT_QUOTES, 'UTF-8')); ?>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            
            <!-- No Results -->
            <div class="no-results" id="noResults">
                <i class="fas fa-search"></i>
                <h4>Sonuç bulunamadı</h4>
                <p>Aramanızla eşleşen soru bulunamadı. Farklı anahtar kelimeler deneyin.</p>
            </div>
            
            <?php else: ?>
            
            <!-- Empty State -->
            <div class="empty-state">
                <i class="fas fa-question-circle"></i>
                <h3>Henüz SSS eklenmemiş</h3>
                <p>Yakında sıkça sorulan sorular burada yer alacak.</p>
            </div>
            
            <?php endif; ?>
            
            <!-- CTA Section -->
            <div class="sss-cta">
                <div class="sss-cta-icon">
                    <i class="fas fa-headset"></i>
                </div>
                <h3>Sorunuz mu var?</h3>
                <p>Aradığınız cevabı bulamadıysanız bizimle iletişime geçin, size yardımcı olalım.</p>
                <div class="sss-cta-buttons">
                    <?php 
                    $whatsappNumber = $settings->get('whatsapp_number');
                    if ($whatsappNumber): 
                        $cleanNumber = preg_replace('/[^0-9]/', '', $whatsappNumber);
                    ?>
                    <a href="https://wa.me/<?php echo $cleanNumber; ?>?text=Merhaba,%20bir%20sorum%20var" class="btn-cta-whatsapp" target="_blank">
                        <i class="fab fa-whatsapp"></i> WhatsApp ile Yazın
                    </a>
                    <?php endif; ?>
                    
                    <a href="<?php echo SITE_URL; ?>/#packages" class="btn-cta-primary">
                        <i class="fas fa-box"></i> Paketleri İncele
                    </a>
                </div>
            </div>
            
        </div>
    </div>
</section>

<script>
// Toggle FAQ
function toggleFaq(element) {
    var faqItem = element.closest('.faq-item');
    var isActive = faqItem.classList.contains('active');
    
    // Diğerlerini kapat (accordion)
    document.querySelectorAll('.faq-item.active').forEach(function(item) {
        if (item !== faqItem) {
            item.classList.remove('active');
        }
    });
    
    // Bu soruyu aç/kapat
    faqItem.classList.toggle('active');
}

// Search
var searchInput = document.getElementById('faqSearch');
var searchClear = document.getElementById('searchClear');
var faqList = document.getElementById('faqList');
var noResults = document.getElementById('noResults');

if (searchInput) {
    searchInput.addEventListener('input', function() {
        var query = this.value.toLowerCase().trim();
        var faqItems = faqList.querySelectorAll('.faq-item');
        var visibleCount = 0;
        
        // Clear butonunu göster/gizle
        if (query.length > 0) {
            searchClear.classList.add('show');
        } else {
            searchClear.classList.remove('show');
        }
        
        faqItems.forEach(function(item) {
            var question = item.dataset.question || '';
            var answer = item.dataset.answer || '';
            
            if (question.indexOf(query) !== -1 || answer.indexOf(query) !== -1 || query === '') {
                item.style.display = 'block';
                visibleCount++;
                
                // Eşleşen metni vurgula (opsiyonel)
                if (query.length >= 2) {
                    highlightText(item, query);
                } else {
                    removeHighlight(item);
                }
            } else {
                item.style.display = 'none';
            }
        });
        
        // No results mesajı
        if (visibleCount === 0 && query !== '') {
            noResults.classList.add('show');
        } else {
            noResults.classList.remove('show');
        }
    });
    
    // Clear butonu
    searchClear.addEventListener('click', function() {
        searchInput.value = '';
        searchInput.dispatchEvent(new Event('input'));
        searchInput.focus();
    });
}

// Highlight text (opsiyonel)
function highlightText(item, query) {
    // Bu fonksiyon opsiyonel - performans için devre dışı bırakılabilir
}

function removeHighlight(item) {
    // Highlight kaldırma
}

// URL hash ile direkt soruyu aç
document.addEventListener('DOMContentLoaded', function() {
    var hash = window.location.hash;
    if (hash && hash.startsWith('#soru-')) {
        var faqNumber = parseInt(hash.replace('#soru-', ''));
        var faqItems = document.querySelectorAll('.faq-item');
        if (faqItems[faqNumber - 1]) {
            setTimeout(function() {
                faqItems[faqNumber - 1].classList.add('active');
                faqItems[faqNumber - 1].scrollIntoView({ behavior: 'smooth', block: 'center' });
            }, 500);
        }
    }
    
    // İlk soruyu otomatik aç (opsiyonel)
    // var firstFaq = document.querySelector('.faq-item');
    // if (firstFaq) firstFaq.classList.add('active');
});

// Keyboard navigation
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.querySelectorAll('.faq-item.active').forEach(function(item) {
            item.classList.remove('active');
        });
    }
});
</script>

<?php require_once __DIR__ . '/footer.php'; ?>