---
import '../styles/global.css'

interface Props {
  title?: string;
  description?: string;
}

const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI เพิ่มยอดขายด้วยข้อมูล', description = 'เราให้คำปรึกษาด้าน AI Transformation กลยุทธ์การตลาดโดยใช้ข้อมูลเป็นพื้นฐาน พัฒนาศักยภาพของบุคลากรให้สูงขึ้น เพื่อเพิ่มยอดขายให้กับลูกค้าให้มากที่สุด' } = Astro.props;
---

<!doctype html>
<html lang="th">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content={description} />
    <meta name="generator" content={Astro.generator} />
    
    <!-- Favicons -->
    <link rel="icon" type="image/png" sizes="32x32" href="/branding/favicon-32.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="/branding/favicon-192.png" />
    <link rel="apple-touch-icon" href="/branding/apple-touch-icon.png" />
    
    <!-- Google Fonts -->
    <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=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
    
    <!-- Local Fonts -->
    <style>
      @font-face {
        font-family: 'Kanit';
        font-weight: 400;
        font-display: swap;
        src: url('https://www.moreminimore.com/wp-content/uploads/2022/03/Kanit-400.woff') format('woff');
      }
      @font-face {
        font-family: 'Kanit';
        font-weight: 700;
        font-display: swap;
        src: url('https://www.moreminimore.com/wp-content/uploads/2022/03/Kanit-700.woff') format('woff');
      }
    </style>
    
    <!-- SEO -->
    <title>{title}</title>
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="/branding/logo-long.png" />
    <meta property="twitter:card" content="summary_large_image" />
  </head>
  <body class="flex flex-col min-h-screen">
    <header class="bg-primary sticky top-0 z-50 shadow-lg">
      <!-- Top Bar -->
      <div class="bg-black text-white py-2">
        <div class="container mx-auto px-4 flex flex-wrap justify-between items-center text-sm">
          <div class="flex gap-4">
            <a href="mailto:contact@moreminimore.com" class="hover:text-primary transition">
              📧 contact@moreminimore.com
            </a>
            <a href="tel:0809955945" class="hover:text-primary transition">
              📞 080-995-5945
            </a>
          </div>
          <div class="flex gap-3">
            <a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition">Facebook</a>
            <a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition">Twitter</a>
            <a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition">LinkedIn</a>
          </div>
        </div>
      </div>
      
      <!-- Navigation -->
      <div class="container mx-auto px-4 py-4">
        <div class="flex justify-between items-center">
          <a href="/" class="flex-shrink-0">
            <img 
              src="/branding/logo-long-black.png" 
              alt="MoreminiMore Logo" 
              class="h-12 w-auto"
              width="200"
              height="50"
            />
          </a>
          
          <nav class="hidden md:flex gap-6 items-center">
            <a href="/#services" class="hover:text-accent-blue transition font-medium">บริการของเรา</a>
            <a href="/#process" class="hover:text-accent-blue transition font-medium">กระบวนการ</a>
            <a href="/category/seo" class="hover:text-accent-blue transition font-medium">เรื่องน่ารู้</a>
            <a href="/contact-us" class="hover:text-accent-blue transition font-medium">ติดต่อเรา</a>
            <a href="/about-us" class="hover:text-accent-blue transition font-medium">เกี่ยวกับเรา</a>
            <a href="tel:0809955945" class="bg-black text-white px-6 py-2 rounded-full hover:bg-gray-800 transition font-medium flex items-center gap-2">
              📞 โทรเลย
            </a>
          </nav>
          
          <!-- Mobile Menu Button -->
          <button class="md:hidden text-black" id="mobile-menu-btn">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
        </div>
        
        <!-- Mobile Menu -->
        <div class="md:hidden hidden" id="mobile-menu">
          <div class="flex flex-col gap-4 mt-4 pb-4">
            <a href="/#services" class="hover:text-accent-blue transition font-medium">บริการของเรา</a>
            <a href="/#process" class="hover:text-accent-blue transition font-medium">กระบวนการ</a>
            <a href="/category/seo" class="hover:text-accent-blue transition font-medium">เรื่องน่ารู้</a>
            <a href="/contact-us" class="hover:text-accent-blue transition font-medium">ติดต่อเรา</a>
            <a href="/about-us" class="hover:text-accent-blue transition font-medium">เกี่ยวกับเรา</a>
            <a href="tel:0809955945" class="bg-black text-white px-6 py-2 rounded-full hover:bg-gray-800 transition font-medium text-center flex items-center justify-center gap-2">
              📞 โทรเลย
            </a>
          </div>
        </div>
      </div>
    </header>
    
    <main class="flex-grow">
      <slot />
    </main>
    
    <footer class="bg-white text-black py-12 border-t-4 border-primary">
      <div class="container mx-auto px-4">
        <div class="grid md:grid-cols-4 gap-8">
          <div>
            <img 
              src="/branding/logo-long.png" 
              alt="MoreminiMore Logo" 
              class="h-10 w-auto mb-4"
              width="180"
              height="45"
            />
            <p class="text-gray-600 text-sm">
              ที่ปรึกษาองค์กร AI เพิ่มยอดขายด้วยข้อมูล
            </p>
            <div class="mt-4 flex gap-3">
              <a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-accent-blue transition text-2xl">📘</a>
              <a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-accent-blue transition text-2xl">🐦</a>
              <a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-accent-blue transition text-2xl">💼</a>
            </div>
          </div>
          
          <div>
            <h3 class="font-bold mb-4 text-lg">บริการ</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li><a href="/ai-strategy-consult" class="hover:text-accent-blue transition">ที่ปรึกษากลยุทธ์ AI</a></li>
              <li><a href="/ai-automation" class="hover:text-accent-blue transition">AI Automation</a></li>
              <li><a href="/ai-training" class="hover:text-accent-blue transition">ฝึกอบรม AI</a></li>
              <li><a href="/ai-analytics" class="hover:text-accent-blue transition">AI Analytics</a></li>
            </ul>
          </div>
          
          <div>
            <h3 class="font-bold mb-4 text-lg">ลิงก์</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li><a href="/about-us" class="hover:text-accent-blue transition">เกี่ยวกับเรา</a></li>
              <li><a href="/contact-us" class="hover:text-accent-blue transition">ติดต่อเรา</a></li>
              <li><a href="/category/seo" class="hover:text-accent-blue transition">เรื่องน่ารู้</a></li>
              <li><a href="/faq" class="hover:text-accent-blue transition">FAQ</a></li>
            </ul>
          </div>
          
          <div>
            <h3 class="font-bold mb-4 text-lg">ติดต่อ</h3>
            <ul class="space-y-3 text-sm text-gray-600">
              <li class="flex items-center gap-2">
                <span>📞</span>
                <a href="tel:0809955945" class="hover:text-accent-blue transition">080-995-5945</a>
              </li>
              <li class="flex items-center gap-2">
                <span>📧</span>
                <a href="mailto:contact@moreminimore.com" class="hover:text-accent-blue transition">contact@moreminimore.com</a>
              </li>
              <li class="flex items-center gap-2">
                <span>💬</span>
                <span>Line: @moreminimore</span>
              </li>
              <li class="flex items-center gap-2">
                <span>🕒</span>
                <span>จ-ศ: 9:00 - 18:00 น.</span>
              </li>
            </ul>
          </div>
        </div>
        
        <div class="border-t border-gray-200 mt-8 pt-8 text-center text-sm text-gray-600">
          <div class="flex justify-center gap-6 mb-4">
            <a href="/terms-and-conditions" class="hover:text-accent-blue transition">ข้อกำหนดและเงื่อนไข</a>
            <a href="/privacy-policy" class="hover:text-accent-blue transition">นโยบายความเป็นส่วนตัว</a>
          </div>
          <p>&copy; {new Date().getFullYear()} MoreminiMore Co.,Ltd. สงวนลิขสิทธิ์</p>
        </div>
      </div>
    </footer>
    
    <script>
      // Mobile menu toggle
      const menuBtn = document.getElementById('mobile-menu-btn');
      const mobileMenu = document.getElementById('mobile-menu');
      
      if (menuBtn && mobileMenu) {
        menuBtn.addEventListener('click', () => {
          mobileMenu.classList.toggle('hidden');
        });
      }
    </script>
  </body>
</html>
