@extends('layouts.app_web')

@section('title', __('absorbents.meta_title'))
@section('meta_description', __('absorbents.meta_description'))
@section('og_image', asset('images/layer-3-Absorbents-9534-2-scaled.jpg'))

@push('styles')
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: Oxygen, Helvetica, Arial, Lucida, sans-serif !important;
			color: #333;
			line-height: 1.6;
		}

		.breadcrumb-section {
			max-width: 1400px;
			margin: 0 auto;
			padding: 30px 40px 20px 40px;
		}

		.breadcrumb-section p {
			font-size: 0.9rem;
			color: #555;
		}

		.breadcrumb-section a {
			color: #008384;
			text-decoration: none;
		}

		.breadcrumb-section a:hover {
			text-decoration: underline;
		}

		.product-hero {
			max-width: 1400px;
			margin: 0 auto 60px auto;
			padding: 0 40px;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 60px;
			align-items: start;
		}

		.carousel-col {
			position: relative;
		}

		.carousel-wrapper {
			position: relative;
			overflow: hidden;
			width: 100%;
		}

		.carousel-track {
			display: flex;
			transition: transform 0.5s ease;
		}

		.carousel-slide {
			min-width: 100%;
		}

		.carousel-slide img {
			width: 100%;
			height: auto;
			display: block;
		}

		.carousel-btn {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			background: rgba(255, 255, 255, 0.85);
			border: none;
			width: 38px;
			height: 38px;
			border-radius: 50%;
			font-size: 1.1rem;
			cursor: pointer;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #335B5C;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
			transition: background 0.2s;
		}

		.carousel-btn:hover {
			background: #fff;
		}

		.carousel-btn.prev {
			left: 10px;
		}

		.carousel-btn.next {
			right: 10px;
		}

		.enlarge-link {
			display: block;
			text-align: center;
			margin-top: 12px;
			font-size: 0.9rem;
			color: #008384;
			text-decoration: none;
			cursor: pointer;
			background: transparent;
			border: none;
			width: 100%;
			font-family: inherit;
		}

		.enlarge-link:hover {
			text-decoration: underline;
		}

		.product-hero .text-col h2 {
			font-size: 46px;
			font-weight: 500;
			color: #335B5C;
			margin-bottom: 24px;
		}

		.product-hero .text-col p {
			font-size: 20px;
			color: #555;
			line-height: 1.75;
			margin-bottom: 16px;
			font-weight: 300;
		}

		.product-info-section {
			max-width: 1400px;
			margin: 0 auto 60px auto;
			padding: 0 40px;
		}

		.product-info-section h3 {
			font-size: 25px;
			font-weight: 600;
			color: #335B5C;
			margin-bottom: 24px;
		}

		.info-list {
			list-style: disc;
			padding-left: 20px;
			color: #555;
			font-size: 0.95rem;
			line-height: 1.8;
		}

		.info-list>li {
			margin-bottom: 16px;
		}

		.info-list .inner-list {
			list-style: disc;
			padding-left: 24px;
			margin-top: 8px;
		}

		.info-list .inner-list li {
			margin-bottom: 6px;
			color: #555;
		}

		.info-list strong {
			color: #333;
		}

		.container-custom {
			max-width: 1400px;
			margin: 0 auto;
			padding: 0 40px;
		}

		.social-footer {
			padding: 40px 0;
			display: flex;
			gap: 20px;
		}

		.social-footer a {
			color: #456C6C;
			font-size: 1.2rem;
			transition: 0.3s;
		}

		.social-footer a:hover {
			color: #4ECDC4;
		}

		.lightbox-overlay {
			display: none;
			position: fixed;
			inset: 0;
			background: rgba(0, 0, 0, 0.82);
			z-index: 9999;
			align-items: center;
			justify-content: center;
		}

		.lightbox-overlay.active {
			display: flex;
		}

		.lightbox-inner {
			position: relative;
			display: inline-block;
		}

		.lightbox-inner img {
			max-width: 70vw;
			max-height: 80vh;
			object-fit: contain;
			display: block;
			border-radius: 2px;
		}

		.lightbox-close {
			position: absolute;
			top: -18px;
			right: -18px;
			width: 36px;
			height: 36px;
			background: #fff;
			border: none;
			border-radius: 50%;
			color: #333;
			font-size: 1.2rem;
			font-weight: 700;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
			transition: background 0.2s, color 0.2s;
			z-index: 10001;
		}

		.lightbox-close:hover {
			background: #456C6C;
			color: #fff;
		}

		@media (max-width: 980px) {
			.breadcrumb-section {
				padding: 20px 20px 10px 20px !important;
			}

			.product-hero {
				grid-template-columns: 1fr !important;
				gap: 20px !important;
				padding: 0 20px !important;
				margin-bottom: 40px !important;
			}

			.product-hero .text-col h2 {
				font-size: 28px !important;
				line-height: 1.3 !important;
				margin-bottom: 20px !important;
			}

			.product-hero .text-col p {
				font-size: 16px !important;
				line-height: 1.6 !important;
				margin-bottom: 20px !important;
				color: #666 !important;
			}

			.product-info-section {
				padding: 0 20px !important;
				margin-bottom: 40px !important;
			}

			.product-info-section h3 {
				font-size: 22px !important;
				margin-bottom: 20px !important;
			}

			.info-block {
				margin-bottom: 30px !important;
			}

			.info-label {
				font-size: 16px !important;
				margin-bottom: 10px !important;
			}

			.info-value {
				font-size: 18px !important;
			}

			.container-custom {
				padding: 0 20px !important;
			}

			.social-footer {
				justify-content: center !important;
				padding: 30px 20px !important;
			}

			.lightbox-inner img {
				max-width: 95vw !important;
				max-height: 80vh !important;
			}
		}
	</style>
