<?php
require_once __DIR__ . '/includes/config.php';
$pageTitle = 'Home';
$featuredProducts = getProducts(8, 'available');

$heroSlides = [];
$sliderFiles = function_exists('getJsonSetting') ? getJsonSetting('hero_slider_images', []) : [];
if (!empty($sliderFiles)) {
    foreach ($sliderFiles as $index => $fileName) {
        if ($index >= MAX_HERO_SLIDER_IMAGES) {
            break;
        }
        $fileName = trim($fileName);
        $filePath = UPLOAD_DIR . $fileName;
        if ($fileName && file_exists($filePath)) {
            $heroSlides[] = [
                'image_url' => UPLOAD_URL . sanitize($fileName),
                'title' => sprintf('Featured Slide %d', $index + 1),
                'subtitle' => getSetting('site_tagline'),
                'button_text' => 'Shop Now',
                'button_url' => SITE_URL . '/shop.php',
            ];
        }
    }
}

if (empty($heroSlides)) {
    $heroSlides = [
        [
            'title' => 'Best Electronics',
            'subtitle' => getSetting('site_tagline'),
            'button_text' => 'Shop Now',
            'button_url' => SITE_URL . '/shop.php',
            'bg_class' => 'bg-primary',
        ],
        [
            'title' => 'Latest Gadgets',
            'subtitle' => 'Discover the newest tech at great prices.',
            'button_text' => 'Browse Now',
            'button_url' => SITE_URL . '/shop.php',
            'bg_class' => 'bg-success',
        ],
        [
            'title' => 'Top Accessories',
            'subtitle' => 'Premium accessories for your devices.',
            'button_text' => 'View Accessories',
            'button_url' => SITE_URL . '/shop.php',
            'bg_class' => 'bg-warning',
        ],
    ];
}

include __DIR__ . '/includes/header.php';
?>

<!-- Hero Carousel -->
<div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="4500" data-bs-pause="hover">
    <div class="carousel-inner">
        <?php foreach ($heroSlides as $index => $slide): ?>
        <?php $hasImage = !empty($slide['image_url']); ?>
        <div class="carousel-item <?= $index === 0 ? 'active' : '' ?>" style="height:500px; position:relative; overflow:hidden; background-color:<?= $hasImage ? '#000' : '#343a40' ?>;">
            <?php if ($hasImage): ?>
                <img src="<?= sanitize($slide['image_url']) ?>" alt="<?= sanitize($slide['title']) ?>" class="position-absolute top-0 start-0 w-100 h-100" style="object-fit:cover;">
            <?php endif; ?>
            <div class="carousel-mask d-flex align-items-center justify-content-center h-100" style="background-color:<?= $hasImage ? 'rgba(0,0,0,0.25)' : 'rgba(0,0,0,0.55)' ?>;">
                <div class="text-center text-white p-5">
                    <h1 class="display-3 fw-bold mb-3"><?= sanitize($slide['title']) ?></h1>
                    <p class="fs-5 mb-4"><?= sanitize($slide['subtitle']) ?></p>
                    <a href="<?= sanitize($slide['button_url']) ?>" class="btn btn-secondary btn-lg px-5 py-3"><?= sanitize($slide['button_text']) ?></a>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

<!-- Features Bar -->
<div class="container-fluid py-4 border-bottom">
    <div class="container">
        <div class="row g-4 text-center">
            <div class="col-md-3">
                <i class="fas fa-truck fa-2x text-primary mb-2"></i>
                <h6 class="fw-bold">Free Shipping</h6>
                <small class="text-muted">On orders above ₹999</small>
            </div>
            <div class="col-md-3">
                <i class="fas fa-undo fa-2x text-primary mb-2"></i>
                <h6 class="fw-bold">Easy Returns</h6>
                <small class="text-muted">30-day return policy</small>
            </div>
            <div class="col-md-3">
                <i class="fas fa-shield-alt fa-2x text-primary mb-2"></i>
                <h6 class="fw-bold">Secure Payments</h6>
                <small class="text-muted">100% safe transactions</small>
            </div>
            <div class="col-md-3">
                <i class="fas fa-headset fa-2x text-primary mb-2"></i>
                <h6 class="fw-bold">24/7 Support</h6>
                <small class="text-muted">Call us anytime</small>
            </div>
        </div>
    </div>
</div>

