@extends('layouts.app_web')
@section('title', __('spunbond.meta_title'))
@section('meta_description', __('spunbond.meta_description'))
@section('og_image', asset('images/layer-2-spunbond-9469-edit-HD-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;
        }

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

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

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

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

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

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

        .spunbond-hero .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-name-col h4 {
            font-size: 22px;
            font-weight: 600;
            color: #335B5C;
        }

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

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

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

            .spunbond-hero .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,
            .product-item .product-name-col h4 {
                font-size: 22px !important;
                font-weight: 600 !important;
                line-height: 1.3 !important;
            }
            
            .product-item .product-name-col h3 {
                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: 40px 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())) }}">
                {{ __('spunbond.breadcrumb_product_range') }}
            </a> &gt; Spunbond</p>
    </div>

    <div class="spunbond-hero">
        <div class="image-col">
            <img src="{{ asset('images/layer-2-spunbond-9469-edit-HD-scaled.jpg') }}" alt="{{ __('spunbond.hero_image_alt') }}" width="2560" height="1925" onclick="openLightbox(event)" style="cursor: pointer;" fetchpriority="high" decoding="async">
            <a href="#" class="enlarge-link" onclick="openLightbox(event)">{{ __('spunbond.enlarge_image') }}</a>
        </div>
        <div class="text-col">
            <h2>{{ __('spunbond.title') }}</h2>
            <p>{{ __('spunbond.paragraph_1') }}</p>
            <p>{{ __('spunbond.paragraph_2') }}</p>
            <p>{{ __('spunbond.paragraph_3') }}</p>
        </div>
    </div>

    <div class="product-list-section">

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

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

        <div class="product-item">
            <div class="product-name-col">
                <h3>{{ __('spunbond.bico_name') }}</h3>
                <h4>{{ __('spunbond.bico_type') }}</h4>
            </div>
            <div class="product-desc-col">
                <p>{{ __('spunbond.bico_description') }}</p>
                <div class="btn-wrap">
                    <a href="{{ \App\Helpers\RouteTranslator::getUrl('bicomponent-bico-pet-pe-spunbond', request()->get('lang', app()->getLocale())) }}"
                        class="btn-learn-more" title="{{ __('spunbond.bico_name') }}" aria-label="{{ __('spunbond.bico_name') }}">{{ __('spunbond.learn_more') }} <span class="sr-only">{{ __('spunbond.bico_name') }}</span></a>
                </div>
            </div>
        </div>

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

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

        <div class="product-item">
            <div class="product-name-col">
                <h3>{{ __('spunbond.3d_name') }}</h3>
                <h4>{{ __('spunbond.3d_type') }}</h4>
            </div>
            <div class="product-desc-col">
                <p>{{ __('spunbond.3d_description') }}</p>
                <div class="btn-wrap">
                    <a href="{{ \App\Helpers\RouteTranslator::getUrl('3d-embossed-spunbond', request()->get('lang', app()->getLocale())) }}"
                        class="btn-learn-more" title="{{ __('spunbond.3d_name') }}" aria-label="{{ __('spunbond.3d_name') }}">{{ __('spunbond.learn_more') }} <span class="sr-only">{{ __('spunbond.3d_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-2-spunbond-9469-edit-HD-scaled.jpg') }}" alt="{{ __('spunbond.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

@push('schema_markup')
    @php
        $q1 = "Apa keunggulan kain spunbond produksi PT Multi Spunindo Jaya?";
        $q2 = "Apakah ada kain spunbond yang ramah lingkungan atau terurai secara alami?";
        if (app()->getLocale() == 'en') {
            $q1 = "What are the advantages of spunbond fabric produced by PT Multi Spunindo Jaya?";
            $q2 = "Are there any eco-friendly or biodegradable spunbond fabrics?";
        } elseif (app()->getLocale() == 'ja') {
            $q1 = "PT Multi Spunindo Jayaが生産するスパンボンド不織布の利点は何ですか？";
            $q2 = "環境に優しい、または生分解性のスパンボンド不織布はありますか？";
        }

        $schema = [
            "@context" => "https://schema.org",
            "@type" => "FAQPage",
            "mainEntity" => [
                [
                    "@type" => "Question",
                    "name" => $q1,
                    "acceptedAnswer" => [
                        "@type" => "Answer",
                        "text" => strip_tags(__('spunbond.paragraph_1'))
                    ]
                ],
                [
                    "@type" => "Question",
                    "name" => $q2,
                    "acceptedAnswer" => [
                        "@type" => "Answer",
                        "text" => strip_tags(__('spunbond.pla_description'))
                    ]
                ]
            ]
        ];
    @endphp
    <script type="application/ld+json">
    {!! json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
    </script>
@endpush