const menuData = [
    { text: "ぐりりキャラバン", link: "caravan.html" },
    { text: "ぐりり絵本", link: "ehon.html" },
    { text: "子育て応援", link: "kosodate.html" },
    { text: "フードバンク支援", link: "foodbank.html" },
    { text: "会社見学", link: "https://www.khb-tv.co.jp/syanai-kengaku/" },
    { text: "番組・イベント", link: "other.html" },
    { text: "ぐりりピアノ", link: "piano.html" },
    { text: "ぐりり募金", link: "https://www.khb-tv.co.jp/guriribokin/" }
];

Vue.createApp({
    components: {
        "header-component": {
            template: `
                <header>
                    <div class="header_inner">
                        <h1 class="header_logo">
                            <a href="index.html">
          <picture>
            <source media="(max-width:400px)" srcset="images/header_logo_sp.png" id="logoImg">
                                <img src="images/header_logo_pc.png" alt="khbこどもえがおだいさくせん！" width="520" height="150" id="logoImg">
          </picture>
                            </a>
                        </h1>
                        <nav class="nav" :class="{ show: isOpen }">
                            <div class="toggle_wrap">
                                <button class="toggle" :class="{ active: isOpen }" @click="toggleMenu"></button>
                            </div>
                            <ul class="header_nav">
                                <li v-for="item in computedMenuItems" :key="item.text">
                                    <a :href="item.link" @click="handleClick(item.link)"><i
                                                class="fa-solid fa-circle-chevron-right"></i>{{ item.text }}</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </header>
            `,
            data() {
                return {
                    isOpen: false,
                    menuItems: menuData,
                    isTopPage: window.location.pathname.endsWith("index.html") || window.location.pathname === "/"
                };
            },
            computed: {
                computedMenuItems() {
                    return this.menuItems.map(item => {
                        if (item.link.startsWith("#")) {
                            return {
                                ...item,
                                link: this.isTopPage ? item.link : "index.html" + item.link
                            };
                        }
                        return item;
                    });
                }
            },
            methods: {
                toggleMenu() {
                    this.isOpen = !this.isOpen;
                },
                closeMenu() {
                    this.isOpen = false;
                },
                handleClick(link) {
                    if (this.isTopPage && link.startsWith("#")) {
                        const target = document.querySelector(link);
                        if (target) {
                            window.scrollTo({ top: target.offsetTop, behavior: "smooth" });
                        }
                    } else {
                        window.location.href = link;
                    }
                }
            }
        },
        "subpage-header": {
            props: ["titleSub", "titleJp"],
            template: `
          <div class="subpage-header">
            <div class="subpage_title w_limit_1440">
                <h1><span>{{ titleSub }}</span>{{ titleJp }}</h1>
            </div>
            <ul class="Crumbs w_limit_1440">
                <li><a href="index.html"><i class="fa-solid fa-house"></i></a></li>
                <li>{{ titleJp }}</li>
            </ul>
        </div>
    `
        }
    }
}).mount("#app");