タブ切り替えFAQ

1"use client";
2
3import { useState } from "react";
4
5const categories = [
6  {
7    label: "基本情報",
8    items: [
9      {
10        question: "サービスの利用に必要な環境は何ですか？",
11        answer:
12          "最新のWebブラウザ（Chrome、Safari、Firefox、Edge）があればご利用いただけます。インストールは不要で、インターネット接続環境のみで動作します。",
13      },
14      {
15        question: "無料プランはありますか？",
16        answer:
17          "はい。基本機能をすべて含む無料プランをご用意しています。プロジェクト数3件、ストレージ1GBまでご利用可能です。",
18      },
19      {
20        question: "導入までの期間はどのくらいですか？",
21        answer:
22          "アカウント登録から最短5分でご利用いただけます。チーム導入の場合も、初期設定を含め通常1営業日以内に完了します。",
23      },
24    ],
25  },
26  {
27    label: "料金・契約",
28    items: [
29      {
30        question: "年間契約の割引はありますか？",
31        answer:
32          "年間契約の場合、月額プランと比較して20%の割引が適用されます。いつでも月額プランに戻すことが可能です。",
33      },
34      {
35        question: "途中でプランを変更できますか？",
36        answer:
37          "はい、いつでもプランのアップグレード・ダウングレードが可能です。差額は日割りで計算されます。",
38      },
39      {
40        question: "解約時の手続きはどうなりますか？",
41        answer:
42          "設定画面からワンクリックで解約可能です。契約期間満了まではすべての機能をご利用いただけます。データのエクスポートも解約前にいつでも可能です。",
43      },
44    ],
45  },
46  {
47    label: "サポート",
48    items: [
49      {
50        question: "サポートの対応時間を教えてください",
51        answer:
52          "メールサポートは平日9:00〜18:00（JST）で対応しています。Proプラン以上では24時間チャットサポートもご利用いただけます。",
53      },
54      {
55        question: "専任のサポート担当はつきますか？",
56        answer:
57          "Enterpriseプランでは専任のカスタマーサクセスマネージャーが付き、導入支援から運用最適化まで伴走いたします。",
58      },
59      {
60        question: "ドキュメントやチュートリアルはありますか？",
61        answer:
62          "包括的なドキュメント、動画チュートリアル、サンプルプロジェクトをご用意しています。コミュニティフォーラムでも活発な情報交換が行われています。",
63      },
64    ],
65  },
66];
67
68export function FaqTabbed001() {
69  const [activeTab, setActiveTab] = useState(0);
70  const [openIndex, setOpenIndex] = useState<number | null>(0);
71
72  const handleTabChange = (index: number) => {
73    setActiveTab(index);
74    setOpenIndex(null);
75  };
76
77  return (
78    <section className="bg-background py-28">
79      <div className="mx-auto max-w-2xl px-4 sm:px-6 lg:px-8">
80        {/* ヘッダー */}
81        <div className="mb-16">
82          <div className="flex items-center gap-4">
83            <div className="h-px flex-1 bg-border/40" />
84            <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
85              FAQ
86            </p>
87            <div className="h-px flex-1 bg-border/40" />
88          </div>
89          <h2 className="mt-6 text-center text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
90            よくあるご質問
91          </h2>
92        </div>
93
94        {/* タブ */}
95        <div className="mb-12 flex items-center justify-center gap-1">
96          {categories.map((cat, index) => (
97            <button
98              key={cat.label}
99              onClick={() => handleTabChange(index)}
100              className={`relative px-4 py-2 text-xs tracking-[0.15em] transition-colors duration-200 ${
101                activeTab === index
102                  ? "text-foreground"
103                  : "text-muted-foreground/60 hover:text-muted-foreground"
104              }`}
105            >
106              {cat.label}
107              {activeTab === index && (
108                <span className="absolute bottom-0 left-1/2 h-px w-6 -translate-x-1/2 bg-foreground" />
109              )}
110            </button>
111          ))}
112        </div>
113
114        {/* FAQ リスト */}
115        <div className="divide-y divide-border/60">
116          {categories[activeTab].items.map((faq, index) => (
117            <div key={index} className="py-6">
118              <button
119                className="flex w-full items-start justify-between gap-8 text-left"
120                onClick={() =>
121                  setOpenIndex(openIndex === index ? null : index)
122                }
123              >
124                <span className="text-sm font-light tracking-wide text-foreground">
125                  {faq.question}
126                </span>
127                <span className="mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center">
128                  <span
129                    className={`block h-px w-3 bg-muted-foreground transition-transform duration-300 ${
130                      openIndex === index ? "rotate-0" : "rotate-0"
131                    }`}
132                  />
133                  <span
134                    className={`absolute block h-px w-3 bg-muted-foreground transition-transform duration-300 ${
135                      openIndex === index ? "rotate-0" : "rotate-90"
136                    }`}
137                  />
138                </span>
139              </button>
140              <div
141                className={`overflow-hidden transition-all duration-300 ${
142                  openIndex === index ? "max-h-96 pt-4" : "max-h-0"
143                }`}
144              >
145                <p className="text-sm font-light leading-relaxed tracking-wide text-muted-foreground">
146                  {faq.answer}
147                </p>
148              </div>
149            </div>
150          ))}
151        </div>
152
153        {/* フッター */}
154        <div className="mt-14 text-center">
155          <div className="mx-auto mb-6 flex items-center justify-center gap-3">
156            <div className="h-1 w-1 rounded-full bg-foreground/20" />
157            <div className="h-1 w-1 rounded-full bg-foreground/20" />
158            <div className="h-1 w-1 rounded-full bg-foreground/20" />
159          </div>
160          <p className="text-xs tracking-[0.15em] text-muted-foreground/60">
161            お探しの回答が見つからない場合は{" "}
162            <a
163              href="#"
164              className="text-foreground underline underline-offset-4 transition-colors hover:text-muted-foreground"
165            >
166              お問い合わせ
167            </a>{" "}
168            ください
169          </p>
170        </div>
171      </div>
172    </section>
173  );
174}