@extends('front.layouts.app')
@section('content')

<style>
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

    :root {
        --ink: #0f0f0f;
        --ink-light: #4a4a4a;
        --ink-muted: #8a8a8a;
        --rule: #e2e2e2;
        --bg: #faf9f7;
        --card-bg: #ffffff;
        --accent: #c8102e;
        --accent-blue: #0d3b8c;
        --accent-light: #f5f0eb;
    }

    * { box-sizing: border-box; }

    .blog-wrapper {
        background: var(--bg);
        font-family: 'DM Sans', sans-serif;
        min-height: 100vh;
    }

    /* ── MASTHEAD ── */
    .blog-masthead {
        background: var(--ink);
        padding: 56px 0 0;
        position: relative;
        overflow: hidden;
    }

    .blog-masthead::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
            90deg,
            transparent,
            transparent 79px,
            rgba(255,255,255,0.03) 79px,
            rgba(255,255,255,0.03) 80px
        );
    }

    .masthead-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 30px;
        position: relative;
    }

    .masthead-breadcrumb {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 28px;
    }

    .masthead-breadcrumb a {
        color: rgba(255,255,255,0.5);
        text-decoration: none;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        transition: color 0.2s;
    }

    .masthead-breadcrumb a:hover { color: white; }

    .masthead-breadcrumb span {
        color: rgba(255,255,255,0.25);
        font-size: 12px;
    }

    .masthead-breadcrumb .current {
        color: rgba(255,255,255,0.5);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .masthead-title-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding-bottom: 28px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        gap: 20px;
    }

    .masthead-title {
        font-family: 'Playfair Display', serif;
        font-size: clamp(38px, 6vw, 72px);
        font-weight: 700;
        color: #ffffff;
        line-height: 1;
        margin: 0;
        letter-spacing: -0.02em;
    }

    .masthead-title span {
        color: var(--accent);
        font-style: italic;
    }

    .masthead-tagline {
        color: rgba(255,255,255,0.5);
        font-size: 14px;
        line-height: 1.6;
        max-width: 320px;
        text-align: right;
        flex-shrink: 0;
    }

    .masthead-bar {
        background: var(--accent);
        height: 4px;
        width: 100%;
    }

    /* ── LAYOUT ── */
    .blog-layout {
        max-width: 1200px;
        margin: 0 auto;
        padding: 48px 30px;
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 60px;
        align-items: start;
    }

    /* ── BLOG GRID ── */
    .blog-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px;
        background: var(--rule);
        border: 1px solid var(--rule);
    }

    /* First card spans full width */
    .blog-grid .blog-card-wrap:first-child {
        grid-column: 1 / -1;
    }

    .blog-card-wrap {
        background: var(--card-bg);
    }

    .blog-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        text-decoration: none;
        color: inherit;
        transition: background 0.2s;
    }

    .blog-card:hover { background: #fefefe; }

    /* Featured (first) card layout */
    .blog-card-wrap:first-child .blog-card {
        flex-direction: row;
    }

    .blog-card-wrap:first-child .blog-card-image {
        width: 50%;
        flex-shrink: 0;
        height: 360px;
    }

    .blog-card-wrap:first-child .blog-card-body {
        padding: 40px 36px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .blog-card-image {
        overflow: hidden;
        height: 220px;
        position: relative;
    }

    .blog-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
        display: block;
    }

    .blog-card:hover .blog-card-image img {
        transform: scale(1.04);
    }

    .blog-card-body {
        padding: 24px 24px 28px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .card-category {
        display: inline-block;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 3px 10px;
        border-radius: 2px;
        margin-bottom: 14px;
        background: var(--accent-light);
    }

    .card-date {
        font-size: 11px;
        color: var(--ink-muted);
        letter-spacing: 0.05em;
        margin-bottom: 10px;
        font-weight: 500;
    }

    .card-title {
        font-family: 'Playfair Display', serif;
        font-size: 22px;
        font-weight: 600;
        color: var(--ink);
        line-height: 1.3;
        margin: 0 0 12px;
        letter-spacing: -0.01em;
    }

    .blog-card-wrap:first-child .card-title {
        font-size: clamp(24px, 3vw, 32px);
        margin-bottom: 16px;
    }

    .card-excerpt {
        font-size: 13.5px;
        color: var(--ink-light);
        line-height: 1.7;
        flex: 1;
        margin: 0 0 20px;
    }

    .card-read-more {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        transition: gap 0.2s;
    }

    .blog-card:hover .card-read-more { gap: 10px; }

    .card-read-more::after {
        content: '→';
        font-size: 14px;
    }

    .no-blogs {
        grid-column: 1/-1;
        text-align: center;
        padding: 80px 20px;
        color: var(--ink-muted);
        font-size: 15px;
    }

    /* ── SIDEBAR ── */
    .sidebar {
        display: flex;
        flex-direction: column;
        gap: 36px;
    }

    .sidebar-section {
        background: var(--card-bg);
        border: 1px solid var(--rule);
    }

    .sidebar-heading {
        padding: 16px 22px;
        border-bottom: 3px solid var(--ink);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .sidebar-heading h5 {
        font-family: 'Playfair Display', serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--ink);
        margin: 0;
        letter-spacing: -0.01em;
    }

    /* Follow Widget */
    .follow-grid {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .follow-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        text-decoration: none;
        border: 1px solid var(--rule);
        transition: all 0.2s;
        position: relative;
        overflow: hidden;
    }

    .follow-item::before {
        content: '';
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 3px;
        transition: width 0.2s;
    }

    .follow-item.yt::before { background: #FF0000; }
    .follow-item.ig::before { background: #e1306c; }
    .follow-item.fb::before { background: #1877F2; }

    .follow-item:hover { border-color: currentColor; transform: translateX(3px); }

    .follow-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .follow-icon {
        width: 38px;
        height: 38px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .follow-icon svg {
        width: 18px;
        height: 18px;
        fill: white;
    }

    .follow-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
        display: block;
        margin-bottom: 1px;
    }

    .follow-action {
        font-size: 11px;
        color: var(--ink-muted);
        font-weight: 400;
    }

    .follow-count {
        text-align: right;
    }

    .follow-count strong {
        display: block;
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
    }

    .follow-count span {
        font-size: 10px;
        color: var(--ink-muted);
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .yt .follow-count strong { color: #FF0000; }
    .ig .follow-count strong { color: #e1306c; }
    .fb .follow-count strong { color: #1877F2; }

    /* Categories */
    .categories-list {
        padding: 8px 0;
    }

    .category-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 22px;
        text-decoration: none;
        border-bottom: 1px solid var(--rule);
        transition: background 0.15s;
    }

    .category-item:last-child { border-bottom: none; }
    .category-item:hover { background: var(--accent-light); }
    .category-item.active { background: var(--ink); }
    .category-item.active .cat-name { color: white; }
    .category-item.active .cat-count { color: rgba(255,255,255,0.5); }

    .cat-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .cat-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .cat-name {
        font-size: 13.5px;
        font-weight: 500;
        color: var(--ink);
    }

    .cat-count {
        font-size: 12px;
        color: var(--ink-muted);
        font-weight: 600;
        background: var(--accent-light);
        padding: 2px 8px;
        border-radius: 10px;
    }

    .category-item.active .cat-count {
        background: rgba(255,255,255,0.15);
    }

    /* Popular Posts */
    .popular-list {
        padding: 16px 20px;
        display: flex;
        flex-direction: column;
    }

    .popular-item {
        display: flex;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid var(--rule);
        text-decoration: none;
        transition: all 0.2s;
    }

    .popular-item:last-child { border-bottom: none; }
    .popular-item:hover { transform: translateX(4px); }

    .popular-num {
        font-family: 'Playfair Display', serif;
        font-size: 28px;
        font-weight: 700;
        color: var(--rule);
        line-height: 1;
        flex-shrink: 0;
        width: 28px;
        transition: color 0.2s;
    }

    .popular-item:hover .popular-num { color: var(--accent); }

    .popular-thumb {
        width: 64px;
        height: 64px;
        border-radius: 4px;
        object-fit: cover;
        flex-shrink: 0;
    }

    .popular-info { flex: 1; min-width: 0; }

    .popular-title {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink);
        line-height: 1.4;
        margin: 0 0 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .popular-item:hover .popular-title { color: var(--accent); }

    .popular-meta {
        font-size: 11px;
        color: var(--ink-muted);
        font-weight: 400;
    }

    /* Responsive */
    @media (max-width: 1024px) {
        .blog-layout {
            grid-template-columns: 1fr;
            gap: 48px;
        }

        .sidebar {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .sidebar .sidebar-section:last-child {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 768px) {
        .masthead-title-row { flex-direction: column; align-items: flex-start; }
        .masthead-tagline { text-align: left; }
        .blog-layout { padding: 30px 16px; }

        .blog-grid { grid-template-columns: 1fr; }
        .blog-card-wrap:first-child { grid-column: 1; }
        .blog-card-wrap:first-child .blog-card { flex-direction: column; }
        .blog-card-wrap:first-child .blog-card-image { width: 100%; height: 240px; }

        .sidebar { grid-template-columns: 1fr; }
        .sidebar .sidebar-section:last-child { grid-column: 1; }
    }
</style>

<!-- Inner Page Banner Area Start Here -->
<div class="blog-masthead">
    <div class="masthead-inner">
        <div class="masthead-breadcrumb">
            <a href="{{ route('front.home') }}">Home</a>
            <span>/</span>
            <span class="current">Blogs</span>
        </div>

        <div class="masthead-title-row">
            <h1 class="masthead-title">Campus <span>Stories</span></h1>
            <p class="masthead-tagline">Discover stories, insights, and updates from our vibrant campus community.</p>
        </div>
    </div>
    <div class="masthead-bar"></div>
</div>

<!-- Blog Body -->
<div class="blog-wrapper">
    <div class="blog-layout">

        <!-- ── MAIN CONTENT ── -->
        <main>
            <div class="blog-grid">

                @forelse($blogs as $blog)
                    <div class="blog-card-wrap">
                        <a href="{{ route('blog.details-show', $blog->id) }}" class="blog-card">

                            <div class="blog-card-image">
                                @if($blog->featured_image)
                                    <img src="{{ asset('storage/blog-images/featured/' . $blog->featured_image) }}" alt="{{ $blog->title }}">
                                @else
                                    <img src="https://via.placeholder.com/600x400?text=No+Image" alt="No Image">
                                @endif
                            </div>

                            <div class="blog-card-body">
                                @if($blog->category)
                                    <span class="card-category" style="color: {{ $blog->category->color ?? '#c8102e' }};">
                                        {{ $blog->category->name }}
                                    </span>
                                @endif

                                <p class="card-date">{{ optional($blog->published_at)->format('F j, Y') }}</p>

                                <h2 class="card-title">{{ $blog->title }}</h2>

                                <p class="card-excerpt">
                                    {{ Str::limit(strip_tags($blog->excerpt ?? $blog->content), 120) }}
                                </p>

                                <span class="card-read-more">Read Article</span>
                            </div>

                        </a>
                    </div>
                @empty
                    <div class="no-blogs">
                        <p>No blogs found.</p>
                    </div>
                @endforelse

            </div>
        </main>

        <!-- ── SIDEBAR ── -->
        <aside class="sidebar">

            <!-- Follow Widget -->
            <div class="sidebar-section">
                <div class="sidebar-heading">
                    <h5>Follow Us</h5>
                </div>
                <div class="follow-grid">

                    <a href="https://www.youtube.com/@uniofrawalpindi" class="follow-item yt" target="_blank">
                        <div class="follow-left">
                            <div class="follow-icon" style="background: #FF0000;">
                                <svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
                            </div>
                            <div>
                                <span class="follow-name">YouTube</span>
                                <span class="follow-action">Subscribe to our channel</span>
                            </div>
                        </div>
                        <div class="follow-count">
                            <strong>{{ $subscribers }}</strong>
                            <span>Subscribers</span>
                        </div>
                    </a>

                    <a href="https://www.instagram.com/uniofrawalpindi/" class="follow-item ig" target="_blank">
                        <div class="follow-left">
                            <div class="follow-icon" style="background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);">
                                <svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
                            </div>
                            <div>
                                <span class="follow-name">Instagram</span>
                                <span class="follow-action">Follow for updates</span>
                            </div>
                        </div>
                        <div class="follow-count">
                            <strong>2.1k</strong>
                            <span>Followers</span>
                        </div>
                    </a>

                    <a href="https://www.facebook.com/uniofrawalpindi/followers" class="follow-item fb" target="_blank">
                        <div class="follow-left">
                            <div class="follow-icon" style="background: #1877F2;">
                                <svg viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                            </div>
                            <div>
                                <span class="follow-name">Facebook</span>
                                <span class="follow-action">Like our page</span>
                            </div>
                        </div>
                        <div class="follow-count">
                            <strong>8.4K</strong>
                            <span>Likes</span>
                        </div>
                    </a>

                </div>
            </div>

            <!-- Categories -->
            <div class="sidebar-section">
                <div class="sidebar-heading">
                    <h5>Categories</h5>
                </div>
                <div class="categories-list">

                    <a href="{{ route('front.blogs') }}"
                        class="category-item {{ !request('category') ? 'active' : '' }}">
                        <div class="cat-left">
                            <div class="cat-dot" style="background: #0d3b8c;"></div>
                            <span class="cat-name">All Categories</span>
                        </div>
                        <span class="cat-count">{{ $categories->sum('blogs_count') ?? '' }}</span>
                    </a>

                    @forelse($categories as $category)
                        <a href="{{ route('front.blogs', ['category' => $category->id]) }}"
                            class="category-item {{ request('category') == $category->id ? 'active' : '' }}">
                            <div class="cat-left">
                                <div class="cat-dot" style="background: {{ $category->color ?? '#c8102e' }};"></div>
                                <span class="cat-name">{{ $category->name }}</span>
                            </div>
                            <span class="cat-count">{{ $category->blogs_count ?? '' }}</span>
                        </a>
                    @empty
                        <p style="padding: 16px 22px; color: var(--ink-muted); font-size: 13px; margin: 0;">No categories found.</p>
                    @endforelse

                </div>
            </div>

            <!-- Popular Posts -->
            <div class="sidebar-section">
                <div class="sidebar-heading">
                    <h5>Popular Posts</h5>
                </div>
                <div class="popular-list">

                    @forelse($popularPosts as $i => $post)
                        <a href="{{ route('blog.details-show', $post->id) }}" class="popular-item">
                            <span class="popular-num">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</span>
                            <img class="popular-thumb"
                                src="{{ $post->featured_image ? asset('storage/blog-images/featured/' . $post->featured_image) : 'https://via.placeholder.com/200' }}"
                                alt="{{ $post->title }}">
                            <div class="popular-info">
                                <h6 class="popular-title">{{ Str::limit($post->title, 50) }}</h6>
                                <p class="popular-meta">
                                    {{ optional($post->published_at)->format('M d, Y') }} &middot; {{ $post->views }} views
                                </p>
                            </div>
                        </a>
                    @empty
                        <p style="color: var(--ink-muted); font-size: 13px; padding: 8px 0;">No popular posts yet.</p>
                    @endforelse

                </div>
            </div>

        </aside>

    </div>
</div>

@endsection