// 古物営業法検定 — 第1章 総則 解説ページ（旧サイト /1shou の移設・全面リライト版）
function KenteiChapter1({ 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';

  // 古物の13品目（古物営業法施行規則 別表第一に対応する区分を平易に表記）
  const items = [
    { name: '美術品類', note: '書画、彫刻、工芸品など' },
    { name: '衣類', note: '着物、洋服、敷物、布団など' },
    { name: '時計・宝飾品類', note: '時計、眼鏡、貴金属、宝石類など' },
    { name: '自動車', note: '車体のほか、タイヤやカーナビなどの部品も含む' },
    { name: '自動二輪車・原動機付自転車', note: '車体のほか、部品も含む' },
    { name: '自転車類', note: '自転車本体やその部品' },
    { name: '写真機類', note: 'カメラ、レンズ、双眼鏡、光学機器など' },
    { name: '事務機器類', note: 'パソコン、コピー機、レジスターなど' },
    { name: '機械工具類', note: '工作機械、電気機器、土木機械、家電など' },
    { name: '道具類', note: '家具、楽器、ゲームソフト、玩具、日用雑貨など' },
    { name: '皮革・ゴム製品類', note: 'バッグ、靴、毛皮類など' },
    { name: '書籍', note: '本、雑誌など' },
    { name: '金券類', note: '商品券、乗車券、郵便切手、収入印紙など' },
  ];

  // 古物営業の3類型
  const eigyo = [
    {
      label: '一号営業（古物商）',
      kyoka: '許可制',
      desc: '古物を売買・交換したり、委託を受けて売買・交換する営業です。いわゆるリサイクルショップや中古品の買取・販売を行う事業者がこれにあたります。',
    },
    {
      label: '二号営業（古物市場主）',
      kyoka: '許可制',
      desc: '古物商どうしが古物を売買・交換するための「市場（古物市場）」を開設・運営する営業です。一般のお客様ではなく、事業者間の取引の場を提供します。',
    },
    {
      label: '三号営業（古物競りあっせん業）',
      kyoka: '届出制',
      desc: 'インターネットオークションのように、古物の売り手と買い手を競りの方法であっせんする営業です。一・二号とは異なり、許可ではなく届出で営めます。',
    },
  ];

  // 練習問題（旧ページ /1shou の出題・解答を忠実に再現）
  const quizzes = [
    {
      q: '問1：古物営業法第2条第2項の「古物営業」について、誤った記述を選びましょう。',
      choices: [
        '古物営業には、古物商、古物市場（古物市場主）、古物競りあっせん業（古物競りあっせん業者）の3つがある。',
        '古物競りあっせん業は、インターネットオークションを利用して古物のオークションの場を提供する営業である。',
        '古物営業における一号営業、二号営業、三号営業は、いずれも公安委員会への許可制となっている。',
        '古物を買い取って販売する行為は、古物営業にあたる。',
      ],
      a: '誤っているのは「3」です。一号営業（古物商）と二号営業（古物市場主）は許可制ですが、三号営業（古物競りあっせん業者）は許可ではなく届出制となっています。1・2・4はいずれも正しい記述です。',
    },
    {
      q: '問2：古物営業法第2条第2項の「古物営業」について、誤った記述を選びましょう。',
      choices: [
        '古物を買い取り、使える部品などを取り出して売る行為は、古物営業にあたる。',
        '国内で買い取った古物を国外に輸出して売る行為は、古物営業にあたる。',
        '自分が海外で買ってきた物を売る行為は、古物営業にあたる。',
        '無償で引き取った古物を販売する行為は、古物営業にあたらない。',
      ],
      a: '誤っているのは「3」です。自分が使う目的などで海外で買ってきた「自分の物」を売る行為は、古物営業にはあたりません。1・2・4はいずれも正しい記述です。（補足：自分の物を売る行為は古物営業にあたりませんが、最初から転売目的で購入した物品を売る場合は古物営業に該当します。）',
    },
  ];

  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: 24 }}>
          <Badge variant="brand">第1章</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)',
          }}>
            古物営業法 第1章 総則
          </h1>
          <p style={{ margin: '18px 0 0', fontSize: 17, lineHeight: 1.9, color: 'var(--text-secondary)' }}>
            第1章では、この法律が何のためにあるのか（目的）と、「古物」「古物営業」とは何を指すのか（定義）が定められています。
            検定の土台になる大事な部分です。やさしく整理していきましょう。
          </p>
        </div>

        {/* 第1条 目的 */}
        <section style={{ marginTop: 56 }}>
          <SectionHeading eyebrow="第1条" title="この法律の目的" />
          <p style={{ margin: '20px 0 0', fontSize: 16, lineHeight: 2, color: 'var(--text-secondary)' }}>
            古物営業法は、中古品の取引にまぎれ込みやすい盗品（盗まれた品物）の売買を防いだり、もし出回ってしまっても早く見つけられるようにすることを目的としています。
            こうした仕組みによって、窃盗などの犯罪そのものを防ぎ、被害にあった方が品物を取り戻しやすくすることを目指しています。
          </p>
          <p style={{ margin: '16px 0 0', fontSize: 16, lineHeight: 2, color: 'var(--text-secondary)' }}>
            つまりこの法律は、中古品ビジネスを縛るためというより、<strong>盗品が流通しにくい健全な取引環境をつくるため</strong>のルールだと理解しておくとよいでしょう。
          </p>
        </section>

        {/* 第2条 定義 */}
        <section style={{ marginTop: 56 }}>
          <SectionHeading eyebrow="第2条" title="「古物」と「古物営業」の定義" />

          {/* 古物の定義 */}
          <h3 style={{ margin: '28px 0 0', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: 'var(--text-primary)' }}>
            古物とは
          </h3>
          <p style={{ margin: '14px 0 0', fontSize: 16, lineHeight: 2, color: 'var(--text-secondary)' }}>
            「古物」とは、<strong>一度使用された物品</strong>、または<strong>使用されていなくても、使用するために取引された物品</strong>を指します。
            これらに少し手入れ（軽微な修理やクリーニングなど）を加えたものも、引き続き古物に含まれます。
            新品でも一度誰かの手に渡って取引されたものは古物にあたる、という点がポイントです。
          </p>

          {/* 13品目 */}
          <h3 style={{ margin: '36px 0 0', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: 'var(--text-primary)' }}>
            古物の13品目
          </h3>
          <p style={{ margin: '14px 0 0', fontSize: 16, lineHeight: 2, color: 'var(--text-secondary)' }}>
            古物は、取り扱う品物の種類によって次の13の区分に分けられています。許可を受けるときは、どの品目を扱うかを申請します。
          </p>
          <ul style={{ margin: '20px 0 0', padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {items.map((it, i) => (
              <li key={it.name} style={{
                display: 'flex', gap: 12, alignItems: 'baseline',
                padding: '14px 16px', borderRadius: 'var(--radius-lg)',
                background: 'var(--green-50)', border: '1px solid var(--green-100)',
              }}>
                <span style={{ flexShrink: 0, fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 13, color: 'var(--green-600)' }}>
                  {String(i + 1).padStart(2, '0')}
                </span>
                <span>
                  <span style={{ fontWeight: 700, fontSize: 15, color: 'var(--text-primary)' }}>{it.name}</span>
                  <span style={{ display: 'block', marginTop: 2, fontSize: 13, lineHeight: 1.7, color: 'var(--text-secondary)' }}>{it.note}</span>
                </span>
              </li>
            ))}
          </ul>

          {/* 古物営業の3類型 */}
          <h3 style={{ margin: '40px 0 0', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: 'var(--text-primary)' }}>
            古物営業の3つの類型
          </h3>
          <p style={{ margin: '14px 0 0', fontSize: 16, lineHeight: 2, color: 'var(--text-secondary)' }}>
            「古物営業」は、その内容によって次の3つに分けられます。それぞれ必要な手続き（許可か届出か）が違う点に注意しましょう。
          </p>
          <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {eigyo.map((e) => (
              <Card key={e.label} variant="outlined" padding="md">
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: 'var(--text-primary)' }}>{e.label}</span>
                  <Badge variant={e.kyoka === '許可制' ? 'brand' : 'accent'} size="sm">{e.kyoka}</Badge>
                </div>
                <p style={{ margin: '10px 0 0', fontSize: 15, lineHeight: 1.9, color: 'var(--text-secondary)' }}>{e.desc}</p>
              </Card>
            ))}
          </div>

          {/* 古物商等の定義 */}
          <h3 style={{ margin: '40px 0 0', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: 'var(--text-primary)' }}>
            「古物商」「古物市場主」「古物競りあっせん業者」とは
          </h3>
          <p style={{ margin: '14px 0 0', fontSize: 16, lineHeight: 2, color: 'var(--text-secondary)' }}>
            一号営業の許可を受けた人を<strong>古物商</strong>、二号営業の許可を受けた人を<strong>古物市場主</strong>、三号営業の届出をした人を<strong>古物競りあっせん業者</strong>と呼びます。
            なお、自分の物を売るだけの行為や、自分が売った相手からその物を買い戻すだけの行為は、古物営業から除かれています。
            「業として（反復継続して）」「転売目的で」取引するかどうかが、古物営業にあたるかの分かれ目になります。
          </p>
        </section>

        {/* e-Gov 原文リンク */}
        <Card variant="outlined" padding="md" style={{ marginTop: 48, background: 'var(--green-50)' }}>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.9, color: 'var(--text-secondary)' }}>
            このページは条文の要点をやさしく言い換えたものです。正確な条文の文言は、政府の法令データベースでご確認ください。
          </p>
          <a
            href={EGOV_URL}
            target="_blank"
            rel="noopener noreferrer"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 12,
              fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15,
              color: 'var(--green-700)', textDecoration: 'none',
            }}
          >
            e-Gov 法令検索で「古物営業法」の原文を読む ↗
          </a>
        </Card>

        {/* 練習問題 */}
        <section style={{ marginTop: 64 }}>
          <SectionHeading eyebrow="理解度チェック" title="練習問題" />
          <p style={{ margin: '18px 0 0', fontSize: 16, lineHeight: 1.9, color: 'var(--text-secondary)' }}>
            読んだ内容を確認してみましょう。問題をクリックすると解答が開きます。
          </p>
          <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 && (
                    <div style={{ padding: '0 22px 20px' }}>
                      <ol style={{ margin: '0 0 16px', paddingLeft: 22, fontSize: 15, lineHeight: 1.95, color: 'var(--text-secondary)' }}>
                        {item.choices.map((c, ci) => (
                          <li key={ci} style={{ marginTop: ci === 0 ? 0 : 6 }}>{c}</li>
                        ))}
                      </ol>
                      <p style={{
                        margin: 0, padding: '14px 16px', fontSize: 15, lineHeight: 1.95,
                        color: 'var(--text-primary)', background: 'var(--green-50)',
                        border: '1px solid var(--green-100)', borderRadius: 'var(--radius-lg)',
                      }}>
                        <strong style={{ color: 'var(--green-700)' }}>解答　</strong>{item.a}
                      </p>
                    </div>
                  )}
                </Card>
              );
            })}
          </div>
        </section>

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