@extends('layouts.main')

@section('title', 'News – World Gymnastics')

@section('styles')
<style>
    :root {
        --border  : rgba(15,23,42,.09);
        --radius  : 20px;
        --tr      : cubic-bezier(.4,0,.2,1);
        --gradient: linear-gradient(135deg,#00d084,#00c6ff);
        --primary : #0f172a;
        --muted   : #64748b;
    }

    /* ── HERO ── */
    .news-hero {
        position:relative; height:320px; overflow:hidden;
        background:linear-gradient(135deg,#0f172a 0%,#1e293b 60%,#0f2744 100%);
        display:flex; align-items:center; justify-content:center;
    }
    .news-hero::before {
        content:""; position:absolute; inset:0;
        background:url('{{ asset('img/olym.jpg') }}') center/cover no-repeat;
        opacity:.25;
    }
    .news-hero-content { position:relative; z-index:2; text-align:center; }
    .news-hero-content .eyebrow {
        display:inline-block; padding:6px 18px; border-radius:50px;
        background:rgba(255,255,255,.12); backdrop-filter:blur(8px);
        border:1px solid rgba(255,255,255,.2);
        font-size:12px; font-weight:600; color:rgba(255,255,255,.8);
        letter-spacing:2px; text-transform:uppercase; margin-bottom:16px;
    }
    .news-hero-content h1 {
        font-family:'Montserrat',sans-serif;
        font-size:clamp(2rem,5vw,3.5rem); font-weight:800; color:white;
        letter-spacing:-1px;
    }
    .news-hero-content h1 span {
        background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    }
    .news-hero-content p { font-size:15px; color:rgba(255,255,255,.65); margin-top:10px; }

    /* ── BREADCRUMB ── */
    .breadcrumb-bar {
        background:white; border-bottom:1px solid var(--border); padding:12px 0;
    }
    .breadcrumb-bar .inner {
        max-width:1200px; margin:0 auto; padding:0 24px;
        display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    }
    .breadcrumb-nav { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
    .breadcrumb-nav a { color:var(--muted); text-decoration:none; transition:.2s; }
    .breadcrumb-nav a:hover { color:#00b894; }
    .breadcrumb-nav i { font-size:10px; }
    .breadcrumb-nav .current { color:var(--primary); font-weight:600; }

    .btn-add-post {
        display:inline-flex; align-items:center; gap:8px;
        padding:10px 22px; border-radius:50px; border:none;
        background:var(--gradient); color:white;
        font-family:'Poppins',sans-serif; font-size:13px; font-weight:600;
        cursor:pointer; transition:.35s var(--tr); text-decoration:none;
        box-shadow:0 8px 22px rgba(0,208,132,.25);
    }
    .btn-add-post:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,208,132,.38); color:white; }

    /* ── FILTER BAR ── */
    .filter-bar {
        max-width:1200px; margin:28px auto 0; padding:0 24px;
        display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    }
    .filter-chip {
        padding:8px 18px; border-radius:50px; border:1.5px solid var(--border);
        background:white; font-family:'Poppins',sans-serif; font-size:12px; font-weight:600;
        color:var(--muted); text-decoration:none; transition:.25s var(--tr);
        display:inline-block;
    }
    .filter-chip:hover, .filter-chip.active {
        background:var(--gradient); color:white; border-color:transparent;
        box-shadow:0 6px 16px rgba(0,208,132,.22);
    }

    /* ── POSTS GRID ── */
    .posts-section { max-width:1200px; margin:24px auto 60px; padding:0 24px; }
    .posts-grid {
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
        gap:24px;
    }

    /* ── POST CARD ── */
    .post-card {
        background:white; border-radius:var(--radius);
        box-shadow:0 4px 20px rgba(0,0,0,.05);
        overflow:hidden; display:flex; flex-direction:column;
        transition:.35s var(--tr); text-decoration:none; color:inherit;
    }
    .post-card:hover { transform:translateY(-6px); box-shadow:0 18px 45px rgba(0,0,0,.1); }

    .card-media { position:relative; height:200px; background:#e2e8f0; overflow:hidden; flex-shrink:0; }
    .card-media img { width:100%; height:100%; object-fit:cover; transition:.4s var(--tr); }
    .post-card:hover .card-media img { transform:scale(1.05); }
    .card-media .no-image {
        width:100%; height:100%; display:flex; align-items:center; justify-content:center;
        background:linear-gradient(135deg,#e2e8f0,#cbd5e1);
    }
    .card-media .no-image i { font-size:48px; color:#94a3b8; }

    .cat-badge {
        position:absolute; top:12px; left:12px;
        padding:4px 12px; border-radius:20px;
        font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    }
    .cat-news    { background:rgba(0,208,132,.85); color:white; }
    .cat-event   { background:rgba(0,198,255,.85); color:white; }
    .cat-results { background:rgba(139,195,74,.85); color:white; }
    .cat-update  { background:rgba(124,58,237,.85); color:white; }

    .card-body { padding:20px 22px; flex:1; display:flex; flex-direction:column; gap:10px; }
    .card-title { font-size:15px; font-weight:700; color:var(--primary); line-height:1.4; }
    .card-excerpt {
        font-size:13px; color:var(--muted); line-height:1.6;
        display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    }
    .card-footer-row {
        display:flex; align-items:center; justify-content:space-between;
        margin-top:auto; padding-top:12px; border-top:1px solid var(--border);
    }
    .card-author { display:flex; align-items:center; gap:8px; }
    .card-avatar {
        width:28px; height:28px; border-radius:50%;
        background:var(--gradient);
        display:flex; align-items:center; justify-content:center;
        font-size:11px; font-weight:700; color:white; flex-shrink:0;
    }
    .card-author-name { font-size:12px; font-weight:600; color:var(--primary); }
    .card-date { font-size:11px; color:var(--muted); }

    /* Empty state */
    .empty-news { grid-column:1/-1; text-align:center; padding:80px 20px; }
    .empty-news i { font-size:56px; color:#cbd5e1; display:block; margin-bottom:16px; }
    .empty-news h3 { font-size:18px; font-weight:700; color:var(--primary); margin-bottom:8px; }
    .empty-news p { font-size:14px; color:var(--muted); }
    .empty-news a {
        display:inline-flex; align-items:center; gap:8px;
        padding:10px 24px; border-radius:50px; margin-top:14px;
        background:var(--gradient); color:white; text-decoration:none;
        font-size:13px; font-weight:600;
    }

    /* Flash */
    .flash-success {
        max-width:1200px; margin:20px auto 0; padding:0 24px;
    }
    .flash-success-inner {
        background:#d1fae5; border:1px solid #a7f3d0; color:#065f46;
        border-radius:12px; padding:12px 18px;
        display:flex; align-items:center; gap:10px; font-size:13px;
    }

    /* Pagination */
    .pagination-wrap {
        max-width:1200px; margin:32px auto 0; padding:0 24px;
        display:flex; justify-content:center;
    }

    @media(max-width:768px) {
        .posts-grid { grid-template-columns:1fr; }
    }
</style>
@endsection

@section('content')

<!-- ── HERO ── -->
<div class="news-hero">
    <div class="news-hero-content">
        <div class="eyebrow">World Gymnastics</div>
        <h1>Latest <span>News</span></h1>
        <p>Stay up to date with the world of gymnastics</p>
    </div>
</div>

<!-- ── BREADCRUMB + ADD POST ── -->
<div class="breadcrumb-bar">
    <div class="inner">
        <nav class="breadcrumb-nav">
            <a href="{{ route('home') }}">Home</a>
            <i class="bi bi-chevron-right"></i>
            <span class="current">News</span>
        </nav>
        @auth
        <a href="{{ route('posts.create') }}" class="btn-add-post">
            <i class="bi bi-plus-lg"></i> Add Post
        </a>
        @endauth
    </div>
</div>

<!-- ── FILTER CHIPS ── -->
<div class="filter-bar">
    <a href="{{ route('pages.news') }}"
       class="filter-chip {{ !$category ? 'active' : '' }}">All</a>
    @foreach(['News','Event','Results','Update'] as $cat)
    <a href="{{ route('pages.news', ['category' => $cat]) }}"
       class="filter-chip {{ $category === $cat ? 'active' : '' }}">{{ $cat }}s</a>
    @endforeach
</div>

<!-- ── FLASH MESSAGE ── -->
@if(session('success'))
<div class="flash-success">
    <div class="flash-success-inner">
        <i class="bi bi-check-circle-fill"></i>
        {{ session('success') }}
    </div>
</div>
@endif

<!-- ── POSTS GRID ── -->
<section class="posts-section">
    <div class="posts-grid">
        @forelse($posts as $post)
        <a href="{{ route('posts.show', $post) }}" class="post-card">
            <div class="card-media">
                @if($post->image)
                    <img src="{{ asset('storage/' . $post->image) }}" alt="{{ $post->title }}">
                @else
                    <div class="no-image"><i class="bi bi-image"></i></div>
                @endif
                <span class="cat-badge cat-{{ strtolower($post->category) }}">{{ $post->category }}</span>
            </div>
            <div class="card-body">
                <div class="card-title">{{ $post->title }}</div>
                <div class="card-excerpt">{{ Str::limit(strip_tags($post->body), 130) }}</div>
                <div class="card-footer-row">
                    <div class="card-author">
                        <div class="card-avatar">{{ strtoupper(substr($post->user->name, 0, 1)) }}</div>
                        <span class="card-author-name">{{ $post->user->name }}</span>
                    </div>
                    <span class="card-date">{{ $post->created_at->format('d M Y') }}</span>
                </div>
            </div>
        </a>
        @empty
        <div class="empty-news">
            <i class="bi bi-newspaper"></i>
            <h3>No posts yet</h3>
            <p>{{ $category ? "No $category posts found." : 'Check back later for updates.' }}</p>
            @auth
            <a href="{{ route('posts.create') }}">
                <i class="bi bi-pencil-square"></i> Be the first to post
            </a>
            @endauth
        </div>
        @endforelse
    </div>
</section>

<!-- ── PAGINATION ── -->
@if($posts->hasPages())
<div class="pagination-wrap">
    {{ $posts->links() }}
</div>
@endif

@endsection