@extends('layouts.app_web')

@section('title', __('composite_materials.meta_title'))
@section('meta_description', __('composite_materials.meta_description'))
@section('og_image', asset('images/layer-1-composite-materials-8825-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;
        }

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

        .hero-section .image-col {
            position: relative;
        }

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

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

        .hero-section .image-col .enlarge-link:hover {
            text-decoration: underline;
        }

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

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



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

        .product-item {
            display: grid;
            grid-template-columns: 1fr 2.5fr;
            align-items: stretch;
            margin-bottom: 4px;
        }

        .product-item:nth-child(odd) {
            background-color: #BAC9CB;
        }

        .product-item:nth-child(even) {
            background-color: #DFDDDD;
        }

        .product-item .product-name-col {
            padding: 40px 36px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .product-item .product-name-col h3 {
            font-size: 26px;
            font-weight: 700;
            color: #335B5C;
            line-height: 1.35;
            margin-bottom: 6px;
        }

        .product-item .product-desc-col {
            padding: 40px 36px;
            border-left: 2px solid rgba(255, 255, 255, 0.6);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 24px;
            min-height: 140px;
        }

        .product-item .product-desc-col p {
            font-size: 16px;
            color: #333;
            line-height: 1.6;
            font-weight: 500;
        }

        .product-item .product-desc-col .btn-wrap {
            display: flex;
            justify-content: flex-end;
        }

        .btn-learn-more {
            display: inline-block;
            border: 1px solid #555;
            color: #444;
            padding: 10px 28px;
            text-decoration: none;
            font-size: 0.9rem;
            background: transparent;
            transition: 0.3s;
            white-space: nowrap;
        }

        .btn-learn-more:hover {
            background: #456C6C;
            color: white;
            border-color: #456C6C;
        }

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

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

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

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

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

            .product-item {
                grid-template-columns: 1fr !important;
                margin-bottom: 0 !important;
            }

            .product-item .product-name-col {
                padding: 30px 20px 10px 20px !important;
            }

            .product-item .product-name-col h3 {
                font-size: 22px !important;
                font-weight: 600 !important;
                line-height: 1.3 !important;
                margin-bottom: 4px !important;
            }

            .product-item .product-desc-col {
                padding: 10px 20px 30px 20px !important;
                border-left: none !important;
                border-top: none !important;
                min-height: auto !important;
                gap: 20px !important;
            }

            .product-item .product-desc-col p {
                font-size: 16px !important;
                line-height: 1.6 !important;
                font-weight: 300 !important;
            }

            .btn-learn-more {
                padding: 8px 20px !important;
                font-size: 14px !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;
            }
        }

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

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

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

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

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

        .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: 65vw;
            max-height: 72vh;
            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;
            line-height: 1;
            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;
        }
    </style>
@endpush

@section('content')
    <div class="breadcrumb-section">
        <p>
            <a
                href="{{ \App\Helpers\RouteTranslator::getUrl('product-range', request()->get('lang', app()->getLocale())) }}">
                {{ __('composite_materials.breadcrumb_product_range') }}
            </a> &gt; {{ __('composite_materials.breadcrumb_current') }}
        </p>
    </div>
    <div class="hero-section">
        <div class="image-col">
            <img src="{{ asset('images/layer-1-composite-materials-8825-2-scaled.jpg') }}"
                alt="{{ __('composite_materials.hero_image_alt') }}" onclick="openLightbox(event)" style="cursor: pointer;" fetchpriority="high" decoding="async">
            <a href="#" class="enlarge-link" onclick="openLightbox(event)">{{ __('composite_materials.enlarge_image') }}</a>
        </div>
        <div class="text-col">
            <h2>{{ __('composite_materials.title') }}</h2>
            <p>{{ __('composite_materials.paragraph_1') }}</p>
            <p>{{ __('composite_materials.paragraph_2') }}</p>
        </div>
    </div>
    <div class="product-list-section">
        <div class="product-item">
            <div class="product-name-col">
                <h3>{{ __('composite_materials.sap_name') }}</h3>
            </div>
            <div class="product-desc-col">
                <p>{{ __('composite_materials.sap_description') }}</p>
                <div class="btn-wrap">
                    <a href="{{ \App\Helpers\RouteTranslator::getUrl('sap-sheet', request()->get('lang', app()->getLocale())) }}"
                        class="btn-learn-more" title="{{ __('composite_materials.sap_name') }}" aria-label="{{ __('composite_materials.sap_name') }}">
                        {{ __('composite_materials.learn_more') }} <span class="sr-only">{{ __('composite_materials.sap_name') }}</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="product-item">
            <div class="product-name-col">
                <h3>{{ __('composite_materials.absorbents_name') }}</h3>
            </div>
            <div class="product-desc-col">
                <p>{{ __('composite_materials.absorbents_description') }}</p>
                <div class="btn-wrap">
                    <a href="{{ \App\Helpers\RouteTranslator::getUrl('absorbents', request()->get('lang', app()->getLocale())) }}"
                        class="btn-learn-more" title="{{ __('composite_materials.absorbents_name') }}" aria-label="{{ __('composite_materials.absorbents_name') }}">
                        {{ __('composite_materials.learn_more') }} <span class="sr-only">{{ __('composite_materials.absorbents_name') }}</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="product-item">
            <div class="product-name-col">
                <h3>{{ __('composite_materials.pef_name') }}</h3>
            </div>
            <div class="product-desc-col">
                <p>{{ __('composite_materials.pef_description') }}</p>
                <div class="btn-wrap">
                    <a href="{{ \App\Helpers\RouteTranslator::getUrl('spunbond-breathable-pef-composite', request()->get('lang', app()->getLocale())) }}"
                        class="btn-learn-more" title="{{ __('composite_materials.pef_name') }}" aria-label="{{ __('composite_materials.pef_name') }}">
                        {{ __('composite_materials.learn_more') }} <span class="sr-only">{{ __('composite_materials.pef_name') }}</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="container-custom">
        <div class="social-footer">
            <a href="https://www.facebook.com/multispunindojaya/" target="_blank" rel="noopener noreferrer" title="Facebook" aria-label="Facebook"><i class="fab fa-facebook-f"></i><span class="sr-only">Facebook</span></a>
            <a href="https://instagram.com/msj.nonwoven" target="_blank" rel="noopener noreferrer" title="Instagram" aria-label="Instagram"><i class="fab fa-instagram"></i><span class="sr-only">Instagram</span></a>
            <a href="https://www.youtube.com/channel/UCJQ3kXswqa6u-jFqD4nL6lA" target="_blank" rel="noopener noreferrer" title="YouTube" aria-label="YouTube"><i
                    class="fab fa-youtube"></i><span class="sr-only">YouTube</span></a>
            <a href="https://www.linkedin.com/company/multispunindojaya" target="_blank" rel="noopener noreferrer" title="LinkedIn" aria-label="LinkedIn"><i
                    class="fab fa-linkedin-in"></i><span class="sr-only">LinkedIn</span></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-1-composite-materials-8825-2-scaled.jpg') }}"
                alt="{{ __('composite_materials.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