<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
  <link rel="icon" type="image/png" href="/img/favicon.png">
  
  <!-- SEO Meta tags -->
  <meta name="description" content="<%= settings.meta_description || 'Dadofy - Jasa Pembuatan Website Profesional & Server' %>">
  <% if (settings.meta_keywords) { %>
    <meta name="keywords" content="<%= settings.meta_keywords %>">
  <% } %>
  <meta name="robots" content="index, follow">

  <!-- OpenGraph Social Tags -->
  <meta property="og:title" content="<%= title %>">
  <meta property="og:description" content="<%= settings.meta_description %>">
  <meta property="og:image" content="<%= settings.og_image || '/img/logo.png' %>">
  <meta property="og:type" content="website">
  <meta property="og:url" content="<%= typeof APP_URL !== 'undefined' ? APP_URL : 'https://dadofy.id' %>">

  <!-- Twitter Card Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="<%= title %>">
  <meta name="twitter:description" content="<%= settings.meta_description %>">
  <meta name="twitter:image" content="<%= settings.og_image || '/img/logo.png' %>">

  <!-- Google Analytics Tracking -->
  <% if (settings.google_analytics_id) { %>
    <script async src="https://www.googletagmanager.com/gtag/js?id=<%= settings.google_analytics_id %>"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '<%= settings.google_analytics_id %>');
    </script>
  <% } %>

  <!-- Custom Header Scripts -->
  <% if (settings.custom_header_html) { %>
    <%- settings.custom_header_html %>
  <% } %>
  
  <!-- Google Fonts: Plus Jakarta Sans for Display, Inter for Body -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  
  <!-- FontAwesome Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  
  <!-- Tailwind CSS Via Play CDN (Super fast, reliable, perfect for shared hosting) -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            brandDark: '#0f172a',
            brandNavy: '#1e293b',
            brandBlue: '#2563eb',
            brandPurple: '#9333ea',
            brandSlate: '#f8fafc',
          },
          fontFamily: {
            sans: ['Inter', 'sans-serif'],
            display: ['"Plus Jakarta Sans"', 'sans-serif'],
            mono: ['"JetBrains Mono"', 'monospace'],
          }
        }
      }
    }
  </script>
  
  <!-- Custom Style Sheet -->
  <link rel="stylesheet" href="/css/style.css">
</head>
<body class="bg-white text-brandNavy font-sans flex flex-col min-h-screen selection:bg-brandPurple/20 selection:text-brandPurple">

  <!-- Main Navigation Header -->
  <header class="sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-gray-100 transition-all duration-300" id="mainHeader">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-20">
        <!-- Logo -->
        <div class="flex-shrink-0 flex items-center">
          <a href="/" class="flex items-center">
            <img src="/img/logo.png" alt="Dadofy Logo" class="h-14 w-auto">
          </a>
        </div>
        
        <!-- Desktop Navlinks -->
        <nav class="hidden md:flex space-x-8">
          <a href="/#services" class="text-sm font-semibold text-brandNavy/80 hover:text-brandPurple transition">Layanan</a>
          <a href="/#packages" class="text-sm font-semibold text-brandNavy/80 hover:text-brandPurple transition">Paket Website</a>
          <a href="/#hosting" class="text-sm font-semibold text-brandNavy/80 hover:text-brandPurple transition">Hosting & VPS</a>
          <a href="/#portfolio" class="text-sm font-semibold text-brandNavy/80 hover:text-brandPurple transition">Portfolio</a>
          <a href="/#why-us" class="text-sm font-semibold text-brandNavy/80 hover:text-brandPurple transition">Keunggulan</a>
          <a href="/#contact" class="text-sm font-semibold text-brandNavy/80 hover:text-brandPurple transition">Kontak</a>
        </nav>
        
        <!-- Action Buttons -->
        <div class="hidden md:flex items-center gap-4">
          <a href="/login" class="text-sm font-semibold text-brandNavy/80 hover:text-brandPurple transition">Portal Klien</a>
          <a href="/#contact" class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-brandBlue to-brandPurple text-white text-sm font-bold shadow-md hover:shadow-lg hover:shadow-brandPurple/25 hover:scale-[1.02] active:scale-[0.98] transition">Consul Gratis</a>
        </div>
        
        <!-- Mobile menu toggle -->
        <div class="md:hidden flex items-center">
          <button type="button" class="text-brandDark p-2 focus:outline-none" id="mobileMenuBtn" aria-label="Toggle Menu">
            <i class="fa-solid fa-bars text-2xl" id="menuIcon"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- Mobile Drawer Overlay -->
    <div class="md:hidden hidden bg-white border-b border-gray-100" id="mobileDrawer">
      <div class="px-4 pt-2 pb-6 space-y-3 shadow-inner">
        <a href="/#services" class="block py-2 text-base font-semibold text-brandNavy hover:text-brandPurple transition">Layanan</a>
        <a href="/#packages" class="block py-2 text-base font-semibold text-brandNavy hover:text-brandPurple transition">Paket Website</a>
        <a href="/#hosting" class="block py-2 text-base font-semibold text-brandNavy hover:text-brandPurple transition">Hosting & VPS</a>
        <a href="/#portfolio" class="block py-2 text-base font-semibold text-brandNavy hover:text-brandPurple transition">Portfolio</a>
        <a href="/#why-us" class="block py-2 text-base font-semibold text-brandNavy hover:text-brandPurple transition">Keunggulan</a>
        <a href="/#contact" class="block py-2 text-base font-semibold text-brandNavy hover:text-brandPurple transition">Kontak</a>
        <hr class="border-gray-100 my-2">
        <div class="pt-2 flex flex-col gap-2">
          <a href="/login" class="block w-full px-4 py-2 rounded-lg border border-gray-200 text-brandNavy hover:bg-gray-50 text-sm font-bold transition text-center">Portal Klien</a>
          <a href="/#contact" class="block w-full px-4 py-2.5 rounded-lg bg-gradient-to-r from-brandBlue to-brandPurple text-white text-sm font-bold shadow transition text-center">Hubungi Kami</a>
        </div>
      </div>
    </div>
  </header>

  <!-- Sticky Alert / Live Flash Messaging System -->
  <div class="fixed bottom-4 right-4 z-50 max-w-sm w-full space-y-2 pointer-events-none" id="flashContainer">
    <% if (locals.flash) { %>
      <div class="p-4 rounded-xl bg-white border-l-4 shadow-xl border-<%= flash.type === 'danger' ? 'red-500' : 'emerald-500' %> flex gap-3 pointer-events-auto transform animate-slide-in justify-between items-start" id="flashMessageItem">
        <div class="flex gap-2">
          <% if (flash.type === 'danger') { %>
            <i class="fa-solid fa-triangle-exclamation text-red-500 mt-1"></i>
          <% } else { %>
            <i class="fa-solid fa-circle-check text-emerald-500 mt-1"></i>
          <% } %>
          <div>
            <span class="text-xs font-bold text-gray-400 block"><%= flash.type === 'danger' ? 'PEMBERITAHUAN' : 'BERHASIL' %></span>
            <p class="text-sm font-medium text-brandNavy mt-0.5"><%= flash.message %></p>
          </div>
        </div>
        <button onclick="document.getElementById('flashMessageItem').remove()" class="text-gray-400 hover:text-brandDark">
          <i class="fa-solid fa-xmark text-sm"></i>
        </button>
      </div>
    <% } %>
  </div>

  <main class="flex-grow">
