@extends('layouts.app')

@section('title', 'NORIMONSTER')

<link rel="stylesheet" href="{{ asset('css/reset.css') }}" />
<link rel="stylesheet" href="{{ asset('css/common.css') }}" />
<link rel="stylesheet" href="{{ asset('css/style.css') }}" />
<script src="{{ asset('js/script.js') }}" defer></script>

@section('content')
<!-- お知らせバー：セールや配送情報など -->
<div class="notice" role="status" aria-live="polite">
    <p>新規会員登録で500円クーポン配布中。</p>
</div>

<!-- ヘッダー（下スクロールで非表示／上スクロールで表示） -->
<header class="site-header" data-header>
    <div class="site-header__inner">
        <!-- ロゴ -->
        <a class="site-header__logo" href="#" aria-label="NORIMONSTER ホーム">
            NORIMONSTER
        </a>

        <!-- 検索フォーム -->
        <form class="site-search" role="search" aria-label="サイト内検索">
            <label class="sr-only" for="q">キーワードで探す</label>
            <input id="q" name="q" type="search" placeholder="アイテム・ブランドを検索" />
            <button type="submit" aria-label="検索">
          <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
            <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2" fill="none"/>
            <line x1="16.65" y1="16.65" x2="21" y2="21" stroke="currentColor" stroke-width="2"/>
          </svg>
        </button>
        </form>

        <!-- 右側アイコン類 -->
        <nav class="site-actions" aria-label="アクション">
            <!-- マイページ -->
            <a class="icon-btn" href="mypage/index.html" aria-label="マイページ">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true">
                    <path
                        d="M320 352c-88.4 0-160-71.6-160-160S231.6 32 320 32s160 71.6 160 160-71.6 160-160 160zm0 64c123.7 0 320 62.2 320 186.7 0 17.6-14.3 32-32 32H32c-17.7 0-32-14.4-32-32C0 478.2 196.3 416 320 416z" />
                </svg>
            </a>

            <button class="icon-btn" aria-label="お気に入り">
          <span class="badge" data-like-count>0</span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true">
            <path d="M305 151.1L320 171.8L335 151.1C360 116.5 400.2 96 442.9 96C516.4 96 576 155.6 576 229.1L576 231.7C576 343.9 436.1 474.2 363.1 529.9C350.7 539.3 335.5 544 320 544C304.5 544 289.2 539.4 276.9 529.9C203.9 474.2 64 343.9 64 231.7L64 229.1C64 155.6 123.6 96 197.1 96C239.8 96 280 116.5 305 151.1z"/>
          </svg>
        </button>

            <button class="icon-btn" aria-label="カート">
          <span class="badge" data-cart-count>0</span>
          <a href="cart.html">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true">
              <path d="M24 48C10.7 48 0 58.7 0 72C0 85.3 10.7 96 24 96L69.3 96C73.2 96 76.5 98.8 77.2 102.6L129.3 388.9C135.5 423.1 165.3 448 200.1 448L456 448C469.3 448 480 437.3 480 424C480 410.7 469.3 400 456 400L200.1 400C188.5 400 178.6 391.7 176.5 380.3L171.4 352L475 352C505.8 352 532.2 330.1 537.9 299.8L568.9 133.9C572.6 114.2 557.5 96 537.4 96L124.7 96L124.3 94C119.5 67.4 96.3 48 69.2 48L24 48zM208 576C234.5 576 256 554.5 256 528C256 501.5 234.5 480 208 480C181.5 480 160 501.5 160 528C160 554.5 181.5 576 208 576zM432 576C458.5 576 480 554.5 480 528C480 501.5 458.5 480 432 480C405.5 480 384 501.5 384 528C384 554.5 405.5 576 432 576z"/>
            </svg>
          </a>
        </button>

            <button class="icon-btn" aria-label="メニュー" data-menu-toggle>≡</button>
        </nav>

    </div>

    <!-- ▼ グローバルナビ（PC表示メイン） -->
    <div class="global-nav" data-global-nav>
        <ul>
            <li><a href="#" class="is-active">WOMEN</a></li>
            <li><a href="#">MEN</a></li>
            <li><a href="#">KIDS</a></li>
            <li><a href="#">BEAUTY</a></li>
            <li><a href="#">HOME</a></li>
            <li><a href="#">SALE</a></li>
            <li><a href="#">BRAND</a></li>
        </ul>
    </div>
</header>

<div class="trustbar" aria-label="ご利用ガイドの要点">
    <div class="trustbar__item">¥3,980以上<span>送料無料</span></div>
    <div class="trustbar__item">最短<span>翌日発送</span></div>
    <div class="trustbar__item"><span>14日</span>以内返品可</div>
    <div class="trustbar__item">各種<span>キャッシュレス対応</span></div>
</div>

