const CategoryNavComponent = {
  name: 'CategoryNav',
  props: ['entameData'],
template: `
  <div v-for="(boothList, categoryKey) in booths" :key="categoryKey">
    <!-- 各カテゴリ共通の見出し -->
     <a :href="categoryLinks[categoryKey]"><h3 :class="'category_' + categoryKey">{{ categoryNames[categoryKey] }}</h3></a>

    <!-- 通常カテゴリ -->
    <ul v-if="categoryKey !== 'entame'" class="booth_grid">
      <li class="booth_card" v-for="booth in boothList" :key="booth.id">
        <a :href="booth.link">
          <img :src="booth.image" :alt="booth.title" loading="lazy" />
          <p class="booth_title">{{ booth.title }}</p>
        </a>
      </li>
    </ul>

    <!-- ステージカテゴリ（entame） -->
    <div v-else>
      <div v-for="day in entameData" :key="day.date">
        <h3 class="basic-line" :class="day.class" :id="day.id">
          <strong v-html="formatDateLabel(day.label)"></strong> 出演アーティスト
        </h3>
        <ul class="booth_grid">
          <li class="booth_card" v-for="artist in day.artists" :key="artist.name">
            <img :src="artist.image" :alt="artist.name" loading="lazy" />
            <p class="booth_title" v-html="artist.name.replaceAll('\\n', '<br>')"></p>
          </li>
        </ul>
        <p class="lh-15 ta-center fz-24 fz-21_sp fw-600 mgt-15"><strong>and more…</strong></p>
      </div>
     </div>
  </div>
`,

  data() {
    return {
      booths: {
food: [
  {
    id: "Curry",
    title: "カレーフェス2025",
    image: "images/thumb/thumb_curry.jpg",
    link: "food.html#Curry"
  },
  {
    id: "Harrys",
    title: "Harry's Junction",
    image: "images/thumb/thumb_harrys.jpg",
    link: "food.html#Harrys"
  },
  {
    id: "Guripan",
    title: "『ぐりりの瀬戸田レモンケーキ』販売",
    image: "images/thumb/thumb_guripan.jpg",
    link: "food.html#Guripan"
  }
],
taiken: [
  {
    id: "Forest",
    title: "おいでよ！ぐりりアイランド",
    image: "images/thumb/thumb_forest.jpg",
    link: "taiken.html#Forest"
  },
  {
    id: "Ennichi",
    title: "わくわく！ぐりり縁日(えんにち)",
    image: "images/thumb/thumb_ennichi.jpg",
    link: "taiken.html#Ennichi"
  },
  {
    id: "Ginzake",
    title: "ギンザケつかみ取り",
    image: "images/thumb/thumb_ginzake.jpg",
    link: "taiken.html#Ginzake"
  },
  {
    id: "WorkExperience",
    title: "おしごと体験",
    image: "images/thumb/thumb_workexperience.jpg",
    link: "taiken.html#WorkExperience"
  },
  {
    id: "Car",
    title: "“はたらくくるま”大集合！",
    image: "images/thumb/thumb_car.jpg",
    link: "taiken.html#Car"
  },
  {
    id: "Topocup",
    title: "topoカップ",
    image: "images/thumb/thumb_topocup.jpg",
    link: "taiken.html#Topocup"
  },
  {
    id: "CaptainPikachu",
    title: "『キャプテンピカチュウ』グリーティング",
    image: "images/thumb/thumb_captainpikachu.jpg",
    link: "taiken.html#CaptainPikachu"
  }
],

khbbooth: [
  {
    id: "StudioTour",
    title: "潜入！テレビ局見学ツアー",
    image: "images/thumb/thumb_studiotour.jpg",
    link: "khb_booth.html#StudioTour"
  },
  {
    id: "CM",
    title: "「あすとつながるkhb」CM撮影体験",
    image: "images/thumb/thumb_cm.jpg",
    link: "khb_booth.html#CM"
  },
  {
    id: "Photo",
    title: "ぐりりといっしょに！撮影コーナー",
    image: "images/thumb/thumb_photo.jpg",
    link: "khb_booth.html#Photo"
  },
  {
    id: "Kamishibai",
    title: "ぐりり紙芝居",
    image: "images/thumb/thumb_kamishibai.jpg",
    link: "khb_booth.html#Kamishibai"
  },
  {
    id: "Craft",
    title: "ぐりり～ずのおめんづくり",
    image: "images/thumb/thumb_craft.jpg",
    link: "khb_booth.html#Craft"
  },
  {
    id: "Greeting",
    title: "ぐりり～ずの気まぐれグリーティング",
    image: "images/thumb/thumb_greeting.jpg",
    link: "khb_booth.html#Greeting"
  },
  {
    id: "khb_goods",
    title: "ぐりりグッズ・番組グッズ",
    image: "images/thumb/thumb_khb_goods.jpg",
    link: "khb_booth.html#khb_goods"
  },
  {
    id: "QuizRally",
    title: "khb50周年クイズラリー",
    image: "images/thumb/thumb_quizrally.jpg?v=20250807",
    link: "khb_booth.html#QuizRally"
  }
],
entame: [
]
      },
      categoryNames: {
        food: "グルメ",
        taiken: "体験・学び・SDGs",
        entame: "ステージ",
        khbbooth: "khbコンテンツ"
      },
      categoryLinks: {
  food: "food.html",
  taiken: "taiken.html",
  entame: "entame.html",
  khbbooth: "khb_booth.html"
}
    };
  },
  methods: {
  formatDateLabel(label) {
    const match = label.match(/^(\d+)\/(\d+)\((.)\)$/);
    if (!match) return label; // フォーマット不正ならそのまま返す

    const month = match[1];
    const day = match[2];
    const weekday = match[3];

    return `${month}月${day}日<span>(${weekday})</span><br class="br_480">`;
  }
}
};