アコーディオンFAQ

1"use client";
2
3import { useState } from "react";
4
5export function FaqAccordion001() {
6  const [openIndex, setOpenIndex] = useState<number | null>(0);
7
8  const faqs = [
9    {
10      question: "How do I get started?",
11      answer:
12        "Getting started is easy! Simply sign up for a free account, and you'll have access to all our basic features. Our onboarding wizard will guide you through the setup process step by step.",
13    },
14    {
15      question: "What payment methods do you accept?",
16      answer:
17        "We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for annual plans. All payments are processed securely through Stripe.",
18    },
19    {
20      question: "Can I cancel my subscription anytime?",
21      answer:
22        "Yes, you can cancel your subscription at any time. If you cancel, you'll continue to have access to your paid features until the end of your current billing period.",
23    },
24    {
25      question: "Do you offer a free trial?",
26      answer:
27        "Absolutely! We offer a 14-day free trial with full access to all Pro features. No credit card required to start your trial.",
28    },
29    {
30      question: "Is my data secure?",
31      answer:
32        "Security is our top priority. We use bank-grade encryption (AES-256) for all data, and our infrastructure is SOC 2 Type II certified. We never share your data with third parties.",
33    },
34  ];
35
36  return (
37    <section className="bg-zinc-50 py-24 dark:bg-zinc-950">
38      <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
39        {/* ヘッダー */}
40        <div className="mb-12 text-center">
41          <h2 className="mb-4 text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-4xl">
42            Frequently asked questions
43          </h2>
44          <p className="text-lg text-zinc-600 dark:text-zinc-400">
45            Everything you need to know about the product.
46          </p>
47        </div>
48
49        {/* FAQ アコーディオン */}
50        <div className="space-y-4">
51          {faqs.map((faq, index) => (
52            <div
53              key={index}
54              className="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900"
55            >
56              <button
57                className="flex w-full items-center justify-between px-6 py-4 text-left"
58                onClick={() =>
59                  setOpenIndex(openIndex === index ? null : index)
60                }
61              >
62                <span className="font-medium text-zinc-900 dark:text-zinc-100">
63                  {faq.question}
64                </span>
65                <svg
66                  className={`h-5 w-5 shrink-0 text-zinc-500 transition-transform ${
67                    openIndex === index ? "rotate-180" : ""
68                  }`}
69                  fill="none"
70                  viewBox="0 0 24 24"
71                  stroke="currentColor"
72                >
73                  <path
74                    strokeLinecap="round"
75                    strokeLinejoin="round"
76                    strokeWidth={2}
77                    d="M19 9l-7 7-7-7"
78                  />
79                </svg>
80              </button>
81              <div
82                className={`overflow-hidden transition-all ${
83                  openIndex === index ? "max-h-96" : "max-h-0"
84                }`}
85              >
86                <p className="px-6 pb-4 text-zinc-600 dark:text-zinc-400">
87                  {faq.answer}
88                </p>
89              </div>
90            </div>
91          ))}
92        </div>
93
94        {/* サポートCTA */}
95        <div className="mt-12 rounded-2xl bg-gradient-to-r from-violet-500/10 to-cyan-500/10 p-8 text-center dark:from-violet-500/20 dark:to-cyan-500/20">
96          <p className="mb-2 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
97            Still have questions?
98          </p>
99          <p className="mb-4 text-zinc-600 dark:text-zinc-400">
100            Can&apos;t find the answer you&apos;re looking for? Reach out to our
101            support team.
102          </p>
103          <button className="inline-flex h-10 items-center justify-center rounded-md bg-zinc-900 px-6 font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200">
104            Contact Support
105          </button>
106        </div>
107      </div>
108    </section>
109  );
110}