<!-- ▼ ヒーロー（シンプルなスライダー） -->
<section class="hero" aria-label="プロモーション">
    <div class="hero__track" data-hero-track>
        <!-- 画像は仮置き -->
        <a class="hero__slide is-active" href="#"
            style="--bg:url('https://images.unsplash.com/photo-1519741497674-611481863552?q=80&w=1600&auto=format&fit=crop');">
            <span class="hero__caption">Popular items</span>
        </a>
        <a class="hero__slide" href="#"
            style="--bg:url('https://images.unsplash.com/photo-1558769132-cb1aea458c5e?q=80&w=1600&auto=format&fit=crop');">
            <span class="hero__caption">New work</span>
        </a>
        <a class="hero__slide" href="#"
            style="--bg:url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=1600&auto=format&fit=crop');">
            <span class="hero__caption">Recommendation</span>
        </a>
    </div>
    <div class="hero__dots" role="tablist" aria-label="スライド切替" data-hero-dots></div>
</section>

<!-- ▼ カテゴリタブ -->
<nav class="tabs" aria-label="カテゴリー">
    <button class="tab is-active" data-filter="all">すべて</button>
    <button class="tab" data-filter="outer">アウター</button>
    <button class="tab" data-filter="tops">トップス</button>
    <button class="tab" data-filter="bottoms">ボトムス</button>
    <button class="tab" data-filter="shoes">シューズ</button>
    <button class="tab" data-filter="bag">バッグ</button>
</nav>

<!-- ▼ 並び替え・件数（スクロールで追従） -->
<div class="toolbar" data-toolbar>
    <div class="toolbar__left">
        <p><strong data-result-count>48</strong> 件</p>
    </div>
    <div class="toolbar__right">
        <label for="sort">並び替え</label>
        <select id="sort" name="sort" data-sort>
        <option value="recommend">おすすめ順</option>
        <option value="new">新着順</option>
        <option value="low">価格の安い順</option>
        <option value="high">価格の高い順</option>
      </select>
        <label for="per">表示件数</label>
        <select id="per" name="per" data-per>
        <option value="24" selected>24</option>
        <option value="48">48</option>
        <option value="96">96</option>
      </select>
    </div>
</div>

<!-- ▼ 商品グリッド -->
<main class="grid" aria-label="商品一覧" data-grid>
    <!-- 商品カード構造のテンプレ -->
    <article class="card" data-category="outer" data-price="12900" data-new="true">
        <a href="#" class="card__thumb" aria-label="ウールブレンドチェスターコート">
            <img src="https://picsum.photos/200/300" alt="ホバー前表示" />
            <img class="hover" src="https://picsum.photos/200/300" alt="ホバー後表示" />
            <span class="badge badge--new">NEW</span>
        </a>
        <div class="card__body">
            <h3 class="card__brand">制作者名</h3>
            <p class="card__name">商品名</p>
            <div class="card__price">
                <span class="price">¥12,900</span>
            </div>
            <div class="card__meta">
                <div class="colors" aria-label="カラー">
                    <button style="--c:#222" aria-label="ブラック" title="ブラック"></button>
                    <button style="--c:#7f8c8d" aria-label="グレー" title="グレー"></button>
                    <button style="--c:#b87333" aria-label="ブラウン" title="ブラウン"></button>
                </div>
                <div class="sizes" aria-label="サイズ">S / M / L</div>
            </div>
            <div class="card__actions">
                <button class="btn-like" aria-label="お気に入りに追加" data-like>♡</button>
                <button class="btn-cart" aria-label="カートに入れる" data-add>カート</button>
            </div>
        </div>
    </article>

    <article class="card" data-category="outer" data-price="12900" data-new="true">
        <a href="#" class="card__thumb" aria-label="ウールブレンドチェスターコート">
            <img src="https://picsum.photos/200/300" alt="ホバー前表示" />
            <img class="hover" src="https://picsum.photos/200/300" alt="ホバー後表示" />
            <span class="badge badge--new">NEW</span>
        </a>
        <div class="card__body">
            <h3 class="card__brand">制作者名</h3>
            <p class="card__name">商品名</p>
            <div class="card__price">
                <span class="price">¥12,900</span>
            </div>
            <div class="card__meta">
                <div class="colors" aria-label="カラー">
                    <button style="--c:#222" aria-label="ブラック" title="ブラック"></button>
                    <button style="--c:#7f8c8d" aria-label="グレー" title="グレー"></button>
                    <button style="--c:#b87333" aria-label="ブラウン" title="ブラウン"></button>
                </div>
                <div class="sizes" aria-label="サイズ">S / M / L</div>
            </div>
            <div class="card__actions">
                <button class="btn-like" aria-label="お気に入りに追加" data-like>♡</button>
                <button class="btn-cart" aria-label="カートに入れる" data-add>カート</button>
            </div>
        </div>
    </article>

    <article class="card" data-category="outer" data-price="12900" data-new="true">
        <a href="#" class="card__thumb" aria-label="ウールブレンドチェスターコート">
            <img src="https://picsum.photos/200/300" alt="ホバー前表示" />
            <img class="hover" src="https://picsum.photos/200/300" alt="ホバー後表示" />
            <span class="badge badge--new">NEW</span>
        </a>
        <div class="card__body">
            <h3 class="card__brand">制作者名</h3>
            <p class="card__name">商品名</p>
            <div class="card__price">
                <span class="price">¥12,900</span>
            </div>
            <div class="card__meta">
                <div class="colors" aria-label="カラー">
                    <button style="--c:#222" aria-label="ブラック" title="ブラック"></button>
                    <button style="--c:#7f8c8d" aria-label="グレー" title="グレー"></button>
                    <button style="--c:#b87333" aria-label="ブラウン" title="ブラウン"></button>
                </div>
                <div class="sizes" aria-label="サイズ">S / M / L</div>
            </div>
            <div class="card__actions">
                <button class="btn-like" aria-label="お気に入りに追加" data-like>♡</button>
                <button class="btn-cart" aria-label="カートに入れる" data-add>カート</button>
            </div>
        </div>
    </article>

    <!-- 以降、同様の構造で増やすだけ -->
