{{ if !region || !config:app:bee_friendly_plants:regions[region] }}
    {{ 404 }}
{{ /if }}

{{ section:seo_title }}
    {{ config:app:bee_friendly_plants:regions[region] }}
{{ /section:seo_title }}

{{ partial:components/section extra-padding="true" max-width="lg" }}
    <nav class="mb-12 font-bold text-left uppercase font-headline">
        <a href="/do/bee-gardening#regions" class="text-black transition-colors hover:text-black whitespace-nowrap">Bee Gardening</a> <i class="inline-block mx-1 text-sm fa-solid fa-chevron-right"></i>
        <span class="whitespace-nowrap">{{ config:app:bee_friendly_plants:regions[region] }}</span>
    </nav>

    <div class="max-w-2xl mx-auto">
        {{ partial:components/section-title text="Click To See the Best Bee-Friendly Plants for Each Category" }}
    </div>

    <div class="flex flex-wrap justify-center mt-8 -mx-3 -mb-3">
        {{ foreach:config:app:bee_friendly_plants:categories }}
            <a
                href="/do/bee-gardening/regions/{{ region }}/{{ key }}"
                class="flex-grow-0 flex-shrink-0 w-full max-w-xs p-3 group sm:w-1/3 lg:w-1/5"
            >
                <img
                    class="w-full transition-transform group-hover:scale-105"
                    src="/assets/bee-friendly-plants/categories/{{ key }}.png"
                    alt="{{ value }} image"
                />
                <h2 class="mt-3 text-xl font-bold text-black uppercase transition-colors font-headline group-hover:text-black">{{ value }}</h2>
            </a>
        {{ /foreach:config:app:bee_friendly_plants:categories }}
    </div>
{{ /partial:components/section }}