@extends('layouts.app')

@section('title', 'Tentang Kami - PT CMSS')

@section('content')
<div class="container py-5 mt-4">
    <div class="row align-items-center mb-5 pb-4 border-bottom">
        <div class="col-lg-6 mb-4 mb-lg-0" data-aos="fade-right">
            <span class="badge bg-primary px-3 py-2 rounded-pill mb-3 fw-bold">PROFIL PERUSAHAAN</span>
            <h1 class="display-4 fw-bolder mb-4 text-dark">Dedikasi Pada <br><span class="text-primary">Kualitas & Presisi</span></h1>
            <p class="lead text-secondary mb-4">
                PT. Century Mitra Sukses Sejati (CMSS) telah tumbuh menjadi rekanan tepercaya untuk industri yang membutuhkan kemasan fleksibel berkualitas tinggi. Dengan pabrik yang terintegrasi, kami melayani pencetakan Rotogravure dengan standar *Food Grade* internasional.
            </p>
        </div>
        <div class="col-lg-6" data-aos="fade-left">
            <div class="position-relative p-3">
                <div class="position-absolute bg-primary rounded-4" style="top: 0; right: 0; bottom: 2rem; left: 2rem; opacity: 0.1;"></div>
                <img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&q=80&w=800" class="img-fluid rounded-4 shadow-lg position-relative" alt="Fasilitas Pabrik CMSS" style="z-index: 1;">
            </div>
        </div>
    </div>

    <div class="row mb-4" data-aos="fade-up">
        <div class="col-12 text-center">
            <h2 class="fw-bolder">Fasilitas Produksi Terkini</h2>
            <p class="text-muted">Didukung oleh mesin berteknologi mutakhir dan tim profesional.</p>
        </div>
    </div>

    <div class="row g-4 mb-5">
        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
            <div class="card border-0 rounded-4 overflow-hidden shadow-sm hover-lift h-100">
                <div class="ratio ratio-4x3">
                    <img src="{{ asset('images/about/printing.jpg') }}" alt="Mesin Rotogravure" style="object-fit: cover;">
                </div>
                <div class="card-body bg-white text-center">
                    <h5 class="fw-bold mb-1">Rotogravure Printing</h5>
                    <p class="text-muted small mb-0">Mesin cetak presisi tinggi.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
            <div class="card border-0 rounded-4 overflow-hidden shadow-sm hover-lift h-100">
                <div class="ratio ratio-4x3">
                    <img src="https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&q=80" alt="Clean Room" style="object-fit: cover;">
                </div>
                <div class="card-body bg-white text-center">
                    <h5 class="fw-bold mb-1">Clean Room Facility</h5>
                    <p class="text-muted small mb-0">Ruang produksi higienis.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
            <div class="card border-0 rounded-4 overflow-hidden shadow-sm hover-lift h-100">
                <div class="ratio ratio-4x3">
                    <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80" alt="Tim CMSS" style="object-fit: cover;">
                </div>
                <div class="card-body bg-white text-center">
                    <h5 class="fw-bold mb-1">Tim Profesional</h5>
                    <p class="text-muted small mb-0">SDM terampil & berdedikasi.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400">
            <div class="card border-0 rounded-4 overflow-hidden shadow-sm hover-lift h-100">
                <div class="ratio ratio-4x3">
                    <img src="https://images.unsplash.com/photo-1553413077-190dd305871c?auto=format&fit=crop&q=80" alt="Laminating" style="object-fit: cover;">
                </div>
                <div class="card-body bg-white text-center">
                    <h5 class="fw-bold mb-1">Dry Lamination</h5>
                    <p class="text-muted small mb-0">Proses pelapisan material.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-8 col-md-12" data-aos="fade-up" data-aos-delay="500">
            <div class="card border-0 rounded-4 overflow-hidden shadow-sm hover-lift h-100">
                <div class="ratio" style="--bs-aspect-ratio: 37%;"> <img src="{{ asset('images/about/warehouse.jpg') }}" alt="Warehouse" style="object-fit: cover;">
                </div>
                <div class="card-body bg-white d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="fw-bold mb-1">Warehouse & Distribusi</h5>
                        <p class="text-muted small mb-0">Manajemen logistik yang rapi dan siap kirim.</p>
                    </div>
                    <i class="bi bi-box-seam fs-2 text-primary opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection