@extends('layouts.app')

@section('content')
<div x-data="axBlogList()">
        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">Blog</h1>
              <p class="ax-page-head__subtitle"><span class="ax-num">128</span> published articles · <span class="ax-num">6</span> drafts · <span class="ax-num">42.8K</span> reads this month.</p>
            </div>
            <div class="ax-page-head__actions">
              <button type="button" class="ax-btn ax-btn--ghost">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"/><path d="M3 14m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"/><path d="M14 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"/><path d="M14 14m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"/></svg>
                <span class="ax-btn__label">Manage tags</span>
              </button>
              <a class="ax-btn ax-btn--primary" href="/blog/create">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5l0 14"/><path d="M5 12l14 0"/></svg>
                <span class="ax-btn__label">New post</span>
              </a>
            </div>
          </div>
        </div>

        <!-- ════════════════ CONTENT ════════════════ -->
        <div class="ax-dash-grid">

          <!-- ───── FEATURED POST (12) ───── -->
          <section class="ax-card ax-card--interactive ax-col--12" role="region" aria-label="Featured article">
            <div style="display:grid;grid-template-columns:1.1fr 1fr;gap:0;" class="ax-blog-feature">
              <!-- cover -->
              <div style="position:relative;min-height:280px;overflow:hidden;border-radius:var(--ax-radius-lg) 0 0 var(--ax-radius-lg);background:linear-gradient(135deg,color-mix(in oklab,var(--ax-viz-violet) 40%,var(--ax-accent)),color-mix(in oklab,var(--ax-viz-cyan) 55%,transparent));" class="ax-blog-feature__cover">
                <span aria-hidden="true" style="position:absolute;top:-40px;right:-30px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.16);filter:blur(8px);"></span>
                <span aria-hidden="true" style="position:absolute;bottom:-60px;left:20px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.1);"></span>
                <div style="position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:.85;">
                  <svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"/><path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"/><path d="M3 6l0 13"/><path d="M12 6l0 13"/><path d="M21 6l0 13"/></svg>
                </div>
                <span class="ax-badge ax-badge--solid ax-badge--accent ax-badge--pill" style="position:absolute;top:var(--ax-space-4);inset-inline-start:var(--ax-space-4);">Featured</span>
              </div>
              <!-- body -->
              <div style="padding:var(--ax-space-6);display:flex;flex-direction:column;justify-content:center;gap:var(--ax-space-3);">
                <div class="ax-cluster" style="gap:var(--ax-space-2);">
                  <span class="ax-badge ax-badge--soft ax-badge--accent" style="border-radius:var(--ax-radius-xs);">Engineering</span>
                  <span class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Jun 26, 2026 · 9 min read</span>
                </div>
                <a href="/blog/blog-details" style="text-decoration:none;">
                  <h2 style="font-family:var(--ax-font-display);font-size:var(--ax-text-2xl);font-weight:700;color:var(--ax-text-strong);line-height:1.18;">Designing a token-driven theming engine that ships dark mode for free</h2>
                </a>
                <p class="ax-clamp-2" style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);line-height:1.65;">How we collapsed 14 hand-maintained color stylesheets into a single role-token layer — and why every new accent now themes the whole product with one CSS variable swap.</p>
                <div class="ax-cluster" style="gap:var(--ax-space-3);margin-top:var(--ax-space-2);">
                  <span class="ax-avatar ax-avatar--sm" style="background:color-mix(in oklab,var(--ax-viz-cyan) 22%,transparent);color:var(--ax-viz-cyan);font-weight:600;">LB</span>
                  <div style="line-height:1.2;"><div style="font-size:var(--ax-text-sm);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Lena Brandt</div><div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Principal Designer</div></div>
                  <a href="/blog/blog-details" class="ax-btn ax-btn--secondary ax-btn--sm ax-btn--pill" style="margin-inline-start:auto;">Read article</a>
                </div>
              </div>
            </div>
          </section>

          <!-- ───── TOOLBAR (12) ───── -->
          <div class="ax-col--12">
            <div class="ax-card" style="margin:0;">
              <div class="ax-card__body" style="display:flex;gap:var(--ax-space-3);align-items:center;flex-wrap:wrap;">
                <!-- search -->
                <div style="position:relative;flex:1 1 240px;min-width:200px;">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="position:absolute;inset-inline-start:11px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ax-text-subtle);"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg>
                  <input type="search" class="ax-input" placeholder="Search articles, authors, tags…" x-model="q" style="padding-inline-start:35px;" aria-label="Search articles">
                </div>
                <!-- category pills -->
                <div class="ax-cluster" style="gap:var(--ax-space-2);flex-wrap:wrap;">
                  <template x-for="c in categories" :key="c.id">
                    <button type="button" class="ax-btn ax-btn--sm ax-btn--pill" :class="cat===c.id ? 'ax-btn--primary' : 'ax-btn--secondary'" @click="cat=c.id">
                      <span class="ax-btn__label" x-text="c.name"></span>
                    </button>
                  </template>
                </div>
                <select class="ax-select ax-select--sm" x-model="sort" aria-label="Sort articles" style="min-width:140px;margin-inline-start:auto;">
                  <option value="newest">Newest</option>
                  <option value="popular">Most read</option>
                  <option value="title">Title A–Z</option>
                </select>
              </div>
            </div>
          </div>

          <!-- ───── POST CARDS GRID (12 → auto-fill) ───── -->
          <div class="ax-col--12">
            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--ax-space-6);">
              <template x-for="p in filtered()" :key="p.id">
                <article class="ax-card ax-card--interactive" style="margin:0;overflow:hidden;display:flex;flex-direction:column;">
                  <!-- cover -->
                  <a :href="'/blog/blog-details'" style="display:block;position:relative;aspect-ratio:16/9;overflow:hidden;" :style="{ background: `linear-gradient(135deg,color-mix(in oklab,${p.c} 55%,transparent),color-mix(in oklab,${p.c2} 45%,transparent))` }">
                    <span aria-hidden="true" style="position:absolute;top:-30px;right:-20px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.14);"></span>
                    <span style="position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:.85;">
                      <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" x-html="p.icon"></svg>
                    </span>
                    <span class="ax-badge ax-badge--solid ax-badge--accent" style="position:absolute;top:var(--ax-space-3);inset-inline-start:var(--ax-space-3);border-radius:var(--ax-radius-xs);" x-text="catName(p.cat)"></span>
                    <button type="button" class="ax-btn ax-btn--icon ax-btn--sm" @click.prevent="p.bookmarked=!p.bookmarked" :aria-label="(p.bookmarked?'Remove bookmark from ':'Bookmark ')+p.title" style="position:absolute;top:var(--ax-space-3);inset-inline-end:var(--ax-space-3);width:30px;height:30px;background:color-mix(in oklab,var(--ax-canvas) 55%,transparent);border:0;border-radius:var(--ax-radius-sm);backdrop-filter:blur(6px);" :style="{ color: p.bookmarked ? 'var(--ax-accent)' : '#fff' }">
                      <svg class="ax-btn__icon" viewBox="0 0 24 24" :fill="p.bookmarked?'currentColor':'none'" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 7v14l-6 -4l-6 4v-14a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4"/></svg>
                    </button>
                  </a>
                  <!-- body -->
                  <div style="padding:var(--ax-space-5);display:flex;flex-direction:column;gap:var(--ax-space-3);flex:1 1 auto;">
                    <div class="ax-cluster" style="gap:var(--ax-space-2);font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">
                      <span class="ax-num" style="font-family:var(--ax-font-mono);" x-text="p.date"></span>
                      <span>·</span>
                      <span class="ax-num" style="font-family:var(--ax-font-mono);" x-text="p.read + ' min read'"></span>
                    </div>
                    <a href="/blog/blog-details" style="text-decoration:none;">
                      <h3 class="ax-clamp-2" style="font-family:var(--ax-font-display);font-size:var(--ax-text-md);font-weight:600;color:var(--ax-text-strong);line-height:1.3;" x-text="p.title"></h3>
                    </a>
                    <p class="ax-clamp-2" style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);line-height:1.6;flex:1 1 auto;" x-text="p.excerpt"></p>
                    <div class="ax-cluster" style="gap:var(--ax-space-2);padding-top:var(--ax-space-3);border-top:1px solid var(--ax-border);">
                      <span class="ax-avatar ax-avatar--xs" :style="`background:color-mix(in oklab,${p.c} 22%,transparent);color:${p.c};font-weight:600;`" x-text="p.authorInitials"></span>
                      <span style="font-size:var(--ax-text-xs);color:var(--ax-text);font-weight:var(--ax-weight-medium);" x-text="p.author"></span>
                      <span class="ax-cluster" style="gap:4px;margin-inline-start:auto;color:var(--ax-text-subtle);font-size:var(--ax-text-xs);">
                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"/></svg>
                        <span class="ax-num" style="font-family:var(--ax-font-mono);" x-text="p.views"></span>
                      </span>
                    </div>
                  </div>
                </article>
              </template>
            </div>

            <!-- empty state -->
            <div x-show="!filtered().length" x-cloak style="text-align:center;padding:var(--ax-space-10) var(--ax-space-5);">
              <span class="ax-avatar ax-avatar--xl ax-avatar--squircle" style="background:var(--ax-surface-subtle);color:var(--ax-text-subtle);margin:0 auto var(--ax-space-4);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:28px;height:28px;"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg></span>
              <h3 style="color:var(--ax-text-strong);font-family:var(--ax-font-display);margin-bottom:var(--ax-space-2);">No articles found</h3>
              <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);margin-bottom:var(--ax-space-4);">Try a different search term or category.</p>
              <button type="button" class="ax-btn ax-btn--secondary" @click="q='';cat='all'">Clear filters</button>
            </div>
          </div>

          <!-- ───── PAGINATION (12) ───── -->
          <div class="ax-col--12" x-show="filtered().length" x-cloak>
            <div class="ax-cluster" style="justify-content:space-between;flex-wrap:wrap;gap:var(--ax-space-3);">
              <span class="ax-pagination__summary ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);">Showing <span x-text="filtered().length"></span> of 128 articles</span>
              <nav class="ax-pagination" aria-label="Pagination">
                <button type="button" class="ax-pagination__prev" disabled aria-disabled="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6l6 6"/></svg></button>
                <ul class="ax-pagination__pages">
                  <li><a href="#" class="ax-pagination__page is-active" aria-current="page">1</a></li>
                  <li><a href="#" class="ax-pagination__page">2</a></li>
                  <li><a href="#" class="ax-pagination__page">3</a></li>
                  <li><span class="ax-pagination__ellipsis">…</span></li>
                  <li><a href="#" class="ax-pagination__page">11</a></li>
                </ul>
                <button type="button" class="ax-pagination__next"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6l-6 6"/></svg></button>
              </nav>
            </div>
          </div>
        </div>


        <style>
          @media (max-width: 820px){ .ax-blog-feature{ grid-template-columns:1fr !important; } .ax-blog-feature__cover{ border-radius:var(--ax-radius-lg) var(--ax-radius-lg) 0 0 !important; min-height:200px !important; } }
        </style>