</main>

<!-- ▼ もっと見る -->
<div class="load-more">
    <button class="btn-more" data-loadmore>もっと見る</button>
</div>

<!-- ▼ フッター直前：ニュースレター登録 -->
<section class="newsletter" aria-label="ニュースレター登録">
    <h2>メールでお得情報を受け取る</h2>

    <form id="newsletterForm" class="newsletter__form" novalidate>
        <!-- 視覚非表示テキスト（sr-onlyは既存のクラスを流用） -->
        <label class="sr-only" for="nl-email">メールアドレス</label>
        <input id="nl-email" name="email" type="email" inputmode="email"
             placeholder="you@example.com" autocomplete="email" required
             aria-describedby="nl-note">

        <!-- ボット対策のハニーポット（人間は触れない） -->
        <input type="text" name="company" tabindex="-1" autocomplete="off"
             class="sr-only" aria-hidden="true" style="position:absolute;left:-9999px;" />

        <button type="submit" aria-label="登録する">登録</button>

        <!-- 送信結果（aria-liveで読み上げ） -->
        <p class="newsletter__msg" aria-live="polite"></p>
    </form>

    <p id="nl-note" class="newsletter__note">
        登録で500円クーポン（初回のみ）。いつでも配信停止できます。
    </p>
</section>

<a href="ai/index.html" class="ai-fab" aria-label="AIでTシャツをデザインする">
    <!-- TシャツのSVGアイコン -->
    <svg viewBox="0 0 24 24" aria-hidden="true">
        <path
            d="M7 4c1.2 1 2.6 1.5 5 1.5S15.8 5 17 4l3 2.2v3.3l-2.4-1.1c-.4 1.4-.6 3.4-.6 6.6V21H7v-6.9c0-3.2-.2-5.2-.6-6.6L4 9.5V6.2L7 4z" />
    </svg>
    <span>AIでデザイン</span>
</a>

<!-- ▼ フッター（最低限） -->
<footer class="site-footer">
    <nav aria-label="フッターナビ">
        <a href="https://noritechlab.com">会社概要</a>
        <a href="#">採用情報</a>
        <a href="legal/terms.html">利用規約</a>
        <a href="legal/privacy.html">プライバシーポリシー</a>
        <a href="faq.html">FAQ</a>
        <button type="button" class="link-like" data-cc-manage>Cookie設定</button>
    </nav>
    <small>&copy; 2025 NORIMONSTER</small>
</footer>

<script src="script.js" defer></script>

<!-- ▼ Cookie同意バナー -->
<div class="cookie-consent" role="dialog" aria-modal="true" aria-live="polite" hidden>
    <div class="cookie-consent__inner" role="document">
        <h2 class="cookie-consent__title">Cookieの使用について</h2>
        <p class="cookie-consent__lead">
            本サイトでは、サイトの改善や広告配信のためにCookieを使用します。目的別に選択できます。
        </p>

        <div class="cookie-consent__buttons">
            <button type="button" class="cc-btn cc-btn--primary" data-cc-accept>すべて許可</button>
            <button type="button" class="cc-btn" data-cc-reject>すべて拒否</button>
            <button type="button" class="cc-btn cc-btn--ghost" data-cc-open>設定する</button>
        </div>

        <div class="cookie-consent__panel" hidden>
            <ul class="cookie-consent__list">
                <li class="cookie-consent__row">
                    <span>必須</span>
                    <span class="cc-desc">サイトを動かすために必要（常に有効）</span>
                    <input type="checkbox" checked disabled aria-label="必須Cookie（常に有効）">
                </li>
                <li class="cookie-consent__row">
                    <span>分析</span>
                    <span class="cc-desc">利用状況の把握・改善に利用</span>
                    <input id="cc-analytics" type="checkbox" aria-label="分析Cookieを許可">
                </li>
                <li class="cookie-consent__row">
                    <span>広告</span>
                    <span class="cc-desc">パーソナライズ広告に利用</span>
                    <input id="cc-marketing" type="checkbox" aria-label="広告Cookieを許可">
                </li>
            </ul>
            <div class="cookie-consent__actions">
                <a class="cc-link" href="legal/privacy.html">詳しく（プライバシーポリシー）</a>
                <button type="button" class="cc-btn cc-btn--primary" data-cc-save>選択を保存</button>
            </div>
        </div>
    </div>
</div>

</body>

</html>