---
import "../styles/global.css";

const { title } = Astro.props;
let currentYear = new Date().getFullYear();

// 🔧 ここがポイント！NAS でのサブディレクトリ対応
const base = import.meta.env.BASE_URL || "/";
---

<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
  </head>

  <body class="flex flex-col min-h-screen bg-gray-50 text-gray-800">
    <!-- ヘッダー -->
    <header
      class="bg-white/95 backdrop-blur-sm border-b border-gray-200 sticky top-0 z-50 shadow-sm transition-all duration-300"
    >
      <div
        class="max-w-7xl mx-auto flex items-center justify-between py-4 px-6 lg:px-10"
      >
        <!-- 会社ロゴ／社名 -->
        <a
          href={`${base}`}
          class="flex items-center text-blue-700 font-extrabold text-xl sm:text-2xl md:text-3xl tracking-wide hover:text-blue-800 transition-colors"
        >
          <!-- ロゴ画像 -->
          <img
            src={`${base}images/logo.jpg`}
            alt="HIYORI ロゴ"
            class="w-10 h-10 sm:w-12 sm:h-12 object-contain mr-2"
          />
          <span>株式会社火和 HIYORI</span>
        </a>

        <!-- PC用ナビ -->
        <nav
          class="hidden md:flex space-x-10 text-gray-800 font-semibold text-base md:text-lg"
        >
          <a href={`${base}`} class="hover:text-blue-700 transition-colors"
            >トップ</a
          >
          <a
            href={`${base}about/`}
            class="hover:text-blue-700 transition-colors">会社概要</a
          >
          <a href={`${base}it/`} class="hover:text-blue-700 transition-colors"
            >IT事業部</a
          >
          <a href={`${base}food/`} class="hover:text-blue-700 transition-colors"
            >飲食事業部</a
          >
          <a
            href={`${base}contact/`}
            class="hover:text-blue-700 transition-colors">お問い合わせ</a
          >
        </nav>

        <!-- モバイル用ハンバーガー -->
        <button
          id="menu-toggle"
          class="md:hidden text-gray-700 hover:text-blue-700 focus:outline-none"
          aria-label="メニューを開く"
        >
          <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 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>

      <!-- モバイルメニュー -->
      <nav
        id="mobile-menu"
        class="hidden flex-col space-y-3 px-6 pb-4 text-base font-semibold bg-white border-t border-gray-200 md:hidden"
      >
        <a href={`${base}`} class="block hover:text-blue-700">トップ</a>
        <a href={`${base}about/`} class="block hover:text-blue-700">会社概要</a>
        <a href={`${base}it/`} class="block hover:text-blue-700">IT事業部</a>
        <a href={`${base}food/`} class="block hover:text-blue-700">飲食事業部</a
        >
        <a href={`${base}contact/`} class="block hover:text-blue-700"
          >お問い合わせ</a
        >
      </nav>
    </header>

    <!-- メインコンテンツ -->
    <main class="flex-1">
      <slot />
    </main>

    <!-- フッター -->
    <footer class="bg-gray-800 text-gray-300 text-sm py-4 text-center">
      © {currentYear} 株式会社火和 HIYORI All Rights Reserved.
    </footer>

    <!-- スクリプト -->
    <script>
      const btn = document.getElementById("menu-toggle");
      const menu = document.getElementById("mobile-menu");

      btn?.addEventListener("click", () => {
        if (menu) {
          menu.classList.toggle("hidden");
        }
      });
    </script>
  </body>
</html>
