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

  // e-Gov 古物営業法（昭和二十四年法律第百八号）原文
  const EGOV_URL = 'https://laws.e-gov.go.jp/law/323AC0000000108';

  // 本文セクション（条文に忠実な要点解説）
  const sections = [
    {
      h: '標識の掲示（第12条）',
      lead: '営業所などごとに、許可業者であることが一目で分かる標識を出す義務です。',
      points: [
        '営業所・古物市場・露店ごとに、公衆の見やすい場所へ標識を掲示します。',
        '標識の様式（色・寸法・記載事項）は国家公安委員会規則で定められています。',
        'インターネットで取引する場合は、ホームページに氏名または名称・許可をした公安委員会の名称・許可証番号を表示します。',
      ],
    },
    {
      h: '管理者の選任（第13条）',
      lead: '営業所ごとに、現場の責任者となる「管理者」を1人選ぶ義務です。',
      points: [
        '営業所または古物市場ごとに、管理者を1人選任します。',
        '一定の欠格事由（例：成年被後見人など、未成年者で一定の場合）に当たる人は管理者になれません。',
        '管理者には、取り扱う古物が不正品かどうかを判断するために必要な知識・技術・経験を得させるよう努める必要があります（努力義務）。',
      ],
    },
    {
      h: '取引相手の確認＝本人確認義務（第15条）',
      lead: '古物を買い受けるときなどに、相手が誰かを確かめる義務です。盗品の流通を防ぐための中心的なルールです。',
      points: [
        '相手方の住所・氏名・職業・年齢を確認します。',
        '確認の方法は、本人確認書類の提示を受ける、署名文書の交付を受けるなど、法令で定められた方法によります。',
        '対面でない取引（インターネット等）には、それに応じた確認方法が定められています。',
        '取引の金額が少額で定型的な場合など、確認を要しない例外も法令で定められています。',
      ],
    },
    {
      h: '不正品の申告義務（第15条第3項）',
      lead: '取り扱う古物が盗品など不正品の疑いがあると気づいたら、警察へ申告する義務です。',
      points: [
        '買い受けようとする古物について、不正品の疑いがあると認めたときは、ただちに警察官へ申告します。',
        '「あやしい」と思った時点で動くことが求められ、確証までは要しません。',
      ],
    },
    {
      h: '帳簿等への記録・保存（第16条〜第18条）',
      lead: '取引の内容を帳簿などに記録し、一定期間保存する義務です。後から取引をたどれるようにするためのルールです。',
      points: [
        '古物の取引（受け入れ・払い出し）について、取引の年月日・古物の品目と数量・特徴・相手方の住所氏名職業年齢・確認の方法などを記録します。',
        '帳簿に代えて、電磁的方法（電子データ）で記録することも認められています。',
        '帳簿等は、最終の記載をした日から3年間保存します。',
        '帳簿等を亡失・き損したときは、ただちに営業所の所在地を管轄する警察署長へ届け出ます。',
      ],
    },
    {
      h: '品触れ（第19条）',
      lead: '警察から「この品物を探している」という通知（品触れ）が来たときの対応義務です。',
      points: [
        '警察署長から品触れを受けたときは、その書面に到達の日付を記載し、到達の日から6か月間保存します。',
        '品触れに該当する古物を所持している（または品触れ後に取得した）ときは、ただちに警察官へその旨を届け出ます。',
      ],
    },
    {
      h: '差止め（第21条）',
      lead: '盗品等の疑いがある古物について、警察が一時的に処分を止められる仕組みです。',
      points: [
        '取り扱う古物について盗品等であると疑うに足りる相当な理由があるとき、警察本部長等は、被害者等の利益を守るため、30日以内の期間を定めてその古物の保管を命じることができます。',
        '命令を受けた古物商は、その期間中、対象の古物を勝手に処分せず保管しておく必要があります。',
      ],
    },
  ];

  // 練習問題（条文に忠実に新規作成）
  const quiz = [
    {
      q: '【問1】古物商は、営業所に何を掲示しなければならないでしょうか。また、その目的は何でしょうか。',
      a: '営業所ごとに、公衆の見やすい場所へ「標識」を掲示しなければなりません（第12条）。標識には許可をした公安委員会の名称や許可証番号などが記され、その営業所が正規の許可を受けた古物商であることを、お客さまや関係者が一目で確認できるようにすることが目的です。標識の様式（色・寸法・記載事項）は国家公安委員会規則で定められており、耐久性のある材質で作ることとされています。',
    },
    {
      q: '【問2】古物商が古物を買い受けるとき、相手方について確認しなければならない事項として、第15条が定めるものはどれでしょうか。',
      a: '相手方の「住所・氏名・職業・年齢」の4つです。これは盗品などの不正品の流通を防ぐため、誰から古物を受け入れたのかを後から確認できるようにする趣旨です。確認は、本人確認書類の提示を受けるなど、法令で定められた方法で行う必要があります。なお、対価の総額が規則で定める金額に満たない少額の取引や、自分が売った物をその相手方から買い戻すときなどは、確認義務が免除されます。',
    },
    {
      q: '【問3】取引しようとする古物について、盗品など不正品の疑いがあると気づいたとき、古物商はどうしなければならないでしょうか。',
      a: 'ただちにその旨を警察官へ申告しなければなりません（不正品の申告義務・第15条）。「あやしい」と思った時点で動くことが求められ、確証までは必要ありません。盗品の流通を早い段階で止め、被害品の発見・回復につなげるための大切な義務です。',
    },
    {
      q: '【問4】古物商が作成した帳簿等は、いつから数えて何年間保存しなければならないでしょうか。',
      a: '最終の記載をした日から「3年間」保存します（第18条）。帳簿には、取引の年月日・古物の品目と数量・特徴・相手方の住所氏名職業年齢・確認の方法などを記録します。帳簿に代えて電磁的方法（電子データ）で記録することも認められています。また、帳簿等を亡失・き損したときは、ただちに営業所の所在地を管轄する警察署長へ届け出る必要があります。',
    },
    {
      q: '【問5】警察署長から「品触れ」を受け取った古物商は、どのように対応する必要があるでしょうか。',
      a: '品触れの書面に到達の日付を記載したうえで、到達の日から6か月間これを保存しなければなりません（第19条）。また、品触れに該当する古物を所持していたり、その後受け取ったりしたときは、ただちにその旨を警察官へ届け出る必要があります。品触れは、被害品の特徴を警察が古物商に通知し、発見への協力を求める手続です。',
    },
    {
      q: '【問6】警察から古物の「差止め（保管命令）」を受けた場合、どのくらいの期間保管することになるでしょうか。',
      a: '盗品等であると疑うに足りる相当な理由があるとき、警察本部長等は、被害者等の利益を守るため、30日以内の期間を定めてその古物の保管を命ずることができます（第21条）。命令を受けた古物商は、その期間中、対象の古物を勝手に処分せず保管しておかなければなりません。',
    },
  ];

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

      {/* タイトル */}
      <section style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '20px 24px 8px' }}>
        <Badge variant="brand">第3章</Badge>
        <h1 style={{
          margin: '16px 0 0', fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 40, lineHeight: 1.25, letterSpacing: '-0.02em', color: 'var(--text-primary)', textWrap: 'balance',
        }}>
          古物営業法 第3章 営業
        </h1>
        <p style={{ margin: '18px 0 0', fontSize: 17, lineHeight: 1.85, color: 'var(--text-secondary)' }}>
          第3章「営業」は、許可を受けた古物商が日々の営業のなかで守るべきルールを定めた、実務上もっとも大切な章です。
          標識の掲示や管理者の選任といった体制づくりから、取引相手の本人確認・不正品の申告・帳簿への記録と保存まで、
          盗品の流通を防ぐための具体的な義務がまとめられています。ここでは主な条文の要点を、やさしい言葉で整理します。
        </p>
      </section>

      {/* 本文 */}
      <section style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '40px 24px 8px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          {sections.map((s) => (
            <div key={s.h}>
              <h2 style={{
                margin: 0, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22,
                color: 'var(--green-700)', lineHeight: 1.4,
              }}>{s.h}</h2>
              <p style={{ margin: '10px 0 0', fontSize: 16, lineHeight: 1.85, color: 'var(--text-secondary)' }}>{s.lead}</p>
              <ul style={{ margin: '12px 0 0', paddingLeft: 22, 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>
            </div>
          ))}
        </div>
      </section>

      {/* e-Gov 原文リンク */}
      <section style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '36px 24px 8px' }}>
        <Card variant="outlined" padding="md">
          <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: 'var(--text-primary)' }}>
            条文の原文を読む
          </h3>
          <p style={{ margin: '8px 0 14px', fontSize: 15, lineHeight: 1.8, color: 'var(--text-secondary)' }}>
            正確な文言・最新の改正内容は、法令データの一次情報である e-Gov 法令検索でご確認ください。
          </p>
          <a href={EGOV_URL} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
            <Button variant="secondary" iconRight="↗">e-Gov で古物営業法を見る</Button>
          </a>
        </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 }}>
          {quiz.map((f, 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)', lineHeight: 1.6 }}>{f.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.85, color: 'var(--text-secondary)' }}>{f.a}</p>
                )}
              </Card>
            );
          })}
        </div>
      </section>
    </main>
  );
}
window.KenteiChapter3 = KenteiChapter3;
