<?php
    // Menghindari error cannot modify header information
    ob_start(); // Initiate the output buffer
?>
<!DOCTYPE HTML>
<html lang = "id">
<head>
<?php echo"$d[googlemap]"?>
<?php echo"$d[googleplus]"?>
  <title><?php include "dina_title.php"; ?></title>
 <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />  
  <meta name="robots" content="index, follow">
  <meta name="description" content="<?php include "dina_metadeskripsi.php"; ?>">
  <meta name="keywords" content="<?php include "dina_metakeyword.php"; ?>">  

	<!-- Facebook Open Graph -->  
	<meta property="og:title" content="<?php include "dina_title.php" ?>" />
	<meta property="og:image" content="<?php echo "$d[alamat_website]" ?>/<?php include "dina_image.php" ?>" />
	<meta property="og:description" content="<?php include "dina_metadeskripsi.php" ?>" />
	
	<meta property="og:url" content="<?php echo 'https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] ?>">
<meta property="og:type" content="website">


<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php include 'dina_title.php'; ?>">
<meta name="twitter:description" content="<?php include 'dina_metadeskripsi.php'; ?>">
<meta name="twitter:image" content="<?php echo "$d[alamat_website]" ?>/<?php include "dina_image.php" ?>">


<link rel="canonical" href="<?php echo 'https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] ?>" />



<meta name="theme-color" content="#d10028">

<meta property="og:locale" content="id_ID">




<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "<?php echo "$d[alamat_website]" ?>",
  "name": "<?php include 'dina_title.php'; ?>",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "<?php echo "$d[alamat_website]" ?>/?s={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>


  <!-- Google Plus Meta Tag -->  
 	<meta itemprop="name" content="<?php include "dina_title.php" ?>" />
 	<meta itemprop="description" content="<?php include "dina_metadeskripsi.php" ?>" />
 	<meta itemprop="image" content="<?php echo "$d[alamat_website]" ?>/<?php include "dina_image.php" ?>" />



		<!-- Favicon -->
    <link rel="shortcut icon" href="<?php echo"$d[alamat_website]/foto_icon/$d[favicon]"?>" />

 <!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          brand: {
            navy: '#0F172A',
            yellow: '#FFB703',
            'yellow-dark': '#EAB308',
            body: '#475569',
            card: '#F8FAFC',
            wa: '#25D366',
          }
        },
        fontFamily: {
          sans: ['"Plus Jakarta Sans"', 'sans-serif'],
        }
      }
    }
  }
</script>





    </head>

    <body>
        
        <?php 
    $querykontak = "SELECT * FROM kontak LIMIT 1";
    $hasilkontak = mysqli_query($konek, $querykontak);
    $kontak     = mysqli_fetch_array($hasilkontak);
      ?>
 


<!-- Sentinel / Penanda Scroll untuk Mencegah Efek Patah (Layout Shift) -->
<div id="atmNavSentinel" class="w-full h-0"></div>

