// ===== Legal Pages (Privacy Policy / Disclaimer) =====

// ---- Privacy Policy content ----
const PRIVACY_SECTIONS = [
  {
    id: "s1",
    title: "個人情報の取得について",
    body: () => (
      <>
        <p>当ブログ「ゼロからブログ」（以下、「当サイト」）では、お問い合わせフォームのご利用時に、以下の個人情報をご提供いただく場合があります。</p>
        <ul>
          <li>お名前</li>
          <li>メールアドレス</li>
          <li>お問い合わせ内容</li>
        </ul>
        <p>ご提供いただいた個人情報は、適切な管理のもとで取り扱い、不正アクセス・紛失・漏洩の防止に努めます。</p>
      </>
    ),
  },
  {
    id: "s2",
    title: "個人情報の利用目的",
    body: () => (
      <>
        <p>取得した個人情報は、以下の目的のみに使用します。</p>
        <ul>
          <li>お問い合わせへのご返信・情報提供</li>
          <li>サービス改善のための統計・分析（個人を特定しない形式）</li>
        </ul>
        <p>上記以外の目的では使用せず、第三者への提供も行いません（法令に基づく開示を除く）。</p>
      </>
    ),
  },
  {
    id: "s3",
    title: "Cookieおよびアクセス解析",
    body: () => (
      <>
        <h3>Google Analytics</h3>
        <p>当サイトではGoogle Analyticsを使用して、閲覧状況の分析を行っています。Google AnalyticsはCookieを使用して情報を収集しますが、個人を特定するものではありません。</p>
        <div className="legal-infobox">
          収集されるデータの種類・利用方法については、<a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">Googleのプライバシーポリシー</a>をご確認ください。ブラウザの設定でCookieを無効にすることで、データ収集を拒否することが可能です。
        </div>
        <h3>Google AdSense（広告配信）</h3>
        <p>当サイトでは、Google AdSenseによる広告を掲載する場合があります。Googleはユーザーの興味に合わせた広告を表示するためCookieを使用することがあります。Cookieを無効にする方法や、Google AdSenseに関する詳細は<a href="https://policies.google.com/technologies/ads" target="_blank" rel="noopener noreferrer">こちら</a>をご覧ください。</p>
      </>
    ),
  },
  {
    id: "s4",
    title: "第三者への個人情報の提供",
    body: () => (
      <>
        <p>当サイトは、以下の場合を除き、取得した個人情報を第三者に提供しません。</p>
        <ul>
          <li>ご本人の事前の同意がある場合</li>
          <li>法令に基づき開示が必要な場合</li>
          <li>人の生命・身体・財産の保護のために必要な場合</li>
        </ul>
      </>
    ),
  },
  {
    id: "s5",
    title: "アフィリエイトプログラム",
    body: () => (
      <>
        <p>当サイトは、Amazonアソシエイト・プログラム、その他のアフィリエイトプログラムに参加しています。掲載している商品・サービスのリンクから購入が発生した場合、当サイトに報酬が支払われることがあります。</p>
        <div className="legal-infobox">
          アフィリエイトリンクを含む記事については、記事内または冒頭にその旨を表記しています。紹介する商品・サービスの選定は読者の利益を最優先に行っています。
        </div>
      </>
    ),
  },
  {
    id: "s6",
    title: "個人情報の開示・訂正・削除",
    body: () => (
      <>
        <p>ご提供いただいた個人情報の開示・訂正・削除をご希望の場合は、<a href="contact.html">お問い合わせフォーム</a>よりご連絡ください。ご本人確認のうえ、合理的な期間内に対応いたします。</p>
      </>
    ),
  },
  {
    id: "s7",
    title: "外部サービスへのリンク",
    body: () => (
      <>
        <p>当サイトには外部サイトへのリンクが含まれています。リンク先のサイトは当サイトの管理外であり、それらのプライバシーポリシー・利用規約については各サイトをご確認ください。</p>
      </>
    ),
  },
  {
    id: "s8",
    title: "プライバシーポリシーの変更",
    body: () => (
      <>
        <p>本プライバシーポリシーは、法令の変更やサービス内容の変化に応じて予告なく更新することがあります。重要な変更がある場合は、サイト上でお知らせします。最新の内容はこのページでご確認ください。</p>
      </>
    ),
  },
  {
    id: "s9",
    title: "お問い合わせ",
    body: () => (
      <>
        <p>本プライバシーポリシーに関するご質問・ご意見は、<a href="contact.html">お問い合わせフォーム</a>よりお気軽にご連絡ください。</p>
      </>
    ),
  },
];

