<?
/**
 * product.php
 * Halaman Detail Produk
 */
require_once 'functions.php';
$page_title = 'Detail Produk';
include 'header.php';

// ------------------------------------------------------------
// Dummy data - produk yang dilihat
// ------------------------------------------------------------
$product = [
    'id'          => 1,
    'name'        => 'Kemeja Linen Lengan Panjang',
    'brand_id'    => 'elcordo',
    'category'    => 'Pakaian Pria',
    'price'       => 249000,
    'old_price'   => 329000,
    'rating'      => 4,
    'reviews'     => 128,
    'description' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kemeja berbahan linen premium dengan potongan regular fit, nyaman dipakai untuk aktivitas formal maupun santai sepanjang hari.',
    'images'      => [
        'https://placehold.co/600x750/f4f4f5/0d0d0d?text=Kemeja+1',
        'https://placehold.co/600x750/e4e4e7/0d0d0d?text=Kemeja+2',
        'https://placehold.co/600x750/f4f4f5/0d0d0d?text=Kemeja+3',
        'https://placehold.co/600x750/e4e4e7/0d0d0d?text=Kemeja+4',
    ],
];

// ------------------------------------------------------------
// Lookup data brand — sinkron dengan brand.php & brands.php
// ------------------------------------------------------------
$brands_data = [
    'erigo' => [
        'id'      => 'erigo',
        'name'    => 'Erigo',
        'tagline' => 'Urban Streetwear Lokal',
        'logo'    => 'https://placehold.co/240x80/0d0d0d/ffffff?text=ERIGO',
        'origin'  => 'Jakarta',
        'founded' => '2011',
    ],
    'thanksinsomnia' => [
        'id'      => 'thanksinsomnia',
        'name'    => 'Thanks Insomnia',
        'tagline' => 'Minimalist Everyday Wear',
        'logo'    => 'https://placehold.co/240x80/f4f4f5/0d0d0d?text=THANKS+INSOMNIA',
        'origin'  => 'Bandung',
        'founded' => '2016',
    ],
    'elcordo' => [
        'id'      => 'elcordo',
        'name'    => 'El Cordo',
        'tagline' => 'Premium Linen & Natural Fiber',
        'logo'    => 'https://placehold.co/240x80/0d0d0d/ffffff?text=EL+CORDO',
        'origin'  => 'Solo',
        'founded' => '2018',
    ],
];
$brand = isset($brands_data[$product['brand_id']]) ? $brands_data[$product['brand_id']] : null;

$discount_percent = round((1 - $product['price'] / $product['old_price']) * 100);
$ukuran = ['S', 'M', 'L', 'XL', 'XXL'];
$warna  = ['#0d0d0d', '#e4e4e7', '#2952e3'];

// ------------------------------------------------------------
// Dummy data - ulasan pembeli
// ------------------------------------------------------------
$ulasan_list = [
    ['nama' => 'Dewi Anggraini',  'rating' => 5, 'tanggal' => '12 Mei 2026', 'komentar' => 'Bahan linennya bagus dan adem dipakai. Jahitan rapi, ukuran sesuai chart. Pasti beli warna lain lagi.'],
    ['nama' => 'Bagus Saputra',   'rating' => 4, 'tanggal' => '28 April 2026', 'komentar' => 'Kualitas oke untuk harga segini. Pengiriman cepat. Hanya saja warnanya sedikit lebih gelap dari foto.'],
    ['nama' => 'Putri Lestari',   'rating' => 5, 'tanggal' => '15 April 2026', 'komentar' => 'Suka banget sama potongannya, regular fit tapi tetap kelihatan rapi. Cocok dipakai kerja maupun santai.'],
    ['nama' => 'Andika Pratama',  'rating' => 4, 'tanggal' => '02 April 2026', 'komentar' => 'Sesuai deskripsi, nyaman dipakai sehari-hari. Recommended buat yang cari kemeja linen murah berkualitas.'],
];

