'init'

app/components/sections/FAQSection.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useState } from "react";
+import { Section } from "../Section";
+import { FAQ_CONFIG } from "@/config/course";
+
+export function FAQSection() {
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  return (
+    <Section>
+      <h2 className="mb-10 text-center text-xl font-bold sm:text-2xl md:text-3xl">
+        {FAQ_CONFIG.title}
+      </h2>
+      <div className="mx-auto max-w-2xl space-y-2">
+        {FAQ_CONFIG.items.map((item, i) => (
+          <div
+            key={i}
+            className="overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--card)] transition"
+          >
+            <button
+              type="button"
+              onClick={() => setOpenIndex(openIndex === i ? null : i)}
+              className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition hover:bg-[var(--muted)] sm:px-5"
+            >
+              <span className="font-medium">{item.q}</span>
+              <span
+                className={`shrink-0 text-[var(--muted-foreground)] transition-transform ${openIndex === i ? "rotate-180" : ""}`}
+              >
+                ▼
+              </span>
+            </button>
+            {openIndex === i && (
+              <div className="border-t border-[var(--border)] px-4 py-3 text-sm text-[var(--muted-foreground)] sm:px-5">
+                {item.a}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}