@extends('layouts.app')

@section('title', 'Katalog Produk - PT CMSS')

@section('content')
<div class="bg-light py-5 mb-5 border-bottom">
    <div class="container text-center pt-5 pb-3" data-aos="fade-up">
        <h1 class="display-4 fw-bolder text-dark mb-3">Varian Kemasan Kami</h1>
        <p class="lead text-secondary mx-auto" style="max-width: 700px;">
            Menyediakan berbagai jenis konstruksi kemasan plastik (*Flexible Packaging*) untuk melindungi kesegaran, memperpanjang *shelf-life*, dan memaksimalkan estetika produk Anda.
        </p>
    </div>
</div>

<div class="container pb-5">
    <div class="row g-4 justify-content-center">
        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
            <div class="card border-0 shadow-sm rounded-4 h-100 hover-lift bg-white">
                <div class="bg-light p-4 text-center rounded-top-4">
                    <img src="{{ asset('images/produk1.webp') }}" class="img-fluid rounded shadow-sm" alt="Standing Pouch" style="max-height: 200px; object-fit: contain;">
                </div>
                <div class="card-body p-4 text-center">
                    <span class="badge bg-primary bg-opacity-10 text-primary mb-2">Populer</span>
                    <h4 class="fw-bold mb-3">Standing Pouch</h4>
                    <p class="text-muted small mb-4">Kemasan yang dapat berdiri tegak, sangat ideal untuk produk *snack*, kopi, atau cairan. Memberikan *display* yang menarik di rak supermarket.</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 shadow-sm rounded-4 h-100 hover-lift bg-white">
                <div class="bg-light p-4 text-center rounded-top-4">
                    <img src="{{ asset('images/produk2.webp') }}" class="img-fluid rounded shadow-sm" alt="Center Seal" style="max-height: 200px; object-fit: contain;">
                </div>
                <div class="card-body p-4 text-center">
                    <span class="badge bg-secondary bg-opacity-10 text-secondary mb-2">Klasik</span>
                    <h4 class="fw-bold mb-3">Center Seal / T-Seal</h4>
                    <p class="text-muted small mb-4">Kemasan dengan segel di bagian tengah belakang. Sangat ekonomis dan banyak digunakan untuk bungkus mie instan, makanan ringan, dan es krim.</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 shadow-sm rounded-4 h-100 hover-lift bg-white">
                <div class="bg-light p-4 text-center rounded-top-4">
                    <img src="{{ asset('images/produk3.webp') }}" class="img-fluid rounded shadow-sm" alt="Three Side Seal" style="max-height: 200px; object-fit: contain;">
                </div>
                <div class="card-body p-4 text-center">
                    <span class="badge bg-success bg-opacity-10 text-success mb-2">Ekonomis</span>
                    <h4 class="fw-bold mb-3">Three Side Seal</h4>
                    <p class="text-muted small mb-4">Kemasan flat (datar) yang disegel di ketiga sisinya. Cocok untuk bumbu instan, sachet bubuk minuman, makanan beku (*frozen food*), hingga masker.</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 shadow-sm rounded-4 h-100 hover-lift bg-white">
                <div class="bg-light p-4 text-center rounded-top-4">
                    <img src="{{ asset('images/produk4.webp') }}" class="img-fluid rounded shadow-sm" alt="Plastik Zipper" style="max-height: 200px; object-fit: contain;">
                </div>
                <div class="card-body p-4 text-center">
                    <span class="badge bg-info bg-opacity-10 text-info mb-2">Premium</span>
                    <h4 class="fw-bold mb-3">Pouch with Zipper</h4>
                    <p class="text-muted small mb-4">Dilengkapi klip kedap udara (zipper) agar kemasan dapat ditutup kembali. Sempurna untuk menjaga kerenyahan makanan porsi besar.</p>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="500">
            <div class="card border-0 shadow-sm rounded-4 h-100 hover-lift bg-white">
                <div class="bg-light p-4 text-center rounded-top-4">
                    <img src="{{ asset('images/produk5.webp') }}" class="img-fluid rounded shadow-sm" alt="Roll Bag" style="max-height: 200px; object-fit: contain;">
                </div>
                <div class="card-body p-4 text-center">
                    <span class="badge bg-warning bg-opacity-10 text-warning mb-2">Industrial</span>
                    <h4 class="fw-bold mb-3">Roll Bag / Roll Stock</h4>
                    <p class="text-muted small mb-4">Berbentuk gulungan plastik berkelanjutan yang diperuntukkan bagi mesin *Auto Packaging* di lini perakitan pabrik klien skala masif.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-5 pt-4" data-aos="zoom-in">
        <div class="col-12">
            <div class="bg-primary text-white rounded-4 p-5 text-center shadow-lg position-relative overflow-hidden" style="background: linear-gradient(45deg, #0d6efd 0%, #6610f2 100%);">
                <div class="position-relative z-index-1">
                    <h3 class="fw-bolder mb-3">Butuh Sampel Cetak untuk Produk Anda?</h3>
                    <p class="lead mb-4 opacity-75 mx-auto" style="max-width: 600px;">Tim Sales kami siap membantu merancang spesifikasi material dan struktur laminasi terbaik untuk kebutuhan bisnis Anda.</p>
                    <a href="{{ route('login') }}" class="btn btn-light btn-lg text-primary fw-bold px-5 rounded-pill shadow-sm hover-lift">
                        Masuk ke SIPENSA
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection