<?php
require_once __DIR__ . '/lib/news-lib.php';

$id = $_GET["id"] ?? null;
$file = news_data_dir() . basename(str_replace('\\', '/', (string)$id));

if (!file_exists($file)) die("記事がありません");

$parsed = news_parse_file($file);
$date        = $parsed["date"];
$title       = $parsed["title"];
$categories  = $parsed["categories"];
$description = $parsed["description"];
$body        = news_render_body_html($parsed["body"]);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($title) ?></title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  background: #f2f4f8;
  color: #2a3050;
  font-size: 14px;
  line-height: 1.7;
  padding: 24px 20px 48px;
}

.article-card {
  background: #fff;
  border: 1px solid #e4e7ef;
  border-radius: 12px;
  overflow: hidden;
  max-width: 860px;
  margin: 0 auto;
}

.article-header {
  background: #1a2744;
  padding: 20px 24px;
}
.article-date {
  font-size: 12px;
  color: #7a90b8;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.article-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.article-meta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.news-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(74,144,226,0.25);
  color: #a8c8f8;
  white-space: nowrap;
}
.article-desc {
  font-size: 12px;
  color: #8aa8cc;
}

.article-body {
  padding: 24px 28px;
  font-size: 14px;
  color: #2a3050;
  line-height: 1.85;
}
.article-body p  { margin-bottom: 1em; }
.article-body h3 { font-size: 15px; font-weight: 700; color: #1a2744; margin: 1.4em 0 0.5em; }
.article-body a  { color: #4a90e2; }
.article-body a:hover { text-decoration: underline; }

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}
.gallery a { text-decoration: none; }
.news-image {
  width: 220px;
  height: 165px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e4e7ef;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.15s;
  display: block;
}
.news-image:hover { transform: scale(1.03); }

.pdf-link { margin: 12px 0; }
.pdf-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid #dde1ea;
  border-radius: 8px;
  background: #f8f9fb;
  text-decoration: none;
  color: #2a3050;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: background 0.12s, border-color 0.12s;
}
.pdf-link a:hover { background: #eef4ff; border-color: #4a90e2; color: #4a90e2; }

.article-footer {
  padding: 14px 24px;
  border-top: 1px solid #f0f2f6;
  background: #f8f9fb;
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 7px;
  border: 1px solid #dde1ea;
  background: #fff;
  color: #3a4060;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
  font-family: inherit;
}
.btn-back:hover { background: #eef4ff; border-color: #4a90e2; color: #4a90e2; text-decoration: none; }
</style>
</head>
<body>

<div class="article-card">

  <div class="article-header">
    <div class="article-date"><?= htmlspecialchars($date) ?></div>
    <div class="article-title"><?= htmlspecialchars($title) ?></div>
    <?php if ($categories !== [] || $description !== ""): ?>
    <div class="article-meta">
      <?= news_category_labels_html($categories) ?>
      <?php if ($description !== ""): ?>
        <span class="article-desc"><?= htmlspecialchars($description) ?></span>
      <?php endif; ?>
    </div>
    <?php endif; ?>
  </div>

  <div class="article-body">
    <?= $body ?>
  </div>

  <div class="article-footer">
    <a href="javascript:history.back()" class="btn-back">◀ 戻る</a>
  </div>

</div>

</body>
</html>
