const { Section, SectionHeading, FaqItem } = window.NoahBOXDesignSystem_a2fe90;

const ITEMS = [
  { q: "電子帳簿保存法に対応していますか？", a: "はい。取引年月日・取引先・取引金額での検索要件に対応し、可視性の確保も満たしています。" },
  { q: "大容量のファイルも送れますか？", a: "専用URLとパスワードを発行して共有できます。メール添付の容量制限を気にする必要はありません。" },
  { q: "導入までどのくらいかかりますか？", a: "お申し込みから最短で数営業日です。フォルダ構成や権限設定はサポート担当がご一緒に設計します。" },
  { q: "途中でプランを変更できますか？", a: "できます。ユーザー数・容量の追加もご相談ください。" },
];

function Faq() {
  return (
    <Section tone="tint">
      <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-8)" }}>
        <SectionHeading>よくある質問</SectionHeading>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)", maxWidth: 820, margin: "0 auto", width: "100%" }}>
          {ITEMS.map((it, i) => (
            <FaqItem key={it.q} question={it.q} answer={it.a} defaultOpen={i === 0} />
          ))}
        </div>
      </div>
    </Section>
  );
}
Object.assign(window, { Faq });