@extends('layouts.app')

@section('title', 'Visi Misi & Kebijakan - PT CMSS')

@section('content')
    <style>
        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .mission-card {
            transition: all 0.3s ease;
            border-left: 4px solid transparent;
        }

        .mission-card:hover {
            border-left-color: #0d6efd;
            transform: translateX(10px);
            background-color: #ffffff;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
        }

        .icon-box-large {
            width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            font-size: 2rem;
            transform: rotate(-5deg);
            transition: all 0.3s;
        }

        .hover-lift:hover .icon-box-large {
            transform: rotate(0deg) scale(1.1);
        }

        .quote-mark {
            font-family: serif;
            font-size: 8rem;
            line-height: 0;
            position: absolute;
            opacity: 0.1;
            top: 60px;
            left: 20px;
        }
    </style>

    <div class="position-relative text-white"
        style="background: linear-gradient(135deg, #0d6efd 0%, #0043a8 100%); padding: 120px 0 300px 0; overflow: hidden;">
        <div class="position-absolute rounded-circle border border-white border-opacity-10"
            style="width: 600px; height: 600px; top: -200px; right: -100px;"></div>
        <div class="position-absolute rounded-circle border border-white border-opacity-10"
            style="width: 400px; height: 400px; bottom: -150px; left: -100px;"></div>

        <div class="container position-relative z-index-1 text-center" data-aos="zoom-in" data-aos-duration="800">
            <span class="badge bg-warning text-dark px-4 py-2 rounded-pill mb-4 fw-bold tracking-wide shadow-sm"
                style="letter-spacing: 2px;">PONDASI & NILAI PERUSAHAAN</span>
            <h1 class="display-3 fw-bolder mb-3">Visi, Misi & Kebijakan</h1>
            <p class="lead opacity-75 mx-auto" style="max-width: 600px;">Komitmen kami dalam memberikan kualitas terbaik dan
                menjaga kepercayaan setiap mitra bisnis CMSS.</p>
        </div>

        <svg class="position-absolute bottom-0 start-0 w-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"
            style="margin-bottom: -1px;">
            <path fill="#f8f9fa" fill-opacity="1"
                d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,165.3C960,192,1056,224,1152,213.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
            </path>
        </svg>
    </div>

    <div class="container py-5 mt-n6">

        <div class="row mb-5 pb-5">
            <div class="col-12 text-center mb-5" data-aos="fade-up">
                <h2 class="fw-bolder text-dark mb-3">4 Pilar Kebijakan Mutu (C.M.S.S)</h2>
                <div class="mx-auto bg-primary rounded" style="height: 4px; width: 80px;"></div>
            </div>

            <div class="row g-4 justify-content-center">
                <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
                    <div class="card border-0 shadow-sm rounded-4 hover-lift h-100 bg-white overflow-hidden">
                        <div style="height: 4px; background-color: #0d6efd;"></div>
                        <div class="card-body p-4 text-center">
                            <div class="icon-box-large bg-primary bg-opacity-10 text-primary mx-auto mb-4">
                                <i class="bi bi-hand-thumbs-up-fill"></i>
                            </div>
                            <h4 class="fw-bolder text-primary mb-3">Commitment</h4>
                            <p class="text-muted small mb-0 lh-lg">Berkomitmen sungguh-sungguh memenuhi persyaratan
                                kualitas, harapan pelanggan, dan meningkatkan kompetensi SDM.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
                    <div class="card border-0 shadow-sm rounded-4 hover-lift h-100 bg-white overflow-hidden">
                        <div style="height: 4px; background-color: #198754;"></div>
                        <div class="card-body p-4 text-center">
                            <div class="icon-box-large bg-success bg-opacity-10 text-success mx-auto mb-4">
                                <i class="bi bi-arrow-repeat"></i>
                            </div>
                            <h4 class="fw-bolder text-success mb-3">Mobile</h4>
                            <p class="text-muted small mb-0 lh-lg">Bergerak proaktif melakukan perbaikan terus-menerus dalam
                                menciptakan produk aman, berstandar, dan berkualitas.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
                    <div class="card border-0 shadow-sm rounded-4 hover-lift h-100 bg-white overflow-hidden">
                        <div style="height: 4px; background-color: #0dcaf0;"></div>
                        <div class="card-body p-4 text-center">
                            <div class="icon-box-large bg-info bg-opacity-10 text-info mx-auto mb-4">
                                <i class="bi bi-shield-check"></i>
                            </div>
                            <h4 class="fw-bolder text-info mb-3">Safety</h4>
                            <p class="text-muted small mb-0 lh-lg">Menjamin keamanan pangan dan proses higienis mulai dari
                                penerimaan bahan mentah hingga tahap distribusi.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="400">
                    <div class="card border-0 shadow-sm rounded-4 hover-lift h-100 bg-white overflow-hidden">
                        <div style="height: 4px; background-color: #ffc107;"></div>
                        <div class="card-body p-4 text-center">
                            <div class="icon-box-large bg-warning bg-opacity-10 text-warning mx-auto mb-4">
                                <i class="bi bi-diagram-3-fill"></i>
                            </div>
                            <h4 class="fw-bolder text-warning mb-3">Synergy</h4>
                            <p class="text-muted small mb-0 lh-lg">Membangun kerja sama internal yang kuat dan kemitraan
                                eksternal yang harmonis dengan seluruh stakeholder.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row align-items-center mb-5 pb-5 g-5">
            <div class="col-lg-5" data-aos="fade-right">
                <div class="bg-dark text-white p-5 rounded-4 shadow-lg position-relative overflow-hidden h-100 d-flex flex-column justify-content-center"
                    style="min-height: 400px; background: linear-gradient(145deg, #212529 0%, #343a40 100%);">
                    <span class="quote-mark text-primary">"</span>
                    <div class="position-relative z-index-1">
                        <span class="badge bg-primary px-3 py-2 rounded-pill mb-4 fw-bold">VISI PERUSAHAAN</span>
                        <h3 class="fw-bold mb-4 lh-base" style="font-size: 1.8rem;">
                            Menjadi perusahaan <span class="text-primary">flexible packaging</span> yang terus berinovasi
                            dan menjaga kualitas produk.
                        </h3>
                        <p class="text-secondary fs-5 mb-0">Sehingga dapat memenuhi permintaan dan kepuasan pelanggan secara
                            paripurna.</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-7" data-aos="fade-left">
                <div class="ps-lg-4">
                    <h2 class="display-6 fw-bolder mb-4 text-dark">Misi Kami</h2>
                    <p class="text-muted mb-4 pb-2 border-bottom">Langkah nyata yang kami lakukan setiap hari untuk mencapai
                        visi perusahaan:</p>

                    <div class="d-flex flex-column gap-3">
                        <div class="mission-card bg-light p-3 px-4 rounded-3 d-flex align-items-center shadow-sm">
                            <div class="bg-white rounded-circle shadow-sm d-flex align-items-center justify-content-center me-4"
                                style="width: 45px; height: 45px; min-width: 45px;">
                                <span class="text-primary fw-bolder fs-5">1</span>
                            </div>
                            <span class="text-dark fw-medium fs-6">Berinovasi tiada henti dalam pengembangan produk.</span>
                        </div>

                        <div class="mission-card bg-light p-3 px-4 rounded-3 d-flex align-items-center shadow-sm">
                            <div class="bg-white rounded-circle shadow-sm d-flex align-items-center justify-content-center me-4"
                                style="width: 45px; height: 45px; min-width: 45px;">
                                <span class="text-primary fw-bolder fs-5">2</span>
                            </div>
                            <span class="text-dark fw-medium fs-6">Meningkatkan kualitas dan keamanan produk secara
                                berkelanjutan.</span>
                        </div>

                        <div class="mission-card bg-light p-3 px-4 rounded-3 d-flex align-items-center shadow-sm">
                            <div class="bg-white rounded-circle shadow-sm d-flex align-items-center justify-content-center me-4"
                                style="width: 45px; height: 45px; min-width: 45px;">
                                <span class="text-primary fw-bolder fs-5">3</span>
                            </div>
                            <span class="text-dark fw-medium fs-6">Memastikan ketepatan waktu pengiriman barang (On-Time
                                Delivery).</span>
                        </div>

                        <div class="mission-card bg-light p-3 px-4 rounded-3 d-flex align-items-center shadow-sm">
                            <div class="bg-white rounded-circle shadow-sm d-flex align-items-center justify-content-center me-4"
                                style="width: 45px; height: 45px; min-width: 45px;">
                                <span class="text-primary fw-bolder fs-5">4</span>
                            </div>
                            <span class="text-dark fw-medium fs-6">Membangun hubungan jangka panjang yang didasari
                                kejujuran dan integritas.</span>
                        </div>

                        <div class="mission-card bg-light p-3 px-4 rounded-3 d-flex align-items-center shadow-sm">
                            <div class="bg-white rounded-circle shadow-sm d-flex align-items-center justify-content-center me-4"
                                style="width: 45px; height: 45px; min-width: 45px;">
                                <span class="text-primary fw-bolder fs-5">5</span>
                            </div>
                            <span class="text-dark fw-medium fs-6">Menerapkan sistem manajemen mutu, food safety, serta
                                standar Halal.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-center pt-2" data-aos="zoom-in" data-aos-duration="1000">
            <div class="col-lg-10">
                <div class="card border-0 shadow-lg rounded-4 overflow-hidden position-relative"
                    style="background: #ffffff;">
                    <i class="bi bi-patch-check position-absolute opacity-10"
                        style="font-size: 25rem; right: -50px; bottom: -100px; color: #6f42c1;"></i>

                    <div class="row g-0 position-relative z-index-1">
                        <div class="col-md-4 text-white p-5 d-flex flex-column justify-content-center align-items-center text-center"
                            style="background: linear-gradient(135deg, #6f42c1 0%, #4a2b82 100%);">
                            <div class="bg-white p-3 rounded-circle mb-4 shadow">
                                <img src="{{ asset('images/png-transparent-halal-indonesia-2023-thumbnail.png') }}"
                                    alt="Halal Indonesia" style="width: 80px; height: 80px; object-fit: contain;">
                            </div>
                            <h2 class="fw-bolder mb-0">Kebijakan Halal</h2>
                            <div class="mt-3 bg-white opacity-50 mx-auto" style="height: 2px; width: 50px;"></div>
                        </div>
                        <div class="col-md-8 p-5">
                            <p class="fs-5 text-dark mb-4 fw-bold" style="line-height: 1.6;">Kami berkomitmen menghasilkan
                                produk halal secara konsisten dan berkesinambungan melalui langkah nyata:</p>

                            <div class="d-flex align-items-start mb-3">
                                <i class="bi bi-check-circle-fill fs-5 mt-1 me-3" style="color: #6f42c1;"></i>
                                <span class="text-secondary fw-medium">Mematuhi seluruh peraturan perundangan terkait
                                    jaminan produk halal di Indonesia.</span>
                            </div>
                            <div class="d-flex align-items-start mb-3">
                                <i class="bi bi-check-circle-fill fs-5 mt-1 me-3" style="color: #6f42c1;"></i>
                                <span class="text-secondary fw-medium">Menggunakan bahan halal dan melaksanakan Proses
                                    Produk Halal (PPH) sesuai regulasi yang berlaku.</span>
                            </div>
                            <div class="d-flex align-items-start mb-3">
                                <i class="bi bi-check-circle-fill fs-5 mt-1 me-3" style="color: #6f42c1;"></i>
                                <span class="text-secondary fw-medium">Menyiapkan dan meningkatkan kompetensi SDM agar
                                    mendukung penuh pelaksanaan PPH.</span>
                            </div>
                            <div class="d-flex align-items-start mb-4">
                                <i class="bi bi-check-circle-fill fs-5 mt-1 me-3" style="color: #6f42c1;"></i>
                                <span class="text-secondary fw-medium">Mensosialisasikan kebijakan halal secara transparan
                                    kepada seluruh pihak terkait.</span>
                            </div>

                            <div class="d-flex flex-column align-items-end mt-4 pt-4 border-top">
                                <p class="mb-1 text-muted small"><i class="bi bi-geo-alt-fill me-1"></i> Tangerang, 29
                                    Januari 2024</p>
                                <h5 class="fw-bolder mb-0 text-dark" style="font-family: serif; font-style: italic;">
                                    William James Suparno</h5>
                                <div class="bg-dark mt-1 mb-1" style="height: 1px; width: 200px;"></div>
                                <p class="text-muted small fw-bold mb-0 text-uppercase tracking-wide">Direktur Utama</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection