<?php include __DIR__ . '/../layout/header.php'; ?>

<!-- ═══════════════════════════════════════
     HERO SLIDER
═══════════════════════════════════════ -->
<?php
$imageBase = \App\Models\Settings::get('image_base_url', $baseUrl . '/image');
$settingsSliders = \App\Models\Settings::get('hero_sliders', []);
$brandsList = \App\Models\Settings::get('brands', []);
$brandMap = [];
foreach ($brandsList as $b) { $brandMap[$b['slug']] = $b['name']; }
function brandName($slug, $map) { return isset($map[$slug]) ? $map[$slug] : ''; }
$banners = [];
foreach ($settingsSliders as $s) {
    if (strpos($s, 'http') === 0) {
        $banners[] = $s;
    } elseif (strpos($s, 'assets/') === 0) {
        $banners[] = $baseUrl . '/' . ltrim($s, '/');
    } else {
        $banners[] = $imageBase . '/' . ltrim($s, '/');
    }
}
?>
<div class="hero-wrap">
    <div class="hero-slider" id="heroSlider">
        <?php foreach ($banners as $i => $url): ?>
        <div class="hero-slide <?php echo $i === 0 ? 'active' : ''; ?>" data-index="<?php echo $i; ?>">
            <img src="<?php echo $url; ?>" alt="Everest Büro Afiş <?php echo $i + 1; ?>" loading="<?php echo $i === 0 ? 'eager' : 'lazy'; ?>">
        </div>
        <?php endforeach; ?>

        <!-- Arrows -->
        <button class="hero-arrow prev" onclick="heroSlide(-1)"><i class="fa fa-chevron-left"></i></button>
        <button class="hero-arrow next" onclick="heroSlide(1)"><i class="fa fa-chevron-right"></i></button>

        <!-- Dots -->
        <div class="hero-dots">
            <?php foreach ($banners as $i => $url): ?>
            <button class="hero-dot <?php echo $i === 0 ? 'active' : ''; ?>" onclick="heroGoTo(<?php echo $i; ?>)"></button>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════
     FEATURES BAR
═══════════════════════════════════════ -->
<div class="container">
    <div class="features-bar">
        <?php 
        $features = \App\Models\Settings::get('features_bar', []);
        foreach ($features as $feat): 
            $featLink = strpos($feat['link'], 'http') === 0 ? $feat['link'] : $baseUrl . $feat['link'];
        ?>
        <a href="<?php echo $featLink; ?>" <?php echo strpos($feat['link'], 'http') === 0 ? 'target="_blank"' : ''; ?> class="feature-item">
            <div class="feature-icon"><i class="fa <?php echo htmlspecialchars(isset($feat['icon']) ? $feat['icon'] : 'fa-circle'); ?>"></i></div>
            <div class="feature-text">
                <strong><?php echo htmlspecialchars(isset($feat['title']) ? $feat['title'] : ''); ?></strong>
                <span><?php echo htmlspecialchars(isset($feat['desc']) ? $feat['desc'] : ''); ?></span>
            </div>
        </a>
        <?php endforeach; ?>
    </div>
</div>

<!-- ═══════════════════════════════════════
     CATEGORY CIRCLES
═══════════════════════════════════════ -->
<?php $allCategories = \App\Models\Category::all(['parent_slug' => null]); ?>
<div class="container">
    <div class="category-card">
        <div class="cat-circles">
            <?php foreach ($allCategories as $cat):
                $prods = \App\Models\Product::all(['category_slug' => $cat->slug]);
                $imgUrl = '';
                foreach ($prods as $p) {
                    if (!empty($p->getImages())) { $imgUrl = $p->getMainImage($baseUrl); break; }
                }
                // Icon fallback map
                $iconMap = [
                    'yazıcı'=>'fa-print','bilgisayar'=>'fa-laptop','fotokopi'=>'fa-copy',
                    'kamera'=>'fa-video-camera','monitör'=>'fa-desktop','ups'=>'fa-bolt',
                    'sarf'=>'fa-tint','yedek'=>'fa-wrench','teknik'=>'fa-cogs',
                ];
                $icon = 'fa-shopping-bag';
                $cLow = mb_strtolower($cat->name, 'UTF-8');
                foreach ($iconMap as $k => $v) { if (strpos($cLow, $k) !== false) { $icon = $v; break; } }
            ?>
            <a href="<?php echo $baseUrl; ?>/<?php echo $cat->slug; ?>" class="cat-circle">
                <div class="cat-circle-wrapper">
                    <div class="cat-circle-img">
                        <?php if ($imgUrl): ?>
                        <img src="<?php echo $imgUrl; ?>" alt="<?php echo htmlspecialchars($cat->name); ?>">
                        <?php else: ?>
                        <i class="fa <?php echo $icon; ?>"></i>
                        <?php endif; ?>
                    </div>
                    
                    <svg class="cat-circle-text-svg" viewBox="0 0 100 100">
                        <path id="curve-<?php echo $cat->slug; ?>" d="M 50,12 a 38,38 0 1,1 0,76 a 38,38 0 1,1 0,-76" fill="transparent" />
                        <text>
                            <textPath href="#curve-<?php echo $cat->slug; ?>" startOffset="50%" text-anchor="middle">
                                <?php echo htmlspecialchars($cat->name); ?>
                            </textPath>
                        </text>
                    </svg>
                </div>
                <span class="cat-circle-label"><?php echo htmlspecialchars($cat->name); ?></span>
            </a>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════
     ÇOK SATANLAR GRID