// ---- Disclaimer content ----
const DISCLAIMER_SECTIONS = [
  {
    id: "d1",
    title: "情報の正確性について",
    body: () => (
      <>
        <p>当ブログ「ゼロからブログ」（以下、「当サイト」）では、掲載情報の正確性・最新性の確保に努めていますが、内容の完全性・正確性・有用性を保証するものではありません。</p>
        <div className="legal-warnbox">
          掲載情報は執筆・更新時点のものであり、サービスの仕様変更・料金改定などにより現状と異なる場合があります。最新情報は各公式サイトでご確認ください。
        </div>
      </>
    ),
  },
  {
    id: "d2",
    title: "損害賠償の免責",
    body: () => (
      <>
        <p>当サイトの情報を参考にした行動・判断によって生じた損害・トラブルについて、当サイトは一切の責任を負いません。</p>
        <ul>
          <li>当サイトの情報をもとにした投資・商品購入などによる損失</li>
          <li>当サイトへのアクセス不能・情報の誤り・遅延により生じた損害</li>
          <li>外部リンク先のサービス・コンテンツに起因する損害</li>
        </ul>
        <p>実際のサービス導入・設定変更などは、ご自身の責任において行ってください。不明点は公式サポートへお問い合わせいただくことをおすすめします。</p>
      </>
    ),
  },
  {
    id: "d3",
    title: "著作権について",
    body: () => (
      <>
        <p>当サイトに掲載されている文章・画像・デザイン・コード等のコンテンツの著作権は、特別な記載がない限り当サイト運営者に帰属します。</p>
        <h3>禁止事項</h3>
        <ul>
          <li>当サイトのコンテンツの無断転載・複製・改変</li>
          <li>営利目的での無断使用</li>
          <li>著作権表示を削除しての使用</li>
        </ul>
        <h3>許可される使用</h3>
        <ul>
          <li>個人的な学習・参考目的での閲覧</li>
          <li>出典を明記した上での少量引用（引用の要件を満たす範囲）</li>
          <li>SNSでのリンクシェア・紹介</li>
        </ul>
        <div className="legal-infobox">
          引用・転載をご希望の場合は、事前に<a href="contact.html">お問い合わせフォーム</a>よりご連絡ください。
        </div>
      </>
    ),
  },
  {
    id: "d4",
    title: "外部リンクについて",
    body: () => (
      <>
        <p>当サイトには外部サイトへのリンクが含まれています。リンク先のコンテンツ・サービス・プライバシーポリシーについては当サイトの管理外であり、いかなる保証も行いません。</p>
        <p>外部リンクは情報提供を目的としており、リンク先サービスの推奨・保証を意味するものではありません。</p>
      </>
    ),
  },
  {
    id: "d5",
    title: "アフィリエイト・広告について",
    body: () => (
      <>
        <p>当サイトはAmazonアソシエイト・プログラムその他のアフィリエイトプログラムに参加しており、紹介商品の購入により報酬を受け取る場合があります。</p>
        <p>また、Google AdSenseなどの広告サービスを利用しており、広告収入で運営費を賄っています。いずれも読者の皆様のご利用料金に影響するものではありません。</p>
        <div className="legal-infobox">
          広告・アフィリエイトリンクを含む記事はその旨を明示しています。紹介する商品・サービスは読者にとって有益だと判断したものに限定しています。
        </div>
      </>
    ),
  },
  {
    id: "d6",
    title: "コメント・お問い合わせについて",
    body: () => (
      <>
        <p>当サイトへのお問い合わせ内容については、サイト改善・記事執筆の参考にさせていただく場合があります（個人情報は含みません）。</p>
        <p>以下の内容を含むお問い合わせにはお答えできない場合があります。</p>
        <ul>
          <li>公序良俗に反する内容</li>
          <li>特定の個人・団体を誹謗中傷するもの</li>
          <li>スパム・営業目的のもの</li>
        </ul>
      </>
    ),
  },
  {
    id: "d7",
    title: "免責事項の変更",
    body: () => (
      <>
        <p>本免責事項は、予告なく変更されることがあります。変更後の内容はこのページに掲載した時点で効力を持ちます。定期的にご確認いただくことをおすすめします。</p>
      </>
    ),
  },
];

