// Section 10 — FAQ
// 5 Q&A items in accordion form. First item open by default. Each item:
// monospace index, JP question, +/− toggle, JP answer body on expand.
const FaqSection = () => {
  const items = [
    {
      q: '導入までにどのくらい期間が必要ですか？',
      a: '無料診断から本番稼働まで、最短8週間が目安です。まずは無料相談でヒアリングを行い、現場まで伺い現状の課題を整理します。組織規模やデータ連携の複雑さに応じて、12〜16週間になるケースもあります。',
    },
    {
      q: '社内の機密情報をAIに渡しても本当に大丈夫ですか？',
      a: '貴社のクラウドアカウント (AWS / Azure / GCP) 内、もしくはオンプレ環境内に閉じた構成での実装が可能です。学習データとして再利用される設計にはせず、推論ログも貴社管理下で保持します。NDA締結のうえ、社内規程に合わせた取り扱い設計を提案します。',
    },
    {
      q: 'AIに詳しい社員がいないのですが、内製化は本当に可能ですか？',
      a: '可能です。むしろ "AIにこれから取り組む" 段階の会社こそ、私たちの内製化伴走プログラムが効きます。事業や業務をよく知っている社員2〜4名を選抜していただければ、6ヶ月の伴走で社内エージェントを自分で改修・拡張できる状態を目指します。',
    },
    {
      q: '費用感を教えてください。',
      a: 'サービスにより異なります。カスタマイズのアプリケーションのため高額な費用になるのではと感じるかもしれませんが、他社に比べハードルの低い金額感でご提供が可能です。また、サブスク形式での費用負担など、お客様の状況に合わせて調整します。まずは無料診断にて、貴社の業務に効くAIの優先順位と概算予算をお知らせください。',
    },
    {
      q: 'まだAIで何ができるか分からない状態ですが相談していいですか？',
      a: 'はい、その段階こそ最初にお話しいただきたいです。「何ができるか」より、「貴社のどの業務が最も詰まっているか」から議論を始めます。30分の無料相談で、AIに向く業務とそうでない業務の見極めまでご一緒します。',
    },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section
      id="faq"
      data-screen-label="10 FAQ"
      className="ej-root"
      style={{ width: 1440, padding: '160px 64px', background: 'var(--off-white)' }}
    >
      <FadeIn>
        <SectionHead
          num="06"
          titleEn="THE QUESTIONS."
          titleJp=""
          accent="sky"
          lead={<>導入前にお客様からよくいただくご質問をまとめました。<br />掲載のないご質問は、無料相談でお気軽にお問い合わせください。</>}
        />
      </FadeIn>

      <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 64, alignItems: 'start' }}>
        <FadeIn>
          <div>
            <div className="ej-mono" style={{ fontSize: 12, color: 'var(--ink-60)', marginBottom: 14 }}>
              ／ INDEX
            </div>
            <div className="ej-en" style={{ fontSize: 56, color: 'var(--navy)', letterSpacing: '-0.03em', lineHeight: 1, fontWeight: 400 }}>
              {String(items.length).padStart(2, '0')}
            </div>
            <div className="ej-jp" style={{ fontSize: 12, color: 'var(--ink-60)', marginTop: 8 }}>
              項目
            </div>
          </div>
        </FadeIn>

        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <FadeIn key={i} delay={i * 60}>
                <div
                  style={{
                    borderTop: i === 0 ? '1px solid var(--rule)' : 'none',
                    borderBottom: '1px solid var(--rule)',
                    background: isOpen ? 'white' : 'transparent',
                    transition: 'background 0.25s',
                  }}
                >
                  <button
                    type="button"
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{
                      width: '100%',
                      padding: '28px 32px',
                      background: 'transparent',
                      border: 'none',
                      cursor: 'pointer',
                      display: 'grid',
                      gridTemplateColumns: '60px 1fr 32px',
                      gap: 24,
                      alignItems: 'center',
                      textAlign: 'left',
                      fontFamily: 'var(--font-jp)',
                    }}
                  >
                    <span className="ej-mono" style={{ fontSize: 12, color: 'var(--teal)' }}>
                      Q.{String(i + 1).padStart(2, '0')}
                    </span>
                    <span style={{ fontSize: 16, color: 'var(--navy)', fontWeight: 600, lineHeight: 1.6 }}>
                      {it.q}
                    </span>
                    <span
                      style={{
                        width: 32, height: 32, borderRadius: '50%',
                        background: isOpen ? 'var(--navy)' : 'var(--off-white)',
                        color: isOpen ? 'white' : 'var(--navy)',
                        border: '1px solid var(--rule)',
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        transition: 'all .2s',
                      }}
                    >
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                        <path d="M2 6 L10 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
                        {!isOpen && <path d="M6 2 L6 10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />}
                      </svg>
                    </span>
                  </button>

                  <div
                    style={{
                      display: 'grid',
                      gridTemplateRows: isOpen ? '1fr' : '0fr',
                      transition: 'grid-template-rows .35s ease',
                    }}
                  >
                    <div style={{ overflow: 'hidden' }}>
                      <div
                        style={{
                          padding: '0 32px 32px 116px',
                        }}
                      >
                        <p className="ej-jp" style={{ margin: 0, fontSize: 14, lineHeight: 1.95, color: 'var(--ink)', maxWidth: 720 }}>
                          {it.a}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </FadeIn>
            );
          })}
        </div>
      </div>
    </section>
  );
};

window.FaqSection = FaqSection;