{config_load file="$language/lang_$language.conf" section="categorie_listing"}

<div class="uberuns pb-5 pt-5">

	<div class="container bg-light border border-secondary border-2 p-3">
		{if $CATEGORIES_IMAGE}
		<img src="{$CATEGORIES_IMAGE}" style="height: 40vh; object-fit: cover; width: 100%;" />
		{/if}
		
		<h1 class="ico ico-5"><span>SOLARTSET.SHOP {$CATEGORIES_HEADING_TITLE}</span></h1>
		
		{if $CATEGORIES_DESCRIPTION}
		<div class="cat-details">			
		{$CATEGORIES_DESCRIPTION}
		</div>				
		{/if}
		<br>

		<div class="container py-5">
		<h2 class="mb-4">
			{if $smarty.session.language=='german'}Wählen Sie Ihr Set:{else}Choose your set:{/if}
		</h2>
		<div class="row g-3">

			{* Category 1: DEYE Low Voltage-Hybrid (LP-Series) *}
			<div class="col-md-4">
				<div class="card h-100 shadow-sm">
					<a href="https://yes-a378134.de/DEYE-NieWechselrichter---59.html">
						<img src="https://yes-a378134.de/images/categories/58.webp" class="card-img-top" style="height: 200px; object-fit: cover;" />
					</a>
					<div class="card-body text-center">
						<h5 class="card-title">
							{if $smarty.session.language=='german'}DEYE<br>Niederspannungs-Hybrid<br>(LP-Serie){else}DEYE<br>Low Voltage-Hybrid<br>(LP-Series){/if}
						</h5>
						<p class="card-text small text-muted">{if $smarty.session.language=='german'}Erklärungstext{else}Explaination Text{/if}</p>
						<a href="https://yes-a378134.de/DEYE-NieWechselrichter---59.html" class="btn btn-primary mt-2" style="width: 100%;">
							{if $smarty.session.language=='german'}Jetzt konfigurieren{else}Configure Now{/if}
						</a>
					</div>
				</div>
			</div>

			{* Placeholder 2 *}
			<div class="col-md-4">
				<div class="card h-100 border border-dashed text-center d-flex flex-column justify-content-center">
					<img src="https://www.shutterstock.com/shutterstock/videos/24223834/thumb/1.jpg?ip=x480" class="card-img-top" style="height: 200px; object-fit: cover;" />
					<div class="card-body text-center">
						<h5 class="card-title">Coming Soon</h5>
						<p class="card-text small text-muted">Weitere Kategorie hier</p>
						<a href="#" class="btn btn-primary mt-2" style="width: 100%;">
							{if $smarty.session.language=='german'}Bald Verfügbar{else}Available Soon{/if}
						</a>
					</div>
				</div>
			</div>

			{* Placeholder 3 *}
			<div class="col-md-4">
				<div class="card h-100 border border-dashed text-center d-flex flex-column justify-content-center">
					<img src="https://www.shutterstock.com/shutterstock/videos/24223834/thumb/1.jpg?ip=x480" class="card-img-top" style="height: 200px; object-fit: cover;" />
					<div class="card-body text-center">
						<h5 class="card-title">Coming Soon</h5>
						<p class="card-text small text-muted">Weitere Kategorie hier</p>
						<a href="#" class="btn btn-primary mt-2" style="width: 100%;">
							{if $smarty.session.language=='german'}Bald Verfügbar{else}Available Soon{/if}
						</a>
					</div>
				</div>
			</div>

		</div>
		</div>
	
</div>