/* global React */

const AboutPage = () => (
  <div className="about-page">
    <header className="page-header">
      <div className="page-eyebrow">About Tarot Room</div>
      <h1 className="page-title">关于牌间</h1>
      <p className="page-subtitle">一个用来慢下来、看清一点自己的工具</p>
    </header>

    <div className="about-content">
      <section className="about-section">
        <h2>为什么做</h2>
        <p>
          牌间由 <a href="https://liangmouyin.com" target="_blank" rel="noreferrer">梁某银</a> 做出来。
          我大概在中学时期就对塔罗很感兴趣。那时候买过不少台版塔罗书，也买过百年维特塔罗牌。
          现在回头看，那更像是一段很认真地摆弄玩具的时期。
        </p>
        <p>
          当时我甚至混迹贴吧，给陌生网友做过占卜，也因此认识过一些现在早已失联的人。
          我喜欢的不只是抽牌本身，也喜欢那些围绕牌意、图像和符号展开的解释。像《78度的智慧》这类书，
          会把一张牌里的姿势、颜色、人物、背景和隐喻一点点拆开，读起来很过瘾。
        </p>
      </section>

      <section className="about-section">
        <h2>后来为什么停下</h2>
        <p>
          到高中以后，学业忙起来，我就没再怎么碰塔罗牌了。大学之后也只是偶尔想起，并没有真正重新拿起来。
          所以严格说，这并不是一个持续多年的稳定爱好，而是曾经非常浓烈，后来又被时间放到一边的东西。
        </p>
        <p>
          那些书和牌现在已经不知道散落何方，但心里好像一直有一个空间还属于塔罗牌。只是很长一段时间里，
          我没有再认真走进去。
        </p>
        <p>
          这次重新翻看塔罗牌的牌序和牌意时，有几句话突然触动了我。我觉得有意思，也觉得那个空出来的位置或许可以重新被填上。
          于是就想，不如给自己做一个叫「牌间」的网站。
          最后慢慢做出来的，就是你现在看到的这个样子。
        </p>
      </section>

      <section className="about-section">
        <h2>现在为什么又做</h2>
        <p>
          有了 AI 之后，做一个小网站的门槛突然低了很多。对我来说，这件事不一定要实现多复杂的功能，
          也不必一开始就变成一个完整产品。它首先是一个可以被做出来、被调试、被慢慢改好的东西。
        </p>
        <p>
          某种意义上，它也像是在测试我和 AI 的协作关系：我提出一个模糊的感觉，AI 帮我把它变成页面、组件、文字和交互。
          这个过程本身就很好玩，像重新摆弄一套长大后才终于能自己制作的玩具。
        </p>
      </section>

      <section className="about-section">
        <h2>这里能做什么</h2>
        <p>
          你可以在牌库里查看七十八张牌的牌意，也可以选择牌阵，自行洗牌、抽牌、翻牌。AI 辅助占卜会在接入接口后，
          根据你的问题和抽到的牌生成一段解读。
        </p>
        <p>
          目前大阿卡纳已经使用独立牌面图，小阿卡纳仍以线稿占位。这个小站会继续慢慢补完，先让它能用，再让它更完整。
        </p>
      </section>

      <section className="about-section">
        <h2>它不是什么</h2>
        <p>
          它不是神谕，也不应该替你做重要决定。牌面可以提醒你注意某种可能性，但真正承担选择后果的人仍然是你自己。
        </p>
        <p>
          如果问题涉及医疗、法律、财务、心理危机或其他高风险处境，请优先寻找可靠的专业帮助。
        </p>
      </section>

      <section className="about-section">
        <h2>隐私</h2>
        <p>
          如果你使用 AI 解读功能，你输入的问题和抽牌结果会被发送给模型服务，用来生成解读。本站不会把这些内容展示给其他人。
          如果未来增加保存历史记录的功能，会在页面上明确说明。
        </p>
      </section>
    </div>
  </div>
);

window.AboutPage = AboutPage;