<?php
// Public page helper functions
function getPlaceholder($w=800, $h=500, $text='Image') {
    return "https://placehold.co/{$w}x{$h}/e8e8e8/999?text=".urlencode($text);
}
// Fetch active brands for nav dropdowns
$navBrands = $pdo->query("SELECT id, name FROM brands WHERE is_active=1 ORDER BY sort_order")->fetchAll();
?>
<!DOCTYPE html>
<html lang="<?= $lang ?? 'id' ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $pageTitle ?? ($settings['site_name']??'Kursi Jok') ?></title>
    <meta name="description" content="<?= $settings['site_tagline']??'' ?>">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
</head>
<body>

<!-- ===================== NAVBAR ===================== -->
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm" id="mainNav">
    <div class="container">
        <a class="navbar-brand fw-bold" href="index.php">
            <?php if (!empty($settings['site_logo'])): ?>
                <img src="<?= htmlspecialchars($settings['site_logo']) ?>" alt="<?= htmlspecialchars($settings['site_name']??'') ?>" style="height:42px;object-fit:contain;" onerror="this.style.display='none';this.nextElementSibling.style.display='inline'">
                <span style="display:none"><span class="text-dark"><?= htmlspecialchars($settings['site_name']??'KURSI') ?></span><span class="text-accent">.</span></span>
            <?php else: ?>
                <span class="text-dark"><?= htmlspecialchars($settings['site_name']??'KURSI') ?></span>
                <span class="text-accent">.</span>
            <?php endif; ?>
        </a>

        <!-- Desktop Menu -->
        <div class="collapse navbar-collapse" id="desktopMenu">
            <ul class="navbar-nav ms-auto me-2">
                <li class="nav-item">
                    <a class="nav-link <?= ($activePage??'')==='home'?'active':'' ?>" href="index.php" data-en="Home" data-id="Beranda">Home</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle <?= in_array($activePage??'',['about'])?'active':'' ?>" href="#" data-bs-toggle="dropdown">
                        <span data-en="About Us" data-id="Tentang Kami">About Us</span>
                    </a>
                    <ul class="dropdown-menu shadow-sm border-0">
                        <li><a class="dropdown-item" href="about.php#vision" data-en="Vision &amp; Mission" data-id="Visi &amp; Misi">Vision &amp; Mission</a></li>
                        <li><a class="dropdown-item" href="about.php#legality" data-en="Legality" data-id="Legalitas">Legality</a></li>
                        <li><a class="dropdown-item" href="about.php#customers" data-en="Our Customers" data-id="Pelanggan Kami">Our Customers</a></li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle <?= in_array($activePage??'',['product'])?'active':'' ?>" href="#" data-bs-toggle="dropdown">
                        <span data-en="Product" data-id="Produk">Product</span>
                    </a>
                    <ul class="dropdown-menu shadow-sm border-0">
                        <?php foreach ($navBrands as $nb): ?>
                        <li><a class="dropdown-item" href="brand-product.php?brand=<?= $nb['id'] ?>"><?= htmlspecialchars($nb['name']) ?></a></li>
                        <?php endforeach; ?>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= ($activePage??'')==='brand'?'active':'' ?>" href="brand.php" data-en="Brand" data-id="Brand">Brand</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= ($activePage??'')==='ourproject'?'active':'' ?>" href="our-project.php" data-en="Projects" data-id="Proyek">Projects</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= ($activePage??'')==='price'?'active':'' ?>" href="price.php" data-en="Price" data-id="Harga">Price</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= ($activePage??'')==='catalog'?'active':'' ?>" href="catalog.php" data-en="Catalog" data-id="Katalog">Catalog</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle <?= ($activePage??'')==='gallery'?'active':'' ?>" href="#" data-bs-toggle="dropdown">
                        <span data-en="Gallery" data-id="Galeri">Gallery</span>
                    </a>
                    <ul class="dropdown-menu shadow-sm border-0">
                        <li><a class="dropdown-item" href="gallery.php?tab=photo" data-en="Photos" data-id="Foto">Photos</a></li>
                        <li><a class="dropdown-item" href="gallery.php?tab=video" data-en="Videos" data-id="Video">Videos</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= ($activePage??'')==='contact'?'active':'' ?>" href="contact.php" data-en="Contact" data-id="Kontak">Contact</a>
                </li>
            </ul>
            <button class="btn btn-outline-secondary btn-sm translate-btn" onclick="toggleLanguage()" title="Translate">
                <i class="bi bi-translate me-1"></i><span id="langLabel">EN</span>
            </button>
        </div>

        <!-- Mobile: Translate + Hamburger -->
        <div class="d-flex d-lg-none align-items-center gap-2">
            <button class="btn btn-outline-secondary btn-sm translate-btn" onclick="toggleLanguage()" title="Translate">
                <i class="bi bi-translate me-1"></i><span id="langLabelMobile">EN</span>
            </button>
            <button class="btn border-0 p-1 mobile-toggle" type="button" onclick="openMobileMenu()" aria-label="Menu">
                <i class="bi bi-list fs-3 text-dark"></i>
            </button>
        </div>
    </div>
