40087-vm/index.php

<?php
declare(strict_types=1);

require_once __DIR__ . '/store.php';

$categories = store_categories();
$selectedCategory = (string)($_GET['category'] ?? 'all');
if (!isset($categories[$selectedCategory])) {
    $selectedCategory = 'all';
}

$products = store_filtered_products($selectedCategory);
$summary = store_cart_summary();
$cartLines = array_slice($summary['lines'], 0, 3);
$currentUser = store_current_user();
$requiresLoginToCart = $currentUser === null;
$paymentMethods = store_payment_methods();

store_page_start(
    'Home',
    'Website toko online bakery dengan halaman home, daftar kue, info pembayaran, kontak, dan login user yang lebih rapi.'
);
?>
<section class="hero-panel mb-4 mb-lg-5">
    <div class="row g-4 align-items-center">
        <div class="col-lg-7">
            <span class="eyebrow">Home Publik</span>
            <h1 class="display-title">Halaman home dapat diakses oleh semua pengguna.</h1>
            <p class="lead-copy">
                Dari halaman ini, pengunjung bisa melihat katalog bakery, memilih produk, lalu membuka
                <strong>halaman detail</strong> yang berisi informasi produk, harga, dan tombol keranjang.
                Saat tombol keranjang dipilih, sistem akan memeriksa apakah pengguna sudah login atau belum.
            </p>
            <div class="d-flex flex-wrap gap-2 mt-4">
                <a class="btn btn-dark btn-lg" href="#catalog">Pilih produk</a>
                <a class="btn btn-outline-secondary btn-lg" href="auth.php"><?= $currentUser ? 'Akun saya' : 'Login / Register' ?></a>
                <a class="btn btn-outline-secondary btn-lg" href="#payment-info">Info pembayaran</a>
            </div>
            <div class="row g-3 mt-4">
                <div class="col-sm-4">
                    <div class="metric-card">
                        <div class="metric-value"><?= h((string)count(store_products())) ?></div>
                        <div class="metric-label">produk tampil di home publik</div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="metric-card">
                        <div class="metric-value"><?= h((string)count($paymentMethods)) ?></div>
                        <div class="metric-label">metode bayar diinformasikan</div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="metric-card">
                        <div class="metric-value"><?= h((string)store_cart_count()) ?></div>
                        <div class="metric-label">item aktif di keranjang</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <aside class="summary-card h-100">
                <div class="card-kicker">Alur user</div>
                <h2 class="summary-title">Home → detail produk → login → keranjang.</h2>
                <ul class="list-clean compact-list mb-4">
                    <li><span class="list-index">1</span><span>Halaman home dapat dibuka oleh semua pengunjung.</span></li>
                    <li><span class="list-index">2</span><span>Saat produk dipilih, sistem menampilkan detail produk, harga, dan tombol keranjang.</span></li>
                    <li><span class="list-index">3</span><span>Saat tombol keranjang ditekan, sistem memeriksa apakah user sudah login.</span></li>
                    <li><span class="list-index">4</span><span>Jika belum login, user diarahkan ke halaman login / register.</span></li>
                    <li><span class="list-index">5</span><span>Jika sudah login, produk langsung ditambahkan ke keranjang belanja.</span></li>
                </ul>

                <div class="receipt-card">
                    <div class="receipt-card__head">
                        <span>Ringkasan keranjang</span>
                        <strong><?= h((string)store_cart_count()) ?> item</strong>
                    </div>
                    <?php if ($cartLines): ?>
                        <?php foreach ($cartLines as $line): ?>
                            <div class="receipt-line">
                                <span><?= h($line['product']['name']) ?> × <?= h((string)$line['quantity']) ?></span>
                                <strong><?= h(store_money((float)$line['line_total'])) ?></strong>
                            </div>
                        <?php endforeach; ?>
                        <div class="receipt-line receipt-line--total">
                            <span>Total sementara</span>
                            <strong><?= h(store_money((float)$summary['grand_total'])) ?></strong>
                        </div>
                        <a class="btn btn-dark w-100 mt-3" href="cart.php">Buka keranjang</a>
                    <?php else: ?>
                        <p class="text-muted mb-3">Keranjang masih kosong. Mulai dengan memilih produk pada katalog di bawah.</p>
                        <a class="btn btn-outline-secondary w-100" href="#catalog">Buka daftar kue</a>
                    <?php endif; ?>
                </div>
            </aside>
        </div>
    </div>
