2カラムFAQ

1"use client";
2
3import { useState } from "react";
4
5export function FaqTwoColumn001() {
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 create a free account, and you'll have access to our starter plan immediately. No credit card required.",
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.",
18    },
19    {
20      question: "Can I change my plan later?",
21      answer:
22        "Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle.",
23    },
24    {
25      question: "Is there a free trial?",
26      answer:
27        "Yes! All paid plans come with a 14-day free trial. You can explore all features before committing.",
28    },
29    {
30      question: "What kind of support do you offer?",
31      answer:
32        "We offer 24/7 email support for all plans. Pro and Enterprise plans also include priority support and dedicated account managers.",
33    },
34    {
35      question: "Can I cancel anytime?",
36      answer:
37        "Absolutely. You can cancel your subscription at any time. If you cancel, you'll still have access until the end of your billing period.",
38    },
39  ];
40
41  return (
42    <section className="bg-background py-24">
43      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
44        <div className="grid grid-cols-1 gap-16 lg:grid-cols-2">
45          {/* Left Column - Header */}
46          <div className="lg:sticky lg:top-24 lg:self-start">
47            <p className="text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground">
48              Support
49            </p>
50            <h2 className="mt-4 text-3xl font-light tracking-wide text-foreground sm:text-4xl">
51              Frequently Asked Questions
52            </h2>
53            <p className="mt-6 text-lg leading-relaxed tracking-wide text-muted-foreground">
54              Can&apos;t find the answer you&apos;re looking for? Reach out to
55              our customer support team.
56            </p>
57            <a
58              href="#"
59              className="mt-10 inline-flex items-center gap-3 border border-border px-8 py-3 text-sm font-medium uppercase tracking-[0.15em] text-foreground transition-all hover:border-foreground hover:bg-foreground hover:text-background"
60            >
61              Contact Support
62              <svg
63                className="h-4 w-4"
64                fill="none"
65                stroke="currentColor"
66                viewBox="0 0 24 24"
67              >
68                <path
69                  strokeLinecap="round"
70                  strokeLinejoin="round"
71                  strokeWidth={1.5}
72                  d="M14 5l7 7m0 0l-7 7m7-7H3"
73                />
74              </svg>
75            </a>
76          </div>
77
78          {/* Right Column - FAQ Items */}
79          <div className="space-y-3">
80            {faqs.map((faq, index) => (
81              <div
82                key={index}
83                className="border border-border transition-colors hover:border-muted-foreground/50"
84              >
85                <button
86                  className="flex w-full items-center justify-between px-6 py-5 text-left"
87                  onClick={() =>
88                    setOpenIndex(openIndex === index ? null : index)
89                  }
90                >
91                  <span className="font-light tracking-wide text-foreground">
92                    {faq.question}
93                  </span>
94                  <span
95                    className={`ml-4 flex-shrink-0 transition-transform duration-300 ${
96                      openIndex === index ? "rotate-180" : ""
97                    }`}
98                  >
99                    <svg
100                      className="h-4 w-4 text-muted-foreground"
101                      fill="none"
102                      stroke="currentColor"
103                      viewBox="0 0 24 24"
104                    >
105                      <path
106                        strokeLinecap="round"
107                        strokeLinejoin="round"
108                        strokeWidth={1.5}
109                        d="M19 9l-7 7-7-7"
110                      />
111                    </svg>
112                  </span>
113                </button>
114                <div
115                  className={`overflow-hidden transition-all duration-300 ${
116                    openIndex === index ? "max-h-96" : "max-h-0"
117                  }`}
118                >
119                  <p className="px-6 pb-5 text-muted-foreground leading-relaxed tracking-wide">
120                    {faq.answer}
121                  </p>
122                </div>
123              </div>
124            ))}
125          </div>
126        </div>
127      </div>
128    </section>
129  );
130}