// 古物営業法検定 — トップ（ハブ）。旧 /kentei・/shop・想定問題集の集約先。
function KenteiPage({ onNavigate }) {
  const { Button, Card, SectionHeading, Badge } = window.DesignSystem_36acde;
  const EGOV_URL = 'https://laws.e-gov.go.jp/law/323AC0000000108';

  const chapters = [
    { id: 'kentei1', n: '第1章', t: '総則', d: '法律の目的、古物の定義と13品目、古物営業の3類型など基本のき。' },
    { id: 'kentei2', n: '第2章', t: '許可等', d: '許可の申請、欠格事由、許可証の取り扱い、変更の届出、名義貸しの禁止。' },
    { id: 'kentei3', n: '第3章', t: '営業', d: '標識の掲示、管理者、本人確認、不正品の申告、帳簿の記録・保存。' },
    { id: 'kentei4', n: '第4章', t: '監督', d: '立入検査、指示、営業の停止命令、許可の取消しなど監督のしくみ。' },
    { id: 'kentei5', n: '第5章', t: '罰則', d: '無許可営業・名義貸し・帳簿不備などに対する罰則の段階。' },
  ];

  return (
    <main style={{ background: 'var(--color-bg)' }}>
      {/* Hero */}
      <section style={{ background: 'var(--green-50)', borderBottom: '1px solid var(--green-100)' }}>
        <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '56px 24px' }}>
          <Badge variant="brand">古物営業法 ／ リユース検定</Badge>
          <h1 style={{ margin: '14px 0 0', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 40, lineHeight: 1.3, color: 'var(--text-primary)' }}>古物営業法を理解する</h1>
          <p style={{ margin: '14px 0 0', maxWidth: 720, fontSize: 17, lineHeight: 1.85, color: 'var(--text-secondary)' }}>
            リユース事業を健全に広げていくには、まず古物営業法を正しく知ることが近道です。わたしたちは、難しく感じられがちな条文を章ごとにかみくだき、<strong style={{ color: 'var(--green-700)' }}>自習用の練習問題</strong>とあわせて無料で公開しています。リユース検定の学びなおしにもどうぞ。
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
            <Button variant="primary" onClick={() => onNavigate('kentei1')}>第1章から読む</Button>
            <a href={EGOV_URL} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
              <Button variant="ghost" iconRight="↗">e-Govで条文の原文を見る</Button>
            </a>
          </div>
        </div>
      </section>

      {/* 章カード */}
      <section style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '72px 24px 24px' }}>
        <SectionHeading eyebrow="章ごとの解説" title="古物営業法を、5つの章で" lead="気になる章からどうぞ。各章のおわりに、理解度を確認できる練習問題があります。" align="center" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 20, marginTop: 40 }}>
          {chapters.map((c) => (
            <Card key={c.id} variant="elevated" interactive padding="md" onClick={() => onNavigate(c.id)} style={{ display: 'flex', flexDirection: 'column' }}>
              <Badge variant="brand" size="sm">{c.n}</Badge>
              <h3 style={{ margin: '12px 0 8px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: 'var(--text-primary)' }}>{c.t}</h3>
              <p style={{ margin: '0 0 16px', fontSize: 14, lineHeight: 1.8, color: 'var(--text-secondary)', flex: 1 }}>{c.d}</p>
              <Button variant="ghost" size="sm" iconRight="→" onClick={() => onNavigate(c.id)}>解説を読む</Button>
            </Card>
          ))}
        </div>
      </section>

      {/* 想定問題集・過去問題の案内（旧ストアの集約先） */}
      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '48px 24px 96px' }}>
        <Card variant="soft" padding="lg" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, alignItems: 'center' }}>
          <div>
            <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 26, color: 'var(--green-800)' }}>リユース検定 想定問題集について</h2>
            <p style={{ margin: '14px 0 0', fontSize: 15, lineHeight: 1.9, color: 'var(--text-secondary)' }}>
              以前ご好評いただいていた有料の想定問題集は、現在は提供を終了しています。かわりに、古物営業法の理解に役立つ<strong style={{ color: 'var(--green-700)' }}>練習問題（各章）</strong>と、ブログでの<strong style={{ color: 'var(--green-700)' }}>過去問題</strong>を、どなたでも無料でご利用いただけるようにしました。条文の原文は e-Gov でいつでも最新版をご確認いただけます。
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 22, flexWrap: 'wrap' }}>
              <Button variant="primary" onClick={() => onNavigate('blog')}>過去問題（ブログ）を見る</Button>
              <a href={EGOV_URL} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
                <Button variant="secondary" iconRight="↗">e-Gov 古物営業法</Button>
              </a>
            </div>
          </div>
          <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {['各章末に練習問題（解答つき）', 'ブログで過去問題を順次公開', '条文の原文は e-Gov（一次情報）へ', 'すべて無料・登録不要'].map((t) => (
              <li key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 15, color: 'var(--text-primary)' }}>
                <span style={{ width: 26, height: 26, flexShrink: 0, borderRadius: '50%', background: 'var(--green-100)', color: 'var(--green-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14 }}>✓</span>{t}
              </li>
            ))}
          </ul>
        </Card>
        <p style={{ margin: '20px 0 0', fontSize: 13, lineHeight: 1.8, color: 'var(--text-muted)' }}>
          ※ 本ページは古物営業法の理解を助けることを目的とした参考情報です。実際のお手続きや最終的な判断にあたっては、必ず e-Gov の条文原文や、所轄の警察署（公安委員会）の案内をご確認ください。
        </p>
      </section>
    </main>
  );
}
window.KenteiPage = KenteiPage;