<!-- Wrapper Utama Navbar -->
<nav id="atmNavbar" class="relative top-0 left-0 w-full z-50 bg-white border-b border-slate-200 shadow-sm font-sans transition-all duration-300">
  
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between">
    
    <!-- Brand / Logo -->
    <a class="notranslate flex items-center shrink-0" href="<?php echo $d['alamat_website']; ?>">
      <img class="h-12 sm:h-14 w-auto object-contain transition-all duration-300" 
           src="<?php echo $d['alamat_website'].'/foto_icon/'.$kontak['logo']; ?>" 
           alt="Logo ATM"> 
    </a>
    
    <!-- Mobile Hamburger Toggle Button -->
    <button id="atmNavToggle" type="button" aria-label="Toggle navigation" 
            class="xl:hidden p-2 text-slate-700 hover:text-amber-500 focus:outline-none rounded-lg transition-colors">
      <svg class="w-7 h-7" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h12M4 18h16"></path>
      </svg>
    </button>

    <!-- Navigation Menu Wrapper -->
    <div id="atmNavbarMobileMenu" 
         class="fixed xl:relative top-0 -left-80 xl:left-0 w-72 xl:w-auto h-full xl:h-auto bg-slate-900 xl:bg-transparent z-50 xl:z-auto p-6 xl:p-0 flex flex-col xl:flex-row xl:items-center xl:justify-end transition-all duration-300 ease-in-out shadow-2xl xl:shadow-none overflow-y-auto xl:overflow-visible">
      
      <!-- Mobile Header inside Drawer -->
      <div class="flex items-center justify-between pb-4 mb-6 border-b border-slate-800 xl:hidden">
        <img class="notranslate h-10 w-auto filter drop-shadow-[0_0_2px_#fff]" 
             src="<?php echo $d['alamat_website'].'/foto_icon/'.$kontak['logo']; ?>" 
             alt="Logo ATM Mobile">
        <button id="atmNavClose" type="button" class="text-slate-400 hover:text-white transition-colors">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>

      <!-- Menu Links List -->
      <div class="flex flex-col xl:flex-row items-start xl:items-center gap-1 xl:gap-2 w-full xl:w-auto">
        <?php
        $queryterbaru = "SELECT * FROM menu ORDER BY id_menu ASC";
        $hasilterbaru = mysqli_query($konek, $queryterbaru);
        while($t = mysqli_fetch_array($hasilterbaru)) {
          if ($t['aktif'] == 'Y') {
            $current_page = basename($_SERVER['REQUEST_URI']);
            $is_active = ($current_page == $t['link']);
        ?>
            <a href="<?php echo $d['alamat_website'] . '/' . $t['link']; ?>" 
               class="atm_nav_link relative w-full xl:w-auto px-3 py-2.5 xl:py-2 text-sm font-bold uppercase tracking-wide transition-colors duration-200 <?php echo $is_active ? 'text-amber-500 bg-amber-500/10 xl:bg-transparent rounded' : 'text-slate-400 xl:text-slate-600 hover:text-white xl:hover:text-slate-900'; ?>">
              <?php echo $t['nama_menu']; ?>
              <!-- Active Indicator Bar (Desktop Only) -->
              <?php if($is_active): ?>
                <span class="hidden xl:block absolute bottom-0 left-3 right-3 h-0.5 bg-amber-500"></span>
              <?php endif; ?>
            </a>
        <?php 
          }
        } 
        ?>
        
        <!-- Desktop Language Switcher -->
        <div class="notranslate hidden xl:flex items-center gap-1 ml-4 pl-4 border-l border-slate-200">
          <button onclick="changeLanguage('en')" id="lang-en" 
                  class="lang-btn px-2.5 py-1 text-xs font-bold rounded flex items-center gap-1.5 border border-transparent text-slate-500 hover:bg-slate-100 hover:text-slate-900 transition-all">
            <span>🇬🇧</span> <span>EN</span>
          </button>
          <button onclick="changeLanguage('id')" id="lang-id" 
                  class="lang-btn px-2.5 py-1 text-xs font-bold rounded flex items-center gap-1.5 border border-transparent text-slate-500 hover:bg-slate-100 hover:text-slate-900 transition-all">
            <span>🇮🇩</span> <span>Indo</span>
          </button>
        </div>
      </div>
      
      <!-- Mobile Language Switcher -->
      <div class="notranslate xl:hidden mt-auto pt-6 border-t border-slate-800 flex flex-col gap-2">
        <button onclick="changeLanguage('en')" id="lang-en-mb" 
                class="lang-btn w-full py-2.5 px-4 bg-slate-800 border border-slate-700 text-slate-300 font-semibold text-xs rounded-lg flex items-center justify-center gap-2 transition-all">
          <span>🇬🇧 ENGLISH</span>
        </button>
        <button onclick="changeLanguage('id')" id="lang-id-mb" 
                class="lang-btn w-full py-2.5 px-4 bg-slate-800 border border-slate-700 text-slate-300 font-semibold text-xs rounded-lg flex items-center justify-center gap-2 transition-all">
          <span>🇮🇩 INDONESIA</span>
        </button>
      </div>

    </div>
    
  </div>

  <!-- Mobile Backdrop Overlay -->
  <div id="atmNavBackdrop" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 hidden opacity-0 transition-opacity duration-300 xl:hidden"></div>

  <!-- Hidden Translate Element Container -->
  <div id="google_translate_element" class="hidden"></div>

</nav>

<!-- Custom CSS Tambahan Khusus Google Translate & Active State Button Bahasa -->
<style>
  body { top: 0px !important; }
  #google_translate_element, .skiptranslate, .goog-te-banner-frame, .goog-te-balloon-frame {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Class tombol bahasa aktif */
  .lang-btn.lang-active {
    background-color: #FEF3C7 !important; /* amber-100 */
    border-color: #F59E0B !important;     /* amber-500 */
    color: #0F172A !important;             /* slate-900 */
  }
