{{-- Footer demo-supplements-shop — 4 columnas shop-style.
     Shop (categorías) | Atención al cliente | Sobre la tienda | Newsletter+Pagos
     Inspiración: optimumnutrition.com / 1stphorm.com footer denso. --}}
<footer id="footer" class="m-0">
	<div class="container">
		<div class="row pt-5 pb-3">

			{{-- ── 1. SHOP (categorías + accesos rápidos al catálogo) ──── --}}
			<div class="col-md-6 col-lg-3 mb-4 mb-lg-2">
				<h4 class="mb-3 text-color-light text-uppercase" style="font-size: 0.9rem; letter-spacing: 1.5px; font-weight: 700;">
					{{ config('site.footer.shop_heading', 'Comprá') }}
				</h4>
				<ul class="list-unstyled">
					<li class="mb-2"><a href="{{ url('/products-catalogue') }}" class="text-color-light opacity-8 text-decoration-none hover-opacity-1">Catálogo completo</a></li>
					@php
						try {
							$footerCats = \App\Modules\Products\Models\ProductCategory::orderBy('name')->limit(6)->get();
						} catch (\Throwable $e) {
							$footerCats = collect();
						}
					@endphp
					@foreach($footerCats as $cat)
						<li class="mb-2"><a href="{{ route('front.products.category', $cat->slug) }}" class="text-color-light opacity-8 text-decoration-none">{{ $cat->name }}</a></li>
					@endforeach
					<li class="mt-3"><a href="{{ url('/products-catalogue') }}" class="text-color-primary fw-bold text-uppercase text-decoration-none" style="font-size:0.8rem;letter-spacing:1px;">Ver todo <i class="fas fa-arrow-right ms-1"></i></a></li>
				</ul>
			</div>

			{{-- ── 2. ATENCIÓN AL CLIENTE ───────────────────────────────── --}}
			<div class="col-md-6 col-lg-3 mb-4 mb-lg-2">
				<h4 class="mb-3 text-color-light text-uppercase" style="font-size: 0.9rem; letter-spacing: 1.5px; font-weight: 700;">
					{{ config('site.footer.support_heading', 'Atención') }}
				</h4>
				<ul class="list-unstyled mb-3">
					<li class="mb-2"><a href="{{ url('/faqs') }}" class="text-color-light opacity-8 text-decoration-none">Preguntas frecuentes</a></li>
					<li class="mb-2"><a href="{{ url('/contact') }}" class="text-color-light opacity-8 text-decoration-none">Contacto</a></li>
					<li class="mb-2"><a href="{{ url('/shop/cart') }}" class="text-color-light opacity-8 text-decoration-none">Mi carrito</a></li>
					@if(config('site.contact.email'))
						<li class="mb-2"><a href="mailto:{{ config('site.contact.email') }}" class="text-color-light opacity-8 text-decoration-none"><i class="far fa-envelope me-1"></i> {{ config('site.contact.email') }}</a></li>
					@endif
				</ul>
				@if(config('site.contact.phone'))
					@php $waPhone = preg_replace('/[^0-9+]/', '', config('site.contact.phone')); @endphp
					<a href="https://wa.me/{{ ltrim($waPhone, '+') }}" target="_blank" rel="noopener" class="btn btn-success btn-sm fw-bold text-uppercase d-inline-block" style="font-size:0.75rem;letter-spacing:0.5px;">
						<i class="fab fa-whatsapp me-1"></i> WhatsApp
					</a>
				@endif
			</div>

			{{-- ── 3. SOBRE LA TIENDA ──────────────────────────────────── --}}
			<div class="col-md-6 col-lg-3 mb-4 mb-lg-2">
				<h4 class="mb-3 text-color-light text-uppercase" style="font-size: 0.9rem; letter-spacing: 1.5px; font-weight: 700;">
					{{ config('site.footer.about_heading', 'Sobre nosotros') }}
				</h4>
				<p class="text-color-light opacity-8 mb-3" style="font-size: 0.85rem; line-height: 1.6;">
					{{ config('site.footer.description', 'Suplementos deportivos y dietéticos seleccionados con criterio. Asesoramiento personalizado para tu objetivo.') }}
				</p>
				<ul class="list-unstyled mb-3">
					<li class="mb-2"><a href="{{ url('/about') }}" class="text-color-light opacity-8 text-decoration-none">Quiénes somos</a></li>
					<li class="mb-2"><a href="{{ url('/blog') }}" class="text-color-light opacity-8 text-decoration-none">Blog / Novedades</a></li>
					<li class="mb-2"><a href="{{ url('/gallery') }}" class="text-color-light opacity-8 text-decoration-none">Marcas</a></li>
				</ul>
				@if(config('site.contact.address'))
					<small class="d-block text-color-light opacity-7"><i class="fas fa-map-marker-alt me-1"></i> {{ config('site.contact.address') }}</small>
				@endif
			</div>

			{{-- ── 4. SEGUINOS + NEWSLETTER MINI + PAYMENT METHODS ────── --}}
			<div class="col-md-6 col-lg-3 mb-4 mb-lg-2">
				<h4 class="mb-3 text-color-light text-uppercase" style="font-size: 0.9rem; letter-spacing: 1.5px; font-weight: 700;">
					{{ config('site.footer.social_heading', 'Seguinos') }}
				</h4>
				<x-social-icons theme="dark" size="md" classes="social-icons mb-3" />

				{{-- Payment methods row --}}
				<div class="mt-3">
					<small class="d-block text-color-light opacity-7 mb-2" style="font-size: 0.75rem; letter-spacing: 0.5px;">MEDIOS DE PAGO</small>
					<div class="d-flex flex-wrap gap-2 align-items-center">
						<span class="d-inline-flex align-items-center justify-content-center px-2 py-1 rounded" style="background:rgba(255,255,255,0.08); font-size: 0.7rem; color: rgba(255,255,255,0.85);">
							<i class="fab fa-cc-visa me-1" style="font-size:1rem;"></i> Visa
						</span>
						<span class="d-inline-flex align-items-center justify-content-center px-2 py-1 rounded" style="background:rgba(255,255,255,0.08); font-size: 0.7rem; color: rgba(255,255,255,0.85);">
							<i class="fab fa-cc-mastercard me-1" style="font-size:1rem;"></i> MC
						</span>
						<span class="d-inline-flex align-items-center justify-content-center px-2 py-1 rounded" style="background:rgba(255,255,255,0.08); font-size: 0.7rem; color: rgba(255,255,255,0.85);">
							<i class="fas fa-university me-1"></i> Transferencia
						</span>
						<span class="d-inline-flex align-items-center justify-content-center px-2 py-1 rounded" style="background:rgba(255,255,255,0.08); font-size: 0.7rem; color: rgba(255,255,255,0.85);">
							<i class="fas fa-money-bill-wave me-1"></i> Efectivo
						</span>
					</div>
				</div>

				{{-- Trust badge ANMAT --}}
				<div class="mt-3 pt-3 border-top" style="border-color: rgba(255,255,255,0.08) !important;">
					<small class="text-color-light opacity-7" style="font-size: 0.72rem;">
						<i class="fas fa-shield-alt me-1"></i> Productos certificados ANMAT.<br>
						<i class="fas fa-undo me-1"></i> Devoluciones dentro de 10 días.
					</small>
				</div>
			</div>
		</div>
	</div>

	{{-- ── Copyright bar ──────────────────────────────────── --}}
	<div class="footer-copyright pt-3 pb-3">
		<div class="container">
			<div class="row align-items-center">
				<div class="col-md-6 text-center text-md-start m-0">
					<p class="mb-0" style="font-size: 0.82rem;">
						&copy; {{ date('Y') }} {{ config('site.name') }}.
						{{ config('site.footer.copyright_text', 'Todos los derechos reservados.') }}
					</p>
				</div>
				<div class="col-md-6 text-center text-md-end m-0">
					<small style="font-size: 0.78rem; opacity: 0.7;">
						Powered by <a href="https://bewpro.com" target="_blank" rel="noopener" class="text-color-light text-decoration-none">BewPro</a>
					</small>
				</div>
			</div>
		</div>
	</div>
</footer>