/* Sembunyikan sebagian nama pembeli, misal: Dewi Anggraini -> D**i A*******i */
function mask_name($name) {
    $words = explode(' ', $name);
    $masked_words = array_map(function ($word) {
        $len = mb_strlen($word);
        if ($len <= 2) return $word;
        return mb_substr($word, 0, 1) . str_repeat('*', $len - 2) . mb_substr($word, -1);
    }, $words);
    return implode(' ', $masked_words);
}

// ------------------------------------------------------------
// Dummy data - produk terkait
// ------------------------------------------------------------
$produk_terkait = [
    ['id'=>2, 'name'=>'Dress Midi Motif Bunga',  'category'=>'Pakaian Wanita','price'=>329000,                    'image'=>'https://placehold.co/480x600/f4f4f5/0d0d0d?text=Dress+Midi'],
    ['id'=>5, 'name'=>'Kaos Polos Premium Cotton','category'=>'Pakaian Pria',  'price'=>99000,                     'image'=>'https://placehold.co/480x600/f4f4f5/0d0d0d?text=Kaos+Polos'],
    ['id'=>6, 'name'=>'Celana Chino Slim Fit',    'category'=>'Pakaian Pria',  'price'=>279000,'old_price'=>349000,'image'=>'https://placehold.co/480x600/f4f4f5/0d0d0d?text=Chino'],
    ['id'=>17,'name'=>'Cardigan Rib Knit',        'category'=>'Pakaian Wanita','price'=>219000,'old_price'=>279000,'image'=>'https://placehold.co/480x600/f4f4f5/0d0d0d?text=Cardigan'],
];
?>

<div class="forma-product max-w-7xl mx-auto px-4 py-8 md:py-14">

    <!-- Breadcrumb -->
    <nav class="forma-breadcrumb font-mono text-[11px] uppercase tracking-widest text-mute mb-8 md:mb-10">
        <a href="home.php" class="hover:text-ink">Beranda</a>
        <span class="mx-2">/</span>
        <a href="category.php" class="hover:text-ink"></a>
        <span class="mx-2">/</span>
        <span class="text-ink"></span>
    </nav>

    <div class="forma-product__detail grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-20 mb-16 md:mb-24">

        <!-- ============================================
             GALERI PRODUK
             Hover = pan zoom | Click = lightbox
             ============================================ -->
        <div class="forma-product__gallery">
            <!-- Gambar utama dengan panning -->
            <div class="forma-product__gallery-main border border-line mb-3 md:mb-4 forma-product__pan-container" id="product-main-image">
                <img src=""
                     alt=""
                     class="forma-product__gallery-image forma-product__pan-image w-full aspect-[4/5] object-cover"
                     id="main-product-image">
                <!-- Hint tooltip -->
                <span class="forma-product__gallery-hint">Klik untuk perbesar</span>
            </div>

            <!-- Thumbnail strip -->
            <div class="forma-product__gallery-thumbs grid grid-cols-4 gap-2 md:gap-3">
                <? foreach ($product['images'] as $i => $img): ?>
                    <img src=""
                         alt="Thumbnail 1"
                         class="forma-product__thumbnail  border border-line cursor-pointer aspect-[4/5] object-cover"
                         data-index="">
                <? endforeach; ?>
            </div>
        </div>

        <!-- ============================================
             INFORMASI PRODUK
             ============================================ -->
        <div class="forma-product__info">
            <p class="font-mono text-[11px] uppercase tracking-widest text-mute mb-2 md:mb-3"></p>
            <h1 class="font-display text-2xl md:text-3xl mb-3 md:mb-4"></h1>

            <div class="forma-product__rating flex items-center gap-2 mb-4 md:mb-6 text-sm">
                <span class="text-signal">★★★★☆</span>
                <span class="text-mute">( ulasan)</span>
            </div>

            <div class="forma-product__prices font-mono flex items-center gap-3 mb-6 md:mb-8">
                <span class="text-2xl font-semibold">