@extends('layouts.app_web')

@section('title', 'Market | Non Woven Fabric Manufacturers, Spunbond Nonwoven Manufacturers, Meltblown Nonwoven Manufacturers,
		Spunindo, PT Multi Spunindo Jaya')
@section('meta_description', __('market.meta_description'))
@section('og_image', asset('images/MSJ_Spunindo_Website-05-rev.jpg'))
@push('styles')
    <style>
        :root {
            --container-width: 1200px;
            --primary-teal: #456C6C;
            --dark-teal: #00635D;
            --mint-bg: #D9EAE9;
        }

        .market-page {
            font-family: Oxygen, Helvetica, Arial, Lucida, sans-serif;
            padding-top: 60px;
            background-color: #fff;
        }

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

        .market-header {
            margin-bottom: 30px;
            position: relative;
            z-index: 2;
        }

        .market-header h3 {
            color: #464646;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .market-header h2 {
            color: #335B5C;
            font-size: 46px;
            font-weight: 500;
            line-height: 1.1;
            max-width: 500px;
            margin: 0;
        }

        .market-main-content {
            display: flex;
            margin-bottom: 0;
            background-color: var(--mint-bg);
            align-items: stretch;
        }

        .description-side {
            flex: 1.2;
            background-color: var(--mint-bg);
            padding: 100px 60px 150px 60px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .description-side p {
            font-size: 20px;
            line-height: 30px;
            color: #555;
            margin-bottom: 25px;
            font-weight: 300;
        }

        .image-side {
            flex: 1;
            margin-top: -120px;
            position: relative;
            z-index: 1;
        }

        .image-side img {
            width: 100%;
            height: 550px;
            object-fit: cover;
            display: block;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .achievements-box {
            background-color: var(--dark-teal);
            color: white;
            padding: 60px 50px;
            margin-top: 0;
            position: relative;
            z-index: 2;
        }

        .achievements-label {
            font-size: 26px;
            letter-spacing: 2px;
            margin-bottom: 40px;
            display: block;
            text-transform: uppercase;
            font-weight: 300;
        }

        .achievements-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .iso-info {
            display: flex;
            align-items: center;
            gap: 30px;
        }

        .iso-info img {
            width: 140px;
        }

        .iso-text p {
            margin: 0;
            font-size: 28px;
            font-weight: 500;
        }

        .awards-description {
            border-top: 1px solid rgba(255, 255, 255, 0.5);
            padding-top: 25px;
            font-size: 20px;
            font-weight: 300;
            line-height: 1.6;
        }
        .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; }

        @media (max-width: 980px) {
            .market-page {
                padding-top: 30px !important;
            }

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

            .market-header {
                margin-bottom: 20px !important;
            }

            .market-header h3 {
                font-size: 22px !important;
                margin-bottom: 8px !important;
            }

            .market-header h2 {
                font-size: 22px !important;
                max-width: 100% !important;
                line-height: 1.3 !important;
                margin-bottom: 0 !important;
            }

            .market-main-content {
                flex-direction: column !important;
            }

            .description-side {
                padding: 30px 20px !important;
            }

            .description-side p {
                font-size: 14px !important;
                line-height: 1.6 !important;
                margin-bottom: 16px !important;
            }

            .image-side {
                margin-top: 0 !important;
            }

            .image-side img {
                height: 260px !important;
                width: 100% !important;
                object-fit: cover !important;
                box-shadow: none !important;
            }

            .achievements-box {
                padding: 30px 20px !important;
            }

            .achievements-label {
                font-size: 14px !important;
                letter-spacing: 1px !important;
                margin-bottom: 20px !important;
            }

            .achievements-grid {
                grid-template-columns: 1fr !important;
                gap: 24px !important;
            }

            .iso-info {
                gap: 16px !important;
            }

            .iso-info img {
                width: 90px !important;
            }

            .iso-text p {
                font-size: 16px !important;
            }

            .awards-description {
                font-size: 14px !important;
                padding-top: 20px !important;
            }

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

@section('content')
    <div class="market-page">

        <div class="container-custom">
            <div class="market-header">
            <h3>{{ __('market.header_tag') }}</h3>
                <h2>{{ __('market.header_title') }}</h2>
            </div>

            <div class="market-main-content">
                <div class="description-side">
                <p>{{ __('market.description_paragraph_1') }}</p>
                <p>{{ __('market.description_paragraph_2') }}</p>
                </div>
                <div class="image-side">
                    <img src="{{ asset('images/OKO_2957_.jpg') }}" alt="{{ __('market.image_alt') }}" fetchpriority="high" decoding="async">
                </div>
            </div>

            <div class="achievements-box">
                <span class="achievements-label">{{ __('market.achievements_label') }}</span>
                <div class="achievements-grid">
                    <div class="iso-info">
                        <img src="{{ asset('images/PT-Multi-Spunindo-Image-0027.png') }}" alt="{{ __('market.iso_logo_alt') }}" loading="lazy" decoding="async">
                        <div class="iso-text">
                        <p>{{ __('market.iso_title') }}</p>
                        <p>{{ __('market.iso_certificate') }}</p>
                        </div>
                    </div>
                    <div class="awards-description">
                    <p>{{ __('market.awards_description') }}</p>
                    </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>

    </div>
@endsection