</style>

<!-- Vanilla JS Engine -->
<script>
// 1. Inisialisasi Google Translate untuk Seluruh Halaman
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'id', // Bahasa dasar database/website kamu (Indonesia)
    includedLanguages: 'id,en',
    autoDisplay: false
  }, 'google_translate_element');
}

// 2. Handler Pindah Bahasa (Global Translation)
function changeLanguage(langCode) {
  localStorage.setItem('atm_lang', langCode);
  
  const domain = window.location.hostname;
  
  // Format Cookie: jika 'en' terjemahkan /id/en, jika 'id' kembalikan /id/id
  const cookieVal = langCode === 'en' ? '/id/en' : '/id/id';

  // Hapus cookie terdahulu agar tidak bentrok
  document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=" + domain + ";";

  // Pasang cookie baru secara global di root domain
  document.cookie = "googtrans=" + cookieVal + "; path=/;";
  document.cookie = "googtrans=" + cookieVal + "; path=/; domain=" + domain + ";";

  // Eksekusi elemen Google Translate jika sudah ada di DOM
  const googleSelect = document.querySelector('.goog-te-combo');
  if (googleSelect) {
    googleSelect.value = langCode;
    if (typeof(Event) === 'function') {
      googleSelect.dispatchEvent(new Event('change'));
    } else {
      googleSelect.fireEvent('onchange'); 
    }
  }
  
  highlightLanguageButton(langCode);
  window.location.reload(); // Reload wajib untuk merender ulang terjemahan seluruh halaman
}

// 3. Highlight Indikator Tombol Bahasa
function highlightLanguageButton(langCode) {
  document.querySelectorAll('.lang-btn').forEach(btn => btn.classList.remove('lang-active'));
  
  if(langCode === 'en') {
    document.getElementById('lang-en')?.classList.add('lang-active');
    document.getElementById('lang-en-mb')?.classList.add('lang-active');
  } else {
    document.getElementById('lang-id')?.classList.add('lang-active');
    document.getElementById('lang-id-mb')?.classList.add('lang-active');
  }
}

// 4. Main Event Listeners (DOM Ready)
document.addEventListener("DOMContentLoaded", function () {
  const currentLang = localStorage.getItem('atm_lang') || 'id';
  
  // Panggil highlight pertama kali
  highlightLanguageButton(currentLang);

  if (currentLang === 'en') {
    let checkCombo = setInterval(function() {
      const googleSelect = document.querySelector('.goog-te-combo');
      if (googleSelect) {
        googleSelect.value = 'en';
        if (typeof(Event) === 'function') {
          googleSelect.dispatchEvent(new Event('change'));
        } else {
          googleSelect.fireEvent('onchange');
        }
        highlightLanguageButton('en');
        clearInterval(checkCombo);
      }
    }, 100);
  }

  // Handling Sticky Scroll Navbar
  const navbar = document.getElementById("atmNavbar");
  const sentinel = document.getElementById("atmNavSentinel");

  if (navbar && sentinel) {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (!entry.isIntersecting) {
          navbar.classList.remove("relative");
          navbar.classList.add("fixed", "shadow-md");
        } else {
          navbar.classList.remove("fixed", "shadow-md");
          navbar.classList.add("relative");
        }
      },
      { root: null, threshold: 0 }
    );
    observer.observe(sentinel);
  }

  // Mobile Drawer Navigation Toggle Handler
  const toggleBtn = document.getElementById("atmNavToggle");
  const closeBtn = document.getElementById("atmNavClose");
  const mobileMenu = document.getElementById("atmNavbarMobileMenu");
  const backdrop = document.getElementById("atmNavBackdrop");

  function openMenu() {
    mobileMenu.classList.remove("-left-80");
    mobileMenu.classList.add("left-0");
    backdrop.classList.remove("hidden");
    setTimeout(() => backdrop.classList.add("opacity-100"), 10);
    document.body.style.overflow = "hidden";
  }

  function closeMenu() {
    mobileMenu.classList.remove("left-0");
    mobileMenu.classList.add("-left-80");
    backdrop.classList.remove("opacity-100");
    setTimeout(() => backdrop.classList.add("hidden"), 300);
    document.body.style.overflow = "";
  }

  if (toggleBtn) toggleBtn.addEventListener("click", openMenu);
  if (closeBtn) closeBtn.addEventListener("click", closeMenu);
  if (backdrop) backdrop.addEventListener("click", closeMenu);

  document.querySelectorAll(".atm_nav_link").forEach(link => {
    link.addEventListener("click", closeMenu);
  });
});
</script>

