@extends('system.public.public_layout')

@section('body-class', 'blog-page')

@push('styles')
<style>
    body.blog-page { background: #f8fafb; }

    .blog-hero {
        background: linear-gradient(160deg, #fff 0%, var(--primary-bg, #e8f5f3) 55%, #fff 100%);
        padding: 110px 22px 64px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .blog-hero::before {
        content: '';
        position: absolute;
        top: -120px; right: -160px;
        width: 500px; height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(0,121,107,.07) 0%, transparent 70%);
        pointer-events: none;
    }
    .blog-hero-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
    .blog-kicker {
        display: inline-flex; align-items: center; gap: 7px;
        background: var(--primary-bg, #e8f5f3); color: var(--primary, #00796b);
        border: 1px solid rgba(0,121,107,.2); border-radius: 999px;
        padding: 5px 14px; font-size: 12px; font-weight: 800;
        text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px;
    }
    .blog-hero h1 {
        font-family: 'Figtree', sans-serif;
        font-size: clamp(28px, 5vw, 46px); font-weight: 800;
        color: #1a1a2e; margin: 0 0 16px; line-height: 1.12; text-wrap: balance;
    }
    .blog-hero p { font-size: 17px; color: #4f6575; line-height: 1.7; margin: 0; }

    .blog-grid-section { max-width: 1160px; margin: 0 auto; padding: 56px 22px 80px; }
    .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

    .blog-card {
        background: #fff; border-radius: 20px; border: 1px solid #e9eef2;
        padding: 28px 24px 22px; display: flex; flex-direction: column;
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        position: relative; overflow: hidden;
    }
    .blog-card::after {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: var(--c-accent, var(--primary, #00796b));
        transform: scaleX(0); transform-origin: left;
        transition: transform .25s cubic-bezier(.4,0,.2,1);
    }
    .blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.08); border-color: #d5e8e4; }
    .blog-card:hover::after { transform: scaleX(1); }

    .blog-card-cat {
        display: inline-flex; align-items: center; gap: 6px;
        border-radius: 999px; padding: 4px 11px;
        font-size: 11.5px; font-weight: 700;
        margin-bottom: 14px; align-self: flex-start;
    }
    .blog-card-cat i { font-size: 10.5px; }

    .blog-card-title { font-family: 'Figtree', sans-serif; font-size: 17px; font-weight: 800; color: #1a1a2e; line-height: 1.35; margin: 0 0 12px; }
    .blog-card-title a { color: inherit; text-decoration: none; transition: color .15s; }
    .blog-card-title a:hover { color: var(--primary, #00796b); }

    .blog-card-excerpt {
        font-size: 14px; color: #5f7482; line-height: 1.65; margin: 0 0 20px;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
        overflow: hidden; flex: 1;
    }

    .blog-card-footer {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid #f0f4f3;
    }
    .blog-card-meta { font-size: 12px; color: #9aacb8; display: flex; align-items: center; gap: 5px; }
    .blog-card-link {
        font-size: 13px; font-weight: 700; color: var(--primary, #00796b);
        text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
        white-space: nowrap; transition: gap .15s;
    }
    .blog-card-link:hover { gap: 7px; }

    .blog-empty { text-align: center; padding: 60px 20px; color: #9aacb8; font-size: 16px; }

    @media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (max-width: 580px) { .blog-grid { grid-template-columns: 1fr; } .blog-hero { padding: 90px 18px 44px; } }
</style>
@endpush

@section('content')
<main>
    <section class="blog-hero">
        <div class="blog-hero-inner">
            <div class="blog-kicker"><i class="fas fa-book-open-reader" aria-hidden="true"></i> Blog</div>
            <h1>Guías para farmacias y boticas en Perú</h1>
            <p>Aprende a gestionar mejor tu farmacia: FEFO, DIGEMID, facturación SUNAT y control de inventario.</p>
        </div>
    </section>

    <section class="blog-grid-section">
        @if(count($posts) > 0)
        <div class="blog-grid">
            @foreach($posts as $post)
            <article class="blog-card" style="--c-accent: {{ $post['category_color'] }}">
                <div class="blog-card-cat" style="background: {{ $post['category_bg'] }}; color: {{ $post['category_color'] }}">
                    <i class="fas {{ $post['category_icon'] }}" aria-hidden="true"></i>
                    {{ $post['category'] }}
                </div>
                <h2 class="blog-card-title">
                    <a href="{{ url('/blog/' . $post['slug']) }}">{{ $post['title'] }}</a>
                </h2>
                <p class="blog-card-excerpt">{{ $post['excerpt'] }}</p>
                <div class="blog-card-footer">
                    <span class="blog-card-meta">
                        <i class="fas fa-clock" aria-hidden="true"></i>
                        {{ $post['read_time'] }} min · {{ $post['published_label'] }}
                    </span>
                    <a href="{{ url('/blog/' . $post['slug']) }}" class="blog-card-link" aria-label="Leer: {{ $post['title'] }}">
                        Leer <i class="fas fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
            </article>
            @endforeach
        </div>
        @else
        <div class="blog-empty">
            <i class="fas fa-book-open fa-2x" style="margin-bottom:12px;display:block;color:#d1e8e4"></i>
            Próximamente publicaremos artículos sobre gestión de farmacias.
        </div>
        @endif
    </section>
</main>
@endsection