@extends('layouts.app_web')

@section('title', __('innovations.meta_title'))
@section('meta_description', __('innovations.meta_description'))
@section('og_image', asset('images/MSJ_Spunindo_Website-04-rev.jpg'))
@push('styles')
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        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;
        }
        .innovation-page {
            padding: 60px 0;
        }

        .sub-title {
            font-size: 32px;
            font-weight: 700;
            color: #5d5d5d;
            margin-bottom: 10px;
        }

        .main-title {
            font-size: 46px;
            color: #456C6C;
            font-weight: 500;
            line-height: 1.3;
            margin-bottom: 40px;
            max-width: 60%;
        }

        .hero-image-box {
            width: 100%;
            margin-bottom: 50px;
        }

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

        .content-flex {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 50px;
        }

        .desc-text {
            flex: 0 0 65%;
        }

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

        .action-area {
            flex: 0 0 25%;
            display: flex;
            justify-content: flex-end;
        }

        .btn-properties-outline {
            display: inline-block;
            padding: 12px 25px;
            border: 1px solid #456C6C;
            color: #456C6C;
            text-decoration: none;
            transition: all 0.3s;
            font-size: 0.95rem;
        }

        .btn-properties-outline:hover {
            background-color: #456C6C;
            color: #fff;
        }

        .social-footer {
            padding: 40px 40px;
            display: flex;
            gap: 20px;
            margin-top: 0;
        }

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

            .innovation-page {
                padding: 30px 20px 20px 20px !important;
            }

            .sub-title {
                font-size: 18px !important;
                margin-bottom: 8px !important;
            }

            .main-title {
                max-width: 100% !important;
                font-size: 28px !important;
                margin-bottom: 30px !important;
                line-height: 1.3 !important;
            }

            .hero-image-box {
                margin: 0 0 30px 0 !important;
            }

            .hero-image-box img {
                width: 100% !important;
                max-height: 240px !important;
                object-fit: cover !important;
            }

            .content-flex {
                flex-direction: column !important;
                gap: 20px !important;
                padding: 0 !important;
            }

            .desc-text,
            .action-area {
                flex: 0 0 100% !important;
                width: 100% !important;
            }

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

            .action-area {
                justify-content: flex-end !important;
            }

            .btn-properties-outline {
                font-size: 14px !important;
                padding: 10px 20px !important;
            }

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

@section('content')
    <div class="container-custom">
        <div class="innovation-page">

            <h3 class="sub-title">{{ __('innovations.sub_title') }}</h3>
            <h2 class="main-title">{{ __('innovations.main_title') }}</h2>

            <div class="hero-image-box">
                <img src="{{ asset('images/MSJ_Spunindo_Website-04-rev.jpg') }}" alt="{{ __('innovations.hero_alt') }}" fetchpriority="high" decoding="async">
            </div>

            <div class="content-flex">
                <div class="desc-text">
                    <p>{{ __('innovations.description') }}</p>
                </div>
                <div class="action-area">
                    <a href="{{ \App\Helpers\RouteTranslator::getUrl('product-range', request()->get('lang', app()->getLocale())) }}" class="btn-properties-outline">{{ __('innovations.product_properties_btn') }}</a>
                </div>
            </div>

        </div>

        <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