FAQアコーディオン

const faqs = [
  {
    q: "制作期間はどれくらいですか？",
    a: "コーポレートサイトで4〜6週間が目安です。ページ数や素材の準備状況によって前後します。",
  },
  {
    q: "公開後の運用もお願いできますか？",
    a: "はい。月額の保守運用プランで、更新代行・アクセス解析・改善提案まで伴走します。",
  },
  {
    q: "見積もりは無料ですか？",
    a: "無料です。現状の課題をお伺いし、最適なプランと概算をご提案します。",
  },
];

return function FaqAccordion() {
  return (
    <div className="w-full max-w-lg divide-y divide-gray-200 rounded-xl border border-gray-200 bg-white">
      {faqs.map((faq, i) => (
        <details key={faq.q} className="group px-5" open={i === 0}>
          <summary className="flex cursor-pointer list-none items-center justify-between gap-4 py-4 text-sm font-semibold text-gray-900 [&::-webkit-details-marker]:hidden">
            {faq.q}
            <svg
              className="size-4 shrink-0 text-amber-600 transition-transform duration-200 group-open:rotate-45"
              viewBox="0 0 20 20"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.8"
              aria-hidden="true"
            >
              <path d="M10 4v12M4 10h12" strokeLinecap="round" />
            </svg>
          </summary>
          <p className="pb-4 text-sm leading-relaxed text-gray-500">{faq.a}</p>
        </details>
      ))}
    </div>
  );
}