</div>
@endsection

@push('scripts')
        <script>
          function axBlogList(){
            const C={cyan:'var(--ax-viz-cyan)',violet:'var(--ax-viz-violet)',pink:'var(--ax-viz-pink)',amber:'var(--ax-viz-amber)',emerald:'var(--ax-viz-emerald)'};
            const I={
              code:'<path d="M7 8l-4 4l4 4"/><path d="M17 8l4 4l-4 4"/><path d="M14 4l-4 16"/>',
              design:'<path d="M3 21v-4a4 4 0 1 1 4 4h-4"/><path d="M21 3a16 16 0 0 0 -12.8 10.2"/><path d="M21 3a16 16 0 0 1 -10.2 12.8"/><path d="M10.6 9a9 9 0 0 1 4.4 4.4"/>',
              product:'<path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"/><path d="M12 12l8 -4.5"/><path d="M12 12l0 9"/><path d="M12 12l-8 -4.5"/>',
              growth:'<path d="M3 17l6 -6l4 4l8 -8"/><path d="M14 7l7 0l0 7"/>',
              culture:'<path d="M5 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
            };
            return {
              q:'', cat:'all', sort:'newest',
              categories:[
                { id:'all', name:'All' },
                { id:'eng', name:'Engineering' },
                { id:'design', name:'Design' },
                { id:'product', name:'Product' },
                { id:'growth', name:'Growth' },
                { id:'culture', name:'Culture' },
              ],
              posts:[
                { id:1, title:'Composable charts: one wrapper, every Apex chart type', cat:'eng', excerpt:'We wrapped ApexCharts behind a single renderChart() so every dashboard inherits the palette, dark mode and live re-theming.', author:'Devon Okafor', authorInitials:'DO', date:'Jun 24', read:7, views:'3.1K', c:C.cyan, c2:C.violet, icon:I.code, bookmarked:false, _o:0 },
                { id:2, title:'The quiet craft of empty states', cat:'design', excerpt:'A good empty state does three jobs: orient, reassure and invite the next action. Here is the system we settled on.', author:'Lena Brandt', authorInitials:'LB', date:'Jun 22', read:5, views:'4.6K', c:C.violet, c2:C.pink, icon:I.design, bookmarked:true, _o:1 },
                { id:3, title:'Shipping a roadmap your customers can actually read', cat:'product', excerpt:'Public roadmaps fail when they read like a backlog. We rebuilt ours around outcomes, not tickets.', author:'Priya Nair', authorInitials:'PN', date:'Jun 19', read:6, views:'2.4K', c:C.emerald, c2:C.cyan, icon:I.product, bookmarked:false, _o:2 },
                { id:4, title:'From 0 to 10K signups: the channels that actually worked', cat:'growth', excerpt:'Six months, eleven experiments, two channels that mattered. A candid breakdown of what moved the needle.', author:'Marcus Reid', authorInitials:'MR', date:'Jun 17', read:8, views:'6.2K', c:C.amber, c2:C.pink, icon:I.growth, bookmarked:false, _o:3 },
                { id:5, title:'How we run async design critique across 18 time zones', cat:'culture', excerpt:'Live critique does not scale when your team never overlaps. Our async ritual keeps craft high without the calendar tax.', author:'Ava Sutton', authorInitials:'AS', date:'Jun 14', read:4, views:'1.9K', c:C.pink, c2:C.violet, icon:I.culture, bookmarked:false, _o:4 },
                { id:6, title:'Type scale, line height & the math behind comfortable reading', cat:'design', excerpt:'A modular scale is only half the story. The other half is rhythm — and rhythm is where most systems quietly fall apart.', author:'Lena Brandt', authorInitials:'LB', date:'Jun 11', read:6, views:'3.8K', c:C.violet, c2:C.cyan, icon:I.design, bookmarked:false, _o:5 },
                { id:7, title:'Caching at the edge without losing your mind', cat:'eng', excerpt:'Stale-while-revalidate, cache tags and a tiny invalidation contract that kept our P95 under 80ms during launch week.', author:'Tomás Herrera', authorInitials:'TH', date:'Jun 08', read:9, views:'2.7K', c:C.cyan, c2:C.emerald, icon:I.code, bookmarked:false, _o:6 },
                { id:8, title:'Pricing pages that respect the reader', cat:'growth', excerpt:'Most pricing pages optimise for the seller. We tried optimising for the buyer instead — and conversion went up.', author:'Marcus Reid', authorInitials:'MR', date:'Jun 05', read:5, views:'4.1K', c:C.amber, c2:C.violet, icon:I.growth, bookmarked:false, _o:7 },
                { id:9, title:'What a healthy on-call rotation actually looks like', cat:'culture', excerpt:'Burnout hides in the gaps between incidents. Here is how we made on-call sustainable — and even a little boring.', author:'Devon Okafor', authorInitials:'DO', date:'Jun 02', read:7, views:'1.6K', c:C.emerald, c2:C.cyan, icon:I.culture, bookmarked:false, _o:8 },
              ],
              catName(id){ const c=this.categories.find(x=>x.id===id); return c?c.name:id; },
              filtered(){
                const term=this.q.trim().toLowerCase();
                let r=this.posts.filter(p=>{
                  if(this.cat!=='all' && p.cat!==this.cat) return false;
                  if(term && !(p.title.toLowerCase().includes(term) || p.author.toLowerCase().includes(term) || this.catName(p.cat).toLowerCase().includes(term))) return false;
                  return true;
                });
                const num=v=>parseFloat(String(v).replace(/[^0-9.]/g,''))*(String(v).includes('K')?1000:1);
                const by={ popular:(a,b)=>num(b.views)-num(a.views), title:(a,b)=>a.title.localeCompare(b.title), newest:(a,b)=>a._o-b._o };
                return [...r].sort(by[this.sort]||by.newest);
              },
            };
          }
        </script>
@endpush