// ---- Legal Section Component ----
const LegalSection = ({ section, index }) => (
  <section id={section.id} className="legal-section">
    <div className="legal-section-header">
      <span className="legal-section-num">{String(index + 1).padStart(2, "0")}</span>
      <h2>{section.title}</h2>
    </div>
    {section.body()}
  </section>
);

// ---- TOC Component ----
const LegalToc = ({ sections }) => (
  <nav className="legal-toc">
    <div className="legal-toc-title">目次</div>
    <ol>
      {sections.map((s, i) => (
        <li key={s.id}>
          <a href={"#" + s.id}>{s.title}</a>
        </li>
      ))}
    </ol>
  </nav>
);

// ---- Privacy Page ----
const PrivacyPage = () => (
  <>
    <section className="legal-hero">
      <div className="legal-hero-inner">
        <div className="legal-hero-kicker">
          <span className="dot"></span>PRIVACY POLICY
        </div>
        <h1>プライバシーポリシー</h1>
        <div className="legal-hero-meta">
          <span>
            <Icon name="calendar" size={13} />
            制定日：2024年1月1日
          </span>
          <span>
            <Icon name="clock" size={13} />
            最終更新：2025年5月13日
          </span>
        </div>
      </div>
    </section>

    <div className="legal-layout">
      <div className="legal-body">
        <div className="legal-updated">
          <Icon name="clock" size={12} />
          最終更新日：2025年5月13日
        </div>
        {PRIVACY_SECTIONS.map((s, i) => (
          <LegalSection key={s.id} section={s} index={i} />
        ))}
        <div className="legal-related">
          <a href="disclaimer.html"><Icon name="arrow" size={14} />免責事項</a>
          <a href="contact.html"><Icon name="mail" size={14} />お問い合わせ</a>
          <a href="index.html"><Icon name="arrow" size={14} />ホームへ戻る</a>
        </div>
      </div>
      <LegalToc sections={PRIVACY_SECTIONS} />
    </div>
  </>
);

// ---- Disclaimer Page ----
const DisclaimerPage = () => (
  <>
    <section className="legal-hero">
      <div className="legal-hero-inner">
        <div className="legal-hero-kicker">
          <span className="dot"></span>DISCLAIMER
        </div>
        <h1>免責事項</h1>
        <div className="legal-hero-meta">
          <span>
            <Icon name="calendar" size={13} />
            制定日：2024年1月1日
          </span>
          <span>
            <Icon name="clock" size={13} />
            最終更新：2025年5月13日
          </span>
        </div>
      </div>
    </section>

    <div className="legal-layout">
      <div className="legal-body">
        <div className="legal-updated">
          <Icon name="clock" size={12} />
          最終更新日：2025年5月13日
        </div>
        {DISCLAIMER_SECTIONS.map((s, i) => (
          <LegalSection key={s.id} section={s} index={i} />
        ))}
        <div className="legal-related">
          <a href="privacy.html"><Icon name="arrow" size={14} />プライバシーポリシー</a>
          <a href="contact.html"><Icon name="mail" size={14} />お問い合わせ</a>
          <a href="index.html"><Icon name="arrow" size={14} />ホームへ戻る</a>
        </div>
      </div>
      <LegalToc sections={DISCLAIMER_SECTIONS} />
    </div>
  </>
);

// ===== App =====
const App = () => {
  const type = window.LEGAL_TYPE || "privacy";
  const nav = [
    { label: "ホーム", href: "index.html" },
    { label: "始め方・基礎", href: "start-basics.html" },
    { label: "SEO・集客", href: "seo-traffic.html" },
    { label: "AIツール活用", href: "ai-tools.html" },
    { label: "収益化", href: "monetize.html" },
    { label: "ブログ運営", href: "blog-ops.html" },
  ];

  return (
    <>
      <Announce />
      <Header nav={nav} homeHref="index.html" articlesHref="articles/index.html" />
      <main>
        {type === "privacy" ? <PrivacyPage /> : <DisclaimerPage />}
      </main>
      <Footer />
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);