</section>

<section class="mb-4">
    <div class="row g-3">
        <div class="col-lg-4">
            <div class="feature-card h-100">
                <div class="feature-card__title">Home dapat diakses umum</div>
                <p class="feature-card__copy">Semua pengunjung dapat membuka homepage, melihat katalog, dan memilih produk tanpa harus login terlebih dahulu.</p>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="feature-card h-100">
                <div class="feature-card__title">Memilih produk membuka detail</div>
                <p class="feature-card__copy">Setiap produk mengarahkan pengguna ke halaman detail yang menampilkan informasi produk, harga, dan tombol keranjang.</p>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="feature-card h-100">
                <div class="feature-card__title">Keranjang selalu cek login</div>
                <p class="feature-card__copy">Saat tombol keranjang dipilih, sistem akan mengecek sesi login. Jika belum login, pengguna diarahkan ke halaman autentikasi terlebih dahulu.</p>
            </div>
        </div>
    </div>
</section>

<section id="catalog" class="section-block">
    <div class="section-heading d-flex flex-column flex-lg-row align-items-lg-end justify-content-between gap-3 mb-4">
        <div>
            <span class="eyebrow">Daftar Kue</span>
            <h2 class="section-title">Pilihan cake, bread, dan pastry untuk pengguna.</h2>
            <p class="section-copy mb-0">Klik salah satu produk untuk membuka halaman detail, melihat harga, lalu lanjut ke tombol keranjang sesuai alur pengguna.</p>
        </div>
        <div class="d-flex flex-wrap gap-2 filter-pills" data-filter-bar>
            <?php foreach ($categories as $key => $category): ?>
                <?php $isActive = $key === $selectedCategory; ?>
                <a class="filter-pill<?= $isActive ? ' is-active' : '' ?>" href="index.php?category=<?= h($key) ?>#catalog">
                    <?= h($category['label']) ?>
                </a>
            <?php endforeach; ?>
        </div>
    </div>

    <div class="row g-4">
        <?php foreach ($products as $product): ?>
            <div class="col-sm-6 col-xl-4">
                <article class="product-card h-100">
                    <div class="product-visual product-visual--<?= h($product['tone']) ?>">
                        <span class="product-visual__meta"><?= h($product['category_label']) ?></span>
                        <strong class="product-visual__code"><?= h($product['visual_code']) ?></strong>
                        <span class="product-visual__name"><?= h($product['name']) ?></span>
                    </div>
                    <div class="product-card__body">
                        <div class="d-flex align-items-start justify-content-between gap-3 mb-2">
                            <div>
                                <h3 class="product-card__title"><?= h($product['name']) ?></h3>
                                <p class="text-muted small mb-0"><?= h($product['lead_time']) ?></p>
                            </div>
                            <span class="price-tag"><?= h(store_money((float)$product['price'])) ?></span>
                        </div>
                        <p class="product-card__copy"><?= h($product['short_description']) ?></p>
                        <div class="detail-chip-group mb-3">
                            <?php foreach ($product['highlights'] as $highlight): ?>
                                <span class="detail-chip"><?= h($highlight) ?></span>
                            <?php endforeach; ?>
                        </div>
                        <div class="d-flex flex-column gap-2 mt-auto">
                            <a class="btn btn-dark w-100" href="product.php?slug=<?= h($product['slug']) ?>">Lihat detail &amp; harga</a>
                            <span class="text-muted small">
                                <?= $requiresLoginToCart
                                    ? 'Tombol keranjang tersedia di halaman detail. Jika belum login, sistem akan mengarahkan Anda ke halaman login terlebih dahulu.'
                                    : 'Anda sudah login. Buka halaman detail untuk menambahkan produk ini langsung ke keranjang.' ?>
                            </span>
                        </div>
                    </div>
                </article>
            </div>
        <?php endforeach; ?>
    </div>
</section>

