@extends('layouts.app_web')

@section('title', __('corporate_governance.meta_title'))
@section('meta_description', __('corporate_governance.meta_description'))

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

        .cg-intro {
            padding: 50px 0 30px 0;
        }

        .cg-label {
            font-size: 28px;
            font-weight: 600;
            color: #464646;
            margin: 0 0 10px 0;
        }

        .cg-headline {
            font-size: 40px;
            font-weight: 500;
            color: #335B5C;
            line-height: 52px;
            max-width: 600px;
            margin: 0;
        }

        .cg-hero {
            margin-left: -20px;
            width: calc(100% + 40px);
            min-height: 400px;
            background: linear-gradient(rgba(0, 90, 80, 0.72), rgba(0, 90, 80, 0.72)),
                url("{{ asset('images/sepunindo-corporate-governance-img-1.jpg') }}") center/cover no-repeat;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 60px 20px;
            margin-bottom: 0;
        }

        .cg-hero h2 {
            font-size: 46px;
            font-weight: 700;
            color: #fff;
            margin: 0 0 8px 0;
            letter-spacing: 2px;
        }

        .cg-hero h3 {
            font-size: 40px;
            font-weight: 500;
            color: #fff;
            margin: 0 0 28px 0;
        }

        .cg-hero-btn {
            display: inline-block;
            border: 2px solid #fff;
            color: #fff;
            padding: 12px 32px;
            font-size: 20px;
            font-weight: 300;
            text-decoration: none;
            letter-spacing: 0.5px;
            transition: background 0.3s, color 0.3s;
        }

        .cg-hero-btn:hover {
            background: #fff;
            color: #006b5d;
        }

        .cg-body {
            display: flex;
            align-items: flex-start;
            gap: 0;
            margin-top: 40px;
        }
        .cg-content {
            flex: 1;
            padding: 0 0 60px 40px;
            min-width: 0;
        }

        .cg-content p {
            font-size: 16px;
            color: #464646;
            line-height: 1.8;
            margin: 0 0 16px 0;
        }

        .cg-duties-intro {
            font-size: 16px !important;
            color: #464646;
            margin: 4px 0 8px 0;
            font-weight: 500 !important;
            line-height: 24px !important;
        }

        .cg-intro-text {
            font-size: 22px !important;
            font-weight: 500;
            line-height: 29px;
            color: #464646;
            margin-bottom: 20px;
        }

        .cg-content .cg-board-title {
            font-size: 18px;
            font-weight: 800;
            line-height: 18px;
            color: #464646;
            margin: 20px 0 10px 0;
        }

        .cg-content h2 {
            font-size: 16px;
            font-weight: 700;
            color: #333;
            margin: 40px 0 16px 0;
            padding-top: 20px;
            border-top: 3px solid #C5E7D7;
        }

        .cg-content h2:first-child {
            border-top: none;
            margin-top: 0;
            padding-top: 0;
        }

        .cg-content .cg-section-heading {
            font-size: 46px;
            font-weight: 500;
            color: #335B5C;
            margin: 50px 0 24px 0;
            padding-top: 30px;
            border-top: 4px solid #C5E7D7;
            line-height: 60px;
        }

        .cg-content .cg-section-heading:first-child {
            border-top: none;
            margin-top: 0;
            padding-top: 0;
        }

        .cg-content h4 {
            font-size: 22px;
            font-weight: 700;
            color: #222;
            margin: 28px 0 16px 0;
            line-height: 1.4;
        }

        .cg-content ol,
        .cg-content ul {
            font-size: 16px;
            color: #555;
            line-height: 26px;
            font-weight: 500;
            padding-left: 20px;
            margin: 0 0 16px 0;
        }

        .cg-content li {
            margin-bottom: 2px;
        }

        .cg-content table {
            width: 100%;
            border-collapse: collapse;
            font-size: 16px;
            color: #555;
            margin-bottom: 20px;
            font-weight: 500;
        }

        .cg-content table td {
            padding: 3px 4px;
            vertical-align: top;
        }

        .cg-content hr {
            border: none;
            border-top: 3px solid #ffffff;
            margin: 30px 0;
        }

        .cg-content hr.cg-divider {
            border: none;
            border-top: 3px solid #C5E7D7;
            margin: 30px 0;
        }

        .cg-board-title {
            font-size: 16px;
            font-weight: 700;
            color: #222;
            margin: 20px 0 10px 0;
        }

        .cg-board-list {
            display: grid;
            grid-template-columns: auto auto 1fr;
            column-gap: 12px;
            row-gap: 4px;
            margin: 0 0 20px 0;
            font-size: 16px;
            color: #333;
        }

        .cg-board-list dt {
            font-weight: 400;
            white-space: nowrap;
        }

        .cg-board-list dt::after {
            content: ' :';
        }

        .cg-board-list dd {
            margin: 0;
        }

        .cg-board-table {
            border-collapse: collapse;
            margin-bottom: 20px;
            width: auto;
            table-layout: fixed;
        }

        .cg-board-table td {
            padding: 1px 0 !important;
            font-size: 16px;
            color: #333;
            font-weight: 500;
            vertical-align: top;
            line-height: 24px;
        }

        .cg-board-table td:first-child {
            width: 250px;
            padding-right: 10px;
            white-space: nowrap;
        }

        .cg-board-table td:nth-child(2) {
            width: 20px;
            text-align: left;
            padding-right: 10px;
        }

        .cg-board-table td:last-child {
            font-weight: 400;
        }

        .cg-table-meeting {
            width: 100%;
            border-collapse: collapse;
            font-size: 16px;
            margin-bottom: 20px;
        }

        .cg-table-meeting th {
            background-color: #b8d4da;
            color: #fff;
            font-weight: 700;
            text-align: center;
            padding: 10px;
        }

        .cg-table-meeting td {
            background-color: #f1f3f4;
            padding: 8px 16px;
            text-align: center;
            font-weight: 500;
        }

        .cg-table-meeting td:first-child {
            text-align: left;
        }

        .cg-table-meeting tr.cg-group-header td {
            font-weight: 500;
            padding-top: 12px;
        }

        .cg-table-meeting tr.cg-group-separator {
            border-bottom: 8px solid #fff;
        }

        .cg-blurb {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-bottom: 18px;
        }

        .cg-blurb-num {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            background-color: #87A6D4;
            color: #fff;
            font-size: 13px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            margin-top: 1px;
        }

        .cg-blurb p {
            margin: 0;
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
            color: #333;
        }

        .cg-profile-section {
            background-color: #F1F3F3;
            border: 1px solid #C5E7D7;
            padding: 40px 40px 36px 40px;
            margin-bottom: 20px;
        }

        .cg-profile-section h3 {
            font-size: 22px;
            font-weight: 700;
            color: #222;
            margin: 0 0 32px 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .cg-profile {
            display: flex;
            gap: 40px;
            align-items: flex-start;
            margin-bottom: 0;
        }

        .cg-profile+.cg-profile {
            margin-top: 36px;
            padding-top: 36px;
            border-top: 3px solid #ffffff;
        }

        .cg-profile-img {
            width: 200px;
            flex-shrink: 0;
        }

        .cg-profile-img img {
            width: 100%;
            height: auto;
            display: block;
        }

        .cg-profile-info {
            padding-top: 4px;
        }

        .cg-profile-info h5 {
            font-size: 18px;
            font-weight: 700;
            color: #222;
            margin: 0 0 4px 0;
        }

        .cg-profile-info .cg-profile-role {
            font-size: 16px;
            color: #555;
            font-style: normal;
            margin: 0 0 18px 0;
            font-weight: 500;
        }

        .cg-profile-info p {
            font-size: 16px;
            color: #444;
            line-height: 24px;
            font-weight: 500;
            margin: 0 0 16px 0;
        }

        .cg-profile-info table {
            font-size: 14px;
            color: #444;
            width: 100%;
            font-weight: 500;
            border-collapse: collapse;
        }

        .cg-profile-info table td {
            padding: 5px 10px 5px 0;
            vertical-align: top;
            line-height: 1.5;
        }

        .cg-profile-info table td:first-child {
            white-space: nowrap;
            width: 130px;
            color: #444;
        }

        .cg-profile-info table td:nth-child(2) {
            width: 18px;
            color: #444;
            padding-right: 12px;
        }

        .cg-btn {
            display: inline-block;
            border: 2px solid #53767B;
            color: #53767B;
            padding: 10px 24px;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
            letter-spacing: 0.5px;
            margin-top: 12px;
            transition: background 0.3s, color 0.3s;
        }

        .cg-btn:hover {
            background: #53767B;
            color: #fff;
        }

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

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

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

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

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

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

            .cg-headline {
                font-size: 26px !important;
                line-height: 1.3 !important;
            }

            .cg-hero {
                margin-left: -20px !important;
                width: calc(100% + 40px) !important;
                min-height: 260px !important;
                padding: 40px 20px !important;
            }

            .cg-hero h2 {
                font-size: 28px !important;
                letter-spacing: 1px !important;
            }

            .cg-hero h3 {
                font-size: 22px !important;
                margin-bottom: 20px !important;
            }

            .cg-hero-btn {
                padding: 10px 24px !important;
                font-size: 14px !important;
            }

            .cg-body {
                flex-direction: column !important;
                margin-top: 24px !important;
            }

            .cg-content {
                padding: 20px 0 40px 0 !important;
            }

            .cg-content p, 
            .cg-duties-intro,
            .cg-intro-text {
                font-size: 16px !important;
                line-height: 1.6 !important;
            }

            .cg-content .cg-section-heading {
                font-size: 24px !important;
                line-height: 1.4 !important;
                margin: 30px 0 16px 0 !important;
                padding-top: 20px !important;
                border-top-width: 3px !important;
            }

            .cg-content h4 {
                font-size: 18px !important;
                margin: 20px 0 12px 0 !important;
            }

            .cg-board-table td:first-child {
                width: 140px !important;
                white-space: normal !important;
                padding-right: 5px !important;
            }

            .cg-board-table td {
                font-size: 14px !important;
            }

            .cg-profile-section {
                padding: 24px 20px !important;
            }

            .cg-profile {
                flex-direction: column !important;
            }

            .cg-profile-img {
                width: 150px !important;
            }

            .cg-profile-info table td:first-child {
                white-space: normal !important;
                width: 65px !important;
                padding-right: 5px !important;
            }
        }
    </style>
