{% set categories = page.header.navigation.tree %}

{% block base_main %}
	{# Hero Section Component #}
	<section class="asocut-hero">
		<div class="container">
			<h1>{{ theme_config('hero-title') }}</h1>
			<p>{{ theme_config('hero-subtitle') }}</p>
			<div
				class="hero-actions">
				{# <a href="{{ path('frontend.navigation.page', {'navigationId': config('core.listing.defaultListingId')}) }}" class="btn btn-primary btn-lg me-2"><i class="bi bi-shop"></i>{{ "general.shopNow"|trans|default("ShopNow") }}</a> #}
				<a href="#featured" class="btn btn-outline-light btn-lg">
					{{ "general.learnMore"|trans|default("Learn More") }}
				</a>
			</div>

			{# Category Cards in Hero #}
			<div class="hero-categories">
				<div
					class="row g-4">
					{# Dynamically display categories #}
					{% for category in categories %}
						{% if category.visible and loop.index <= 6 %}
							<div class="col-lg-4 col-md-6">
								<a href="{{ seoUrl('frontend.navigation.page', {'navigationId': category.id}) }}" class="hero-category-card">
									<div class="category-image-wrapper">
										{% if category.media %}
											<img src="{{ category.media.url }}" alt="{{ category.translated.name }}">
										{% else %}
											<img src="{{ asset('bundles/storefront/assets/icon/default/placeholder.svg') }}" alt="{{ category.translated.name }}">
										{% endif %}
									</div>
									<h3>
										<i class="bi bi-gear-fill"></i>
										{{ category.translated.name }}</h3>
									<p>{{ category.translated.description|striptags|slice(0, 100) }}
										{% if category.translated.description|length > 100 %}...
										{% endif %}
									</p>
								</a>
							</div>
						{% endif %}
					{% endfor %}
					<div class="col-lg-4 col-md-6">
										<a href="#" class="hero-category-card">
											<div class="category-image-wrapper">
												<img src="{{ asset('bundles/asocuttheme/drill-bits.png') }}" alt="Drill Bits">
											</div>
											<h3>
												<i class="bi bi-tools"></i>
												Drill Bits</h3>
											<p>High-speed steel drill bits for metal, wood, and concrete drilling applications</p>
										</a>
									</div>
					
									<div class="col-lg-4 col-md-6">
										<a href="#" class="hero-category-card">
											<div class="category-image-wrapper">
												<img src="{{ asset('bundles/asocuttheme/saw-blades.png') }}" alt="Saw Blades">
											</div>
											<h3>
												<i class="bi bi-circle"></i>
												Saw Blades</h3>
											<p>Industrial-grade circular saw blades and cutting discs for all materials</p>
										</a>
									</div>

				</div>
			</div>
		</div>
	</section>
{% endblock %}