import { Metadata } from 'next';
import Link from 'next/link';
import { getHomepageContent } from '@/lib/homepage-content';
import { Render } from '@puckeditor/core';
import { puckConfig } from '@/lib/puck/config';

export const dynamic = 'force-dynamic';

export const metadata: Metadata = {
  title: '運営元について',
  description: 'ten-sura-game.comの運営情報、ミッション・ビジョン、サイトの目的、提供コンテンツについてご紹介します。',
  alternates: {
    canonical: 'https://ten-sura-game.com/about-us',
  },
};

export default async function AboutUsPage() {
  try {
    const pageData = await getHomepageContent('/about-us');
    if (pageData?.puckData) {
      return (
        <main className="bg-[#0F0F12] min-h-screen">
          <Render config={puckConfig as any} data={pageData.puckData as any} />
        </main>
      );
    }
  } catch {
    // DB unavailable — fall through to hardcoded content
  }

  return (
    <main className="bg-deep-black min-h-screen">
      <div className="container mx-auto px-4 py-12 md:py-16">
        {/* Page Header */}
        <div className="mb-10">
          <h1 className="text-3xl md:text-4xl font-bold text-text-white mb-4 border-l-4 border-crimson-red pl-4">
            運営元について
          </h1>
          <p className="text-text-light-gray text-sm">
            ten-sura-game.com について
          </p>
        </div>

        {/* Content */}
        <div className="bg-soft-dark border border-soft-gray-border rounded-xl p-6 md:p-10 space-y-10">

          {/* Mission & Vision */}
          <section>
            <h2 className="text-xl md:text-2xl font-bold text-text-white mb-4 border-l-4 border-crimson-red pl-4">
              ミッション・ビジョン
            </h2>
            <p className="text-text-white leading-relaxed mb-4">
              ten-sura-game.com は、「転生したらスライムだった件（転スラ）」関連ゲームを愛するすべてのプレイヤーに、最高品質の攻略情報を日本語でお届けすることをミッションとしています。
            </p>
            <p className="text-text-white leading-relaxed">
              私たちのビジョンは、転スラゲームコミュニティにおける最も信頼される情報プラットフォームとなり、プレイヤーが効率的かつ戦略的にゲームを楽しめる環境を構築することです。正確で分かりやすい情報を通じて、すべてのプレイヤーの攻略体験を最大限にサポートいたします。
            </p>
          </section>

          {/* Why We Exist */}
          <section>
            <h2 className="text-xl md:text-2xl font-bold text-text-white mb-4 border-l-4 border-crimson-red pl-4">
              当サイトが存在する理由
            </h2>
            <p className="text-text-white leading-relaxed mb-4">
              転スラ関連ゲームは豊富なコンテンツと奥深い戦略性を持つ一方で、膨大な情報量の中から必要な攻略情報を見つけることが困難な場合があります。
            </p>
            <p className="text-text-white leading-relaxed mb-4">
              特に以下のような課題を抱えるプレイヤーが多く存在します：
            </p>
            <ul className="list-disc list-inside space-y-2 text-text-white leading-relaxed pl-4">
              <li>リセマラで狙うべきキャラクターが分からない</li>
              <li>イベント攻略の効率的な進め方を知りたい</li>
              <li>キャラクター育成の優先順位が判断できない</li>
              <li>最新アップデートの環境変化に対応したい</li>
              <li>高難易度コンテンツのクリア方法を探している</li>
            </ul>
            <p className="text-text-white leading-relaxed mt-4">
              当サイトは、これらの課題を解決するために設立されました。散在する情報を体系化し、信頼性の高い攻略データを一元的に提供することで、プレイヤーの貴重な時間を節約し、ゲームの楽しさを最大化することを目指しています。
            </p>
          </section>

          {/* What We Offer */}
          <section>
            <h2 className="text-xl md:text-2xl font-bold text-text-white mb-4 border-l-4 border-crimson-red pl-4">
              提供コンテンツ
            </h2>
            <p className="text-text-white leading-relaxed mb-4">
              当サイトでは、転スラゲームプレイヤーに向けた以下のカテゴリの攻略情報を提供しています。
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="bg-dark-gray border border-soft-gray-border rounded-lg p-4">
                <h3 className="text-crimson-red font-bold mb-2">攻略情報</h3>
                <p className="text-text-light-gray text-sm leading-relaxed">
                  ストーリー攻略、ボス攻略、高難易度コンテンツのクリア方法を詳細に解説します。
                </p>
              </div>
              <div className="bg-dark-gray border border-soft-gray-border rounded-lg p-4">
                <h3 className="text-crimson-red font-bold mb-2">キャラクター評価</h3>
                <p className="text-text-light-gray text-sm leading-relaxed">
                  全キャラクターの性能評価、スキル解説、おすすめ編成を提供します。
                </p>
              </div>
              <div className="bg-dark-gray border border-soft-gray-border rounded-lg p-4">
                <h3 className="text-crimson-red font-bold mb-2">リセマラ・ガチャ情報</h3>
                <p className="text-text-light-gray text-sm leading-relaxed">
                  最新リセマラランキング、ガチャの引きどき、狙うべきキャラクターをお伝えします。
                </p>
              </div>
              <div className="bg-dark-gray border border-soft-gray-border rounded-lg p-4">
                <h3 className="text-crimson-red font-bold mb-2">イベント・アップデート</h3>
                <p className="text-text-light-gray text-sm leading-relaxed">
                  最新イベントの攻略法、報酬情報、アップデート内容をいち早くお届けします。
                </p>
              </div>
              <div className="bg-dark-gray border border-soft-gray-border rounded-lg p-4 md:col-span-2">
                <h3 className="text-crimson-red font-bold mb-2">初心者・育成ガイド</h3>
                <p className="text-text-light-gray text-sm leading-relaxed">
                  ゲームを始めたばかりの方に向けた基礎知識、効率的な育成方法、序盤の進め方を丁寧に解説します。
                </p>
              </div>
            </div>
          </section>

          {/* Target Audience */}
          <section>
            <h2 className="text-xl md:text-2xl font-bold text-text-white mb-4 border-l-4 border-crimson-red pl-4">
              対象読者
            </h2>
            <p className="text-text-white leading-relaxed mb-4">
              当サイトは、以下のようなユーザーを主な対象としています。
            </p>
            <ul className="list-disc list-inside space-y-2 text-text-white leading-relaxed pl-4">
              <li>転スラ関連ゲームを日常的にプレイしている方</li>
              <li>キャラクター評価やイベント攻略情報を積極的に検索される方</li>
              <li>リセマラ情報を参考に効率よくゲームを始めたい方</li>
              <li>高難易度コンテンツの攻略に挑戦されている方</li>
              <li>最新アップデート情報をいち早く入手したい方</li>
            </ul>
            <p className="text-text-white leading-relaxed mt-4">
              16歳から35歳の日本在住のプレイヤーを中心に、転スラゲームをより深く楽しみたいすべての方にご活用いただけるコンテンツを目指しています。
            </p>
          </section>

          {/* Organization Info */}
          <section>
            <h2 className="text-xl md:text-2xl font-bold text-text-white mb-4 border-l-4 border-crimson-red pl-4">
              運営情報
            </h2>
            <div className="bg-dark-gray border border-soft-gray-border rounded-lg p-4">
              <table className="w-full text-sm">
                <tbody>
                  <tr className="border-b border-soft-gray-border">
                    <th className="text-text-light-gray text-left py-3 pr-4 font-semibold w-1/3">サイト名</th>
                    <td className="text-text-white py-3">ten-sura-game.com</td>
                  </tr>
                  <tr className="border-b border-soft-gray-border">
                    <th className="text-text-light-gray text-left py-3 pr-4 font-semibold">運営</th>
                    <td className="text-text-white py-3">ten-sura-game.com 編集部</td>
                  </tr>
                  <tr className="border-b border-soft-gray-border">
                    <th className="text-text-light-gray text-left py-3 pr-4 font-semibold">URL</th>
                    <td className="text-text-white py-3">
                      <Link href="/" className="text-crimson-red hover:text-hover-red transition-colors underline">
                        https://ten-sura-game.com
                      </Link>
                    </td>
                  </tr>
                  <tr>
                    <th className="text-text-light-gray text-left py-3 pr-4 font-semibold">お問い合わせ</th>
                    <td className="text-text-white py-3">サイト内お問い合わせフォームよりご連絡ください</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

        </div>
      </div>
    </main>
  );
}
