// sc-policy.jsx — プライバシーポリシー

function PolicyPage() {
  const PageHero = () => (
    <section style={{ background: "var(--dark)", padding: "160px 24px 100px", textAlign: "center" }}>
      <AnimateIn>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.2em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "20px" }}>Privacy Policy</p>
        <h1 style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(28px,5vw,48px)", fontWeight: 600, color: "#fff", lineHeight: 1.4, marginBottom: "20px" }}>プライバシーポリシー</h1>
        <GoldLine width="40px" margin="0 auto" />
      </AnimateIn>
    </section>
  );

  const sections = [
    {
      title: "個人情報の取得について",
      content: "当サービス（スポッターコーチング）では、お問い合わせ・無料トライアルのお申し込みの際に、お名前・メールアドレス・電話番号・事業の状況などの個人情報をご提供いただく場合があります。"
    },
    {
      title: "個人情報の利用目的",
      content: "取得した個人情報は、以下の目的のためにのみ使用します。\n\n・サービスのご提供およびご連絡\n・無料トライアル・セッションの日程調整\n・サービスに関するご案内・情報提供\n・お問い合わせへの対応\n・サービス品質の向上のための分析"
    },
    {
      title: "第三者への提供",
      content: "当サービスは、法令に基づく場合を除き、ご本人の同意なく個人情報を第三者に提供することはありません。"
    },
    {
      title: "個人情報の管理",
      content: "取得した個人情報は、不正アクセス・紛失・破損・改ざん・漏洩などを防止するため、適切なセキュリティ対策を講じ、厳重に管理します。"
    },
    {
      title: "Cookieについて",
      content: "当サイトでは、サービス向上・アクセス解析のためにCookieを使用する場合があります。Cookieはブラウザの設定から無効にすることができますが、一部のサービスが正常に動作しない場合があります。"
    },
    {
      title: "アクセス解析ツールについて",
      content: "当サイトでは、Googleアナリティクス等のアクセス解析ツールを使用する場合があります。これらのツールはCookieを使用してアクセス情報を収集しますが、個人を特定するものではありません。"
    },
    {
      title: "個人情報の開示・訂正・削除",
      content: "ご本人から個人情報の開示・訂正・削除のご要望があった場合は、ご本人確認のうえ、合理的な範囲で速やかに対応いたします。お問い合わせは下記連絡先までお申し出ください。"
    },
    {
      title: "プライバシーポリシーの変更",
      content: "本ポリシーは、法令の変更やサービス内容の変更に伴い、予告なく改定する場合があります。改定後のポリシーは本ページに掲載した時点から効力を有するものとします。"
    },
    {
      title: "お問い合わせ",
      content: "個人情報の取り扱いに関するお問い合わせは、公式LINEまたはお問い合わせフォームよりご連絡ください。\n\nサービス名：スポッターコーチング\n運営者：中本達也\nメールアドレス：お問い合わせフォームよりお送りください"
    },
  ];

  const Body = () => (
    <section style={{ background: "var(--bg)", padding: "80px 24px 120px" }}>
      <div style={{ maxWidth: "760px", margin: "0 auto" }}>
        <AnimateIn>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "13px", color: "var(--text-muted)", lineHeight: 1.9, marginBottom: "56px", padding: "20px 24px", background: "var(--bg-alt)", border: "1px solid var(--border)", borderLeft: "3px solid var(--accent)" }}>
            制定日：2020年10月1日　最終改定日：2026年4月25日
          </p>
        </AnimateIn>
        {sections.map((s, i) => (
          <AnimateIn key={s.title} delay={i * 40}>
            <div style={{ marginBottom: "48px", paddingBottom: "48px", borderBottom: i < sections.length - 1 ? "1px solid var(--border)" : "none" }}>
              <div style={{ display: "flex", alignItems: "center", gap: "12px", marginBottom: "16px" }}>
                <GoldLine width="24px" />
                <h2 style={{ fontFamily: "var(--font-serif)", fontSize: "18px", fontWeight: 600, color: "var(--text)" }}>{s.title}</h2>
              </div>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text-muted)", lineHeight: 2.1, whiteSpace: "pre-line", paddingLeft: "36px" }}>{s.content}</p>
            </div>
          </AnimateIn>
        ))}
      </div>
    </section>
  );

  return (
    <div>
      <PageHero />
      <Body />
    </div>
  );
}

window.PolicyPage = PolicyPage;
