<?php
/**
 * Categories Section
 *
 * @var array $categories
 * @var array $settings
 */

$shape = $settings['shape'] ?? 'circle'; // circle | square
?>

<section class="home-section categories-section">
    <div class="container">

        <div class="section-head section-head--styled">
            <h2>
                <?= __('categories.section_title', 'Browse Categories') ?>
            </h2>
            <p class="section-subtitle">
                <?= __('categories.section_subtitle', 'Choose what you are looking for') ?>
            </p>
        </div>

        <?php if (empty($categories)): ?>
            <p class="text-center">
                <?= __('categories.empty', 'No categories available.') ?>
            </p>
        <?php else: ?>

            <div class="categories-grid shape-<?= htmlspecialchars($shape, ENT_QUOTES, 'UTF-8') ?>">

                <?php foreach ($categories as $category): ?>

                    <a href="/category/<?= (int)$category['id'] ?>"
                       class="category-card">

                        <div class="category-image">
                            <img src="<?= htmlspecialchars(
                                $category['image']
                                    ?? '/themes/matjari/assets/img/category-placeholder.png',
                                ENT_QUOTES,
                                'UTF-8'
                            ) ?>"
                                 alt="<?= htmlspecialchars($category['name'], ENT_QUOTES, 'UTF-8') ?>">
                        </div>

                        <div class="category-name">
                            <?= htmlspecialchars($category['name'], ENT_QUOTES, 'UTF-8') ?>
                        </div>

                    </a>

                <?php endforeach; ?>

            </div>

        <?php endif; ?>

    </div>
</section>
