// site.jsx — v3 (less-AI rewrite)
// 変更点:
// - コピーを最小限・事実ベースに
// - 和文に明朝（Noto Serif JP）を見出しで混在
// - 自己説明的な段落を削除、由来は本文脚注扱い
// - アプリ一覧を罫線テキストリスト（番号 + 名前 + 1行 + 年/プラットフォーム）
// - 角丸とウェイトに不揃いを入れる

const APPS = window.SANSESS_APPS;
const INFO = window.SANSESS_INFO;

// Mood packs
const MOODS = {
  paper: { bg: '#f3efe6', surface: '#faf6ed', fg: '#1a1a1a', mute: '#76716a', faint: '#a39e95', line: 'rgba(26,26,26,0.14)', name: 'Paper' },
  forest: { bg: '#e6ebe2', surface: '#f0f3eb', fg: '#15201a', mute: '#5a685e', faint: '#8a988e', line: 'rgba(21,32,26,0.16)', name: 'Forest' },
  dusk: { bg: '#272320', surface: '#312c28', fg: '#ece4d3', mute: '#a09686', faint: '#6e6557', line: 'rgba(236,228,211,0.14)', name: 'Dusk' },
  ink: { bg: '#121110', surface: '#1c1a17', fg: '#ece4d3', mute: '#8a8075', faint: '#5a5249', line: 'rgba(236,228,211,0.10)', name: 'Ink' }
};

// Voice — 見出しサイズ/余白
const VOICES = {
  quiet: { hSize: 30, hLead: 1.18, padX: 22, gap: 44 },
  balanced: { hSize: 38, hLead: 1.08, padX: 24, gap: 56 },
  bold: { hSize: 50, hLead: 1.0, padX: 26, gap: 68 }
};

function hueToAccents(h) {
  return {
    accent: `oklch(0.55 0.13 ${h})`,
    accent2: `oklch(0.40 0.05 ${(h + 200) % 360})`
  };
}

const SANS = '"Inter", -apple-system, BlinkMacSystemFont, sans-serif';
const SERIF = '"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif';
const MONO = '"JetBrains Mono", ui-monospace, monospace';

function Shell({ children, t }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: t.bg, color: t.fg, fontFamily: SANS,
      overflow: 'hidden', position: 'relative'
    }}>{children}</div>);

}
function Scroll({ children }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, overflowY: 'auto',
      WebkitOverflowScrolling: 'touch'
    }}>{children}</div>);

}

function Logo({ size = 20, t }) {
  return (
    <div style={{
      fontFamily: SANS, fontWeight: 600, fontSize: size,
      letterSpacing: '-0.035em', color: t.fg, lineHeight: 1
    }}>
      sanse<span style={{ color: t.accent }}>ss</span>
    </div>);

}

function Nav({ active, t, onNav }) {
  const items = [
  { id: 'issues', label: '問い合わせ', href: INFO.issuesUrl, external: true },
  { id: 'privacy', label: 'プライバシー' }];

  return (
    <header style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: `18px ${t.v.padX}px`
    }}>
      <a onClick={() => onNav('home')} style={{ cursor: 'pointer' }}>
        <Logo t={t} />
      </a>
      <nav style={{ display: 'flex', gap: 16, fontSize: 12.5, color: t.mute }}>
        {items.map((it) => it.external ?
        <a key={it.id} href={it.href} target="_blank" rel="noopener noreferrer" style={{
          color: t.mute, fontWeight: 400, whiteSpace: 'nowrap',
          textDecoration: 'none', paddingBottom: 2,
          borderBottom: '1px solid transparent',
          display: 'inline-flex', alignItems: 'center', gap: 4
        }}>{it.label}<span style={{ fontSize: 10, opacity: 0.6 }}>↗</span></a> :

        <a key={it.id} onClick={() => onNav(it.id)} style={{
          color: it.id === active ? t.fg : t.mute,
          fontWeight: it.id === active ? 500 : 400,
          cursor: 'pointer', whiteSpace: 'nowrap',
          borderBottom: it.id === active ? `1px solid ${t.accent}` : '1px solid transparent',
          paddingBottom: 2
        }}>{it.label}</a>
        )}
      </nav>
    </header>);

}