</nav>

<!-- ===================== MOBILE OFFCANVAS MENU ===================== -->
<div class="mobile-menu-backdrop" id="menuBackdrop" onclick="closeMobileMenu()"></div>
<div class="mobile-menu" id="mobileMenu">
    <div class="mobile-menu-header">
        <?php if (!empty($settings['site_logo'])): ?>
            <img src="<?= htmlspecialchars($settings['site_logo']) ?>" alt="" style="height:36px;object-fit:contain;">
        <?php else: ?>
            <span class="fw-bold fs-5"><?= htmlspecialchars($settings['site_name']??'KURSI') ?><span class="text-accent">.</span></span>
        <?php endif; ?>
        <button class="btn border-0 p-1" onclick="closeMobileMenu()"><i class="bi bi-x-lg fs-5"></i></button>
    </div>
    <div class="mobile-menu-body">
        <a class="mobile-menu-item <?= ($activePage??'')==='home'?'active':'' ?>" href="index.php" onclick="closeMobileMenu()" data-en="Home" data-id="Beranda">Home</a>

        <!-- About dropdown -->
        <div class="mobile-menu-group">
            <button class="mobile-menu-item mobile-menu-toggle" onclick="toggleMobileGroup(this)">
                <span data-en="About Us" data-id="Tentang Kami">About Us</span>
                <i class="bi bi-chevron-down mobile-chevron"></i>
            </button>
            <div class="mobile-submenu">
                <a class="mobile-submenu-item" href="about.php#vision" onclick="closeMobileMenu()" data-en="Vision &amp; Mission" data-id="Visi &amp; Misi">Vision &amp; Mission</a>
                <a class="mobile-submenu-item" href="about.php#legality" onclick="closeMobileMenu()" data-en="Legality" data-id="Legalitas">Legality</a>
                <a class="mobile-submenu-item" href="about.php#customers" onclick="closeMobileMenu()" data-en="Our Customers" data-id="Pelanggan Kami">Our Customers</a>
            </div>
        </div>

        <!-- Product dropdown -->
        <div class="mobile-menu-group">
            <button class="mobile-menu-item mobile-menu-toggle" onclick="toggleMobileGroup(this)">
                <span data-en="Product" data-id="Produk">Product</span>
                <i class="bi bi-chevron-down mobile-chevron"></i>
            </button>
            <div class="mobile-submenu">
                <?php foreach ($navBrands as $nb): ?>
                <a class="mobile-submenu-item" href="brand-product.php?brand=<?= $nb['id'] ?>" onclick="closeMobileMenu()"><?= htmlspecialchars($nb['name']) ?></a>
                <?php endforeach; ?>
            </div>
        </div>

        <a class="mobile-menu-item <?= ($activePage??'')==='brand'?'active':'' ?>" href="brand.php" onclick="closeMobileMenu()" data-en="Brand" data-id="Brand">Brand</a>
        <a class="mobile-menu-item <?= ($activePage??'')==='ourproject'?'active':'' ?>" href="our-project.php" onclick="closeMobileMenu()" data-en="Projects" data-id="Proyek">Projects</a>
        <a class="mobile-menu-item <?= ($activePage??'')==='price'?'active':'' ?>" href="price.php" onclick="closeMobileMenu()" data-en="Price" data-id="Harga">Price</a>
        <a class="mobile-menu-item <?= ($activePage??'')==='catalog'?'active':'' ?>" href="catalog.php" onclick="closeMobileMenu()" data-en="Catalog" data-id="Katalog">Catalog</a>

        <!-- Gallery dropdown -->
        <div class="mobile-menu-group">
            <button class="mobile-menu-item mobile-menu-toggle" onclick="toggleMobileGroup(this)">
                <span data-en="Gallery" data-id="Galeri">Gallery</span>
                <i class="bi bi-chevron-down mobile-chevron"></i>
            </button>
            <div class="mobile-submenu">
                <a class="mobile-submenu-item" href="gallery.php?tab=photo" onclick="closeMobileMenu()" data-en="Photos" data-id="Foto">Photos</a>
                <a class="mobile-submenu-item" href="gallery.php?tab=video" onclick="closeMobileMenu()" data-en="Videos" data-id="Video">Videos</a>
            </div>
        </div>

        <a class="mobile-menu-item <?= ($activePage??'')==='contact'?'active':'' ?>" href="contact.php" onclick="closeMobileMenu()" data-en="Contact" data-id="Kontak">Contact</a>
    </div>
</div>