<!-- Google Translate External Script Init -->
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>



            


<?php include "isi.php" ?>
          


<!-- ECO-LUXURY PREMIUM FOOTER START -->
<footer class="relative bg-slate-950 text-slate-300 font-sans border-t border-slate-800/80 pt-16 pb-8 overflow-hidden">
  
  <!-- Ambient Gold Glow Effect Background -->
  <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-[800px] h-[250px] bg-amber-500/5 blur-[160px] rounded-full pointer-events-none"></div>

  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- GRID UTAMA (4 KOLOM) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-10 lg:gap-8 pb-12 border-b border-slate-800/80">

      <!-- COLUMN 1: COMPANY PROFILE (4 COL) -->
      <div class="lg:col-span-4 space-y-6">
        <!-- Logo -->
        <a href="<?php echo $d['alamat_website']; ?>" class="inline-block">
          <img src="<?php echo $d['alamat_website'] . '/foto_icon/' . $kontak['logo']; ?>" 
               alt="Vrindavan Guest House Bali" 
               class="h-12 w-auto object-contain filter drop-shadow">
        </a>
        
        <!-- Meta Deskripsi -->
        <p class="text-sm text-slate-400 leading-relaxed font-normal pr-4">
          <?php echo htmlspecialchars($d['meta_deskripsi'] ?? '', ENT_QUOTES, 'UTF-8'); ?>
        </p>
        
        <!-- Social Media Buttons -->
        <div class="flex items-center gap-3 pt-2">
          <?php if (!empty($kontak['ig'])) { ?>
            <a href="<?php echo htmlspecialchars($kontak['ig']); ?>" target="_blank" rel="noopener" aria-label="Instagram" 
               class="w-10 h-10 rounded-xl bg-slate-900 border border-slate-800 text-slate-400 hover:text-amber-400 hover:border-amber-500/50 hover:bg-slate-800 flex items-center justify-center transition-all duration-300 shadow-md">
              <i class="fab fa-instagram text-base"></i>
            </a>
          <?php } ?>

          <?php if (!empty($kontak['tiktok'])) { ?>
            <a href="<?php echo htmlspecialchars($kontak['tiktok']); ?>" target="_blank" rel="noopener" aria-label="TikTok" 
               class="w-10 h-10 rounded-xl bg-slate-900 border border-slate-800 text-slate-400 hover:text-amber-400 hover:border-amber-500/50 hover:bg-slate-800 flex items-center justify-center transition-all duration-300 shadow-md">
              <i class="fab fa-tiktok text-base"></i>
            </a>
          <?php } ?>

          <?php if (!empty($kontak['fb'])) { ?>
            <a href="<?php echo htmlspecialchars($kontak['fb']); ?>" target="_blank" rel="noopener" aria-label="Facebook" 
               class="w-10 h-10 rounded-xl bg-slate-900 border border-slate-800 text-slate-400 hover:text-amber-400 hover:border-amber-500/50 hover:bg-slate-800 flex items-center justify-center transition-all duration-300 shadow-md">
              <i class="fab fa-facebook-f text-base"></i>
            </a>
          <?php } ?>

          <?php if (!empty($kontak['tw'])) { ?>
            <a href="<?php echo htmlspecialchars($kontak['tw']); ?>" target="_blank" rel="noopener" aria-label="Twitter" 
               class="w-10 h-10 rounded-xl bg-slate-900 border border-slate-800 text-slate-400 hover:text-amber-400 hover:border-amber-500/50 hover:bg-slate-800 flex items-center justify-center transition-all duration-300 shadow-md">
              <i class="fab fa-x-twitter text-base"></i>
            </a>
          <?php } ?>
        </div>
      </div>

      <!-- COLUMN 2: QUICK LINKS (2 COL) -->
      <div class="lg:col-span-2 space-y-5">
        <h3 class="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
          <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
          <span>Navigation</span>
        </h3>
        
        <ul class="space-y-3 text-sm">
          <?php
          $queryterbaru = "SELECT * FROM menu ORDER BY id_menu ASC LIMIT 5";
          $hasilterbaru = mysqli_query($konek, $queryterbaru);
          while($t = mysqli_fetch_array($hasilterbaru)) {
            if ($t['aktif'] == 'Y') {
          ?>
            <li>
              <a href="<?php echo $d['alamat_website'] . '/' . $t['link']; ?>" 
                 class="text-slate-400 hover:text-amber-400 transition-colors duration-200 flex items-center gap-2 group">
                <i class="fa-solid fa-chevron-right text-[10px] text-slate-600 group-hover:text-amber-400 transition-colors"></i>
                <span><?php echo htmlspecialchars($t['nama_menu']); ?></span>
              </a>
            </li>
          <?php 
            }
          } 
          ?>
        </ul>
      </div>

      <!-- COLUMN 3: RELATED POSTS (3 COL) -->
      <div class="lg:col-span-3 space-y-5">
        <h3 class="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
          <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
          <span>Related Posts</span>
        </h3>

        <div class="space-y-3.5">
          <?php
          $queryterbaru = "SELECT * FROM blog ORDER BY id_blog DESC LIMIT 3";
          $hasilterbaru = mysqli_query($konek, $queryterbaru);
          
          while($t = mysqli_fetch_array($hasilterbaru)) { ?>
            <a href="<?php echo $d['alamat_website'] . '/article-' . $t['blog_seo']; ?>" 
               class="group block p-3 rounded-xl bg-slate-900/50 border border-slate-800/80 hover:border-amber-500/30 hover:bg-slate-900 transition-all duration-300">
              <div class="flex items-start gap-2.5">
                <i class="fas fa-chevron-right text-xs text-amber-400 mt-1 shrink-0 group-hover:translate-x-1 transition-transform"></i>
                <h4 class="text-xs font-semibold text-slate-300 group-hover:text-white line-clamp-2 leading-relaxed">
                  <?php echo htmlspecialchars($t['judul_blog']); ?>
                </h4>
              </div>
            </a>
          <?php } ?>
        </div>
      </div>

      <!-- COLUMN 4: CONTACT INFORMATION (3 COL) -->
      <div class="lg:col-span-3 space-y-5">
        <h3 class="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
          <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
          <span>Contact Us</span>
        </h3>

        <div class="space-y-4 text-xs sm:text-sm">
          <!-- Phone -->
          <?php if (!empty($kontak['tlp'])) { ?>
          <div class="flex items-start gap-3 text-slate-400">
            <div class="w-8 h-8 rounded-lg bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center shrink-0 mt-0.5">
              <i class="fas fa-phone-alt text-xs"></i>
            </div>
            <a href="tel:<?php echo htmlspecialchars($kontak['tlp']); ?>" class="hover:text-amber-400 transition-colors pt-1">
              <?php echo htmlspecialchars($kontak['tlp']); ?>
            </a>
          </div>
          <?php } ?>

          <!-- Email -->
          <?php if (!empty($kontak['email'])) { ?>
          <div class="flex items-start gap-3 text-slate-400">
            <div class="w-8 h-8 rounded-lg bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center shrink-0 mt-0.5">
              <i class="far fa-envelope text-xs"></i>
            </div>
            <a href="mailto:<?php echo htmlspecialchars($kontak['email']); ?>" class="hover:text-amber-400 transition-colors pt-1">
              <?php echo htmlspecialchars($kontak['email']); ?>
            </a>
          </div>
          <?php } ?>

          <!-- Office Address -->
          <?php if (!empty($kontak['alamat'])) { ?>
          <div class="flex items-start gap-3 text-slate-400">
            <div class="w-8 h-8 rounded-lg bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center shrink-0 mt-0.5">
              <i class="fas fa-map-marker-alt text-xs"></i>
            </div>
            <div class="pt-0.5 leading-relaxed">
              <strong class="text-slate-200 block mb-0.5">Head Office:</strong>
              <?php echo nl2br(htmlspecialchars($kontak['alamat'])); ?>
            </div>
          </div>
          <?php } ?>
        </div>
      </div>

    </div>

    <!-- BOTTOM COPYRIGHT SEGMENT -->
    <div class="pt-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-500">
      <p class="text-center sm:text-left">
        &copy; 2026 <strong class="text-slate-200 font-semibold"><?php echo htmlspecialchars($d['nama_pemilik'] ?? ''); ?></strong>. All Rights Reserved.
      </p>

      <p class="text-center sm:text-right font-mono tracking-wider text-slate-400">
        Crafted with precision by <span class="text-amber-400 font-bold">MrRobot</span>
      </p>
    </div>

  </div>
</footer>
<!-- ECO-LUXURY PREMIUM FOOTER END -->




     

        
   










           
    </body>

</html>