@extends('layouts.app_web')

@section('title', __('product_range.meta_title'))
@section('meta_description', __('product_range.meta_description'))
@section('og_image', asset('images/Spunindo-image-spunbond.jpg'))
@push('styles')
    <style>
        .msj-content-wrapper {
            font-family: Oxygen, Helvetica, Arial, Lucida, sans-serif;
            color: #333;
        }

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

        .hero-section {
            background-color: #ffffff;
            padding: 80px 0;
        }

        .hero-flex {
            display: flex;
            align-items: center;
            gap: 80px;
        }

        .hero-image img {
            width: 100%;
            height: 450px;
            object-fit: cover;
            object-position: center;
            display: block;
            border-radius: 4px;
        }

        .hero-text {
            flex: 1;
        }

        .hero-image {
            flex: 1;
        }

        .hero-text h3 {
            color: #3a4a49;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .hero-text h2 {
            color: #456C6C;
            font-size: 40px;
            line-height: 1.2;
            font-weight: 500;
            margin-bottom: 25px;
        }

        .hero-text p {
            color: #666;
            font-size: 20px;
            line-height: 1.8;
            font-weight: 300;
        }

        .product-section {
            padding: 40px 0 100px 0;
        }

        .product-bg-box {
            background-color: #BAC9CB;
            padding: 80px 40px;
            border-radius: 4px;
        }

        .product-grid {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -20px;
        }

        .product-col {
            flex: 1;
            padding: 0 30px;
            display: flex;
            flex-direction: column;
            border-right: 1px solid rgba(255, 255, 255, 0.4);
        }

        .product-col:last-child {
            border-right: none;
        }

        .product-col img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            margin-bottom: 30px;
        }

        .product-col h4 {
            color: #333;
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .product-col p,
        .product-col li {
            font-size: 0.95rem;
            line-height: 1.6;
            color: #444;
        }

        .product-col ul {
            margin: 0 0 25px 0;
            padding-left: 20px;
        }

        .btn-learn-more {
            display: inline-block;
            border: 1.5px solid #456C6C;
            color: #456C6C;
            padding: 8px 20px;
            font-size: 0.85rem;
            font-weight: 600;
            text-decoration: none;
            width: fit-content;
            margin-top: auto;
            transition: 0.3s;
            background: transparent;
        }

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

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

        @media (max-width: 1100px) {
            .product-col {
                flex: 0 0 50%;
                margin-bottom: 50px;
                border-right: none;
            }

            .product-col:nth-child(odd) {
                border-right: 1px solid rgba(255, 255, 255, 0.4);
            }
        }

        @media (max-width: 980px) {
            .msj-container {
                padding: 0 20px !important;
            }

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

            .hero-flex {
                flex-direction: column !important;
                gap: 30px !important;
                text-align: left;
            }

            .hero-text h3 {
                font-size: 20px !important;
                color: #555 !important;
                margin-bottom: 10px !important;
                font-weight: 600 !important;
                letter-spacing: normal !important;
                text-transform: none !important;
            }

            .hero-text h2 {
                font-size: 26px !important;
                line-height: 1.3 !important;
                color: #456C6C !important;
                font-weight: 400 !important;
                margin-bottom: 20px !important;
            }

            .hero-text p {
                font-size: 16px !important;
                line-height: 1.6 !important;
                font-weight: 300 !important;
                color: #666 !important;
            }

            .hero-image {
                width: 100% !important;
            }

            .hero-image img {
                width: 100% !important;
                height: auto !important;
                aspect-ratio: 16 / 9;
                object-fit: cover !important;
            }

            .product-section {
                padding: 20px 0 60px 0 !important;
            }

            .product-bg-box {
                padding: 40px 20px !important;
            }

            .product-grid {
                margin: 0 !important;
            }

            .product-col {
                flex: 0 0 100% !important;
                border-right: none !important;
                padding: 0 !important;
                margin-bottom: 50px !important;
            }

            .product-col:last-child {
                margin-bottom: 0 !important;
            }

            .product-col img {
                width: 100% !important;
                aspect-ratio: 1 / 1 !important;
                margin-bottom: 20px !important;
            }

            .product-col h4 {
                font-size: 22px !important;
                color: #555 !important;
                font-weight: 600 !important;
                margin-bottom: 15px !important;
            }

            .product-col p,
            .product-col li {
                font-size: 16px !important;
                line-height: 1.6 !important;
                font-weight: 300 !important;
                color: #555 !important;
            }

            .product-col ul {
                padding-left: 20px !important;
                margin-bottom: 25px !important;
            }

            .product-col li {
                margin-bottom: 8px !important;
            }

            .product-col li strong {
                font-weight: 600 !important;
                color: #555 !important;
            }

            .btn-learn-more {
                padding: 10px 20px !important;
                font-size: 14px !important;
                margin-top: 10px !important;
            }

            .social-footer {
                justify-content: center !important;
                padding: 30px 20px !important;
            }
        }
    </style>
@endpush

@section('content')
    <div class="msj-content-wrapper">

        <section class="hero-section">
            <div class="msj-container">
                <div class="hero-flex">
                    <div class="hero-text">
                        <h3>{{ __('product_range.hero_tag') }}</h3>
                        <h2>{{ __('product_range.hero_title') }}</h2>
                        <p>{{ __('product_range.hero_description') }}</p>
                    </div>
                    <div class="hero-image">
                        <img src="{{ asset('images/OKO_2819.jpg') }}" alt="{{ __('product_range.hero_image_alt') }}" fetchpriority="high" decoding="async">
                    </div>
                </div>
            </div>
        </section>

        <section class="product-section">
            <div class="msj-container">
                <div class="product-bg-box">
                    <div class="product-grid">

                        <div class="product-col">
                            <img src="{{ asset('images/Spunindo-image-spunbond.jpg') }}"
                                alt="{{ __('product_range.spunbond_image_alt') }}" loading="lazy" decoding="async">
                            <h4>{{ __('product_range.spunbond_title') }}</h4>
                            <p>{{ __('product_range.spunbond_description') }}</p>
                            <ul>
                                <li><strong>{{ __('product_range.spunbond_item_1') }}</strong></li>
                                <li><strong>{{ __('product_range.spunbond_item_2') }}</strong></li>
                                <li><strong>{{ __('product_range.spunbond_item_3') }}</strong></li>
                                <li><strong>{{ __('product_range.spunbond_item_4') }}</strong></li>
                                <li><strong>{{ __('product_range.spunbond_item_5') }}</strong></li>
                                <li><strong>{{ __('product_range.spunbond_item_6') }}</strong></li>
                            </ul>
                            <a href="{{ \App\Helpers\RouteTranslator::getUrl('spunbond', app()->getLocale()) }}"
                                class="btn-learn-more" title="{{ __('product_range.spunbond_title') }}" aria-label="{{ __('product_range.spunbond_title') }}">{{ __('product_range.spunbond_btn') }} <span class="sr-only">{{ __('product_range.spunbond_title') }}</span></a>
                        </div>

                        <div class="product-col">
                            <img src="{{ asset('images/layer-1-meltblown-8807-edit-2-Squere.jpg') }}"
                                alt="{{ __('product_range.meltblown_image_alt') }}" loading="lazy" decoding="async">
                            <h4>{{ __('product_range.meltblown_title') }}</h4>
                            <p>{{ __('product_range.meltblown_description') }}</p>
                            <a href="{{ \App\Helpers\RouteTranslator::getUrl('meltblown', app()->getLocale()) }}"
                                class="btn-learn-more" title="{{ __('product_range.meltblown_title') }}" aria-label="{{ __('product_range.meltblown_title') }}">{{ __('product_range.meltblown_btn') }} <span class="sr-only">{{ __('product_range.meltblown_title') }}</span></a>
                        </div>

                        <div class="product-col">
                            <img src="{{ asset('images/layer-1-spunmelt-9451-edit-2-Squere.jpg') }}"
                                alt="{{ __('product_range.spunmelt_image_alt') }}" loading="lazy" decoding="async">
                            <h4>{{ __('product_range.spunmelt_title') }}</h4>
                            <p>{{ __('product_range.spunmelt_description') }}</p>
                            <a href="{{ \App\Helpers\RouteTranslator::getUrl('spunmelt', app()->getLocale()) }}"
                                class="btn-learn-more" title="{{ __('product_range.spunmelt_title') }}" aria-label="{{ __('product_range.spunmelt_title') }}">{{ __('product_range.spunmelt_btn') }} <span class="sr-only">{{ __('product_range.spunmelt_title') }}</span></a>
                        </div>

                        <div class="product-col">
                            <img src="{{ asset('images/layer-1-composite-materials-8815-edit-2-squere.jpg') }}"
                                alt="{{ __('product_range.composite_image_alt') }}" loading="lazy" decoding="async">
                            <h4>{{ __('product_range.composite_title') }}</h4>
                            <p>{{ __('product_range.composite_description') }}</p>
                            <ul>
                                <li><strong>{{ __('product_range.composite_item_1') }}</strong></li>
                                <li><strong>{{ __('product_range.composite_item_2') }}</strong></li>
                                <li><strong>{{ __('product_range.composite_item_3') }}</strong></li>
                            </ul>
                            <a href="{{ \App\Helpers\RouteTranslator::getUrl('composite-materials', app()->getLocale()) }}"
                                class="btn-learn-more" title="{{ __('product_range.composite_title') }}" aria-label="{{ __('product_range.composite_title') }}">{{ __('product_range.composite_btn') }} <span class="sr-only">{{ __('product_range.composite_title') }}</span></a>
                        </div>

                    </div>
                </div>
            </div>
        </section>

        <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>
@endsection