@extends('layouts.app_web')

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

@push('styles')
    <style>
        .msj-main-container {
            max-width: 1350px;
            margin: 0 auto;
            padding: 0 20px;
            font-family: Oxygen, Helvetica, Arial, Lucida, sans-serif;
        }

        .msj-label {
            font-size: 28px;
            font-weight: 700;
            color: #464646;
            margin-top: 50px;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .msj-headline {
            font-size: 46px;
            line-height: 60px;
            color: #335B5C;
            font-weight: 500;
            max-width: 650px;
            margin-bottom: 50px;
        }

        .msj-hero-wrapper {
            display: flex;
            align-items: flex-start;
            gap: 0;
            margin-bottom: 60px;
        }

        .msj-teal-box {
            background-color: #006b5d;
            color: #ffffff;
            padding: 80px 45px;
            padding-bottom: 300px;
            width: 280px;
            flex-shrink: 0;
            box-sizing: border-box;
            position: relative;
            top: 90px;
        }

        .msj-teal-box h2 {
            font-size: clamp(24px, 2.8vw, 40px);
            line-height: 1.15;
            font-weight: 300;
            margin: 0;
            text-align: right;
            width: 100%;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .msj-right-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .msj-hero-image {
            width: 100%;
        }

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

        .msj-desc-wrapper {
            width: 100%;
            padding-top: 40px;
            padding-bottom: 40px;
            padding-right: 20px;
            padding-left: 50px;
            box-sizing: border-box;
        }

        .msj-desc-text {
            color: #555;
            font-size: 20px;
            line-height: 30px;
            text-align: justify;
            font-weight: 300;
        }

        .msj-dark-outer {
            margin-top: 200px;
            margin-bottom: 20px;
        }

        .msj-dark-inner {
            background: linear-gradient(rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.70)),
                url('{{ asset('images/OKO_2062_.jpg') }}');
            background-size: cover;
            background-position: center;
            padding-top: 100px;
            padding-bottom: 80px;
            padding-left: 60px;
            padding-right: 60px;
            color: white;
            position: relative;
        }

        .msj-vm-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-top: -240px;
            margin-bottom: 80px;
            position: relative;
            z-index: 10;
        }

        .msj-vm-box {
            background-color: #aed1d6;
            color: #333;
            padding: 50px 40px;
            min-height: 280px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .msj-vm-box h3 {
            font-size: 32px;
            font-weight: 500;
            margin-bottom: 25px;
            border-bottom: 1px solid #fff;
            padding-bottom: 15px;
            color: #464646;
        }

        .msj-vm-box p {
            font-size: 28px;
            line-height: 42px;
            text-align: center;
            color: #555;
            border-bottom: 1px solid #fff;
            padding-bottom: 20px;
            margin-bottom: 10px;
            display: inline-block;
            width: 100%;
            font-weight: 500;
        }

        .msj-vm-box ul {
            padding-left: 20px;
            font-size: 16px;
            line-height: 1.6;
            color: #555;
            list-style-position: outside;
            margin: 0;
            font-weight: 500;
        }

        .msj-vm-box ul li {
            margin-bottom: 10px;
        }

        .msj-vm-box ul li:last-child {
            border-bottom: 1px solid #fff;
            padding-bottom: 15px;
            margin-bottom: 5px;
        }

        .msj-core-value {
            text-align: center;
        }

        .msj-core-value > p:first-child {
            font-weight: 700;
            margin-bottom: 20px;
            font-size: 37px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .msj-core-list {
            font-size: 33px;
            color: #fff;
            line-height: 1.8;
            font-weight: 800;
        }

        .msj-core-list span {
            color: #b6d9df;
            margin: 0 8px;
            font-weight: 300;
        }

        .social-footer {
            padding: 0px 40px 30px 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) {
            .msj-main-container {
                padding: 0 20px !important;
            }

            .msj-label {
                font-size: 18px !important;
                margin-top: 20px !important;
                margin-bottom: 8px !important;
            }

            .msj-headline {
                font-size: 20px !important;
                line-height: 1.3 !important;
                margin-bottom: 20px !important;
                max-width: 100% !important;
            }

            .msj-hero-wrapper {
                flex-direction: column !important;
                margin-bottom: 0 !important;
                gap: 0 !important;
            }

            .msj-teal-box {
                position: relative !important;
                width: 100% !important;
                top: 0 !important;
                padding: 30px 20px !important;
                padding-bottom: 30px !important;
                margin-bottom: 0 !important;
                box-sizing: border-box !important;
            }

            .msj-teal-box h2 {
                text-align: center !important;
                font-size: 20px !important;
                line-height: 1.4 !important;
            }

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

            .msj-hero-image img {
                width: 100% !important;
                height: 260px !important;
                object-fit: cover !important;
            }

            .msj-desc-wrapper {
                width: 100% !important;
                padding: 20px 0 !important;
                box-sizing: border-box !important;
            }

            .msj-desc-text {
                text-align: left !important;
                font-size: 14px !important;
                line-height: 1.6 !important;
            }

            .msj-dark-outer {
                margin-top: 30px !important;
                margin-bottom: 0 !important;
            }

            .msj-dark-inner {
                padding: 50px 20px 40px 20px !important;
            }

            .msj-vm-grid {
                margin-top: 0 !important;
                grid-template-columns: 1fr !important;
                gap: 20px !important;
                margin-bottom: 40px !important;
            }

            .msj-vm-box {
                padding: 30px 25px !important;
                min-height: auto !important;
            }

            .msj-vm-box h3 {
                font-size: 20px !important;
                margin-bottom: 16px !important;
                padding-bottom: 12px !important;
            }

            .msj-vm-box p {
                font-size: 18px !important;
                line-height: 1.5 !important;
            }

            .msj-vm-box ul {
                font-size: 14px !important;
                line-height: 1.6 !important;
            }

            .msj-core-value > p:first-child {
                font-size: 22px !important;
                margin-bottom: 16px !important;
            }

            .msj-core-list {
                font-size: 22px !important;
                line-height: 1.6 !important;
            }

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

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tealBoxText = document.querySelector('.msj-teal-box h2');
            if (tealBoxText) {
                const textLength = tealBoxText.innerText.length;
                if (textLength > 80) {
                    tealBoxText.style.fontSize = '24px';
                    tealBoxText.style.lineHeight = '1.1';
                } else if (textLength > 60) {
                    tealBoxText.style.fontSize = '28px';
                    tealBoxText.style.lineHeight = '1.15';
                } else if (textLength > 45) {
                    tealBoxText.style.fontSize = '40px';
                    tealBoxText.style.lineHeight = '1.15';
                } else {
                    tealBoxText.style.fontSize = '40px';
                    tealBoxText.style.lineHeight = '1.2';
                }
            }
        });
    </script>
@endpush

@section('content')
    <div class="msj-main-container">
        <p class="msj-label">{{ __('about_us.label') }}</p>
        <h1 class="msj-headline">{{ __('about_us.headline') }}</h1>
        
        <div class="msj-hero-wrapper">
            <div class="msj-teal-box">
                <h2>{!! __('about_us.teal_box_text') !!}</h2>
            </div>
            <div class="msj-right-content">
                <div class="msj-hero-image">
                    <img src="{{ asset('images/PT-Multi-Spunindo-Image-0069.jpg') }}" alt="{{ __('about_us.hero_image_alt') }}" fetchpriority="high" decoding="async">
                </div>
                <div class="msj-desc-wrapper">
                    <p class="msj-desc-text">
                        {{ __('about_us.description') }}
                    </p>
                </div>
            </div>
        </div>

        <div class="msj-dark-outer">
            <div class="msj-dark-inner">
                <div class="msj-vm-grid">
                    <div class="msj-vm-box">
                        <h3>{{ __('about_us.vision_title') }}</h3>
                        <p>{!! __('about_us.vision_text') !!}</p>
                    </div>
                    <div class="msj-vm-box">
                        <h3>{{ __('about_us.mission_title') }}</h3>
                        <ul>
                            <li>{{ __('about_us.mission_point_1') }}</li>
                            <li>{{ __('about_us.mission_point_2') }}</li>
                            <li>{{ __('about_us.mission_point_3') }}</li>
                        </ul>
                    </div>
                </div>
                <div class="msj-core-value">
                    <p>{{ __('about_us.core_value_title') }}</p>
                    <p class="msj-core-list">
                        {!! __('about_us.core_values') !!}
                    </p>
                </div>
            </div>
        </div>

        <div class="msj-footer">
            <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>
@endsection

@push('schema_markup')
    @php
        $questionId = "Siapa PT Multi Spunindo Jaya?";
        if (app()->getLocale() == 'en') {
            $questionId = "Who is PT Multi Spunindo Jaya?";
        } elseif (app()->getLocale() == 'ja') {
            $questionId = "PT Multi Spunindo Jayaとは何ですか？";
        }

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