---
import BaseLayout from "../layouts/BaseLayout.astro";
import { featuredMessage, messagesIntro, twikooConfig } from "../data/messages";
import { site } from "../data/site";
import twikooThemeUrl from "../styles/twikoo2.css";
---

<BaseLayout title={`${messagesIntro.title} · ${site.className}`}>
  <main class="page-main">
    <section class="page-hero">
      <div class="section-inner">
        <a class="back-link" href="/">返回首页</a>
        <p class="eyebrow">Messages</p>
        <h1>{messagesIntro.title}</h1>
        <p>{messagesIntro.text}</p>
      </div>
    </section>

    <section class="gallery-band sticky-message-band">
      <div class="section-inner">
        <article class="message featured message-preamble">
          <p>“{featuredMessage.text}”</p>
          <cite>{featuredMessage.author}</cite>
        </article>

        {
          twikooConfig.envId ? (
            <div
              id="twikoo"
              class="twikoo-sticky-wall"
              data-env-id={twikooConfig.envId}
              data-path={twikooConfig.path}
              data-lang={twikooConfig.lang}
            />
          ) : (
            <div class="twikoo-empty-note">
              <h2>Twikoo 评论区待配置</h2>
              <p>
                在本地或部署平台设置 <code>PUBLIC_TWIKOO_ENV_ID</code> 后，这里会自动加载评论区。
              </p>
            </div>
          )
        }
      </div>
    </section>
  </main>

  {
    twikooConfig.envId && (
      <>
        <link rel="stylesheet" href={twikooThemeUrl} />
        <script is:inline src={twikooConfig.scriptSrc} defer></script>
        <script is:inline>
          window.addEventListener("DOMContentLoaded", function () {
            const container = document.querySelector("#twikoo");

            if (!container || !window.twikoo) {
              return;
            }

            window.twikoo.init({
              envId: container.dataset.envId,
              el: "#twikoo",
              path: container.dataset.path || location.pathname,
              lang: container.dataset.lang || "zh-CN"
            });
          });
        </script>
      </>
    )
  }
</BaseLayout>