// 古物営業法 検定 — 第4章「監督」解説ページ
// 条文の要点を平易に解説。原文はe-Gov（https://laws.e-gov.go.jp/law/323AC0000000108）参照。
function KenteiChapter4({ onNavigate }) {
  const { Button, Card, SectionHeading, Badge } = window.DesignSystem_36acde;
  const [quizOpen, setQuizOpen] = React.useState(-1);

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

  // 解説セクション（見出し＋敬体＋要点の箇条書き）
  const sections = [
    {
      art: '第22条',
      title: '立入り及び調査',
      lead: '警察職員が、営業所などに立ち入って古物や帳簿を確認できる仕組みです。盗品の流通を早期に発見することを目的としています。',
      points: [
        '警察職員は、必要があると認めるときに、営業時間中、古物商の営業所、古物の保管場所、古物市場、競り売りの場所などに立ち入ることができます。',
        '立ち入った際は、取り扱う古物や、帳簿等（取引の記録が表示された電磁的記録を含む）を検査し、関係者に質問することができます。',
        '立入りを行う警察職員は、身分を証明する証票を携帯し、関係者にこれを提示しなければなりません。',
        '警察本部長等は、必要があると認めるときは、古物商・古物市場主・古物競りあっせん業者から、盗品等に関し必要な報告を求めることができます。',
      ],
    },
    {
      art: '第23条',
      title: '指示',
      lead: '法令違反や、盗品の売買防止・被害者保護に支障が生じるおそれがあるときに、公安委員会が「こう改善しなさい」と指示できる制度です。',
      points: [
        '指示を出すのは公安委員会で、対象は古物商・古物市場主やその代理人等です。',
        'この法律やこれに基づく命令に違反した場合のほか、古物営業に関し他の法令に違反した場合も対象になります。',
        'その違反により、盗品等の売買等の防止や速やかな発見が阻害されるおそれがあると認めるときに行われます。',
        '内容は、業務の適正な実施を確保するため必要な措置をとるべきことの指示で、営業停止や許可取消しより前の比較的軽い是正措置です。',
      ],
    },
    {
      art: '第24条',
      title: '営業の停止等',
      lead: '違反が重い場合や、指示に従わない場合などに、公安委員会が営業の停止や許可の取消しといった重い処分を行える規定です。',
      points: [
        '公安委員会は、許可の取消し、または6か月（六月）を超えない範囲での営業の全部もしくは一部の停止を命じることができます。',
        '対象となるのは、違反により盗品等の売買等の防止や速やかな発見が著しく阻害されるおそれがあると認めるとき、または法に基づく処分（第23条の指示を含む）に違反したときです。',
        '停止命令は「6か月以内」という上限がある点が、選択肢の正誤を問われやすいポイントです。',
        '許可の取消しは営業そのものを失わせる最も重い処分です。',
      ],
    },
    {
      art: '第25条',
      title: '聴聞の特例',
      lead: '営業停止などの不利益な処分を行う前に、相手方の言い分を聞く「聴聞」について、特別な手続きを定めています。',
      points: [
        '営業の停止を命じようとするときは、行政手続法の意見陳述の手続区分にかかわらず、必ず聴聞を行わなければなりません。',
        '聴聞の通知は、その期日の1週間前までに行い、あわせて聴聞の期日と場所を公示します。',
        '聴聞の期日における審理は、公開により行わなければならないとされています（通常の行政手続より手厚い特例です）。',
      ],
    },
  ];

  // 練習問題2問（解答は条文に忠実に新規作成）
  const quizzes = [
    {
      q: '問1　古物商に対する営業停止命令について、正しいものはどれですか。',
      a: '正解は「6か月を超えない範囲で命じられる」です。第24条は、公安委員会が許可の取消しのほか、6か月を超えない範囲内で営業の全部または一部の停止を命じることができると定めています。「期間の上限なく停止できる」「最長1年まで」などは誤りです。',
    },
    {
      q: '問2　警察職員による営業所への立入り（第22条）について、正しいものはどれですか。',
      a: '正解は「立入りは営業時間中に行われ、職員は身分を証明する証票を携帯し、関係者に提示しなければならない」です。第22条は、警察職員が必要と認めるとき営業時間中に営業所・保管場所・古物市場・競り売りの場所に立ち入り、古物や帳簿等を検査し関係者に質問できると定め、その際に証票の携帯・提示を義務づけています。「立入りに時間の制限はない」「証票は不要」などは誤りです。',
    },
  ];

  return (
    <main>
      <section style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '40px 24px 24px' }}>
        <Button variant="ghost" iconLeft="←" onClick={() => onNavigate('kentei')}>検定トップへ戻る</Button>
      </section>

      {/* タイトル */}
      <section style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '0 24px 8px' }}>
        <Badge variant="brand" dot>第4章</Badge>
        <h1 style={{ margin: '16px 0 0', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 40, lineHeight: 1.28, letterSpacing: '-0.02em', color: 'var(--text-primary)', textWrap: 'balance' }}>
          古物営業法 第4章 監督
        </h1>
        <p style={{ margin: '18px 0 0', fontSize: 17, lineHeight: 1.85, color: 'var(--text-secondary)' }}>
          第4章は、古物営業が適正に行われているかを行政（公安委員会・警察）がチェックし、必要に応じて是正させるための「監督」の仕組みを定めています。立入調査から、指示・営業停止・許可取消しといった処分、その手続きまでが含まれます。条文の要点を平易にまとめました。
        </p>
      </section>

      {/* 条文解説 */}
      <section style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '40px 24px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {sections.map((s) => (
            <Card key={s.art} variant="soft" padding="lg">
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <Badge variant="brand" size="sm">{s.art}</Badge>
                <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: 'var(--text-primary)' }}>{s.title}</h2>
              </div>
              <p style={{ margin: '14px 0 0', fontSize: 15, lineHeight: 1.85, color: 'var(--text-secondary)' }}>{s.lead}</p>
              <ul style={{ margin: '14px 0 0', padding: '0 0 0 20px', display: 'flex', flexDirection: 'column', gap: 8 }}>
                {s.points.map((p, i) => (
                  <li key={i} style={{ fontSize: 15, lineHeight: 1.8, color: 'var(--text-secondary)' }}>{p}</li>
                ))}
              </ul>
            </Card>
          ))}
        </div>
      </section>

      {/* e-Gov原文リンク */}
      <section style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '0 24px 8px' }}>
        <Card variant="outlined" padding="md">
          <p style={{ margin: 0, fontSize: 14, lineHeight: 1.8, color: 'var(--text-secondary)' }}>
            ここでは条文の要点を平易に解説しています。正確な条文（第22条〜第25条を含む全文）は、政府の法令データベース e-Gov でご確認ください。
          </p>
          <div style={{ marginTop: 14 }}>
            <a href={EGOV_URL} target="_blank" rel="noopener noreferrer"
              style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--green-700)', textDecoration: 'none' }}>
              e-Govで古物営業法の原文を見る ↗
            </a>
          </div>
        </Card>
      </section>

      {/* 練習問題（アコーディオン） */}
      <section style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '40px 24px 96px' }}>
        <SectionHeading eyebrow="理解度チェック" title="練習問題" align="center" />
        <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {quizzes.map((quiz, i) => {
            const open = quizOpen === i;
            return (
              <Card key={i} variant="outlined" padding="none">
                <button onClick={() => setQuizOpen(open ? -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)' }}>{quiz.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: open ? 'rotate(45deg)' : 'none', transition: 'transform 200ms' }}>＋</span>
                </button>
                {open && <p style={{ margin: 0, padding: '0 22px 20px', fontSize: 15, lineHeight: 1.85, color: 'var(--text-secondary)' }}>{quiz.a}</p>}
              </Card>
            );
          })}
        </div>
      </section>
    </main>
  );
}
window.KenteiChapter4 = KenteiChapter4;