@endpush

@section('content')

    <div class="cg-main-container">

        <div class="cg-intro">
            <p class="cg-label">{{ __('corporate_governance.label') }}</p>
            <h1 class="cg-headline">{{ __('corporate_governance.headline') }}</h1>
        </div>

        <div class="cg-hero" role="img" aria-label="{{ __('corporate_governance.cg_hero_alt') }}">
            <h2>MSJA</h2>
            <h3>PT Multi Spunindo Jaya</h3>
            <a href="https://finance.yahoo.com/quote/MSJA.JK?.tsrc=fin-srch" target="_blank" class="cg-hero-btn">
                {{ __('corporate_governance.stock_updates') }}
            </a>
        </div>

        <div class="cg-body">
            @include('investors._sidebar')
            <div class="cg-content">

                <p class="cg-intro-text">
                    {{ __('corporate_governance.board_composition_intro') }}</p>

                <p class="cg-board-title">{{ __('corporate_governance.board_of_commissioners') }}</p>
                <table class="cg-board-table">
                    <tr>
                        <td>{{ __('corporate_governance.commissioner_president') }}</td>
                        <td>:</td>
                        <td>Lunardi Basuki</td>
                    </tr>
                    <tr>
                        <td>{{ __('corporate_governance.commissioner_member') }}</td>
                        <td>:</td>
                        <td>Harry Herjanto</td>
                    </tr>
                    <tr>
                        <td>{{ __('corporate_governance.commissioner_independent') }}</td>
                        <td>:</td>
                        <td>Pradhono</td>
                    </tr>
                </table>

                <p class="cg-duties-intro">{{ __('corporate_governance.commissioner_duties_intro') }}</p>

                <div class="cg-blurb">
                    <span class="cg-blurb-num">1</span>
                    <p>{{ __('corporate_governance.commissioner_duty_1') }}</p>
                </div>
                <div class="cg-blurb">
                    <span class="cg-blurb-num">2</span>
                    <p>{{ __('corporate_governance.commissioner_duty_2') }}</p>
                </div>
                <div class="cg-blurb">
                    <span class="cg-blurb-num">3</span>
                    <p>{{ __('corporate_governance.commissioner_duty_3') }}</p>
                </div>
                <div class="cg-blurb">
                    <span class="cg-blurb-num">4</span>
                    <p>{{ __('corporate_governance.commissioner_duty_4') }}</p>
                </div>
                <div class="cg-blurb">
                    <span class="cg-blurb-num">5</span>
                    <p>{{ __('corporate_governance.commissioner_duty_5') }}</p>
                </div>

                <hr class="cg-divider">

                <p class="cg-board-title">{{ __('corporate_governance.board_of_directors') }}</p>
                <table class="cg-board-table">
                    <tr>
                        <td>{{ __('corporate_governance.director_ceo') }}</td>
                        <td>:</td>
                        <td>Sasongko</td>
                    </tr>
                    <tr>
                        <td>{{ __('corporate_governance.director_member') }}</td>
                        <td>:</td>
                        <td>Roslin Octavia</td>
                    </tr>
                    <tr>
                        <td>{{ __('corporate_governance.director_member') }}</td>
                        <td>:</td>
                        <td>Takushi Ishimoto</td>
                    </tr>
                </table>

                <p class="cg-duties-intro">{{ __('corporate_governance.director_duties_intro') }}</p>

                <div class="cg-blurb">
                    <span class="cg-blurb-num">1</span>
                    <p>{{ __('corporate_governance.director_duty_1') }}</p>
                </div>
                <div class="cg-blurb">
                    <span class="cg-blurb-num">2</span>
                    <p>{{ __('corporate_governance.director_duty_2') }}</p>
                </div>
                <div class="cg-blurb">
                    <span class="cg-blurb-num">3</span>
                    <p>{{ __('corporate_governance.director_duty_3') }}</p>
                </div>
                <div class="cg-blurb">
                    <span class="cg-blurb-num">4</span>
                    <p>{{ __('corporate_governance.director_duty_4') }}</p>
                </div>
                <div class="cg-blurb">
                    <span class="cg-blurb-num">5</span>
                    <p>{{ __('corporate_governance.director_duty_5') }}</p>
                </div>

                <p class="cg-duties-intro">{{ __('corporate_governance.director_scope_intro') }}</p>
                <ul>
                    <li>{{ __('corporate_governance.director_scope_1') }}</li>
                    <li>{{ __('corporate_governance.director_scope_2') }}</li>
                    <li>{{ __('corporate_governance.director_scope_3') }}</li>
                </ul>

                <p class="cg-duties-intro">{{ __('corporate_governance.director_training_note') }}</p>
                <p class="cg-duties-intro">{{ __('corporate_governance.compliance_intro') }}</p>

                <div class="cg-blurb">
                    <span class="cg-blurb-num">1</span>
                    <p>{{ __('corporate_governance.compliance_1') }}</p>
                </div>
                <div class="cg-blurb">
                    <span class="cg-blurb-num">2</span>
                    <p>{{ __('corporate_governance.compliance_2') }}</p>
                </div>
                <div class="cg-blurb">
                    <span class="cg-blurb-num">3</span>
                    <div>
                        <p>{{ __('corporate_governance.compliance_3') }}</p>
                        <ol>
                            <li>{{ __('corporate_governance.compliance_3_sub_1') }}</li>
                            <li>{{ __('corporate_governance.compliance_3_sub_2') }}</li>
                            <li>{{ __('corporate_governance.compliance_3_sub_3') }}</li>
                            <li>{{ __('corporate_governance.compliance_3_sub_4') }}
                                <ol>
                                    <li>{{ __('corporate_governance.compliance_3_sub_4a') }}</li>
                                    <li>{{ __('corporate_governance.compliance_3_sub_4b') }}</li>
                                    <li>{{ __('corporate_governance.compliance_3_sub_4c') }}</li>
                                </ol>
                            </li>
                        </ol>
                    </div>
                </div>
                <div class="cg-blurb">
                    <span class="cg-blurb-num">4</span>
                    <p>{{ __('corporate_governance.compliance_4') }}</p>
                </div>
                <div class="cg-blurb">
                    <span class="cg-blurb-num">5</span>
                    <p>{{ __('corporate_governance.compliance_5') }}</p>
                </div>

                <p>{{ __('corporate_governance.meetings_intro') }}</p>
                <table class="cg-table-meeting">
                    <thead>
                        <tr>
                            <th style="text-align:left">{{ __('corporate_governance.meeting_name') }}</th>
                            <th>{{ __('corporate_governance.meeting_attendance') }}</th>
                            <th>{{ __('corporate_governance.meeting_count') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="cg-group-header">
                            <td>{{ __('corporate_governance.board_of_commissioners') }}</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>Harry Herjanto</td>
                            <td style="text-align:center">3</td>
                            <td style="text-align:center">3</td>
                        </tr>
                        <tr class="cg-group-separator">
                            <td>Bagus</td>
                            <td style="text-align:center">3</td>
                            <td style="text-align:center">3</td>
                        </tr>
                        <tr class="cg-group-header">
                            <td>{{ __('corporate_governance.directors_section') }}</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>Sasongko Basuki</td>
                            <td style="text-align:center">4</td>
                            <td style="text-align:center">4</td>
                        </tr>
                        <tr>
                            <td>Lunardi Basuki</td>
                            <td style="text-align:center">4</td>
                            <td style="text-align:center">4</td>
                        </tr>
                    </tbody>
                </table>

                <p class="cg-duties-intro">{{ __('corporate_governance.risk_management_text') }}</p>

                <div class="cg-profile-section">
                    <h3>{{ __('corporate_governance.board_of_commissioners') }}</h3>

                    <div class="cg-profile">
                        <div class="cg-profile-img">
                            <img src="{{ asset('images/sepunindo-corporate-governance-img-Lunardi-Basuki-.png') }}"
                                alt="{{ __('corporate_governance.img_alt_lunardi') }}" loading="lazy" decoding="async">
                        </div>
                        <div class="cg-profile-info">
                            <h5>Lunardi Basuki</h5>
                            <p class="cg-profile-role">{{ __('corporate_governance.profile_lunardi_role') }}</p>
                            <p>{{ __('corporate_governance.profile_lunardi_bio') }}</p>
                            <table>
                                <tr>
                                    <td style="width:20%">1992 – 1995</td>
                                    <td style="width:1%">:</td>
                                    <td>Marketing Manager at Bank Ekonomi</td>
                                </tr>
                                <tr>
                                    <td>1992 – 1995</td>
                                    <td>:</td>
                                    <td>Marketing Manager at Bank Ekonomi</td>
                                </tr>
                                <tr>
                                    <td>1995 – 1997</td>
                                    <td>:</td>
                                    <td>Accounting &amp; Finance Manager at PT Setia Kawan Makmur Sejahtera</td>
                                </tr>
                                <tr>
                                    <td>1997 – 2023</td>
                                    <td>:</td>
                                    <td>Accounting &amp; Finance Director at PT Multi Spunindo Jaya</td>
                                </tr>
                                <tr>
                                    <td>2012 – Present</td>
                                    <td>:</td>
                                    <td>President Director at PT S&amp;S Hygiene Solution</td>
                                </tr>
                                <tr>
                                    <td>2012 – Present</td>
                                    <td>:</td>
                                    <td>Director at PT Multi Spunindo Properti</td>
                                </tr>
                                <tr>
                                    <td>2022 – Present</td>
                                    <td>:</td>
                                    <td>Commissioner at PT Maju Selaras Jayantara</td>
                                </tr>
                                <tr>
                                    <td>2023 – Present</td>
                                    <td>:</td>
                                    <td>President Commissioner at PT Multi Spunindo Jaya Tbk</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div class="cg-profile">
                        <div class="cg-profile-img">
                            <img src="{{ asset('images/sepunindo-corporate-governance-img-Pradhono-.png') }}"
                                alt="{{ __('corporate_governance.img_alt_pradhono') }}" loading="lazy" decoding="async">
                        </div>
                        <div class="cg-profile-info">
                            <h5>Pradhono</h5>
                            <p class="cg-profile-role">{{ __('corporate_governance.profile_pradhono_role') }}</p>
                            <p>{{ __('corporate_governance.profile_pradhono_bio') }}</p>
                            <table>
                                <tr>
                                    <td style="width:20%">1992 – 1997</td>
                                    <td style="width:1%">:</td>
                                    <td>Prasetio, Utomo &amp; Co., (Arthur Andersen), Registered Public Accountant</td>
                                </tr>
                                <tr>
                                    <td>1998 – 2000</td>
                                    <td>:</td>
                                    <td>Accounting &amp; Tax Manager National Shipping Company</td>
                                </tr>
                                <tr>
                                    <td>2001 – 2003</td>
                                    <td>:</td>
                                    <td>Partner at Adi Wirawan &amp; Co., Registered Public Accountant</td>
                                </tr>
                                <tr>
                                    <td>2003 – 2003</td>
                                    <td>:</td>
                                    <td>Partner at Pradhono, BAP, &amp; Co., Registered Public Accountant</td>
                                </tr>
                                <tr>
                                    <td>2004 – 2008</td>
                                    <td>:</td>
                                    <td>Managing Partner at KAP Pradhono &amp; Setijawati Registered Public Accountant</td>
                                </tr>
                                <tr>
                                    <td>2008 – 2011</td>
                                    <td>:</td>
                                    <td>Partner at KAP Tjahjadi, Pradhono &amp; Teramihardja (Rodl and Partner)</td>
                                </tr>
                                <tr>
                                    <td>2011 – Present</td>
                                    <td>:</td>
                                    <td>Deputy Managing Partner at KAP Teramiradja, Pradhono &amp; Chandra (Rodl and
                                        Partner)</td>
                                </tr>
                                <tr>
                                    <td>2021 – Present</td>
                                    <td>:</td>
                                    <td>Member of the Audit Committee at PT Pakuwon Jati Tbk</td>
                                </tr>
                                <tr>
                                    <td>2022 – Present</td>
                                    <td>:</td>
                                    <td>Member of the Audit Committee at PT Sampoerna Agro Tbk.</td>
                                </tr>
                                <tr>
                                    <td>2023 – Present</td>
                                    <td>:</td>
                                    <td>Independent Commissioner at PT Multi Spunindo Jaya Tbk</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div class="cg-profile">
                        <div class="cg-profile-img">
                            <img src="{{ asset('images/sepunindo-corporate-governance-img-Harry-Herjanto-.png') }}"
                                alt="{{ __('corporate_governance.img_alt_harry') }}" loading="lazy" decoding="async">
                        </div>
                        <div class="cg-profile-info">
                            <h5>Harry Herjanto</h5>
                            <p class="cg-profile-role">{{ __('corporate_governance.profile_harry_role') }}</p>
                            <p>{{ __('corporate_governance.profile_harry_bio') }}</p>
                            <table>
                                <tr>
                                    <td style="width:20%">2023 – Present</td>
                                    <td style="width:1%">:</td>
                                    <td>President Commissioner at PT Maju Selaras Jayamerta</td>
                                </tr>
                                <tr>
                                    <td>2023 – Present</td>
                                    <td>:</td>
                                    <td>President Commissioner at PT Maju Selaras Jayamerta</td>
                                </tr>
                                <tr>
                                    <td>2021 – Present</td>
                                    <td>:</td>
                                    <td>President Commissioner at PT Multi Spunindo Properti</td>
                                </tr>
                                <tr>
                                    <td>1997 – 2023</td>
                                    <td>:</td>
                                    <td>President Commissioner at PT Multi Spunindo Jaya</td>
                                </tr>
                                <tr>
                                    <td>2023 – Present</td>
                                    <td>:</td>
                                    <td>Commissioner at PT Multi Spunindo Jaya Tbk</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="cg-profile-section">
                    <h3>{{ __('corporate_governance.board_of_directors') }}</h3>

                    <div class="cg-profile">
                        <div class="cg-profile-img">
                            <img src="{{ asset('images/sepunindo-corporate-governance-img-Sasongko-Basuki-.png') }}"
                                alt="{{ __('corporate_governance.img_alt_sasongko') }}" loading="lazy" decoding="async">
                        </div>
                        <div class="cg-profile-info">
                            <h5>Sasongko Basuki</h5>
                            <p class="cg-profile-role">{{ __('corporate_governance.profile_sasongko_role') }}</p>
                            <p>{{ __('corporate_governance.profile_sasongko_bio') }}</p>
                            <table>
                                <tr>
                                    <td style="width:20%">1993 – 1997</td>
                                    <td style="width:1%">:</td>
                                    <td>Technical Engineer at PT Setia Kawan Makmur Sejahtera</td>
                                </tr>
                                <tr>
                                    <td>1993 – 1997</td>
                                    <td>:</td>
                                    <td>Technical Engineer at PT Setia Kawan Makmur Sejahtera</td>
                                </tr>
                                <tr>
                                    <td>2021 – Present</td>
                                    <td>:</td>
                                    <td>Director at PT Multi Spunindo Properti</td>
                                </tr>
                                <tr>
                                    <td>2022 – Present</td>
                                    <td>:</td>
                                    <td>Director at PT Maju Selaras Jayantara</td>
                                </tr>
                                <tr>
                                    <td>1997 – Present</td>
                                    <td>:</td>
                                    <td>President Director at PT Multi Spunindo Jaya Tbk.</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div class="cg-profile">
                        <div class="cg-profile-img">
                            <img src="{{ asset('images/sepunindo-corporate-governance-img-Roslin-Octavia-Basuki-.png') }}"
                                alt="{{ __('corporate_governance.img_alt_roslin') }}" loading="lazy" decoding="async">
                        </div>
                        <div class="cg-profile-info">
                            <h5>Roslin Octavia Basuki</h5>
                            <p class="cg-profile-role">{{ __('corporate_governance.profile_roslin_role') }}</p>
                            <p>{{ __('corporate_governance.profile_roslin_bio') }}</p>
                            <table>
                                <tr>
                                    <td style="width:20%">1994 – 1996</td>
                                    <td style="width:1%">:</td>
                                    <td>Finance Officer at PT Unggul Indah Corporation.</td>
                                </tr>
                                <tr>
                                    <td>1996 – 1998</td>
                                    <td>:</td>
                                    <td>Financial and Credit Analyst at ABN Amro Bank.</td>
                                </tr>
                                <tr>
                                    <td>2010 – 2023</td>
                                    <td>:</td>
                                    <td>Financial and Accounting Manager at PT Multi Spunindo Jaya.</td>
                                </tr>
                                <tr>
                                    <td>2023 – Present</td>
                                    <td>:</td>
                                    <td>Director at PT Multi Spunindo Jaya.</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div class="cg-profile">
                        <div class="cg-profile-img">
                            <img src="{{ asset('images/sepunindo-corporate-governance-img-Takushi-Ishimoto-.png') }}"
                                alt="{{ __('corporate_governance.img_alt_takushi') }}" loading="lazy" decoding="async">
                        </div>
                        <div class="cg-profile-info">
                            <h5>Takushi Ishimoto</h5>
                            <p class="cg-profile-role">{{ __('corporate_governance.profile_takushi_role') }}</p>
                            <p>{{ __('corporate_governance.profile_takushi_bio') }}</p>
                            <table>
                                <tr>
                                    <td style="width:20%">1985 – 1987</td>
                                    <td style="width:1%">:</td>
                                    <td>Engineer at Furukawa Industrial, S.A.</td>
                                </tr>
                                <tr>
                                    <td>1988 – 1990</td>
                                    <td>:</td>
                                    <td>Process Engineer at Sumitomo Wiring System, Ltd.</td>
                                </tr>
                                <tr>
                                    <td>1991 – 2010</td>
                                    <td>:</td>
                                    <td>Senior Manager of Nonwoven Engineering at Nippon Kodoshi Corporation</td>
                                </tr>
                                <tr>
                                    <td>2010 – 2023</td>
                                    <td>:</td>
                                    <td>General Manager at PT Multi Spunindo Jaya</td>
                                </tr>
                                <tr>
                                    <td>2023 – Present</td>
                                    <td>:</td>
                                    <td>Director at PT Multi Spunindo Jaya Tbk</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <p class="cg-duties-intro">{{ __('corporate_governance.board_disclosure_1') }}</p>
                <p class="cg-duties-intro">{{ __('corporate_governance.board_disclosure_2') }}</p>
                <p class="cg-duties-intro">{{ __('corporate_governance.board_disclosure_3') }}</p>
                <p class="cg-duties-intro">{{ __('corporate_governance.board_disclosure_4') }}</p>

                <h2 class="cg-section-heading">{{ __('corporate_governance.section_cg_title') }}</h2>
                <p class="cg-duties-intro">{{ __('corporate_governance.section_cg_text_1') }}</p>
                <p class="cg-duties-intro">{{ __('corporate_governance.section_cg_text_2') }}</p>

                <h2 class="cg-section-heading">{{ __('corporate_governance.section_audit_title') }}</h2>
                <h4>{{ __('corporate_governance.audit_structure_title') }}</h4>
                <p class="cg-duties-intro">{{ __('corporate_governance.audit_structure_intro') }}</p>
                <table>
                    <tr>
                        <td style="width:20%">{{ __('corporate_governance.audit_chairman') }}</td>
                        <td style="width:1%">:</td>
                        <td>{{ __('corporate_governance.audit_chairman_name') }}</td>
                    </tr>
                    <tr>
                        <td>{{ __('corporate_governance.audit_member') }}</td>
                        <td>:</td>
                        <td>{{ __('corporate_governance.audit_member_1') }}</td>
                    </tr>
                    <tr>
                        <td>{{ __('corporate_governance.audit_member') }}</td>
                        <td>:</td>
                        <td>{{ __('corporate_governance.audit_member_2') }}</td>
                    </tr>
                </table>

                <h4>{{ __('corporate_governance.audit_duties_title') }}</h4>
                <p class="cg-duties-intro">{{ __('corporate_governance.audit_duties_intro_1') }}</p>
                <p class="cg-duties-intro">{{ __('corporate_governance.audit_duties_intro_2') }}</p>
                <ol>
                    <li>{{ __('corporate_governance.audit_duty_1') }}</li>
                    <li>{{ __('corporate_governance.audit_duty_2') }}</li>
                    <li>{{ __('corporate_governance.audit_duty_3') }}</li>
                    <li>{{ __('corporate_governance.audit_duty_4') }}</li>
                    <li>{{ __('corporate_governance.audit_duty_5') }}</li>
                    <li>{{ __('corporate_governance.audit_duty_6') }}</li>
                    <li>{{ __('corporate_governance.audit_duty_7') }}</li>
                    <li>{{ __('corporate_governance.audit_duty_8') }}</li>
                    <li>{{ __('corporate_governance.audit_duty_9') }}</li>
                </ol>

                <p class="cg-duties-intro">{{ __('corporate_governance.audit_authority_intro') }}</p>
                <ol>
                    <li>{{ __('corporate_governance.audit_authority_1') }}</li>
                    <li>{{ __('corporate_governance.audit_authority_2') }}</li>
                    <li>{{ __('corporate_governance.audit_authority_3') }}</li>
                    <li>{{ __('corporate_governance.audit_authority_4') }}</li>
                </ol>

                <p class="cg-duties-intro">{{ __('corporate_governance.audit_meeting_note') }}</p>
                <a href="{{ asset('documents/Microsoft Word - [SPIN] - SK Dewan Komisaris_Pembentukan Komite Audit v2-16 Oct 2023.pdf') }}"
                    target="_blank" class="cg-btn">
                    {{ __('corporate_governance.audit_charter_btn') }}
                </a>

                <h2 class="cg-section-heading">{{ __('corporate_governance.section_iau_title') }}</h2>
                <p class="cg-duties-intro">{{ __('corporate_governance.section_iau_text_1') }}</p>
                <p class="cg-duties-intro">{{ __('corporate_governance.section_iau_text_2') }}</p>

                <table class="cg-board-table">
                    <tr>
                        <td>{{ __('corporate_governance.section_iau_label') }}</td>
                        <td>:</td>
                        <td>
                            {{ __('corporate_governance.section_iau_head_name') }}<br>
                            {{ __('corporate_governance.section_iau_head_prev') }}
                        </td>
                    </tr>
                </table>

                <p class="cg-duties-intro">{{ __('corporate_governance.section_iau_charter_text_1') }}</p>
                <p class="cg-duties-intro">{{ __('corporate_governance.section_iau_charter_text_2') }}</p>

                <p class="cg-duties-intro">{{ __('corporate_governance.section_iau_duties_intro') }}</p>
                <ol>
                    <li>{{ __('corporate_governance.iau_duty_1') }}</li>
                    <li>{{ __('corporate_governance.iau_duty_2') }}</li>
                    <li>{{ __('corporate_governance.iau_duty_3') }}</li>
                    <li>{{ __('corporate_governance.iau_duty_4') }}</li>
                    <li>{{ __('corporate_governance.iau_duty_5') }}</li>
                    <li>{{ __('corporate_governance.iau_duty_6') }}</li>
                    <li>{{ __('corporate_governance.iau_duty_7') }}</li>
                    <li>{{ __('corporate_governance.iau_duty_8') }}</li>
                </ol>

                <h2 class="cg-section-heading">{{ __('corporate_governance.section_nomination_title') }}</h2>
                <p class="cg-duties-intro">{{ __('corporate_governance.section_nomination_text') }}</p>

                <h2 class="cg-section-heading">{{ __('corporate_governance.section_cs_title') }}</h2>
                <p class="cg-duties-intro">{{ __('corporate_governance.section_cs_text_1') }}</p>
                <p class="cg-duties-intro">{{ __('corporate_governance.section_cs_cv_intro') }}</p>
                <table class="cg-board-table">
                    <tr>
                        <td>{{ __('corporate_governance.section_cs_name_label') }}</td>
                        <td>:</td>
                        <td>
                            {{ __('corporate_governance.section_cs_name_value') }}<br>
                            {{ __('corporate_governance.section_cs_name_head') }}
                        </td>
                    </tr>
                </table>
                <p class="cg-duties-intro">{{ __('corporate_governance.section_cs_duties_intro') }}</p>
                <ol>
                    <li>{{ __('corporate_governance.cs_duty_1') }}</li>
                    <li>{{ __('corporate_governance.cs_duty_2') }}</li>
                    <li>{{ __('corporate_governance.cs_duty_3') }}
                        <ol>
                            <li>{{ __('corporate_governance.cs_duty_3_sub_1') }}</li>
                            <li>{{ __('corporate_governance.cs_duty_3_sub_2') }}</li>
                            <li>{{ __('corporate_governance.cs_duty_3_sub_3') }}</li>
                            <li>{{ __('corporate_governance.cs_duty_3_sub_4') }}</li>
                            <li>{{ __('corporate_governance.cs_duty_3_sub_5') }}</li>
                        </ol>
                    </li>
                    <li>{{ __('corporate_governance.cs_duty_4') }}</li>
                    <li>{{ __('corporate_governance.cs_duty_5') }}</li>
                    <li>{{ __('corporate_governance.cs_duty_6') }}</li>
                    <li>{{ __('corporate_governance.cs_duty_7') }}</li>
                    <li>{{ __('corporate_governance.cs_duty_8') }}</li>
                    <li>{{ __('corporate_governance.cs_duty_9') }}</li>
                    <li>{{ __('corporate_governance.cs_duty_10') }}</li>
                    <li>{{ __('corporate_governance.cs_duty_11') }}</li>
                    <li>{{ __('corporate_governance.cs_duty_12') }}</li>
                    <li>{{ __('corporate_governance.cs_duty_13') }}</li>
                    <li>{{ __('corporate_governance.cs_duty_14') }}
                        <ol>
                            <li>{{ __('corporate_governance.cs_duty_14_sub_1') }}</li>
                            <li>{{ __('corporate_governance.cs_duty_14_sub_2') }}</li>
                            <li>{{ __('corporate_governance.cs_duty_14_sub_3') }}</li>
                            <li>{{ __('corporate_governance.cs_duty_14_sub_4') }}</li>
                            <li>{{ __('corporate_governance.cs_duty_14_sub_5') }}</li>
                        </ol>
                    </li>
                </ol>

                <p class="cg-duties-intro">{{ __('corporate_governance.section_cs_contact_intro') }}</p>
                <table>
                    <tr>
                        <td style="width:20%">{{ __('corporate_governance.cs_contact_name') }}</td>
                        <td style="width:1%">:</td>
                        <td>Kent Kurniawan Handi</td>
                    </tr>
                    <tr>
                        <td>{{ __('corporate_governance.cs_contact_position') }}</td>
                        <td>:</td>
                        <td>Sekretaris Perusahaan / Corporate Secretary</td>
                    </tr>
                    <tr>
                        <td>{{ __('corporate_governance.cs_contact_domicile') }}</td>
                        <td>:</td>
                        <td>Desa Jabaran, Kecamatan Balongbendo, Krian, Sidoarjo, Jawa Timur.</td>
                    </tr>
                    <tr>
                        <td>{{ __('corporate_governance.cs_contact_phone') }}</td>
                        <td>:</td>
                        <td>+62 31 897 1301</td>
                    </tr>
                    <tr>
                        <td>{{ __('corporate_governance.cs_contact_email') }}</td>
                        <td>:</td>
                        <td>corp.sec@spunindo.com</td>
                    </tr>
                </table>

                <h4>{{ __('corporate_governance.section_training_title') }}</h4>
                <p class="cg-duties-intro">{{ __('corporate_governance.section_training_text') }}</p>
                <hr class="cg-divider">

            </div>
        </div>

        <div class="cg-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
        $questionId = "Sasongko Basuki siapa?";
        if (app()->getLocale() == 'en') {
            $questionId = "Who is Sasongko Basuki?";
        } elseif (app()->getLocale() == 'ja') {
            $questionId = "サソンコ・バスキとは誰ですか？";
        }

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