@extends('layouts.app_web')

@section('title', __('why_us.meta_title'))
@section('meta_description', __('why_us.meta_description'))
@section('og_image', asset('images/PT-Multi-Spunindo-Image-0060.jpg'))

@push('styles')
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Oxygen, Helvetica, Arial, Lucida, sans-serif;
        }

        body {
            font-family: Oxygen, Helvetica, Arial, Lucida, sans-serif;
            color: #333;
            line-height: 1.6;
        }

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

        .hero-image {
            max-width: 1400px;
            margin: 50px auto 80px auto;
            padding: 0 40px;
        }

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

        .customized-section {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 100px;
            margin-bottom: 100px;
            align-items: start;
            padding-top: 40px;
        }

        .customized-section .tag {
            color: #333;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 20px;
            letter-spacing: 0.5px;
        }

        .customized-section h2 {
            color: #456C6C;
            font-size: 46px;
            font-weight: 500;
            line-height: 1.1;
            margin-bottom: 0;
        }

        .customized-section .content p {
            color: #666;
            font-size: 20px;
            line-height: 1.6;
            margin-bottom: 40px;
            margin-top: 15px;
            font-weight: 300;
        }

        .btn-outline {
            display: inline-block;
            border: 1px solid #53767B;
            color: #53767B;
            padding: 10px 25px;
            text-decoration: none;
            font-size: 0.9rem;
            background: transparent;
            transition: 0.3s;
        }

        .btn-outline:hover {
            background: #53767B;
            color: white;
            border-color: #53767B;
        }

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

        .quality-section {
            background-color: transparent;
            padding: 0;
            margin-bottom: 80px;
        }

        .quality-visual-container {
            position: relative;
            margin-bottom: 60px;
        }

        .quality-bg-strip {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 75%;
            background-color: #E1EAE9;
            z-index: 1;
        }

        .quality-images-container {
            position: relative;
            z-index: 2;
            padding-top: 60px;
            max-width: 1100px;
            margin: 0 auto;
        }

        .quality-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .quality-images img {
            width: 100%;
            height: 350px;
            object-fit: cover;
            display: block;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .quality-wrapper {
            max-width: 100%;
            margin: 0 auto;
        }

        .quality-content {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 40px;
            margin-bottom: 60px;
            align-items: end;
        }

        .quality-content .tag {
            color: #333;
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 20px;
            text-transform: none;
        }

        .quality-content h2 {
            color: #456C6C;
            font-size: 3rem;
            font-weight: 500;
            line-height: 1.1;
        }

        .quality-intro-area p {
            color: #666;
            font-size: 1.5rem;
            line-height: 1.5;
            margin-bottom: 10px;
        }

        .quality-footer-desc {
            max-width: 900px;
            margin-top: 40px;
        }

        .quality-footer-desc p {
            color: #777;
            font-size: 20px;
            line-height: 1.7;
            font-weight: 300;
        }

        .quality-icons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-bottom: 50px;
        }

        .quality-icon-item {
            text-align: left;
        }

        .quality-icon-item .number-badge {
            width: 40px;
            height: 40px;
            background-color: #8BBADB;
            color: white;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 20px;
            border-radius: 2px;
        }

        .quality-icon-item h4 {
            color: #464646;
            font-size: 26px;
            font-weight: 500;
            line-height: 1.4;
        }

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

        .product-tech-section {
            background-color: #E3F2F7;
            position: relative;
            overflow: hidden;
            padding: 80px 0 0 60px;
            border-radius: 4px;
        }

        .tech-decoration-circles::before,
        .tech-decoration-circles::after {
            content: "";
            position: absolute;
            border: 2px solid rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            pointer-events: none;
            z-index: 1;
        }

        .tech-decoration-circles::before {
            width: 550px;
            height: 550px;
            top: -250px;
            right: -100px;
        }

        .tech-decoration-circles::after {
            width: 450px;
            height: 450px;
            top: -150px;
            right: -180px;
        }

        .product-tech-content {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            align-items: end;
            position: relative;
            z-index: 2;
        }

        .text-column-tech {
            padding-bottom: 80px;
            padding-right: 40px;
        }

        .product-tech-content .tag {
            color: #456C6C;
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 20px;
            display: block;
        }

        .product-tech-content h2 {
            color: #456C6C;
            font-size: 46px;
            font-weight: 500;
            line-height: 1.2;
            margin-bottom: 30px;
        }

        .tech-description p {
            color: #555;
            font-size: 20px;
            line-height: 1.7;
        }

        .image-column-tech {
            line-height: 0;
        }

        .image-column-tech img {
            width: 100%;
            height: auto;
            max-height: 400px;
            object-fit: cover;
            display: block;
        }

        .additional-info-section-wrapper {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }

        .additional-info-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            background-color: #D3E9EB;
            min-height: 550px;
            overflow: hidden;
            border-radius: 4px;
        }

        .additional-info-content .image-column {
            position: relative;
            line-height: 0;
        }

        .additional-info-content .image-column img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .additional-info-content .image-column::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 60%;
            height: 100%;
            background: linear-gradient(to right, rgba(211, 233, 235, 0) 0%, #D3E9EB 100%);
            z-index: 1;
        }

        .additional-info-content .text-column {
            background-color: #D3E9EB;
            padding: 60px 80px 60px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            z-index: 2;
        }

        .additional-info-content .text-column p {
            color: #456C6C;
            font-family: 'Oxygen', sans-serif;
            font-size: 19px;
            line-height: 1.6;
            margin-bottom: 25px;
            font-weight: 400;
        }

        .additional-info-content .text-column p:last-child {
            margin-bottom: 0;
        }

        @media (max-width: 980px) {
            .additional-info-section-wrapper {
                padding: 0 !important;
            }

            .additional-info-content {
                display: flex !important;
                flex-direction: column;
                position: relative;
                border-radius: 0 !important;
                min-height: auto !important;
            }

            .additional-info-content .image-column {
                position: absolute !important;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100% !important;
                z-index: 1;
            }

            .additional-info-content .image-column img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: right center;
            }

            .additional-info-content .image-column::after {
                width: 100% !important;
                height: 100% !important;
                top: 0 !important;
                bottom: auto !important;
                background: 
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(211, 233, 235, 0) 40%),
                    linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, rgba(211, 233, 235, 0) 50%),
                    linear-gradient(to top right, rgba(211, 233, 235, 0.2) 0%, rgba(211, 233, 235, 0.9) 60%, #D3E9EB 100%) !important;
            }

            .additional-info-content .text-column {
                position: relative;
                z-index: 2;
                background-color: transparent !important;
                padding: 50px 20px !important;
            }

            .additional-info-content .text-column p {
                font-size: 16px !important;
                line-height: 1.6 !important;
                color: #555 !important;
                font-weight: 300 !important;
                margin-bottom: 20px !important;
            }
        }

        .human-resources-section-wrapper {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }

        .human-resources-section {
            background-color: #f5f5f5;
            position: relative;
            padding: 80px 0 0 0;
            display: flex;
            align-items: flex-end;
            overflow: hidden;
        }

        .human-resources-section::before {
            content: "";
            position: absolute;
            bottom: 0;
            right: 0;
            width: 45%;
            height: 100%;
            background-color: #e8e8e8;
            border-top-left-radius: 100% 80%;
            z-index: 1;
        }

        .human-resources-content {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 20px;
            width: 100%;
            align-items: end;
        }

        .hr-text-column {
            padding-left: 80px;
            padding-bottom: 120px;
        }

        .hr-text-column .tag {
            color: #333;
            font-size: 28px;
            font-weight: 500;
            margin-bottom: 25px;
            display: block;
        }

        .hr-text-column h2 {
            color: #456C6C;
            font-size: 46px;
            font-weight: 500;
            line-height: 1.2;
            margin-bottom: 30px;
        }

        .hr-text-column p {
            color: #666;
            font-size: 20px;
            line-height: 1.7;
            max-width: 550px;
        }

        .hr-image-column {
            line-height: 0;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }

        .hr-image-column img {
            width: 85%;
            max-width: 500px;
            height: auto;
            display: block;
            margin-bottom: -2px;
        }

        .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) {
            .container-custom {
                padding: 0 20px !important;
            }

            .hero-image {
                margin: 20px auto 30px auto !important;
                padding: 0 20px !important;
            }

            .human-resources-section-wrapper {
                padding: 0 !important;
            }

            .human-resources-section {
                padding-top: 50px !important;
                padding-bottom: 0 !important;
                background-color: #ffffff !important;
            }

            .human-resources-section::before {
                display: block !important;
                width: 20% !important;
                border-top-left-radius: 100% 30% !important;
            }

            .human-resources-content {
                grid-template-columns: 1fr !important;
                gap: 40px !important;
                align-items: end !important;
            }

            .hr-text-column {
                padding: 0 20px !important;
                padding-bottom: 0 !important;
            }

            .hr-text-column .tag {
                color: #555 !important;
                font-size: 20px !important;
                margin-bottom: 10px !important;
                font-weight: 600 !important;
            }

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

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

            .hr-image-column {
                width: 100% !important;
                padding: 0 20px !important;
                display: flex !important;
                justify-content: center !important;
                align-items: flex-end !important;
            }

            .hr-image-column img {
                width: 90% !important;
                max-width: 400px !important;
                height: auto !important;
                margin: 0 auto !important;
                display: block !important;
            }

            .product-tech-section-wrapper {
                padding: 0 !important;
            }

            .product-tech-section {
                padding: 50px 20px !important;
                border-radius: 0 !important;
            }

            .tech-decoration-circles::before,
            .tech-decoration-circles::after {
                display: none !important;
            }

            .product-tech-content {
                grid-template-columns: 1fr !important;
            }

            .text-column-tech {
                padding-right: 0 !important;
                padding-bottom: 30px !important;
            }

            .product-tech-content .tag {
                color: #555 !important;
                font-size: 20px !important;
                margin-bottom: 10px !important;
            }

            .product-tech-content h2 {
                font-size: 26px !important;
                line-height: 1.3 !important;
                margin-bottom: 20px !important;
            }

            .tech-description p {
                font-size: 16px !important;
                line-height: 1.6 !important;
                font-weight: 300 !important;
            }

            .image-column-tech img {
                width: 100% !important;
                height: auto !important;
                aspect-ratio: 16 / 9;
            }

            .additional-info-content {
                grid-template-columns: 1fr;
            }

            .additional-info-content .image-column {
                height: 300px;
            }

            .customized-section {
                grid-template-columns: 1fr !important;
                gap: 0 !important;
                padding-top: 0 !important;
                margin-bottom: 50px !important;
            }

            .customized-section .tag {
                font-size: 20px !important;
                margin-bottom: 10px !important;
            }

            .customized-section h2 {
                font-size: 26px !important;
                line-height: 1.3 !important;
                margin-bottom: 20px !important;
            }

            .customized-section .content p {
                font-size: 16px !important;
                margin-top: 0 !important;
                margin-bottom: 30px !important;
            }

            .quality-section-wrapper {
                padding: 0 !important;
            }

            .quality-wrapper {
                padding: 0 20px !important;
            }

            .quality-visual-container {
                margin-bottom: 30px !important;
            }

            .quality-bg-strip {
                height: 55% !important;
            }

            .quality-images {
                grid-template-columns: 1fr !important;
                gap: 0 !important;
            }

            .quality-images img {
                height: auto !important;
                aspect-ratio: 16 / 9;
            }

            .quality-content {
                grid-template-columns: 1fr !important;
                gap: 15px !important;
                margin-bottom: 15px !important;
            }

            .quality-content .tag {
                font-size: 20px !important;
                margin-bottom: 10px !important;
            }

            .quality-content h2 {
                font-size: 26px !important;
                line-height: 1.3 !important;
                margin-bottom: 0 !important;
            }

            .quality-intro-area p {
                font-size: 16px !important;
                line-height: 1.5 !important;
                font-weight: 300 !important;
                margin-bottom: 0 !important;
            }

            .quality-icons {
                grid-template-columns: 1fr !important;
                gap: 10px !important;
                margin-bottom: 15px !important;
            }

            .quality-icon-item {
                display: flex !important;
                align-items: center !important;
            }

            .quality-icon-item .number-badge {
                width: 25px !important;
                height: 25px !important;
                font-size: 14px !important;
                margin-bottom: 0 !important;
                margin-right: 15px !important;
                flex-shrink: 0 !important;
            }

            .quality-icon-item h4 {
                font-size: 15px !important;
                font-weight: 400 !important;
                color: #555 !important;
                margin: 0 !important;
            }

            .quality-footer-desc {
                margin-top: 0 !important;
            }

            .quality-footer-desc p {
                font-size: 15px !important;
                line-height: 1.5 !important;
                font-weight: 300 !important;
            }
        }
    </style>
