// 古物営業法検定 — 第2章「許可等」解説ページ
function KenteiChapter2({ onNavigate }) {
  const { Button, Card, SectionHeading, Badge } = window.DesignSystem_36acde;
  const [open, setOpen] = React.useState(-1);

  const EGOV_URL = 'https://laws.e-gov.go.jp/law/323AC0000000108';

  // 練習問題（解答は条文に忠実に新規作成）
  const quizzes = [
    {
      q: '問1：複数の都道府県に営業所を置いて古物商を営む場合、許可はどのように取得すればよいですか。',
      a: '営業所を置く都道府県ごとに、その地域を管轄する公安委員会の許可を受ける必要があります。同じ都道府県の中に営業所が複数あっても許可は一つで足りますが、別の都道府県に営業所を設けるときは、その都道府県の公安委員会の許可を改めて受けなければなりません（古物営業法第3条）。',
    },
    {
      q: '問2：氏名や住所など、許可申請の内容に変更が生じたときは、いつまでに手続をする必要がありますか。',
      a: '変更があった日から原則として14日以内に、公安委員会へ変更の届出をします。法人の登記事項証明書など書類の用意が必要な変更については20日以内とされる場合があります。また、氏名・名称・住所など許可証の記載事項が変わったときは、あわせて許可証の書換えを申請します（古物営業法第7条）。',
    },
  ];

  return (
    <main style={{ background: 'var(--color-bg)' }}>
      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '40px 24px 96px' }}>

        {/* 戻る */}
        <Button variant="ghost" iconLeft="←" onClick={() => onNavigate('kentei')}>
          検定トップへ戻る
        </Button>

        {/* タイトル */}
        <div style={{ marginTop: 28 }}>
          <Badge variant="brand">第2章</Badge>
          <h1 style={{
            margin: '16px 0 0', fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 40, lineHeight: 1.3, letterSpacing: '-0.02em', color: 'var(--text-primary)', textWrap: 'balance',
          }}>
            古物営業法 第2章 許可等
          </h1>
          <p style={{ margin: '20px 0 0', fontSize: 17, lineHeight: 1.9, color: 'var(--text-secondary)' }}>
            第2章は、古物商や古物市場主として営業を始めるための「許可」のしくみを定めた部分です。
            だれが許可を出すのか、許可を受けられない人（欠格事由）とはどんな人か、許可証の交付や書換え、
            変更があったときの届出、そして名義貸しの禁止までを、要点を絞ってやさしく解説します。
          </p>
        </div>

        {/* 1. 許可申請 */}
        <section style={{ marginTop: 56 }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: 'var(--text-primary)', margin: '0 0 14px' }}>
            1. 許可の申請（だれから許可を受けるのか）
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.95, color: 'var(--text-secondary)', margin: '0 0 14px' }}>
            古物商・古物市場主として営業するには、営業所のある場所を管轄する公安委員会の許可が必要です。
            無許可で営業することはできません。許可は次のような考え方で取得します。
          </p>
          <ul style={{ margin: 0, paddingLeft: 22, fontSize: 16, lineHeight: 2, color: 'var(--text-secondary)' }}>
            <li>許可を出すのは、営業所の所在地を管轄する<strong>都道府県の公安委員会</strong>です。</li>
            <li>同じ都道府県の中なら、営業所がいくつあっても許可は<strong>一つ</strong>で足ります。</li>
            <li>別の都道府県に営業所を設けるときは、その都道府県の公安委員会の許可を<strong>あらためて</strong>受けます。</li>
            <li>申請のときは、営業所ごとに古物の取引を適正に管理する<strong>管理者</strong>を定めます。</li>
          </ul>
        </section>

        {/* 2. 欠格事由 */}
        <section style={{ marginTop: 48 }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: 'var(--text-primary)', margin: '0 0 14px' }}>
            2. 許可を受けられない人（欠格事由）
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.95, color: 'var(--text-secondary)', margin: '0 0 14px' }}>
            一定の事情がある人には、公安委員会は許可を与えてはならないと定められています。これを欠格事由といいます。
            代表的なものは次のとおりです。
          </p>
          <ul style={{ margin: 0, paddingLeft: 22, fontSize: 16, lineHeight: 2, color: 'var(--text-secondary)' }}>
            <li>破産手続開始の決定を受けて、まだ復権していない人</li>
            <li>一定の罪などで刑に処せられ、執行が終わってから<strong>5年</strong>を経過していない人</li>
            <li>住居の定まっていない人</li>
            <li>古物営業法に基づく許可を取り消されてから<strong>5年</strong>を経過していない人</li>
            <li>営業に関し成年者と同一の能力を有しない未成年者（一定の場合を除く）</li>
            <li>営業所ごとに、ふさわしい管理者を置くことができないと認められる場合</li>
            <li>法人の場合、その役員のなかに上記に当たる人がいるとき</li>
          </ul>
          <p style={{ fontSize: 15, lineHeight: 1.9, color: 'var(--text-muted)', margin: '14px 0 0' }}>
            ※ それぞれの要件は条文で細かく定められています。正確な内容は必ず原文をご確認ください。
          </p>
        </section>

        {/* 3. 許可証 */}
        <section style={{ marginTop: 48 }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: 'var(--text-primary)', margin: '0 0 14px' }}>
            3. 許可証の交付・書換え・再交付
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.95, color: 'var(--text-secondary)', margin: '0 0 14px' }}>
            許可がおりると、公安委員会から許可証が交付されます。許可証は営業者であることを示す大切な書類で、
            取扱いについても決まりがあります。
          </p>
          <ul style={{ margin: 0, paddingLeft: 22, fontSize: 16, lineHeight: 2, color: 'var(--text-secondary)' }}>
            <li><strong>交付</strong>：許可を受けると許可証が交付されます。</li>
            <li><strong>書換え</strong>：氏名・名称・住所など許可証の記載事項が変わったときは、書換えを申請します。</li>
            <li><strong>再交付</strong>：許可証を失ったり、いちじるしく汚したりしたときは、再交付を申請できます。</li>
            <li><strong>返納</strong>：許可が取り消されたときや、営業をやめたときなどは、許可証を返納します。</li>
          </ul>
        </section>

        {/* 4. 変更の届出 */}
        <section style={{ marginTop: 48 }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: 'var(--text-primary)', margin: '0 0 14px' }}>
            4. 変更の届出
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.95, color: 'var(--text-secondary)', margin: '0 0 14px' }}>
            許可申請のときに届け出た内容に変更が生じたら、その都度、公安委員会へ届け出ます。届出には期限があります。
          </p>
          <ul style={{ margin: 0, paddingLeft: 22, fontSize: 16, lineHeight: 2, color: 'var(--text-secondary)' }}>
            <li>変更があった日から原則として<strong>14日以内</strong>に届け出ます。</li>
            <li>登記事項証明書など書類の添付が必要な変更については、<strong>20日以内</strong>とされる場合があります。</li>
            <li>取引にホームページを使う場合は、その<strong>URL</strong>も届出の対象になります。</li>
            <li>許可証の記載事項が変わるときは、変更届とあわせて許可証の書換えも行います。</li>
          </ul>
        </section>

        {/* 5. 名義貸しの禁止 */}
        <section style={{ marginTop: 48 }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: 'var(--text-primary)', margin: '0 0 14px' }}>
            5. 名義貸しの禁止
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.95, color: 'var(--text-secondary)', margin: 0 }}>
            許可を受けた人が、自分の名義を他人に使わせて、その他人に古物営業を営ませることは禁止されています。
            これを名義貸しといいます。許可は本人に対する信頼を前提に与えられるものなので、名義だけを貸す行為は認められません。
          </p>
        </section>

        {/* e-Gov 原文リンク */}
        <Card variant="outlined" padding="md" style={{ marginTop: 48 }}>
          <h3 style={{ margin: '0 0 8px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: 'var(--text-primary)' }}>
            条文の原文を確認する
          </h3>
          <p style={{ margin: '0 0 14px', fontSize: 15, lineHeight: 1.85, color: 'var(--text-secondary)' }}>
            このページは要点をやさしくまとめたものです。正確な条文の表現や最新の改正内容は、
            政府の法令検索サイト e-Gov でご確認ください。
          </p>
          <a href={EGOV_URL} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
            <Button variant="secondary" size="sm" iconRight="↗">e-Govで古物営業法の原文を見る</Button>
          </a>
        </Card>

        {/* 練習問題 */}
        <section style={{ marginTop: 64 }}>
          <SectionHeading eyebrow="理解度チェック" title="練習問題" align="left" />
          <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {quizzes.map((item, i) => {
              const isOpen = open === i;
              return (
                <Card key={i} variant="outlined" padding="none">
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{
                      width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                      padding: '18px 22px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left',
                    }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: 'var(--text-primary)' }}>{item.q}</span>
                    <span style={{
                      flexShrink: 0, width: 28, height: 28, borderRadius: '50%',
                      background: 'var(--green-100)', color: 'var(--green-700)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700,
                      transform: isOpen ? 'rotate(45deg)' : 'none', transition: 'transform 200ms',
                    }}>＋</span>
                  </button>
                  {isOpen && (
                    <p style={{ margin: 0, padding: '0 22px 20px', fontSize: 15, lineHeight: 1.9, color: 'var(--text-secondary)' }}>
                      {item.a}
                    </p>
                  )}
                </Card>
              );
            })}
          </div>
        </section>

      </div>
    </main>
  );
}
window.KenteiChapter2 = KenteiChapter2;