<section id="payment-info" class="section-block pt-0">
    <div class="section-heading mb-4">
        <span class="eyebrow">Info Pembayaran</span>
        <h2 class="section-title">Pilihan pembayaran yang bisa diakses pengguna.</h2>
        <p class="section-copy mb-0">Bagian ini menjelaskan metode pembayaran sejak awal agar proses checkout terasa lebih meyakinkan.</p>
    </div>
    <div class="row g-3">
        <?php foreach ($paymentMethods as $method): ?>
            <div class="col-lg-4">
                <article class="payment-info-card h-100">
                    <div class="payment-info-card__label"><?= h($method['label']) ?></div>
                    <p class="payment-info-card__copy"><?= h($method['description']) ?></p>
                    <p class="payment-info-card__instruction mb-0"><?= h($method['instruction']) ?></p>
                </article>
            </div>
        <?php endforeach; ?>
    </div>
</section>

<section id="contact" class="section-block pt-0">
    <div class="row g-4 align-items-stretch">
        <div class="col-lg-6">
            <div class="surface-panel h-100 contact-panel">
                <span class="eyebrow">Kontak Kami</span>
                <h2 class="section-title">Area bantuan untuk kebutuhan pengguna.</h2>
                <p class="section-copy">Bagian kontak diposisikan sebagai tempat pengguna memahami kapan harus menghubungi admin toko.</p>
                <ul class="list-clean compact-list mb-0">
                    <li><span class="list-index">1</span><span>Konfirmasi ketersediaan produk dan estimasi pengerjaan pesanan.</span></li>
                    <li><span class="list-index">2</span><span>Menanyakan jadwal pengiriman, perubahan alamat, atau detail pesanan.</span></li>
                    <li><span class="list-index">3</span><span>Mengirim bukti pembayaran setelah checkout jika metode bayar memerlukannya.</span></li>
                </ul>
            </div>
        </div>
        <div class="col-lg-6">
            <aside class="summary-card h-100 contact-panel">
                <div class="card-kicker">Langkah cepat</div>
                <h2 class="summary-title">Yang sebaiknya dilakukan pengguna lebih dulu.</h2>
                <div class="contact-checklist">
                    <div class="contact-checklist__item">
                        <strong>Login / Register</strong>
                        <span>Masuk dengan email dan password agar proses pemesanan lebih rapi.</span>
                    </div>
                    <div class="contact-checklist__item">
                        <strong>Pilih produk</strong>
                        <span>Tambahkan cake, bread, atau pastry ke keranjang sesuai kebutuhan.</span>
                    </div>
                    <div class="contact-checklist__item">
                        <strong>Lihat status</strong>
                        <span>Gunakan order number dan email untuk memeriksa perkembangan pesanan.</span>
                    </div>
                </div>
                <div class="d-grid gap-2 mt-4">
                    <a class="btn btn-dark" href="auth.php"><?= $currentUser ? 'Buka akun saya' : 'Buka login user' ?></a>
                    <a class="btn btn-outline-secondary" href="order_status.php">Lacak pesanan</a>
                </div>
            </aside>
        </div>
    </div>
</section>

<section class="section-block pt-0">
    <div class="section-heading mb-4">
        <span class="eyebrow">Cara Order</span>
        <h2 class="section-title">Alur sederhana yang siap dipakai pada tampilan user.</h2>
    </div>
    <div class="row g-3">
        <div class="col-md-4">
            <div class="step-card h-100">
                <div class="step-card__number">01</div>
                <h3>Login / Register</h3>
                <p>Pengguna masuk dengan email dan password, atau membuat akun baru jika belum terdaftar.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="step-card h-100">
                <div class="step-card__number">02</div>
                <h3>Pilih dan checkout</h3>
                <p>Setelah memilih produk, pengguna melanjutkan ke checkout untuk menyimpan alamat dan metode pembayaran.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="step-card h-100">
                <div class="step-card__number">03</div>
                <h3>Lacak status</h3>
                <p>Gunakan kode pesanan dan email untuk melihat instruksi pembayaran dan status order secara mandiri.</p>
            </div>
        </div>
    </div>
</section>

<section class="section-block pt-0">
    <div class="documentation-note">
        <strong>Dokumentasi use case tetap tersedia.</strong>
        <p>Halaman use case diagram versi pertama masih bisa dibuka untuk kebutuhan laporan, revisi, atau presentasi sistem.</p>
        <a class="btn btn-outline-secondary mt-3" href="use_case.php">Buka use case diagram</a>
    </div>
</section>
<?php store_page_end(); ?>