@extends('layouts.app_web')

@section('title', __('history.meta_title'))
@section('meta_description', __('history.meta_description'))
@section('og_image', asset('images/Spunindo_0017_LINE-1-1999-OKO_3043.jpg'))
@push('styles')
    <style>
        .hst-main-container {
            max-width: 1350px;
            margin: 0 auto;
            padding: 0 20px;
            font-family: Oxygen, Helvetica, Arial, Lucida, sans-serif;
        }
        .hst-intro {
            padding: 60px 0 50px 0;
        }

        .hst-intro h3 {
            font-size: 32px;
            font-weight: 700;
            color: #464646;
            margin: 0 0 16px 0;
            letter-spacing: 0.5px;
            text-transform: none;
        }

        .hst-intro h2 {
            font-size: 46px;
            font-weight: 500;
            color: #335B5C;
            line-height: 60px;
            max-width: 640px;
            margin: 0;
        }

        .hst-timeline {
            margin-left: -20px;
            width: calc(100% + 40px);
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .hst-row {
            display: flex;
            width: 100%;
            min-height: 320px;
            align-items: stretch;
        }

        .hst-text,
        .hst-image {
            flex: 1 1 50%;
            min-width: 0;
        }

        .hst-timeline {
            position: relative;
        }

        .hst-timeline::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 120px;
            left: 50%;
            transform: translateX(-50%);
            width: 7px;
            background-color: #50839D;
            z-index: 10;
            pointer-events: none;
        }

        .hst-text {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 40px 50px;
            position: relative;
        }

        .hst-text::after {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 7px;
            width: 50px;
            background-color: #50839D;
            border-radius: 9999px;
            z-index: 20;
        }

        .hst-row.hst-left .hst-text::after {
            right: 0;
        }

        .hst-row.hst-right .hst-text::after {
            left: 0;
        }

        .hst-row.hst-left .hst-text {
            background-color: #d8eaf0;
        }

        .hst-row.hst-right .hst-text {
            background-color: #CCCCCC;
            padding-left: 80px;
        }

        .hst-row.hst-right .hst-text-inner {
            align-items: flex-start;
            text-align: left;
        }

        .hst-text-inner {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .hst-year {
            display: block;
            font-size: 80px;
            font-weight: 500;
            line-height: 80px;
            margin-bottom: 16px;
            font-family: 'Open Sans', Arial, sans-serif;
            letter-spacing: -2px;
        }

        .hst-row.hst-left .hst-year {
            color: #FFFFFF;
        }

        .hst-row.hst-right .hst-year {
            color: #FFFFFF;
        }

        .hst-text p {
            font-size: 20px;
            color: #555;
            line-height: 30px;
            font-weight: 300;
            max-width: 380px;
            margin: 0;
        }

        .hst-image {
            overflow: hidden;
            background: #111;
            position: relative;
        }

        .hst-image img {
            width: 100%;
            height: 100%;
            min-height: 280px;
            object-fit: cover;
            display: block;
        }

        .hst-row.hst-left .hst-text  { order: 1; }
        .hst-row.hst-left .hst-image { order: 2; }

        .hst-row.hst-right .hst-image { order: 1; }
        .hst-row.hst-right .hst-text  { order: 2; }

        .hst-social-footer {
            padding: 20px 0 50px 0;
            display: flex;
            gap: 20px;
        }

        .hst-social-footer a {
            color: #456C6C;
            font-size: 1.2rem;
            transition: color 0.3s;
            text-decoration: none;
        }

        .hst-social-footer a:hover {
            color: #4ECDC4;
        }

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

            .hst-timeline {
                margin-left: 0 !important;
                width: 100% !important;
                gap: 20px !important;
            }

            .hst-timeline::after {
                display: none !important;
            }

            .hst-intro {
                padding: 30px 0 20px 0 !important;
            }

            .hst-intro h3 {
                font-size: 22px !important;
                margin-bottom: 12px !important;
            }

            .hst-intro h2 {
                font-size: 26px !important;
                line-height: 1.3 !important;
            }

            .hst-row {
                flex-direction: column !important;
                min-height: unset !important;
            }

            .hst-row.hst-left .hst-image,
            .hst-row.hst-right .hst-image {
                order: 1 !important;
                min-height: 200px !important;
            }

            .hst-row.hst-left .hst-text,
            .hst-row.hst-right .hst-text {
                order: 2 !important;
                align-items: flex-start !important;
                padding: 24px 20px !important;
                min-height: auto !important;
            }

            .hst-row.hst-right .hst-text {
                padding-left: 20px !important;
            }

            .hst-text::after {
                display: none !important;
            }

            .hst-year {
                font-size: 48px !important;
                line-height: 1 !important;
                margin-bottom: 12px !important;
                text-align: left !important;
            }

            .hst-text p {
                font-size: 14px !important;
                line-height: 1.6 !important;
                text-align: left !important;
                max-width: 100% !important;
            }

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

@section('content')
    <div class="hst-main-container">

        <div class="hst-intro">
            <h3>{{ __('history.label') }}</h3>
            <h2>{{ __('history.subtitle') }}</h2>
        </div>

        <div class="hst-timeline">

            <div class="hst-row hst-left">
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_1998') }}</span>

                        <p>{{ __('history.year_1998_1') }}</p>
                    </div>
                </div>
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0017_LINE-1-1999-OKO_3043.jpg') }}" alt="{{ __('history.img_alt_1998') }}" fetchpriority="high" decoding="async">
                </div>
            </div>

            <div class="hst-row hst-right">
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0016_LINE-1-2003-OKO_3055.jpg') }}" alt="{{ __('history.img_alt_2003') }}" loading="lazy" decoding="async">
                </div>
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2003') }}</span>

                        <p>{{ __('history.year_2003_1') }}</p>
                    </div>
                </div>
            </div>

            <div class="hst-row hst-left">
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2007_1_year') }}</span>

                        <p>{{ __('history.year_2007_1') }}</p>
                    </div>
                </div>
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0015_LINE-2-2007-OKO_3068.jpg') }}" alt="{{ __('history.img_alt_2007_1') }}" loading="lazy" decoding="async">
                </div>
            </div>

            <div class="hst-row hst-right">
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0014_LINE-3-2007-OKO_3089.jpg') }}" alt="{{ __('history.img_alt_2007_2') }}" loading="lazy" decoding="async">
                </div>
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2007_2_year') }}</span>

                        <p>{{ __('history.year_2007_2') }}</p>
                    </div>
                </div>
            </div>

            <div class="hst-row hst-left">
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2008') }}</span>

                        <p>{{ __('history.year_2008_1') }}</p>
                    </div>
                </div>
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0013_LINE-5-2008-OKO_3085.jpg') }}" alt="{{ __('history.img_alt_2008') }}" loading="lazy" decoding="async">
                </div>
            </div>

            <div class="hst-row hst-right">
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0012_LINE-6-2009-OKO_3112.jpg') }}" alt="{{ __('history.img_alt_2009') }}" loading="lazy" decoding="async">
                </div>
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2009') }}</span>

                        <p>{{ __('history.year_2009_1') }}</p>
                    </div>
                </div>
            </div>

            <div class="hst-row hst-left">
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2011') }}</span>

                        <p>{{ __('history.year_2011_1') }}</p>
                    </div>
                </div>
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0011_LINE-6-2009-OKO_3117.jpg') }}" alt="{{ __('history.img_alt_2011') }}" loading="lazy" decoding="async">
                </div>
            </div>

            <div class="hst-row hst-right">
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0010_LINE-8-2013-OKO_3123.jpg') }}" alt="{{ __('history.img_alt_2013') }}" loading="lazy" decoding="async">
                </div>
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2013') }}</span>

                        <p>{{ __('history.year_2013_1') }}</p>
                    </div>
                </div>
            </div>

            <div class="hst-row hst-left">
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2016_1_year') }}</span>

                        <p>{{ __('history.year_2016_1') }}</p>
                    </div>
                </div>
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0009_3D-CONVERTING-MACHINE-2016-OKO_3126.jpg') }}" alt="{{ __('history.img_alt_2016_1') }}" loading="lazy" decoding="async">
                </div>
            </div>

            <div class="hst-row hst-right">
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0008_CONVERTING-2016-OKO_3135.jpg') }}" alt="{{ __('history.img_alt_2016_2') }}" loading="lazy" decoding="async">
                </div>
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2016_2_year') }}</span>

                        <p>{{ __('history.year_2016_2') }}</p>
                    </div>
                </div>
            </div>

            <div class="hst-row hst-left">
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2016_3_year') }}</span>

                        <p>{{ __('history.year_2016_3') }}</p>
                    </div>
                </div>
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0007_CONVERTING-2016-OKO_3137.jpg') }}" alt="{{ __('history.img_alt_2016_3') }}" loading="lazy" decoding="async">
                </div>
            </div>

            <div class="hst-row hst-right">
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0006_COATING-2017-CONVERTING-MACHINE-OKO_3129.jpg') }}" alt="{{ __('history.img_alt_2017_1') }}" loading="lazy" decoding="async">
                </div>
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2017_1_year') }}</span>

                        <p>{{ __('history.year_2017_1') }}</p>
                    </div>
                </div>
            </div>

            <div class="hst-row hst-left">
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2017_2_year') }}</span>

                        <p>{{ __('history.year_2017_2') }}</p>
                    </div>
                </div>
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0005_SCATTERING-MACHINE-2017-OKO_3134.jpg') }}" alt="{{ __('history.img_alt_2017_2') }}" loading="lazy" decoding="async">
                </div>
            </div>

            <div class="hst-row hst-right">
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0004_LINE-10-2020-OKO_3092.jpg') }}" alt="{{ __('history.img_alt_2017_3') }}" loading="lazy" decoding="async">
                </div>
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2017_3_year') }}</span>

                        <p>{{ __('history.year_2017_3') }}</p>
                    </div>
                </div>
            </div>

            <div class="hst-row hst-left">
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2019') }}</span>

                        <p>{{ __('history.year_2019_1') }}</p>
                    </div>
                </div>
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0003_LINE-10-2020-OKO_3096.jpg') }}" alt="{{ __('history.img_alt_2019') }}" loading="lazy" decoding="async">
                </div>
            </div>

            <div class="hst-row hst-right">
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0002_LINE-10-2020-OKO_3104.jpg') }}" alt="{{ __('history.img_alt_2020_1') }}" loading="lazy" decoding="async">
                </div>
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2020_1_year') }}</span>

                        <p>{{ __('history.year_2020_1') }}</p>
                    </div>
                </div>
            </div>

            <div class="hst-row hst-left">
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2020_2_year') }}</span>

                        <p>{{ __('history.year_2020_2') }}</p>
                    </div>
                </div>
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0001_LINE-10-2020-OKO_3106.jpg') }}" alt="{{ __('history.img_alt_2020_2') }}" loading="lazy" decoding="async">
                </div>
            </div>

            <div class="hst-row hst-right">
                <div class="hst-image">
                    <img src="{{ asset('images/Spunindo_0000_LINE-11-2020-OKO_3082.jpg') }}" alt="{{ __('history.img_alt_2020_3') }}" loading="lazy" decoding="async">
                </div>
                <div class="hst-text">
                    <div class="hst-text-inner">
                        <span class="hst-year">{{ __('history.year_2020_3_year') }}</span>

                        <p>{{ __('history.year_2020_3') }}</p>
                    </div>
                </div>
            </div>

        <div class="hst-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