@extends('layouts.app_web')

@section('title', __('3d_embossed.meta_title'))
@section('meta_description', __('3d_embossed.meta_description'))
@section('og_image', asset('images/layer-3-3D-embossed-edit-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;
		}

		.product-hero .image-col img {
			width: 100%;
			height: auto;
			display: block;
		}

		.product-hero .image-col .enlarge-link {
			display: block;
			text-align: center;
			margin-top: 12px;
			font-size: 0.9rem;
			color: #008384;
			text-decoration: none;
		}

		.product-hero .image-col .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 50px auto;
			padding: 0 40px;
		}

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

		.info-block {
			margin-bottom: 40px;
		}

		.info-label {
			font-size: 0.9rem;
			color: #777;
			margin-bottom: 6px;
			font-weight: 400;
		}

		.info-value {
			font-size: 1.2rem;
			font-weight: 800;
			color: #333;
		}

		.treatments-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 24px 16px;
			margin-top: 12px;
		}

		.treatment-item {
			display: flex;
			align-items: center;
			gap: 14px;
		}

		.treatment-icon {
			width: 52px;
			height: 52px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			overflow: hidden;
		}

		.treatment-icon img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.treatment-item span {
			font-size: 1rem;
			color: #333;
			font-weight: 700;
		}

		.color-grid {
			display: flex;
			flex-wrap: wrap;
			gap: 20px 30px;
			margin-top: 12px;
		}

		.color-swatch {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px;
			width: 70px;
		}

		.color-circle {
			width: 58px;
			height: 58px;
			border-radius: 50%;
			border: 1px solid rgba(0, 0, 0, 0.1);
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
		}

		.color-circle.white-swatch {
			background-color: #ffffff;
			border: 1.5px solid #bbb;
		}

		.color-swatch span {
			font-size: 18px;
			color: #464646;
			text-align: center;
			font-family: Oxygen, Helvetica, Arial, Lucida, sans-serif !important;
			font-weight: 700;
		}

		.section-divider {
			max-width: 1400px;
			margin: 0 auto 50px auto;
			padding: 0 40px;
			border: none;
			border-top: 1px solid #ddd;
		}

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

		.features-section h3 {
			font-size: 1.8rem;
			font-weight: 800;
			color: #335B5C;
			margin-bottom: 30px;
		}

		.features-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 20px 80px;
		}

		.feature-item {
			display: flex;
			align-items: flex-start;
			gap: 16px;
		}

		.feature-number {
			width: 32px;
			height: 32px;
			background-color: #6A8EAE;
			color: white;
			font-size: 0.9rem;
			font-weight: 700;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			border-radius: 3px;
			margin-top: 1px;
		}

		.feature-item p {
			font-size: 1rem;
			color: #333;
			line-height: 1.5;
			font-weight: 700;
		}

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

		.ideal-section h3 {
			font-size: 1.8rem;
			font-weight: 800;
			color: #335B5C;
			margin-bottom: 10px;
		}

		.ideal-subtitle {
			font-size: 0.9rem;
			color: #888;
			margin-bottom: 28px;
		}

		.ideal-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			row-gap: 18px;
			column-gap: 20px;
		}

		.ideal-item {
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 1rem;
			color: #333;
			font-weight: 700;
			text-decoration: none;
		}

		.ideal-item::before {
			content: "\2022";
			color: #008384;
			font-size: 1.4rem;
			line-height: 1;
			flex-shrink: 0;
		}

		.ideal-item a {
			color: #333;
			text-decoration: none;
		}

		.ideal-item a:hover {
			color: #008384;
		}

		.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;
			}

			.treatments-grid {
				display: flex !important;
				gap: 16px !important;
				flex-direction: column !important;
				align-items: flex-start !important;
			}

			.treatment-item span {
				font-size: 16px !important;
			}

			.color-grid {
				display: flex !important;
				flex-wrap: wrap !important;
				gap: 20px !important;
			}

			.color-swatch {
				width: auto !important;
			}

			.color-circle {
				width: 48px !important;
				height: 48px !important;
			}

			.color-swatch span {
				font-size: 14px !important;
			}

			.section-divider {
				padding: 0 !important;
				margin: 0 20px 40px 20px !important;
			}

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

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

			.features-grid {
				grid-template-columns: 1fr !important;
				gap: 20px !important;
			}

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

			.ideal-section h3 {
				font-size: 22px !important;
			}

			.ideal-subtitle {
				font-size: 14px !important;
				margin-bottom: 20px !important;
			}

			.ideal-grid {
				grid-template-columns: 1fr !important;
				gap: 12px !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())) }}">
				{{ __('3d_embossed.breadcrumb_product_range') }}
			</a>
			&gt;
			<a href="{{ \App\Helpers\RouteTranslator::getUrl('spunbond', request()->get('lang', app()->getLocale())) }}">
				{{ __('3d_embossed.breadcrumb_spunbond') }}
			</a>
			&gt;
			{{ __('3d_embossed.breadcrumb_current') }}
		</p>
	</div>
	<div class="product-hero">
		<div class="image-col">
			<img src="{{ asset('images/layer-3-3D-embossed-edit-2-scaled.jpg') }}" alt="{{ __('3d_embossed.hero_image_alt') }}"
				onclick="openLightbox(event)" style="cursor: pointer;" fetchpriority="high" decoding="async">
			<a href="#" class="enlarge-link" onclick="openLightbox(event)">{{ __('3d_embossed.enlarge_image') }}</a>
		</div>
		<div class="text-col">
			<h2>{{ __('3d_embossed.title') }}</h2>
			<p>{{ __('3d_embossed.paragraph_1') }}</p>
		</div>
	</div>
	<div class="product-info-section">
		<h3>{{ __('3d_embossed.product_info_title') }}</h3>
		<div class="info-block">
			<p class="info-label">{{ __('3d_embossed.basic_weight_label') }}</p>
			<p class="info-value">{{ __('3d_embossed.basic_weight_value') }}</p>
			<div class="info-block">
				<p class="info-label">{{ __('3d_embossed.treatments_label') }}</p>
				<div class="treatments-grid">
					<div class="treatment-item">
						<div class="treatment-icon">
							<img src="{{ asset('images/Untitled.png') }}"
								alt="{{ __('3d_embossed.treatment_hydrophilic') }}" loading="lazy" decoding="async">
						</div>
						<span>{{ __('3d_embossed.treatment_hydrophilic') }}</span>
					</div>
				</div>
			</div>

			<div class="info-block">
				<p class="info-label">{{ __('3d_embossed.color_label') }}</p>
				<div class="color-grid">
					<div class="color-swatch">
						<div class="color-circle white-swatch"></div>
						<span>{{ __('3d_embossed.color_white') }}</span>
					</div>
				</div>
			</div>
		</div>

		<hr class="section-divider">

		<div class="features-section">
			<h3>{{ __('3d_embossed.features_title') }}</h3>
			<div class="features-grid">
				<div class="feature-item">
					<div class="feature-number">1</div>
					<p>{{ __('3d_embossed.feature_1') }}</p>
				</div>
				<div class="feature-item">
					<div class="feature-number">3</div>
					<p>{{ __('3d_embossed.feature_3') }}</p>
				</div>
				<div class="feature-item">
					<div class="feature-number">2</div>
					<p>{{ __('3d_embossed.feature_2') }}</p>
				</div>
				<div class="feature-item">
					<div class="feature-number">4</div>
					<p>{{ __('3d_embossed.feature_4') }}</p>
				</div>
				<div class="feature-item">
					<div class="feature-number">5</div>
					<p>{{ __('3d_embossed.feature_5') }}</p>
				</div>
			</div>
		</div>

		<hr class="section-divider">

		<div class="ideal-section">
			<h3>{{ __('3d_embossed.ideal_title') }}</h3>
			<p class="ideal-subtitle">{{ __('3d_embossed.ideal_subtitle') }}</p>
			<div class="ideal-grid">
				<div class="ideal-item">
					<a
						href="{{ \App\Helpers\RouteTranslator::getUrl('applications', request()->get('lang', app()->getLocale())) }}#personalcare&Hygiene">{{ __('3d_embossed.ideal_personal_care') }}</a>
				</div>
			</div>
		</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 src="{{ asset('images/layer-3-3D-embossed-edit-2-scaled.jpg') }}" alt="{{ __('3d_embossed.hero_image_alt') }}" loading="lazy" decoding="async">
			</div>
		</div>

		<script>
			function openLightbox(e) {
				e.preventDefault();
				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', function (e) {
				if (e.key === 'Escape') closeLightbox();
			});
		</script>
@endsection