// Sub-pages: news (list + detail), departments, first-visit, access, facilities, doctors

const SimplePage = ({ lang, t, children, kicker, title, subtitle, crumbs, go }) => {
  const T = TOKENS;
  return (
    <div style={{ fontFamily: lang === 'jp' ? fontJP : fontEN, color: T.ink, background: T.paper }}>
      <PageHero lang={lang} t={t} kicker={kicker} title={title} subtitle={subtitle} crumbs={crumbs} go={go} />
      <div style={{ maxWidth: 1480, margin: '0 auto', padding: '72px 40px 96px' }}>{children}</div>
    </div>
  );
};

// ============ NEWS LIST ============
const NewsList = ({ lang, t, go }) => {
  const T = TOKENS;
  return (
    <SimplePage lang={lang} t={t} go={go}
      kicker={lang === 'jp' ? '04 · お知らせ' : '04 · NEWS'}
      title={t.newsTitle}
      subtitle={lang === 'jp' ? '休診日のお知らせ、健診や予防接種のご案内、院内のニュースをお届けしています。' : 'Closure notices, checkup and vaccine bookings, and clinic updates.'}
      crumbs={[t.nav.news]}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 240px', gap: 56 }}>
        <div style={{ background: T.paper, border: `1px solid ${T.hairline}` }}>
          {t.news.map((n, i) => (
            <button key={i} onClick={() => go('news', { id: i })} style={{
              display: 'grid', gridTemplateColumns: '130px 110px 1fr 20px', gap: 20, alignItems: 'center', width: '100%',
              padding: '24px 26px', borderBottom: i < t.news.length - 1 ? `1px solid ${T.hairline}` : 'none',
              background: 'transparent', border: 0, borderBottomWidth: i < t.news.length - 1 ? 1 : 0,
              cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit',
            }}>
              <div style={{ fontSize: 13, color: T.muted, fontFamily: fontMono }}>{n.date}</div>
              <div style={{ fontSize: 11, fontWeight: 700, color: T.primary, padding: '5px 10px', border: `1px solid ${T.primary}`, textAlign: 'center', letterSpacing: 1 }}>{n.tag}</div>
              <div style={{ fontSize: 15, color: T.ink, lineHeight: 1.6 }}>{n.t}</div>
              {Icon.arrow(13, T.muted)}
            </button>
          ))}
        </div>
        <aside>
          <div style={{ fontSize: 11, color: T.muted, letterSpacing: 1.5, fontWeight: 700, fontFamily: fontMono, marginBottom: 16 }}>{lang === 'jp' ? 'カテゴリ' : 'CATEGORIES'}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[...new Set(t.news.map(n => n.tag))].map((tag, i) => (
              <a key={i} style={{ fontSize: 14, color: T.body, padding: '10px 14px', border: `1px solid ${T.hairline}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span>{tag}</span>
                <span style={{ fontSize: 12, color: T.muted, fontFamily: fontMono }}>{t.news.filter(n => n.tag === tag).length}</span>
              </a>
            ))}
          </div>
        </aside>
      </div>
    </SimplePage>
  );
};

// ============ NEWS DETAIL ============
const newsBodies = {
  jp: [
    'このたび、三浦医院の公式ホームページを開設いたしました。診療時間・診療内容・院内設備・アクセス方法など、当院に関する情報をご確認いただけます。お問い合わせは info@miura-clinic-yobuko.com 、またはお電話（0955-51-1138）にて承っております。今後ともよろしくお願いいたします。',
    'ゴールデンウィーク期間中（5月3日〜5月6日）は休診とさせていただきます。期間中、お薬は5月2日（金）までにご相談ください。緊急時は唐津赤十字病院（救急外来）または #7119 をご利用ください。',
    '春の健康診断・特定健診の受付を開始しました。唐津市の特定健診（40〜74歳）対象の方は受診券をお持ちください。所要時間は40〜60分。空腹時の採血があるため、当日朝の食事は控えてください。',
    '高齢者の肺炎球菌ワクチン定期接種（23価PPSV23）のご案内です。65歳・70歳・75歳など5歳刻みの方が対象。お電話でご予約のうえご来院ください。',
    '院内CT撮影装置によるご案内ページを更新しました。胸部・腹部の精密な画像をその場で確認できます。詳しくは院内設備のご案内をご覧ください。',
    '医療情報ネット（厚生労働省）の掲載内容を更新しました。診療時間・対応疾患・施設情報を最新の状態に整備しています。',
  ],
  en: [
    'We are pleased to announce that the official Miura Clinic website is now live. You can find information about our consultation hours, departments, facilities, and access details. For inquiries, please email info@miura-clinic-yobuko.com or call 0955-51-1138. We look forward to serving you.',
    'The clinic will be closed during Golden Week (May 3 – May 6). For repeat prescriptions, please consult us by Friday, May 2. In case of emergency, please use Karatsu Red Cross Hospital or dial #7119.',
    'Spring health checkups are now booking. Karatsu residents aged 40–74 eligible for the specific checkup, please bring your voucher. Allow 40–60 minutes; please skip breakfast as fasting bloodwork is required.',
    'Routine pneumococcal vaccination (PPSV23) for seniors is now available, for residents aged 65, 70, 75 and every 5 years thereafter. Please call to reserve.',
    'We have updated the on-site CT imaging information page. Detailed chest and abdominal imaging is available in a single visit. See our Facilities page for details.',
    'We have refreshed our listing on the MHLW medical information network with the latest hours, conditions treated, and facility details.',
  ],
};

const NewsDetail = ({ lang, t, go, newsId = 0 }) => {
  const T = TOKENS;
  const n = t.news[newsId] || t.news[0];
  const body = (newsBodies[lang] || newsBodies.jp)[newsId] || '';
  return (
    <SimplePage lang={lang} t={t} go={go}
      kicker={lang === 'jp' ? `お知らせ #${String(newsId + 1).padStart(3, '0')}` : `NEWS #${String(newsId + 1).padStart(3, '0')}`}
      title={n.t}
      crumbs={[t.nav.news, lang === 'jp' ? '詳細' : 'Detail']}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 64 }}>
        <article>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 28, paddingBottom: 22, borderBottom: `1px solid ${T.hairline}` }}>
            <div style={{ fontSize: 13, color: T.muted, fontFamily: fontMono }}>{n.date}</div>
            <div style={{ fontSize: 11, fontWeight: 700, color: T.primary, padding: '5px 12px', border: `1px solid ${T.primary}`, letterSpacing: 1 }}>{n.tag}</div>
          </div>
          {!n.noPhoto && (
            <Placeholder label={lang === 'jp' ? '記事に関する写真' : 'article image'} h={320} tone="blue" radius={0} />
          )}
          <p style={{ fontSize: 16, lineHeight: 2.05, color: T.body, marginTop: n.noPhoto ? 0 : 32, textWrap: 'pretty' }}>{body}</p>
          <p style={{ fontSize: 16, lineHeight: 2.05, color: T.body, marginTop: 18 }}>
            {lang === 'jp' ? 'ご不明な点はお気軽にお電話ください。' : 'Please call us with any questions.'}
            <span style={{ marginLeft: 8, color: T.primary, fontWeight: 700, fontFamily: fontMono }}>{t.phone}</span>
          </p>
          <div style={{ marginTop: 48, display: 'flex', justifyContent: 'space-between' }}>
            <button onClick={() => go('news')} style={{ padding: '14px 22px', background: 'transparent', border: `1px solid ${T.hairline}`, color: T.body, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              ← {lang === 'jp' ? 'お知らせ一覧へ' : 'Back to news'}
            </button>
            {newsId < t.news.length - 1 && (
              <button onClick={() => go('news', { id: newsId + 1 })} style={{ padding: '14px 22px', background: T.primary, border: 'none', color: '#fff', fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                {lang === 'jp' ? '次の記事' : 'Next'} →
              </button>
            )}
          </div>
        </article>
        <aside>
          <div style={{ fontSize: 11, color: T.muted, letterSpacing: 1.5, fontWeight: 700, fontFamily: fontMono, marginBottom: 16 }}>{lang === 'jp' ? '最近のお知らせ' : 'RECENT'}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {t.news.map((m, i) => (
              <button key={i} onClick={() => go('news', { id: i })} style={{ background: i === newsId ? T.bgWarm : 'transparent', border: 0, borderLeft: `2px solid ${i === newsId ? T.primary : 'transparent'}`, padding: '12px 14px', textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit' }}>
                <div style={{ fontSize: 11, color: T.muted, fontFamily: fontMono }}>{m.date}</div>
                <div style={{ fontSize: 13, color: T.ink, marginTop: 4, lineHeight: 1.5 }}>{m.t}</div>
              </button>
            ))}
          </div>
        </aside>
      </div>
    </SimplePage>
  );
};

// ============ DEPARTMENTS ============
const DepartmentsPage = ({ lang, t, go }) => {
  const T = TOKENS;
  return (
    <SimplePage lang={lang} t={t} go={go}
      kicker={lang === 'jp' ? '02 · 診療内容' : '02 · CARE'}
      title={t.departmentsTitle}
      subtitle={lang === 'jp' ? '一般内科を軸に、生活習慣病・各種検査・予防接種まで幅広く対応しています。' : 'General internal medicine plus lifestyle care, diagnostic tests, vaccinations and consultations.'}
      crumbs={[t.nav.depts]}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: `1px solid ${T.hairline}` }}>
        {t.departments.map((d, i) => {
          const cols = 2;
          const total = t.departments.length;
          const lastRowStart = total - ((total % cols) || cols);
          const isLastInRow = ((i + 1) % cols === 0) || i === total - 1;
          const inLastRow = i >= lastRowStart;
          return (
          <div key={i} style={{
            padding: '48px 44px',
            borderRight: !isLastInRow ? `1px solid ${T.hairline}` : 'none',
            borderBottom: !inLastRow ? `1px solid ${T.hairline}` : 'none',
            minHeight: 320,
          }}>
            <div style={{ fontSize: 32, fontWeight: 700, color: T.primarySoft, fontFamily: fontMono, lineHeight: 1, letterSpacing: 1 }}>{String(i+1).padStart(2,'0')}</div>
            <h3 style={{ fontSize: 22, fontWeight: 700, margin: '32px 0 0', color: T.ink, lineHeight: 1.4 }}>{d.name}</h3>
            <ul style={{ marginTop: 18, padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px 28px' }}>
              {d.items.map((it, j) => (
                <li key={j} style={{ display: 'flex', gap: 10, fontSize: 14, color: T.body, lineHeight: 1.7 }}>
                  <span style={{ color: T.accent, flexShrink: 0 }}>—</span>{it}
                </li>
              ))}
            </ul>
          </div>
        );})}
      </div>
      <div style={{ marginTop: 32, textAlign: 'center', fontSize: 14, color: T.muted }}>{t.departmentsNote}</div>
    </SimplePage>
  );
};

// ============ FIRST VISIT ============
const FirstVisitPage = ({ lang, t, go }) => {
  const T = TOKENS;
  const bring = lang === 'jp'
    ? ['健康保険証 / マイナ保険証', 'お薬手帳（服用中の薬がある方）', '各種医療証（医療助成・公費）', '紹介状（お持ちの場合）']
    : ['Health insurance card / My-Number card', 'Medication notebook (if any)', 'Subsidy or aid documents', 'Referral letter (if any)'];
  return (
    <SimplePage lang={lang} t={t} go={go}
      kicker={lang === 'jp' ? '03 · 受診の流れ' : '03 · FIRST VISIT'}
      title={t.firstTitle}
      subtitle={lang === 'jp' ? '初めて当院を受診される方へ。受付からお会計までの流れと、ご持参いただくものをご案内します。' : 'A guide for first-time patients — what to bring and what to expect from reception to checkout.'}
      crumbs={[t.nav.first]}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, position: 'relative', marginBottom: 80 }}>
        <div style={{ position: 'absolute', top: 32, left: '12.5%', right: '12.5%', height: 1, background: T.hairline }}></div>
        {t.firstSteps.map((s, i) => (
          <div key={i} style={{ position: 'relative', zIndex: 1, paddingRight: 20 }}>
            <div style={{ width: 64, height: 64, borderRadius: 32, background: i === 0 ? T.primary : T.paper, color: i === 0 ? '#fff' : T.primary, border: `1.5px solid ${T.primary}`, display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 16, fontFamily: fontMono }}>{s.n}</div>
            <div style={{ fontSize: 20, fontWeight: 700, marginTop: 24, color: T.ink }}>{s.t}</div>
            <div style={{ fontSize: 14, color: T.body, lineHeight: 2, marginTop: 12 }}>{s.d}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
        <div style={{ padding: 32, background: T.bgWarm, border: `1px solid ${T.hairline}` }}>
          <div style={{ fontSize: 11.5, color: T.primary, fontWeight: 700, letterSpacing: 2, fontFamily: fontMono, marginBottom: 14 }}>{lang === 'jp' ? 'お持ちいただくもの' : 'WHAT TO BRING'}</div>
          <h3 style={{ fontSize: 22, fontWeight: 700, margin: 0, color: T.ink }}>{lang === 'jp' ? 'ご来院時のご準備' : 'Before your visit'}</h3>
          <ul style={{ marginTop: 22, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
            {bring.map((b, i) => (
              <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 14.5, color: T.body, lineHeight: 1.7 }}>
                <span style={{ width: 18, height: 18, borderRadius: 9, background: T.primary, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 700, flexShrink: 0, marginTop: 3 }}>✓</span>
                {b}
              </li>
            ))}
          </ul>
        </div>
        <div style={{ padding: 32, background: T.primaryDeep, color: '#fff' }}>
          <div style={{ fontSize: 11.5, color: '#9ec0e6', fontWeight: 700, letterSpacing: 2, fontFamily: fontMono, marginBottom: 14 }}>{lang === 'jp' ? '事前のご相談' : 'CALL AHEAD'}</div>
          <h3 style={{ fontSize: 22, fontWeight: 700, margin: 0, color: '#fff', lineHeight: 1.5 }}>{lang === 'jp' ? '発熱・咳のある方は、まずお電話ください' : 'Fever or cough? Please call first.'}</h3>
          <p style={{ fontSize: 14, lineHeight: 1.95, color: '#cfdcec', marginTop: 16 }}>{t.notice}</p>
          <a href={`tel:${t.phone.replace(/-/g,'')}`} style={{ marginTop: 22, padding: '14px 22px', background: '#fff', color: T.primaryDeep, fontWeight: 700, fontSize: 15, display: 'inline-flex', alignItems: 'center', gap: 10, textDecoration: 'none', fontFamily: fontMono }}>
            {Icon.phone(14, T.primaryDeep)} {t.phone}
          </a>
        </div>
      </div>
    </SimplePage>
  );
};

// ============ ACCESS ============
const AccessPage = ({ lang, t, go }) => {
  const T = TOKENS;
  return (
    <SimplePage lang={lang} t={t} go={go}
      kicker={lang === 'jp' ? '06 · アクセス' : '06 · ACCESS'}
      title={t.accessTitle}
      subtitle={lang === 'jp' ? '佐賀県唐津市呼子町。バス・お車どちらでもお越しいただけます。' : 'Yobuko-cho, Karatsu, Saga. Accessible by bus or car.'}
      crumbs={[t.nav.access]}>
      <div style={{ position: 'relative', marginBottom: 56, height: 520, border: `1px solid ${T.hairline}`, overflow: 'hidden' }}>
        <iframe
          title={lang === 'jp' ? '三浦医院 地図' : 'Miura Clinic Map'}
          src="https://maps.google.com/maps?q=33.5313496,129.8922563&z=16&output=embed"
          width="100%" height="100%" style={{ border: 0, display: 'block' }}
          loading="lazy" referrerPolicy="no-referrer-when-downgrade"
          allowFullScreen></iframe>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56 }}>
        <div>
          <h3 style={{ fontSize: 24, fontWeight: 700, margin: 0, color: T.ink }}>{lang === 'jp' ? '所在地・連絡先' : 'Location & Contact'}</h3>
          <div style={{ marginTop: 18 }}>
            <InfoRow icon={Icon.pin(16, T.primary)} label={lang === 'jp' ? '住所' : 'Address'} value={t.address} />
            <InfoRow icon={Icon.phone(14, T.primary)} label={lang === 'jp' ? '電話' : 'Phone'} value={t.phone} />
            <InfoRow icon={Icon.cross(14, T.primary)} label="FAX" value={t.fax} />
          </div>
        </div>
        <div>
          <h3 style={{ fontSize: 24, fontWeight: 700, margin: 0, color: T.ink }}>{lang === 'jp' ? '交通アクセス' : 'Getting here'}</h3>
          <div style={{ marginTop: 18 }}>
            <InfoRow icon={Icon.cross(14, T.primary)} label={lang === 'jp' ? 'バス' : 'Bus'} value={t.bus} />
            <InfoRow icon={Icon.cross(14, T.primary)} label={lang === 'jp' ? '駐車場' : 'Parking'} value={t.parking} />
            <InfoRow icon={Icon.cross(14, T.primary)} label={lang === 'jp' ? 'お車で' : 'By car'} value={lang === 'jp' ? '唐津市街より国道204号経由 約25分' : 'Approx. 25 min from Karatsu via Route 204'} />
            <InfoRow icon={Icon.cross(14, T.primary)} label={lang === 'jp' ? 'バリアフリー' : 'Accessible'} value={t.facilityIcons.join(' / ')} />
          </div>
        </div>
      </div>
    </SimplePage>
  );
};

// ============ FACILITIES ============
const FacilitiesPage = ({ lang, t, go }) => {
  const T = TOKENS;
  return (
    <SimplePage lang={lang} t={t} go={go}
      kicker={lang === 'jp' ? '05 · 院内設備' : '05 · FACILITIES'}
      title={t.facilitiesTitle}
      subtitle={lang === 'jp' ? '呼子の地域に根ざした、あたたかな雰囲気の院内をご紹介します。' : 'A warm and welcoming clinic rooted in the Yobuko community.'}
      crumbs={[lang === 'jp' ? '院内設備' : 'Facilities']}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 6 }}>
        <img src="images/entrance.png" alt={lang === 'jp' ? '玄関' : 'Entrance'} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', maxHeight: 500 }} />
        <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 6 }}>
          <img src="images/waiting-room-1.png" alt={lang === 'jp' ? '待合室' : 'Waiting room'} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          <img src="images/waiting-room-2.png" alt={lang === 'jp' ? '待合室' : 'Waiting room'} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </div>
      </div>

      <div style={{ marginTop: 32, padding: '16px 20px', background: T.bgWarm, border: `1px solid ${T.hairline}`, fontSize: 14, color: T.body, lineHeight: 1.85 }}>
        <span style={{ color: T.ok, fontWeight: 700, marginRight: 10 }}>●</span>{t.facilitiesNote}
      </div>
    </SimplePage>
  );
};

// ============ DOCTORS ============
const doctorsData = {
  jp: [
    { name: '三浦 正徳', role: '院長 / 内科', spec: '一般内科', credentials: [], bio: '' },
    { name: '藤見 幹太', role: '専門外来 / 循環器科', spec: '循環器専門外来（毎週水曜日）', credentials: [], bio: '福岡大学病院 循環器科より、毎週水曜日に診察を行っています。' },
    { name: '若松 謙太郎', role: '専門外来 / 呼吸器科', spec: '呼吸器専門外来（毎月第2土曜日）', credentials: [], bio: '大牟田病院 呼吸器科より、毎月第2土曜日に診察を行っています。' },
  ],
  en: [
    { name: 'Masatoku Miura, MD', role: 'Director · Internal Medicine', spec: 'General Internal Medicine', credentials: [], bio: '' },
    { name: 'Kanta Fujimi, MD', role: 'Visiting · Cardiology', spec: 'Cardiology Clinic (Every Wednesday)', credentials: [], bio: 'Visiting from Fukuoka University Hospital, Cardiology Department.' },
    { name: 'Kentaro Wakamatsu, MD', role: 'Visiting · Pulmonology', spec: 'Pulmonology Clinic (2nd Saturday monthly)', credentials: [], bio: 'Visiting from Omuta Hospital, Respiratory Medicine Department.' },
  ],
};

const DoctorsPage = ({ lang, t, go }) => {
  const T = TOKENS;
  const docs = doctorsData[lang] || doctorsData.jp;
  return (
    <SimplePage lang={lang} t={t} go={go}
      kicker={lang === 'jp' ? '医師紹介' : 'DOCTORS'}
      title={lang === 'jp' ? '医師紹介' : 'Our Doctors'}
      subtitle={lang === 'jp' ? '地域のみなさまに長く寄り添える診療を心がけています。' : 'Long-standing care, deeply rooted in the Yobuko community.'}
      crumbs={[lang === 'jp' ? '医師紹介' : 'Doctors']}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 56 }}>
        {docs.map((d, i) => (
          <div key={i} style={{ padding: '0 0 48px', borderBottom: i < docs.length - 1 ? `1px solid ${T.hairline}` : 'none' }}>
            <div style={{ fontSize: 11.5, color: T.primary, fontWeight: 700, letterSpacing: 2, fontFamily: fontMono, marginBottom: 12 }}>{d.role.toUpperCase()}</div>
            <h3 style={{ fontSize: 32, fontWeight: 700, margin: 0, color: T.ink, fontFamily: fontDisp, letterSpacing: lang === 'jp' ? 2 : -0.5 }}>{d.name}</h3>
            <div style={{ fontSize: 15, color: T.body, marginTop: 10 }}>{d.spec}</div>
            <p style={{ fontSize: 14.5, lineHeight: 2, color: T.body, marginTop: 16, textWrap: 'pretty' }}>{d.bio}</p>
            <div style={{ marginTop: 16, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {d.credentials.map((c, j) => (
                <span key={j} style={{ fontSize: 12, color: T.primaryDeep, padding: '6px 12px', background: T.primarySoft, fontWeight: 600 }}>{c}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
    </SimplePage>
  );
};

// ============ PRIVACY POLICY ============
const PrivacyPage = ({ lang, t, go }) => {
  const T = TOKENS;
  const isJP = lang === 'jp';
  const sections = isJP ? [
    {
      h: '1. 個人情報の取り扱いについて',
      p: '三浦医院（以下「当院」といいます）は、医療機関として患者様の個人情報を厳格に管理し、関連法令（個人情報の保護に関する法律、医療・介護関係事業者における個人情報の適切な取扱いのためのガイダンス等）を遵守して取り扱います。',
    },
    {
      h: '2. 個人情報の利用目的',
      p: '当院は、本ホームページを通じて取得した個人情報を、以下の目的の範囲内で利用いたします。',
      list: [
        'お問い合わせへの対応・回答',
        '医療サービスに関するご案内',
        'ホームページの改善・運営',
      ],
    },
    {
      h: '3. お問い合わせメールについて',
      p: 'お問い合わせメール（info@miura-clinic-yobuko.com）にお送りいただいた個人情報（氏名・メールアドレス・お問い合わせ内容等）は、ご回答およびお問い合わせ対応の目的にのみ利用いたします。法令に基づく場合等を除き、第三者に提供することはありません。',
    },
    {
      h: '4. アクセス解析ツール（Google Analytics）の利用について',
      p: '当ホームページでは、サイトの利用状況を把握し、より良いサービスを提供するために、Google社が提供するアクセス解析サービス「Google Analytics 4」を利用しています。',
      list: [
        'Google Analyticsは、Cookieを使用して匿名のトラフィックデータを収集します',
        '収集される情報には、訪問日時、閲覧ページ、使用ブラウザ、訪問元サイト等が含まれます',
        '収集されるデータは匿名であり、個人を特定するものではありません',
        'Google Analyticsの詳細は、Googleのプライバシーポリシーをご確認ください',
      ],
      sub: 'Cookieの使用を望まれない場合は、ブラウザの設定でCookieを無効化することが可能です。',
    },
    {
      h: '5. Cookieの利用について',
      p: '本ホームページでは、サービス向上のために一部のページでCookie（クッキー）を使用しています。Cookieはお客様が当院ホームページに再度アクセスされた際に識別を可能にするものですが、お客様個人を特定できる情報は含まれません。',
    },
    {
      h: '6. 個人情報の安全管理',
      p: '当院は、取得した個人情報の漏洩、紛失、改ざん等を防止するため、適切な安全管理措置を講じています。',
    },
    {
      h: '7. プライバシーポリシーの改定',
      p: '当院は、必要に応じて本プライバシーポリシーの内容を見直し、改善に努めます。改定後の内容は本ページに掲載いたします。',
    },
    {
      h: '8. お問い合わせ窓口',
      p: '本プライバシーポリシーに関するお問い合わせは、下記までご連絡ください。',
      list: [
        '三浦医院',
        '〒847-0304 佐賀県唐津市呼子町殿ノ浦吹上123番地',
        '電話：0955-51-1138',
        'メール：info@miura-clinic-yobuko.com',
      ],
    },
  ] : [
    {
      h: '1. Handling of Personal Information',
      p: 'Miura Clinic (the "Clinic") strictly manages patients\' personal information as a medical institution and complies with relevant laws including the Act on the Protection of Personal Information.',
    },
    {
      h: '2. Purpose of Use',
      p: 'The Clinic will use personal information obtained through this website within the scope of the following purposes:',
      list: [
        'Responding to inquiries',
        'Providing information about medical services',
        'Improving and operating this website',
      ],
    },
    {
      h: '3. Email Inquiries',
      p: 'Personal information sent to our inquiry email (info@miura-clinic-yobuko.com) will be used solely for the purpose of responding to your inquiry. We will not provide such information to third parties except as required by law.',
    },
    {
      h: '4. Use of Analytics Tools (Google Analytics)',
      p: 'This website uses Google Analytics 4, an analytics service provided by Google, to understand site usage and provide better services.',
      list: [
        'Google Analytics uses cookies to collect anonymous traffic data',
        'Information collected includes visit time, pages viewed, browser used, and referrer site',
        'Data collected is anonymous and does not identify individuals',
        'For details on Google Analytics, please review Google\'s privacy policy',
      ],
      sub: 'If you do not wish to allow cookies, you can disable them in your browser settings.',
    },
    {
      h: '5. Use of Cookies',
      p: 'This website uses cookies on some pages to improve service. Cookies enable identification when you revisit our site, but do not contain personally identifiable information.',
    },
    {
      h: '6. Security of Personal Information',
      p: 'The Clinic takes appropriate security measures to prevent leakage, loss, or alteration of personal information obtained.',
    },
    {
      h: '7. Revisions to This Privacy Policy',
      p: 'The Clinic may review and improve this Privacy Policy as needed. Revised content will be posted on this page.',
    },
    {
      h: '8. Contact',
      p: 'For inquiries regarding this Privacy Policy, please contact us at:',
      list: [
        'Miura Clinic',
        '123 Fukiage, Tonoura, Yobuko-cho, Karatsu-shi, Saga 847-0304, Japan',
        'Tel: 0955-51-1138',
        'Email: info@miura-clinic-yobuko.com',
      ],
    },
  ];

  return (
    <SimplePage lang={lang} t={t} go={go}
      kicker={isJP ? 'プライバシーポリシー' : 'PRIVACY POLICY'}
      title={isJP ? 'プライバシーポリシー' : 'Privacy Policy'}
      subtitle={isJP ? '個人情報の取り扱い・Cookie・アクセス解析等についてのご説明' : 'Information on how we handle personal data, cookies, and analytics.'}
      crumbs={[isJP ? 'プライバシーポリシー' : 'Privacy Policy']}>
      <div style={{ maxWidth: 820 }}>
        <p style={{ fontSize: 13, color: T.muted, marginBottom: 40, fontFamily: fontMono }}>
          {isJP ? '最終更新日: 2026年6月4日' : 'Last updated: June 4, 2026'}
        </p>
        {sections.map((s, i) => (
          <section key={i} style={{ marginBottom: 36 }}>
            <h2 style={{ fontSize: 19, fontWeight: 700, color: T.ink, margin: '0 0 14px', letterSpacing: isJP ? 1 : 0 }}>{s.h}</h2>
            <p style={{ fontSize: 14.5, lineHeight: 2, color: T.body, margin: 0 }}>{s.p}</p>
            {s.list && (
              <ul style={{ fontSize: 14.5, lineHeight: 2, color: T.body, marginTop: 10, paddingLeft: 24 }}>
                {s.list.map((li, j) => (<li key={j} style={{ marginBottom: 4 }}>{li}</li>))}
              </ul>
            )}
            {s.sub && (
              <p style={{ fontSize: 13.5, lineHeight: 1.9, color: T.muted, marginTop: 12 }}>{s.sub}</p>
            )}
          </section>
        ))}
      </div>
    </SimplePage>
  );
};

Object.assign(window, { NewsList, NewsDetail, DepartmentsPage, FirstVisitPage, AccessPage, FacilitiesPage, DoctorsPage, PrivacyPage });