@endpush

@section('content')
    <div class="hero-image">
        <img src="{{ asset('images/PT-Multi-Spunindo-Image-0060.jpg') }}" alt="{{ __('why_us.hero_alt') }}"
            fetchpriority="high" decoding="async">
    </div>

    <div class="container-custom">
        <div class="customized-section">
            <div class="left-column">
                <p class="tag">{{ __('why_us.customized_tag') }}</p>
                <h2>{{ __('why_us.customized_title') }}</h2>
            </div>
            <div class="content">
                <p>{{ __('why_us.customized_description') }}</p>
               <a href="{{ \App\Helpers\RouteTranslator::getUrl('product-range', request()->get('lang', app()->getLocale())) }}" class="btn-outline">{{ __('why_us.product_properties_btn') }}</a>
            </div>
        </div>
    </div>

    <div class="quality-section-wrapper">
        <div class="quality-section">
            <div class="quality-visual-container">
                <div class="quality-bg-strip"></div>
                <div class="container-custom">
                    <div class="quality-images-container">
                        <div class="quality-images">
                            <img src="{{ asset('images/PT-Multi-Spunindo-Image-0061.jpg') }}"
                                alt="{{ __('why_us.quality_image_1') }}" loading="lazy" decoding="async">
                            <img src="{{ asset('images/MSJ_Spunindo_Website-02-rev2.jpg') }}"
                                alt="{{ __('why_us.quality_image_2') }}" loading="lazy" decoding="async">
                        </div>
                    </div>
                </div>
            </div>
            <div class="quality-wrapper">
                <div class="quality-content">
                    <div class="quality-title-area">
                        <p class="tag">{{ __('why_us.quality_tag') }}</p>
                        <h2>{{ __('why_us.quality_title') }}</h2>
                    </div>
                    <div class="quality-intro-area">
                        <p>{{ __('why_us.quality_intro') }}</p>
                    </div>
                </div>

                <div class="quality-icons">
                    <div class="quality-icon-item">
                        <div class="number-badge">1</div>
                        <h4>{{ __('why_us.quality_point_1') }}</h4>
                    </div>
                    <div class="quality-icon-item">
                        <div class="number-badge">2</div>
                        <h4>{{ __('why_us.quality_point_2') }}</h4>
                    </div>
                    <div class="quality-icon-item">
                        <div class="number-badge">3</div>
                        <h4>{{ __('why_us.quality_point_3') }}</h4>
                    </div>
                    <div class="quality-icon-item">
                        <div class="number-badge">4</div>
                        <h4>{{ __('why_us.quality_point_4') }}</h4>
                    </div>
                </div>

                <div class="quality-footer-desc">
                    <p>{{ __('why_us.quality_footer') }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="product-tech-section-wrapper">
        <div class="product-tech-section">
            <div class="tech-decoration-circles">
                <div class="product-tech-content">
                    <div class="text-column-tech">
                        <p class="tag">{{ __('why_us.tech_tag') }}</p>
                        <h2>{{ __('why_us.tech_title') }}</h2>
                        <div class="tech-description">
                            <p>{{ __('why_us.tech_description') }}</p>
                        </div>
                    </div>
                    <div class="image-column-tech">
                        <img src="{{ asset('images/PT-Multi-Spunindo-Image-0063.jpg') }}"
                            alt="{{ __('why_us.tech_image') }}" loading="lazy" decoding="async">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="additional-info-section-wrapper">
        <div class="additional-info-section">
            <div class="additional-info-content">
                <div class="image-column">
                    <img src="{{ asset('images/OKO_2148.jpg') }}" alt="{{ __('why_us.lab_image') }}" loading="lazy"
                        decoding="async">
                </div>
                <div class="text-column">
                    <p>{{ __('why_us.additional_paragraph_1') }}</p>
                    <p>{{ __('why_us.additional_paragraph_2') }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="human-resources-section-wrapper">
        <div class="human-resources-section">
            <div class="human-resources-content">
                <div class="hr-text-column">
                    <p class="tag">{{ __('why_us.hr_tag') }}</p>
                    <h2>{{ __('why_us.hr_title') }}</h2>
                    <p>{{ __('why_us.hr_description') }}</p>
                </div>
                <div class="hr-image-column">
                    <img src="{{ asset('images/PT-Multi-Spunindo-Image-0079.png') }}" alt="{{ __('why_us.hr_image') }}"
                        loading="lazy" decoding="async">
                </div>
            </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>
@endsection

@push('schema_markup')
    @php
        $q1 = "Mengapa harus memilih PT Multi Spunindo Jaya sebagai produsen nonwoven Anda?";
        $q2 = "Bagaimana PT Multi Spunindo Jaya menjaga standar kualitas produknya?";
        if (app()->getLocale() == 'en') {
            $q1 = "Why choose PT Multi Spunindo Jaya as your nonwoven manufacturer?";
            $q2 = "How does PT Multi Spunindo Jaya maintain its product quality standards?";
        } elseif (app()->getLocale() == 'ja') {
            $q1 = "PT Multi Spunindo Jayaを不織布メーカーとして選ぶ理由は何ですか？";
            $q2 = "PT Multi Spunindo Jayaはどのように製品の品質基準を維持していますか？";
        }

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