@endpush

@section('content')
	<div class="breadcrumb-section">
		<p>
			<a
				href="{{ \App\Helpers\RouteTranslator::getUrl('product-range', request()->get('lang', app()->getLocale())) }}">
				{{ __('absorbents.breadcrumb_product_range') }}
			</a>
			&gt;
			<a
				href="{{ \App\Helpers\RouteTranslator::getUrl('composite-materials', request()->get('lang', app()->getLocale())) }}">
				{{ __('absorbents.breadcrumb_composite') }}
			</a>
			&gt;
			{{ __('absorbents.breadcrumb_current') }}
		</p>
	</div>
	<div class="product-hero">
		<div class="carousel-col">
			<div class="carousel-wrapper" id="carousel">
				<div class="carousel-track" id="carouselTrack">
					<div class="carousel-slide">
						<img src="{{ asset('images/layer-3-Absorbents-9534-2-scaled.jpg') }}"
							alt="{{ __('absorbents.hero_image_alt') }}" onclick="openLightbox()" style="cursor: pointer;" fetchpriority="high" decoding="async">
					</div>
					<div class="carousel-slide">
						<img src="{{ asset('images/layer-3-Absorbents-sock-9510-e-2-scaled.jpg') }}"
							alt="{{ __('absorbents.hero_image_alt') }}" onclick="openLightbox()" style="cursor: pointer;" loading="lazy" decoding="async">
					</div>
					<div class="carousel-slide">
						<img src="{{ asset('images/Layer-3-Composit-Material-Absorbents-2-scaled.jpg') }}"
							alt="{{ __('absorbents.hero_image_alt') }}" onclick="openLightbox()" style="cursor: pointer;" loading="lazy" decoding="async">
					</div>
				</div>
				<button class="carousel-btn prev" id="prevBtn" aria-label="Previous slide">&#8249;</button>
				<button class="carousel-btn next" id="nextBtn" aria-label="Next slide">&#8250;</button>
			</div>
			<button type="button" class="enlarge-link" onclick="openLightbox()">{{ __('absorbents.enlarge_image') }}</button>
		</div>
		<div class="text-col">
			<h2>{{ __('absorbents.title') }}</h2>
			<p>{{ __('absorbents.paragraph_1') }}</p>
			<p>{{ __('absorbents.paragraph_2') }}</p>
		</div>
	</div>
	<div class="product-info-section">
		<h3>{{ __('absorbents.product_info_title') }}</h3>

		<ul class="info-list">
			<li>
				{{ __('absorbents.info_types_intro') }}
				<ul class="inner-list">
					<li><strong>{{ __('absorbents.type_hydrocarbon_label') }}</strong>
						{{ __('absorbents.type_hydrocarbon_desc') }}</li>
					<li><strong>{{ __('absorbents.type_general_label') }}</strong> {{ __('absorbents.type_general_desc') }}
					</li>
					<li><strong>{{ __('absorbents.type_hazardous_label') }}</strong>
						{{ __('absorbents.type_hazardous_desc') }}</li>
				</ul>
			</li>
			<li>
				{{ __('absorbents.info_shapes_intro') }}
				<ul class="inner-list">
					<li><strong>{{ __('absorbents.shape_pads_label') }}</strong> {{ __('absorbents.shape_pads_desc') }}</li>
					<li><strong>{{ __('absorbents.shape_pillows_label') }}</strong>
						{{ __('absorbents.shape_pillows_desc') }}</li>
					<li><strong>{{ __('absorbents.shape_booms_label') }}</strong> {{ __('absorbents.shape_booms_desc') }}
					</li>
				</ul>
			</li>
		</ul>
	</div>

	<div class="container-custom">
		<div class="social-footer">
			<a href="https://www.facebook.com/multispunindojaya/" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
				<i class="fab fa-facebook-f"></i>
			</a>
			<a href="https://instagram.com/msj.nonwoven" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
				<i class="fab fa-instagram"></i>
			</a>
			<a href="https://www.youtube.com/channel/UCJQ3kXswqa6u-jFqD4nL6lA" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
				<i class="fab fa-youtube"></i>
			</a>
			<a href="https://www.linkedin.com/company/multispunindojaya" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
				<i class="fab fa-linkedin-in"></i>
			</a>
		</div>
	</div>
	<div class="lightbox-overlay" id="lightbox" onclick="closeLightboxOnBg(event)">
		<div class="lightbox-inner">
			<button class="lightbox-close" onclick="closeLightbox()">&times;</button>
			<img id="lightboxImg" src="{{ asset('images/layer-3-Absorbents-9534-2-scaled.jpg') }}"
				alt="{{ __('absorbents.hero_image_alt') }}" loading="lazy" decoding="async">
		</div>
	</div>

	<script>
		const track = document.getElementById('carouselTrack');
		const slides = track.querySelectorAll('.carousel-slide');
		const lightboxImg = document.getElementById('lightboxImg');
		let current = 0;
		let autoTimer;

		const fullImages = [
			"{{ asset('images/layer-3-Absorbents-9534-2-scaled.jpg') }}",
			"{{ asset('images/layer-3-Absorbents-sock-9510-e-2-scaled.jpg') }}",
			"{{ asset('images/Layer-3-Composit-Material-Absorbents-2-scaled.jpg') }}"
		];

		function goTo(index) {
			current = (index + slides.length) % slides.length;
			track.style.transform = `translateX(-${current * 100}%)`;
		}

		function startAuto() {
			autoTimer = setInterval(() => goTo(current + 1), 3000);
		}

		function stopAuto() {
			clearInterval(autoTimer);
		}

		document.getElementById('prevBtn').addEventListener('click', () => { stopAuto(); goTo(current - 1); startAuto(); });
		document.getElementById('nextBtn').addEventListener('click', () => { stopAuto(); goTo(current + 1); startAuto(); });

		startAuto();
		function openLightbox() {
			lightboxImg.src = fullImages[current];
			document.getElementById('lightbox').classList.add('active');
			document.body.style.overflow = 'hidden';
		}
		function closeLightbox() {
			document.getElementById('lightbox').classList.remove('active');
			document.body.style.overflow = '';
		}
		function closeLightboxOnBg(e) {
			if (e.target === document.getElementById('lightbox')) closeLightbox();
		}
		document.addEventListener('keydown', e => { if (e.key === 'Escape') closeLightbox(); });
	</script>
@endsection