<!-- Featured Products -->
<div class="container-fluid py-5">
    <div class="container">
        <div class="d-flex align-items-center justify-content-between mb-4">
            <h2 class="fw-bold mb-0">Featured Products</h2>
            <a href="<?= SITE_URL ?>/shop.php" class="btn btn-outline-primary">View All</a>
        </div>
        <?php if (empty($featuredProducts)): ?>
            <div class="alert alert-info text-center py-5">
                <i class="fas fa-box-open fa-3x mb-3 text-muted"></i>
                <h5>No products yet</h5>
                <p>Products added from the admin panel will appear here.</p>
            </div>
        <?php else: ?>
        <div class="row g-4">
            <?php foreach ($featuredProducts as $product): ?>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="card h-100 border-0 shadow-sm product-card hover-shadow">
                    <div class="position-relative overflow-hidden" style="height:220px;background:#f8f9fa;">
                        <?php if ($product['main_image']): ?>
                            <img src="<?= UPLOAD_URL . sanitize($product['main_image']) ?>"
                                 class="card-img-top object-fit-contain p-3 h-100 w-100"
                                 style="object-fit:contain;"
                                 alt="<?= sanitize($product['name']) ?>">
                        <?php else: ?>
                            <div class="d-flex align-items-center justify-content-center h-100">
                                <i class="fas fa-image fa-4x text-muted"></i>
                            </div>
                        <?php endif; ?>
                        <div class="position-absolute top-0 end-0 m-2">
                            <?= getStatusBadge($product['selling_status']) ?>
                        </div>
                    </div>
                    <div class="card-body d-flex flex-column">
                        <h6 class="card-title fw-bold"><?= sanitize($product['name']) ?></h6>
                        <?php if ($product['color']): ?>
                            <small class="text-muted mb-1"><i class="fas fa-palette me-1"></i><?= sanitize($product['color']) ?></small>
                        <?php endif; ?>
                        <div class="mt-auto">
                            <div class="d-flex align-items-center justify-content-between mt-3">
                                <span class="fs-5 fw-bold text-primary"><?= formatPrice($product['price']) ?></span>
                                <a href="<?= SITE_URL ?>/product.php?id=<?= $product['id'] ?>" class="btn btn-primary btn-sm">View Details</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>
</div>

<style>
.product-card { transition: transform 0.2s, box-shadow 0.2s; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
</style>

<!-- FAQ Section -->
<div class="container-fluid py-5" style="background-color: #f8f9fa;">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-5 mb-5 mb-lg-0">
                <h2 class="display-6 fw-bold mb-4">
                    <i class="fas fa-question-circle text-primary me-2"></i>Frequently Asked Questions
                </h2>
                <p class="fs-5 text-muted mb-4">Find quick answers to common questions about our products, shipping, returns, and more.</p>
                <a href="<?= SITE_URL ?>/contact.php" class="btn btn-primary btn-lg">
                    <i class="fas fa-envelope me-2"></i>Can't find your answer? Contact us
                </a>
            </div>
            <div class="col-lg-7">
                <div class="accordion accordion-flush" id="faqAccordion">
                    <div class="accordion-item border-0 mb-3 shadow-sm">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                <i class="fas fa-box me-2 text-primary"></i>What are your shipping options?
                            </button>
                        </h2>
                        <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                We offer free shipping on orders above ₹999. Standard delivery takes 3-5 business days. Express delivery is available for urgent orders at additional cost. All orders are tracked and you can monitor your shipment in real-time.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item border-0 mb-3 shadow-sm">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                <i class="fas fa-undo me-2 text-primary"></i>Do you offer returns?
                            </button>
                        </h2>
                        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                Yes! We have a 30-day return policy. Items must be in original condition with all packaging and accessories. Returns are free for defective products. Once received and inspected, refunds are processed within 5-7 business days.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item border-0 mb-3 shadow-sm">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                <i class="fas fa-credit-card me-2 text-primary"></i>What payment methods do you accept?
                            </button>
                        </h2>
                        <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                We accept all major credit cards, debit cards, UPI, net banking, and digital wallets. All payments are secured with 256-bit SSL encryption. We also offer easy EMI options for eligible products.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item border-0 mb-3 shadow-sm">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
                                <i class="fas fa-truck me-2 text-primary"></i>How can I track my order?
                            </button>
                        </h2>
                        <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                Once your order ships, you'll receive a tracking link via email and SMS. You can track your package in real-time on our website or the courier's tracking portal. You'll also get notifications at each delivery milestone.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item border-0 mb-3 shadow-sm">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5">
                                <i class="fas fa-shield-alt me-2 text-primary"></i>Is my payment information secure?
                            </button>
                        </h2>
                        <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                Absolutely! We use industry-standard SSL encryption (256-bit) to protect all transactions. We never store your credit card details. All payment processing is handled by secure third-party payment gateways certified for PCI DSS compliance.
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item border-0 mb-3 shadow-sm">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq6">
                                <i class="fas fa-star me-2 text-primary"></i>Do you have warranty on products?
                            </button>
                        </h2>
                        <div id="faq6" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                Most products come with manufacturer warranty (typically 1-2 years). Warranty details are mentioned on each product page. We also offer extended warranty plans for additional protection. Warranty covers manufacturing defects but not accidental damage.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php include __DIR__ . '/includes/footer.php'; ?>
