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

const { title, description = "รับทำเว็บไซต์ SEO AI Chatbot และ Marketing Automation สำหรับ SMEs ไทย เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีที่ทันสมัย" } = 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} />
    <title>{title}</title>

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

    <!-- 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=Kanit:wght@300;400;500;600;700&family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
  </head>

  <body class="font-prompt bg-white text-gray-900 antialiased">
    <!-- Navigation -->
    <header class="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100">
      <nav class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16 md:h-20">
          <!-- Logo -->
          <a href="/" class="flex items-center gap-2">
            <div class="w-10 h-10 bg-gradient-to-br from-teal-500 to-teal-600 rounded-xl flex items-center justify-center">
              <span class="text-white font-bold text-xl">M</span>
            </div>
            <span class="font-kanit font-bold text-xl text-gray-900">MoreminiMore</span>
          </a>

          <!-- Desktop Navigation -->
          <div class="hidden md:flex items-center gap-8">
            <a href="/" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">หน้าแรก</a>
            <a href="/portfolio" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">ผลงาน</a>
            <a href="/about-us" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">เกี่ยวกับเรา</a>
            <a href="/contact-us" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">ติดต่อ</a>
          </div>

          <!-- CTA Button -->
          <div class="hidden md:flex items-center gap-4">
            <a href="tel:0809955945" class="flex items-center gap-2 text-gray-700 hover:text-teal-600 font-medium transition-colors">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
              </svg>
              080-995-5945
            </a>
            <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="bg-teal-600 text-white px-5 py-2.5 rounded-full font-medium hover:bg-teal-700 transition-colors flex items-center gap-2">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
              </svg>
              LINE
            </a>
          </div>

          <!-- Mobile Menu Button -->
          <button id="mobile-menu-btn" class="md:hidden p-2 text-gray-700 hover:text-teal-600 transition-colors">
            <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 id="mobile-menu" class="hidden md:hidden pb-4">
          <div class="flex flex-col gap-3">
            <a href="/" class="text-gray-700 hover:text-teal-600 font-medium py-2 transition-colors">หน้าแรก</a>
            <a href="/portfolio" class="text-gray-700 hover:text-teal-600 font-medium py-2 transition-colors">ผลงาน</a>
            <a href="/about-us" class="text-gray-700 hover:text-teal-600 font-medium py-2 transition-colors">เกี่ยวกับเรา</a>
            <a href="/contact-us" class="text-gray-700 hover:text-teal-600 font-medium py-2 transition-colors">ติดต่อ</a>
            <div class="flex gap-3 pt-3 border-t border-gray-100">
              <a href="tel:0809955945" class="flex-1 text-center bg-gray-100 text-gray-700 py-3 rounded-xl font-medium">
                โทร 080-995-5945
              </a>
              <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="flex-1 text-center bg-teal-600 text-white py-3 rounded-xl font-medium">
                LINE
              </a>
            </div>
          </div>
        </div>
      </nav>
    </header>

    <!-- Main Content -->
    <main class="pt-16 md:pt-20">
      <slot />
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white">
      <div class="container mx-auto px-4 py-16">
        <div class="grid md:grid-cols-4 gap-12">
          <!-- Brand -->
          <div class="md:col-span-2">
            <div class="flex items-center gap-3 mb-6">
              <div class="w-12 h-12 bg-gradient-to-br from-teal-400 to-teal-500 rounded-xl flex items-center justify-center">
                <span class="text-white font-bold text-2xl">M</span>
              </div>
              <span class="font-kanit font-bold text-2xl">MoreminiMore</span>
            </div>
            <p class="text-gray-400 leading-relaxed mb-6 max-w-md">
              บริษัท มอร์มินิมอร์ จำกัด ให้บริการรับทำเว็บไซต์ SEO และ AI Chatbot ครบวงจร สำหรับธุรกิจ SMEs ทั่วประเทศไทย
            </p>
            <div class="flex gap-4">
              <a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-600 transition-colors">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                </svg>
              </a>
              <a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-600 transition-colors">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                </svg>
              </a>
              <a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-600 transition-colors">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                </svg>
              </a>
            </div>
          </div>

          <!-- Services -->
          <div>
            <h3 class="font-kanit font-semibold text-lg mb-6">บริการ</h3>
            <ul class="space-y-3">
              <li><a href="/web-development" class="text-gray-400 hover:text-teal-400 transition-colors">รับทำเว็บไซต์</a></li>
              <li><a href="/marketing-automation" class="text-gray-400 hover:text-teal-400 transition-colors">Marketing Automation</a></li>
              <li><a href="/ai-automation" class="text-gray-400 hover:text-teal-400 transition-colors">AI Automation</a></li>
              <li><a href="/tech-consult" class="text-gray-400 hover:text-teal-400 transition-colors">Tech Consult</a></li>
            </ul>
          </div>

          <!-- Contact -->
          <div>
            <h3 class="font-kanit font-semibold text-lg mb-6">ติดต่อ</h3>
            <ul class="space-y-3">
              <li class="flex items-center gap-3 text-gray-400">
                <svg class="w-5 h-5 text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                </svg>
                080-995-5945
              </li>
              <li class="flex items-center gap-3 text-gray-400">
                <svg class="w-5 h-5 text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
                contact@moreminimore.com
              </li>
              <li class="flex items-start gap-3 text-gray-400">
                <svg class="w-5 h-5 text-teal-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120
              </li>
            </ul>
          </div>
        </div>

        <!-- Bottom Bar -->
        <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center gap-4">
          <p class="text-gray-500 text-sm">
            © 2024 บริษัท มอร์มินิมอร์ จำกัด. สงวนลิขสิทธิ์.
          </p>
          <div class="flex gap-6 text-sm">
            <a href="/privacy-policy" class="text-gray-500 hover:text-teal-400 transition-colors">นโยบายความเป็นส่วนตัว</a>
            <a href="/terms-and-conditions" class="text-gray-500 hover:text-teal-400 transition-colors">ข้อกำหนดการใช้งาน</a>
          </div>
        </div>
      </div>
    </footer>

    <!-- Mobile Menu Script -->
    <script>
      const menuBtn = document.getElementById('mobile-menu-btn');
      const mobileMenu = document.getElementById('mobile-menu');

      menuBtn?.addEventListener('click', () => {
        mobileMenu?.classList.toggle('hidden');
      });
    </script>
  </body>
</html>

<style is:global>
  * {
    scroll-behavior: smooth;
  }

  body {
    font-family: 'Prompt', sans-serif;
  }

  .font-kanit {
    font-family: 'Kanit', sans-serif;
  }
</style>
