<?php
/**
 * Template Name: ねおんトップページ
 *
 * WordPress の固定ページに適用するカスタムテンプレート。
 * Astra テーマの子テーマフォルダ（/wp-content/themes/astra-child/）に
 * このファイルを置いてください。
 */
get_header(); ?>
<style>
/* ========== リセット & ベース ========== */
.neon-top * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.neon-top {
  font-family: 'Noto Sans JP', sans-serif;
  background: #f4f7f9;
  color: #2e4a58;
  line-height: 1.7;
}
/* ========== ヒーローエリア ========== */
.neon-hero {
  background: #BACAD2;
  padding: 72px 24px 64px;
  text-align: left;
}
.neon-hero__inner {
  max-width: 720px;
  margin: 0 auto;
}
.neon-hero__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #3a5a6a;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.neon-hero__title {
  font-size: 32px;
  font-weight: 700;
  color: #1e3540;
  line-height: 1.5;
  margin-bottom: 16px;
}
.neon-hero__text {
  font-size: 15px;
  color: #3a5a6a;
  margin-bottom: 28px;
  max-width: 480px;
  line-height: 1.8;
}
.neon-hero__btn {
  display: inline-block;
  background: #1e3540;
  color: #BACAD2;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 28px;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
}
.neon-hero__btn:hover {
  opacity: 0.85;
}
/* ========== セクション共通 ========== */
.neon-section {
  padding: 52px 24px;
  max-width: 800px;
  margin: 0 auto;
}
.neon-section__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #8fa8b5;
  text-transform: uppercase;
  margin-bottom: 20px;
}
/* ========== カテゴリーバナー ========== */
.neon-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.neon-cat {
  flex: 0 0 calc((100% - 28px) / 3);
}
.neon-cat {
  background: #fff;
  border-radius: 10px;
  border: 0.5px solid #d5e2e9;
  border-top: 3px solid #BACAD2;
  padding: 24px 16px;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.neon-cat:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(186, 202, 210, 0.35);
}
.neon-cat__icon {
  font-size: 28px;
  margin-bottom: 10px;
  display: block;
}
.neon-cat__name {
  font-size: 14px;
  font-weight: 700;
  color: #2e4a58;
  margin-bottom: 6px;
}
.neon-cat__desc {
  font-size: 12px;
  color: #8fa8b5;
  line-height: 1.6;
}
/* ========== 新着記事 ========== */
.neon-posts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.neon-post {
  background: #fff;
  border-radius: 8px;
  border: 0.5px solid #d5e2e9;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.15s;
}
.neon-post:hover {
  transform: translateY(-2px);
}
.neon-post__thumb img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.neon-post__thumb--empty {
  width: 100%;
  height: 160px;
  background: #dce8ee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8fa8b5;
  font-size: 12px;
}
.neon-post__body {
  padding: 14px 16px;
}
.neon-post__cat {
  display: inline-block;
  font-size: 10px;
  background: #BACAD2;
  color: #1e3540;
  padding: 2px 10px;
  border-radius: 3px;
  margin-bottom: 8px;
  font-weight: 500;
}
.neon-post__title {
  font-size: 13px;
  font-weight: 500;
  color: #2e4a58;
  line-height: 1.6;
}
/* ========== プロフィール ========== */
.neon-profile {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border-radius: 12px;
  border: 0.5px solid #d5e2e9;
  border-left: 4px solid #BACAD2;
  padding: 24px;
}
.neon-profile__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #BACAD2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.neon-profile__name {
  font-size: 15px;
  font-weight: 700;
  color: #2e4a58;
  margin-bottom: 6px;
}
.neon-profile__bio {
  font-size: 13px;
  color: #6a8fa0;
  line-height: 1.7;
}
/* ========== スマホ対応 ========== */
@media (max-width: 640px) {
  .neon-hero__title { font-size: 24px; }
  .neon-cats { justify-content: flex-start; }
  .neon-cat { flex: 0 0 100%; }
  .neon-posts { grid-template-columns: 1fr; }
  .neon-profile { flex-direction: column; text-align: center; }
}
</style>
<div class="neon-top">
  <!-- ヒーローエリア -->
  <section class="neon-hero">
    <div class="neon-hero__inner">
      <div class="neon-hero__label">大人の夜遊びガイド</div>
      <h1 class="neon-hero__title">夜の選択肢を、<br>もっと広く。</h1>
      <p class="neon-hero__text">
        ねおんが実際に訪れた場所・使ったサービスだけをレポート。<br>
        リアルな情報で、あなたの「今夜」をもっと充実させます。
      </p>
      <a href="/category/entryguide/" class="neon-hero__btn">まずはここから読む →</a>
    </div>
  </section>
  <!-- カテゴリーバナー -->
  <div style="background: #f4f7f9; padding: 52px 24px;">
    <div style="max-width: 800px; margin: 0 auto;">
      <div class="neon-section__label">カテゴリー</div>
      <div class="neon-cats">
        <a href="/category/chat/" class="neon-cat">
          <span class="neon-cat__icon">📡</span>
          <div class="neon-cat__name">ライブ配信</div>
          <div class="neon-cat__desc">ストリップチャット系の使い方・楽しみ方</div>
        </a>
        <a href="https://live-neoneros.com/category/myfans/" class="neon-cat">
          <span class="neon-cat__icon">⭐</span>
          <div class="neon-cat__name">myfans</div>
          <div class="neon-cat__desc">クリエイター紹介・活用ガイド</div>
        </a>
        <a href="https://live-neoneros.com/category/fanza/" class="neon-cat">
          <span class="neon-cat__icon">🎬</span>
          <div class="neon-cat__name">FANZA</div>
          <div class="neon-cat__desc">動画・作品レビュー・活用ガイド</div>
        </a>
        <a href="/category/mensesthe/" class="neon-cat">
          <span class="neon-cat__icon">💆</span>
          <div class="neon-cat__name">メンズエステ</div>
          <div class="neon-cat__desc">エリア別レポート・選び方ガイド</div>
        </a>
        <a href="/category/happeningbar/" class="neon-cat">
          <span class="neon-cat__icon">🍸</span>
          <div class="neon-cat__name">ハプニングバー</div>
          <div class="neon-cat__desc">店舗紹介・初心者マナー解説</div>
        </a>
      </div>
    </div>
  </div>
  <!-- 新着記事 -->
  <div style="background: #fff; padding: 52px 24px;">
    <div style="max-width: 800px; margin: 0 auto;">
      <div class="neon-section__label">新着記事</div>
      <div class="neon-posts">
        <?php
        $recent_posts = new WP_Query([
          'posts_per_page' => 4,
          'post_status'    => 'publish',
        ]);
        if ( $recent_posts->have_posts() ) :
          while ( $recent_posts->have_posts() ) : $recent_posts->the_post();
            $cats = get_the_category();
            $cat_name = $cats ? esc_html( $cats[0]->name ) : '';
        ?>
        <a href="<?php the_permalink(); ?>" class="neon-post">
          <div class="neon-post__thumb">
            <?php if ( has_post_thumbnail() ) : ?>
              <?php the_post_thumbnail('medium', ['style' => 'width:100%;height:160px;object-fit:cover;display:block;']); ?>
            <?php else : ?>
              <div class="neon-post__thumb--empty">No Image</div>
            <?php endif; ?>
          </div>
          <div class="neon-post__body">
            <?php if ( $cat_name ) : ?>
              <span class="neon-post__cat"><?php echo $cat_name; ?></span>
            <?php endif; ?>
            <div class="neon-post__title"><?php the_title(); ?></div>
          </div>
        </a>
        <?php
          endwhile;
          wp_reset_postdata();
        endif;
        ?>
      </div>
    </div>
  </div>
  <!-- プロフィール -->
  <div style="background: #f4f7f9; padding: 0 24px 52px;">
    <div style="max-width: 800px; margin: 0 auto;">
      <div class="neon-profile">
        <div class="neon-profile__avatar">🌙</div>
        <div>
          <div class="neon-profile__name">ねおん</div>
          <div class="neon-profile__bio">
            大人のエンタメを実体験ベースで紹介。初心者目線を大切に、安心して楽しめる情報をお届けします。
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<?php get_footer(); ?>