═══════════════════════════════════════ -->
<div class="container">
    <div class="featured-section top-featured">
        <div class="section-heading featured-heading">
            <div class="heading-content">
                <h2 class="minimal-heading"><i class="fa fa-star" style="color:var(--orange);"></i> <span>En çok tercih edilenler</span></h2>
            </div>
            <a href="<?php echo $baseUrl; ?>/search?filter=featured" class="btn-view-all icon-only" title="Tümünü Gör"><i class="fa fa-arrow-right"></i></a>
        </div>
        <div class="products-grid">
            <?php foreach (array_slice($featuredProducts, 0, 5) as $prod): ?>
            <article class="product-card">
                <span class="product-badge">YENİ</span>
                <div class="product-image">
                    <a href="<?php echo $baseUrl; ?>/<?php echo $prod->slug; ?>">
                        <img src="<?php echo $prod->getMainImage($baseUrl); ?>"
                             alt="<?php echo htmlspecialchars($prod->name); ?>" loading="lazy">
                    </a>
                    <button class="quick-add" onclick="addToCart('<?php echo $prod->id; ?>', 1)">
                        <i class="fa fa-shopping-basket"></i> Sepete Ekle
                    </button>
                </div>
                <div class="product-body">
                    <div class="product-brand"><?php echo htmlspecialchars(brandName($prod->brand_slug ?? '', $brandMap)); ?></div>
                    <h4 class="product-title">
                        <a href="<?php echo $baseUrl; ?>/<?php echo $prod->slug; ?>"><?php echo htmlspecialchars($prod->name); ?></a>
                    </h4>
                    <div class="product-price"><?php echo $prod->getFormattedPrice(); ?></div>
                </div>
            </article>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════
     YENİ ÜRÜNLER GRID
═══════════════════════════════════════ -->
<div class="container">
    <div class="featured-section">
        <div class="section-heading featured-heading">
            <div class="heading-content">
                <h2 class="minimal-heading"><i class="fa fa-bolt" style="color:var(--orange);"></i> <span>Yeni Ürünler</span></h2>
            </div>
            <a href="<?php echo $baseUrl; ?>/search?filter=new" class="btn-view-all icon-only" title="Tümünü Gör"><i class="fa fa-arrow-right"></i></a>
        </div>
        <div class="products-grid">
            <?php foreach (array_slice($otherProducts, 0, 10) as $prod): ?>
            <article class="product-card">
                <span class="product-badge">YENİ</span>
                <div class="product-image">
                    <a href="<?php echo $baseUrl; ?>/<?php echo $prod->slug; ?>">
                        <img src="<?php echo $prod->getMainImage($baseUrl); ?>"
                             alt="<?php echo htmlspecialchars($prod->name); ?>" loading="lazy">
                    </a>
                    <button class="quick-add" onclick="addToCart('<?php echo $prod->id; ?>', 1)">
                        <i class="fa fa-shopping-basket"></i> Sepete Ekle
                    </button>
                </div>
                <div class="product-body">
                    <div class="product-brand"><?php echo htmlspecialchars(brandName($prod->brand_slug ?? '', $brandMap)); ?></div>
                    <h4 class="product-title">
                        <a href="<?php echo $baseUrl; ?>/<?php echo $prod->slug; ?>"><?php echo htmlspecialchars($prod->name); ?></a>
                    </h4>
                    <div class="product-price"><?php echo $prod->getFormattedPrice(); ?></div>
                </div>
            </article>
            <?php endforeach; ?>
        </div>
    </div>
</div>


<!-- Bottom spacing removed to equalise gaps -->

<!-- ═══════════════════════════════════════
     SLIDER SCRIPT
═══════════════════════════════════════ -->
<script>
(function() {
    const slides = document.querySelectorAll('.hero-slide');
    const dots   = document.querySelectorAll('.hero-dot');
    let current  = 0;
    let timer;

    function goTo(idx) {
        slides[current].classList.remove('active');
        dots[current].classList.remove('active');
        current = (idx + slides.length) % slides.length;
        slides[current].classList.add('active');
        dots[current].classList.add('active');
    }

    function startAuto() {
        clearInterval(timer);
        timer = setInterval(() => goTo(current + 1), 4500);
    }

    window.heroSlide  = (dir) => { goTo(current + dir); startAuto(); };
    window.heroGoTo   = (idx) => { goTo(idx); startAuto(); };

    startAuto();
})();
</script>

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