<?php
if (isset($_GET['srsltid'])) {
    $url = strtok($_SERVER["REQUEST_URI"], '?');
    header("Location: $url", true, 301);
    exit;
}

require 'pages/koneksi.php';

/* =========================
   CLEAN GOOGLE PARAMETER
========================= */
if (isset($_GET['srsltid'])) {
    $url = strtok($_SERVER["REQUEST_URI"], '?');
    header("Location: $url", true, 301);
    exit;
}

/* =========================
   DEFAULT SEO (HOMEPAGE)
========================= */
$seoTitle = "Toko Bangunan Batam | Supplier Material Bangunan Batam - Aneka Material";
$seoDesc  = "Toko material bangunan terpercaya di Batam. Jual semen, bata ringan, pasir, keramik, besi dan kebutuhan konstruksi lainnya. Gratis ongkir Batam.";
$seoImage = "https://anekamaterialbangunan.com/logo.png";
$seoUrl   = "https://anekamaterialbangunan.com/";
$seoType  = "website";


/* =========================
   PRODUK DETAIL SEO
========================= */
if(isset($_GET['page']) && $_GET['page']=="produkdetail" && isset($_GET['slug'])){

    $slug = $_GET['slug'];

    $stmt = $conn->prepare("
        SELECT p.*, k.nama_kategori, m.nama_merek
        FROM produk p
        LEFT JOIN kategori k ON p.id_kategori=k.id
        LEFT JOIN merek m ON p.id_merek=m.id
        WHERE p.slug=? LIMIT 1
    ");
    $stmt->bind_param("s",$slug);
    $stmt->execute();
    $p = $stmt->get_result()->fetch_assoc();

    if($p){

        $nama = $p['nama'];
        $desc = strip_tags($p['deskripsi']);
        $gambar = "https://anekamaterialbangunan.com/admin/".$p['gambar'];

        $seoTitle = "$nama | Harga & Supplier $nama di Batam";
        $seoDesc  = substr($desc,0,155) . " - Tersedia pengiriman cepat area Batam. Konsultasi via WhatsApp.";
        $seoImage = $gambar;
        $seoUrl   = "https://anekamaterialbangunan.com/ecommerce?page=produkdetail&slug=".$slug;
        $seoType  = "product";
    }
}
?>

<!DOCTYPE html>
<html lang="en">

  <head>
<title><?= htmlspecialchars($seoTitle) ?></title>

<meta name="description" content="<?= htmlspecialchars($seoDesc) ?>">
<meta name="robots" content="index, follow">
<link rel="canonical" href="<?= $seoUrl ?>">

<!-- Open Graph -->
<meta property="og:type" content="<?= $seoType ?>">
<meta property="og:title" content="<?= htmlspecialchars($seoTitle) ?>">
<meta property="og:description" content="<?= htmlspecialchars($seoDesc) ?>">
<meta property="og:image" content="<?= $seoImage ?>">
<meta property="og:url" content="<?= $seoUrl ?>">
<meta property="og:site_name" content="Aneka Material Bangunan">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?= htmlspecialchars($seoTitle) ?>">
<meta name="twitter:description" content="<?= htmlspecialchars($seoDesc) ?>">
<meta name="twitter:image" content="<?= $seoImage ?>">

<!-- Favicon -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon.png">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#ffffff">

  <!-- Awal favicon -->
<!-- Favicon FIX -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/pavicon.png">
<meta name="theme-color" content="#ffffff">

<!--google merchant-->
<!--<meta name="google-site-verification" content="JGgvcnu5wG3ojuJT-C57naAndRvEZovV3ftFBidNKM8" />-->
<!--google merchant-->

   
   <!-- link css -->
   <link rel="stylesheet" type="text/css" href="/assets/css/navbar.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/kategoriproduk.css">
   <link rel="stylesheet" type="text/css" href="/assets/css/slider.css" />
   <link rel="stylesheet" type="text/css" href="/assets/css/count.css">
   <link rel="stylesheet" type="text/css" href="/assets/css/produk-unggulan.css" />
   <link rel="stylesheet" type="text/css" href="/assets/css/boxjasabangunan.css" />
   <link rel="stylesheet" type="text/css" href="/assets/css/alasan-memilih.css" />
   <link rel="stylesheet" type="text/css" href="/assets/css/partner.css" />
   <link rel="stylesheet" type="text/css" href="/assets/css/footer.css" />
   <link rel="stylesheet" type="text/css" href="/assets/css/map.css" />
   <link rel="stylesheet" type="text/css" href="/assets/css/wafloating.css" />
   <!-- akhir link css -->

   <!--Awal css link pages -->
   <link rel="stylesheet" type="text/css" href="/assets/css/ecommerce/boxtokopedia.css">
   <link rel="stylesheet" type="text/css" href="/assets/css/ecommerce/boxproduk.css">
   <!-- Akhir css link Pages -->
   
   <!--bing,yahoo-->
   <meta name="msvalidate.01" content="ccc189b0798c4b4899fd206f62086970">

 




  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">



  <!-- akhir seo -->
  

</head>
<body>

<?php include 'navbar.php'; ?>

<div class="content">
    <?php
    $page = isset($_GET['page']) ? $_GET['page'] : 'home';

    switch ($page) {
        case 'home':
            include 'pages/home.php';
            break;
        case 'ecommerce':
            include 'pages/ecommerce.php';
            break;
        case 'contact':
            include 'pages/contact.php';
            break;
        case 'jasa':
            include 'pages/jasa.php';
            break;
        case 'gallerytestimoni':
            include 'pages/gallery_testimoni.php';
            break;
        case 'gallerypartner':
            include 'pages/gallery_partner.php';
            break;
        case 'temuikami':
            include 'pages/temuikami.php';
            break;
        case 'produkdetail':
            include 'pages/produk_detail.php';
            break;
        case 'jasabangunrumah':
            include 'pages/jasa/jasabangunrumah/jasabangunrumah.php';
            break;
        default:
            echo "<h2>Halaman tidak ditemukan.</h2>";
    }
    ?>
</div>

<!-- Awal Footer -->
<footer>
    <div class="footer-container">
      <div class="footer-column">
        <h3>Tentang Kami</h3>
        <p>Kami adalah Toko Material Bangunan Batam Dengan Layanan Gratis Ongkir Se-Kota Batam Tanpa Minimum Pembelian dan Menjadi Toko Material Bangunan No.1 di Kota Batam Yang Menyediakan Dalam Skala kecil dan Skala Besar.</p>
      </div>
      <div class="footer-column">
        <h3>Navigasi</h3>
        <ul>
          <li><a href="?page=home">Beranda</a></li>
          <li><a href="?page=ecommerce">E-Commerce</a></li>
          <li><a href="?page=gallerypartner">Partner</a></li>
          <li><a href="?page=jasa">Jasa</a></li>
          <li><a href="?page=gallerytestimoni">Testimoni</a></li>
          <li><a href="?page=contact">Contact</a></li>
          <li><a href="?page=temuikami">info</a></li>
        </ul>
      </div>
<div class="footer-column">
        <h3>Ikuti Kami</h3>
        <div class="social-icons">
          <a href="https://www.instagram.com/aneka_duta_bangunan?igsh=MWdwMzFxcHAwejl4Yg=="><img src="https://cdn-icons-png.flaticon.com/512/2111/2111463.png" width="20" alt="Instagram"></a>
          <a href="https://www.facebook.com/anekadutabangunan"><img src="https://cdn-icons-png.flaticon.com/512/145/145802.png" width="20" alt="Facebook"></a>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      &copy; 2025 ANEKA MATERIAL BANGUNAN. Semua hak dilindungi undang-undang.Created By:  <a href="https://www.facebook.com/muhammadariefwardhana/" style="text-decoration:none;">M.Arief Wardhana</a>
    </div>
  </footer>
<!-- Akhir Footer -->

  <script type="text/javascript" src="assets/javascript/produk-unggulan.js"></script>
  <!--<script type="text/javascript" src="assets/javascript/slider.js"></script>-->
  <script type="text/javascript" src="assets/javascript/count.js"></script>

<a href="https://wa.me/6282180369900" class="wa-floating" target="_blank" aria-label="Chat via WhatsApp">
  <img src="https://cdn-icons-png.flaticon.com/512/733/733585.png" alt="WhatsApp" width="40" height="40">
</a>

<!-- Popup Gratis Ongkir -->
<div class="popup-overlay" id="popup">
  <div class="popup-content">
    <button class="close-btn" onclick="closePopup()">&times;</button>
    <div class="popup-icon">🚛</div>
    <h2>Gratis Ongkir Sebatam!</h2>
    <p>Pengiriman <strong>GRATIS</strong> ke seluruh <strong>12 kecamatan</strong> & <strong>64 kelurahan</strong> di Batam:</p>
    <ul class="kecamatan-list">
      <li>Batam Kota</li>
      <li>Batu Aji</li>
      <li>Batu Ampar</li>
      <li>Belakang Padang</li>
      <li>Bengkong</li>
      <li>Bulang</li>
      <li>Galang</li>
      <li>Lubuk Baja</li>
      <li>Nongsa</li>
      <li>Sagulung</li>
      <li>Sei Beduk</li>
      <li>Sekupang</li>
    </ul>
    <p class="highlight">💥 Buruan belanja, mumpung masih GRATIS ONGKIR!</p>
  </div>
</div>

<style>
  .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
  }

  .popup-content {
    background: #fff;
    padding: 25px 30px;
    border-radius: 18px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 10px 35px rgba(0,0,0,0.3);
    text-align: center;
    position: relative;
    font-family: 'Segoe UI', sans-serif;
    animation: fadeIn 0.5s ease;
  }

  .popup-icon {
    font-size: 48px;
    margin-bottom: 10px;
  }

  .popup-content h2 {
    color: #d32f2f;
    font-size: 1.7rem;
    margin: 0 0 10px;
  }

  .popup-content p {
    font-size: 1rem;
    color: #333;
    margin-bottom: 10px;
  }

  .kecamatan-list {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    columns: 2;
    column-gap: 20px;
    text-align: left;
    font-size: 0.95rem;
    color: #555;
  }

  .kecamatan-list li {
  margin-bottom: 5px;
  padding-left: 22px; /* agar teks tidak bertabrakan dengan icon */
  position: relative;
}


  .kecamatan-list li::before {
    content: "✅";
    position: absolute;
    left: 0;
    margin-right: 6px;
  }

  .highlight {
    color: #d32f2f;
    font-weight: bold;
    margin-top: 15px;
    font-size: 1.1rem;
  }

  .close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: #888;
    cursor: pointer;
  }

  .close-btn:hover {
    color: #d32f2f;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }

  @media (max-width: 480px) {
    .popup-content {
      padding: 20px;
    }

    .kecamatan-list {
      columns: 1;
      font-size: 0.95rem;
    }
  }
</style>

<script>
  const POPUP_INTERVAL = 10 * 60 * 1000; // 10 menit dalam milidetik

  function showPopupIfNeeded() {
    const lastShown = localStorage.getItem('popupLastShown');
    const now = Date.now();

    // Tampilkan jika belum pernah ditampilkan atau sudah lewat 10 menit
    if (!lastShown || now - parseInt(lastShown) > POPUP_INTERVAL) {
      document.getElementById('popup').style.display = 'flex';
    }
  }

  function closePopup() {
    document.getElementById('popup').style.display = 'none';
    localStorage.setItem('popupLastShown', Date.now());
  }

  // Saat halaman dimuat
  window.onload = function () {
    // Cek pertama kali setelah 3 detik
    setTimeout(showPopupIfNeeded, 3000);

    // Cek ulang setiap 1 menit
    setInterval(showPopupIfNeeded, 60000); // bisa diubah ke 10000 untuk testing (10 detik)
  };
</script>


<!-- akhir popup gratis ongkir -->


<!-- Google tag (gtag.js) -->
<!-- Google tag (gtag.js) -->
<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=AW-17097662543"> -->
<!--  <script> -->
<!--  <script> -->
<!--   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-17097662543');
<!--  <script> -->

<!-- Event snippet for Pembelian conversion page -->
<!-- Event snippet for Page view conversion page -->
<!--  <script> -->
<!--  gtag('event', 'conversion', {'send_to': 'AW-17097662543/Eu59CPLE1MoaEM_A5tg_'}); -->
<!--  <script> -->


</body>
</html>