const PRIVACY_SECTIONS = [
  {
    heading: "1. 個人情報の取得",
    lines: ["本事業では、イベントへの申込み、お問い合わせ、アンケート等を通じて、氏名、所属、メールアドレス、電話番号その他必要な情報を取得する場合があります。"],
  },
  {
    heading: "2. 個人情報の利用目的",
    lines: [
      "取得した個人情報は、以下の目的で利用します。",
      "・イベントの申込受付、参加者管理および運営",
      "・イベントや関連事業に関するご案内・ご連絡",
      "・お問い合わせへの対応",
      "・アンケートの集計、事業成果の分析および報告",
      "・その他、本事業の円滑な運営に必要な業務",
    ],
  },
  {
    heading: "3. 個人情報の管理",
    lines: ["取得した個人情報は、漏えい、紛失、不正アクセス等を防止するため、適切な安全管理措置を講じて管理します。"],
  },
  {
    heading: "4. 個人情報の第三者提供",
    lines: [
      "取得した個人情報は、法令に基づく場合や本人の同意がある場合等を除き、第三者に提供しません。",
      "なお、本事業の実施に必要な範囲で、主催者である長崎市との情報共有や、適切な管理・監督のもとで業務委託先に個人情報の取扱いを委託する場合があります。",
    ],
  },
  {
    heading: "5. 個人情報の開示・訂正・削除",
    lines: ["ご本人から個人情報の開示、訂正、削除等のご希望があった場合は、法令に従い適切に対応します。"],
  },
  {
    heading: "6. プライバシーポリシーの変更",
    lines: ["本ポリシーは、法令の改正や事業内容の変更等に応じて、必要に応じて改定する場合があります。"],
  },
];

const CONTACT_FORM_URL = "https://forms.gle/xn3eLMFurY2NBs6Y6";

function PrivacyPolicy() {
  const bodyText = "font-['Zen_Kaku_Gothic_New'] font-medium leading-[1.8] text-[14px] md:text-[16px] tracking-[1.12px] md:tracking-[1.28px] w-full";
  const headingText = "font-['Zen_Kaku_Gothic_New'] font-bold leading-[1.8] text-[18px] md:text-[20px] tracking-[1.44px] md:tracking-[1.6px] w-full";

  return (
    <div
      className="flex flex-col gap-[40px] items-center px-[16px] pb-[64px] pt-[40px] md:pb-[120px] md:pt-[60px] text-[#322e2e] w-full"
      data-node-id="1096:278"
      data-name="プライバシーポリシー｜本文"
    >
      <div className="flex flex-col gap-[8px] items-start w-full max-w-[1000px]" data-node-id="1096:279">
        <h1 className="font-['Zen_Kaku_Gothic_New'] font-bold leading-[1.55] text-[26px] md:text-[36px] tracking-[2.08px] md:tracking-[2.88px] w-full">
          プライバシーポリシー
        </h1>
        <p className={bodyText}>
          長崎チャレパス運営事務局（株式会社ATOMica）は、本事業の運営にあたり取得する個人情報について、個人情報の保護に関する法律その他関係法令を遵守し、適切に取り扱います。
        </p>
      </div>

      {PRIVACY_SECTIONS.map((section) => (
        <section key={section.heading} className="flex flex-col gap-[16px] items-start w-full max-w-[1000px]">
          <h2 className={headingText}>{section.heading}</h2>
          <div className={bodyText}>
            {section.lines.map((line, i) => (
              <p key={i}>{line}</p>
            ))}
          </div>
        </section>
      ))}

      <section className="flex flex-col gap-[16px] items-start w-full max-w-[1000px]" data-node-id="1096:511">
        <h2 className={headingText}>7. お問い合わせ</h2>
        <div className={bodyText}>
          <p>個人情報の取扱いに関するお問い合わせは、以下までご連絡ください。</p>
          <p>・長崎チャレパス運営事務局（株式会社ATOMica）</p>
          <p>
            ・お問い合わせ先：
            <a href={CONTACT_FORM_URL} target="_blank" rel="noreferrer" className="text-[#ff8c3a] underline [overflow-wrap:anywhere]">
              {CONTACT_FORM_URL}
            </a>
          </p>
        </div>
        <div className={bodyText}>
          <p>主催：長崎市</p>
          <p>運営：長崎チャレパス運営事務局（株式会社ATOMica）</p>
        </div>
      </section>
    </div>
  );
}

function App() {
  const [mobileOpen, setMobileOpen] = useState(false);
  return (
    <>
      <Header onMenu={() => setMobileOpen(true)} />
      <main>
        <PrivacyPolicy />
        <Cta />
      </main>
      <Footer />
      <MobileMenu open={mobileOpen} onClose={() => setMobileOpen(false)} />
    </>
  );
}
ReactDOM.createRoot(document.getElementById("app")).render(<App />);