function Footer({ t }) {
  return (
    <footer style={{
      padding: `28px ${t.v.padX}px 24px`, marginTop: 8,
      borderTop: `1px solid ${t.line}`,
      fontFamily: MONO, fontSize: 10, color: t.faint,
      letterSpacing: '0.04em', textAlign: "left"
    }}>
      © 2026 Sansess
    </footer>);

}

// ─────────────────────────────────────────────────────────────
// Home — 「自己紹介」を最小に。アプリ一覧はテキストリスト。
// ─────────────────────────────────────────────────────────────
function Home({ t, onNav }) {
  return (
    <Shell t={t}>
      <Nav active="home" t={t} onNav={onNav} />
    </Shell>);

}

// ─────────────────────────────────────────────────────────────
// Privacy — 装飾を削ぎ、本文重視
// ─────────────────────────────────────────────────────────────
function Privacy({ t, onNav }) {
  const sections = [
  {
    h: 'お客様から取得する情報',
    lead: '当社は、お客様から以下の情報を取得します。',
    list: [
    '氏名（ニックネームやペンネームを含む）',
    '年齢または生年月日',
    '性別',
    'メールアドレス',
    '写真や動画',
    '外部サービスでお客様が利用するID、その他外部サービスのプライバシー設定によりお客様が連携先に開示を認めた情報',
    'Cookie（クッキー）を用いて生成された識別情報',
    'OSが生成するID、端末の種類、端末識別子等の端末情報',
    '当社ウェブサイトの滞在時間、入力履歴、購買履歴等の行動履歴',
    '当社アプリの起動時間、入力履歴、購買履歴等の利用履歴',
    '位置情報']

  },
  {
    h: 'お客様の情報を利用する目的',
    lead: '当社は、お客様から取得した情報を次の目的のために利用します。',
    list: [
    '当社サービスに関する登録の受付、本人確認、認証のため',
    '当社サービスの利用履歴管理のため',
    '行動履歴の分析によるサービスの維持・改善のため',
    '広告の配信・表示・効果測定のため',
    '趣味嗜好に合わせたターゲティング広告の表示のため',
    '当社サービスに関するご案内のため',
    'お問い合わせ対応のため',
    '規約・法令違反行為への対応のため',
    'サービスの変更・提供中止・終了・契約解除のご連絡のため',
    '規約変更等の通知のため',
    '以上の他、当社サービスの提供・維持・保護・改善のため']

  },
  {
    h: '安全管理のために講じた措置',
    b: '当社が取得した情報に関する安全管理措置の詳細は、末尾記載のお問い合わせ先までご連絡ください。法令の定めに従い個別に回答いたします。'
  },
  {
    h: '第三者提供',
    lead: '当社は、取得情報のうち個人データ（個人情報保護法第2条第6項）に該当するものについて、あらかじめお客様の同意を得ずに第三者（日本国外の者を含む）に提供しません。ただし、次の場合を除きます。',
    list: [
    '個人データの取扱いを外部に委託する場合',
    '当社または当社サービスが買収された場合',
    '事業パートナーと共同利用する場合（具体的な共同利用がある場合は別途公表）',
    'その他、法律によって合法的に第三者提供が許されている場合']

  },
  {
    h: 'アクセス解析ツール',
    b: '当社は「Googleアナリティクス」を利用しています。トラフィックデータ収集にCookieを使用しますが、データは匿名で収集され個人を特定しません。Cookieを無効にすることで収集を拒否できます。詳細はご利用のブラウザ設定をご確認ください。'
  },
  {
    h: '広告の配信',
    b: '当社は、Googleおよびパートナー（第三者配信事業者）の広告を設置します。Cookieを用い、過去のアクセス情報に基づいて広告を配信します。パーソナライズ広告はGoogleアカウントの広告設定から無効化できます。'
  },
  {
    h: 'プライバシーポリシーの変更',
    b: '当社は、必要に応じて本ポリシーを変更します。変更後の施行時期と内容は、適切な方法で周知または通知します。'
  },
  {
    h: 'お問い合わせ',
    b: `開示、訂正、利用停止、削除のご希望は下記メールアドレスへご連絡ください。ご本人確認（運転免許証の提示等）をお願いする場合があります。開示請求は、開示有無に関わらず1件あたり1,000円の事務手数料を申し受けます。\n\nメール：${INFO.email}\n\n※ 迷惑メール対策でドメイン指定受信設定をされている場合は、当社からのメールを受信できるよう設定をご確認ください。`
  }];

  return (
    <Shell t={t}>
      <Scroll>
        <Nav active="privacy" t={t} onNav={onNav} />

        <section style={{ padding: `${Math.round(t.v.gap * 0.8)}px ${t.v.padX}px 8px` }}>
          <div style={{ fontFamily: MONO, fontSize: 10.5, color: t.faint, letterSpacing: '0.1em', marginBottom: 12 }}>
            制定 {INFO.established} ／ 最終更新 {INFO.established}
          </div>
          <h1 style={{
            fontFamily: SERIF, fontWeight: 500,
            fontSize: Math.round(t.v.hSize * 0.85), lineHeight: 1.15,
            letterSpacing: '0.01em', margin: 0
          }}>
            プライバシーポリシー
          </h1>
        </section>

        <section style={{ padding: `20px ${t.v.padX}px 28px` }}>
          {sections.map((sec, i) =>
          <div key={sec.h} style={{
            padding: '20px 0', borderTop: `1px solid ${t.line}`
          }}>
              <div style={{
              display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 10
            }}>
                <span style={{
                fontFamily: MONO, fontSize: 10, color: t.faint,
                letterSpacing: '0.06em'
              }}>{String(i + 1).padStart(2, '0')}</span>
                <span style={{
                fontFamily: SERIF, fontSize: 16, fontWeight: 500, color: t.fg,
                letterSpacing: '0.01em'
              }}>{sec.h}</span>
              </div>
              <div style={{ fontSize: 13, color: t.mute, lineHeight: 1.85, paddingLeft: 28 }}>
                {sec.lead &&
              <p style={{ margin: '0 0 10px' }}>{sec.lead}</p>
              }
                {sec.list &&
              <ul style={{ margin: '0 0 4px', paddingLeft: 18, listStyle: 'disc' }}>
                    {sec.list.map((li, j) =>
                <li key={j} style={{ marginBottom: 4 }}>{li}</li>
                )}
                  </ul>
              }
                {sec.b && sec.b.split('\n\n').map((para, j) =>
              <p key={j} style={{ margin: j === 0 ? '0 0 10px' : '10px 0 0', whiteSpace: 'pre-wrap' }}>{para}</p>
              )}
              </div>
            </div>
          )}
          <div style={{ borderTop: `1px solid ${t.line}`, paddingTop: 20 }}>
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 10
            }}>
              <span style={{
                fontFamily: MONO, fontSize: 10, color: t.faint, letterSpacing: '0.06em'
              }}>{String(sections.length + 1).padStart(2, '0')}</span>
              <span style={{
                fontFamily: SERIF, fontSize: 16, fontWeight: 500, color: t.fg,
                letterSpacing: '0.01em'
              }}>事業者</span>
            </div>
            <div style={{ fontSize: 13, color: t.mute, lineHeight: 1.85, paddingLeft: 28 }}>
              {INFO.brand}<br />
              {INFO.address}
            </div>
          </div>
        </section>

        <Footer t={t} />
      </Scroll>
    </Shell>);

}

Object.assign(window, { MOODS, VOICES, hueToAccents, Home, Privacy });