@extends('layouts.public')
@section('title', config('app.name') . ' – API Catalog')
@section('description', 'Browse 200+ production-ready APIs.')

@push('styles')
    <style>
        .page-header {
            background: var(--bg-white);
            border-bottom: 1px solid var(--border);
            padding: 40px 0;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 14px;
        }

        .breadcrumb a {
            color: var(--text-muted);
            text-decoration: none;
        }

        .breadcrumb a:hover {
            color: var(--blue);
        }

        .breadcrumb-sep {
            color: var(--text-light);
        }

        .page-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 2rem;
            font-weight: 700;
            letter-spacing: -.02em;
            margin-bottom: 6px;
        }

        .page-sub {
            color: var(--text-muted);
            font-size: 15px;
        }

        .filters-bar {
            background: var(--bg-white);
            border-bottom: 1px solid var(--border);
            padding: 14px 0;
            position: sticky;
            top: 60px;
            z-index: 90;
        }

        .filters-inner {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .search-wrap {
            position: relative;
            flex: 1;
            min-width: 200px;
            max-width: 340px;
        }

        .search-icon {
            position: absolute;
            left: 11px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-light);
            pointer-events: none;
        }

        .search-input {
            width: 100%;
            padding: 9px 12px 9px 36px;
            border: 1px solid var(--border-mid);
            border-radius: 8px;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            background: var(--bg);
            color: var(--text);
            outline: none;
            transition: all .15s;
        }

        .search-input:focus {
            border-color: var(--blue);
            box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
            background: #fff;
        }

        .filter-chips {
            display: flex;
            gap: 7px;
            flex-wrap: wrap;
        }

        .chip {
            padding: 5px 13px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 500;
            border: 1px solid var(--border-mid);
            background: var(--bg-white);
            color: var(--text-muted);
            cursor: pointer;
            transition: all .15s;
            text-decoration: none;
        }

        .chip:hover {
            border-color: var(--blue);
            color: var(--blue);
        }

        .chip.active {
            background: var(--blue-light);
            border-color: var(--blue-mid);
            color: var(--blue);
            font-weight: 600;
        }

        .results-count {
            margin-left: auto;
            font-size: 13px;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .apis-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 16px;
            padding: 32px 0;
        }

        .api-card {
            background: var(--bg-white);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 22px;
            transition: all .2s;
            text-decoration: none;
            display: block;
            color: inherit;
        }

        .api-card:hover {
            border-color: var(--blue);
            box-shadow: 0 4px 20px rgba(29, 78, 216, 0.08);
            transform: translateY(-2px);
        }

        .api-card-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 14px;
        }

        .api-icon-wrap {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .api-name {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 6px;
        }

        .api-desc {
            color: var(--text-muted);
            font-size: 13.5px;
            line-height: 1.6;
            margin-bottom: 16px;
        }

        .api-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .api-category {
            font-size: 12px;
            color: var(--text-muted);
            background: var(--bg);
            border: 1px solid var(--border);
            padding: 2px 8px;
            border-radius: 5px;
        }

        .api-price {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 15px;
        }

        .api-price span {
            font-size: 12px;
            color: var(--text-muted);
            font-weight: 400;
        }

        .api-card-footer {
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .api-tag {
            font-size: 11px;
            color: var(--text-muted);
            background: var(--bg);
            padding: 2px 8px;
            border-radius: 4px;
            font-family: 'JetBrains Mono', monospace;
        }

        .api-status {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: var(--green);
            margin-left: auto;
        }

        .status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--green);
        }
    </style>
@endpush

@section('content')
    <div class="page-header">
        <div class="container">
            <div class="breadcrumb">
                <a href="/">Home</a>
                <span class="breadcrumb-sep"><svg width="12" height="12" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="9 18 15 12 9 6" />
                    </svg></span>
                <span>API Catalog</span>
            </div>
            <div class="page-title">API Catalog</div>
            <p class="page-sub">Browse 200+ production-ready APIs. Find exactly what your project needs.</p>
        </div>
    </div>

    <div class="filters-bar">
        <div class="container">
            <div class="filters-inner">
                <div class="search-wrap">
                    <span class="search-icon"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8" />
                            <line x1="21" y1="21" x2="16.65" y2="16.65" />
                        </svg></span>
                    <input type="text" class="search-input" placeholder="Search APIs..." id="api-search"
                        oninput="filterAPIs()">
                </div>
                <div class="filter-chips">
                    <a href="#" class="chip active" data-cat="all"
                        onclick="setCategory(this,'all');return false;">All</a>
                    @foreach ($categories as $category)
                        <a href="#" class="chip" data-cat="{{ $category->slug }}"
                            onclick="setCategory(this,'{{ $category->slug }}');return false;">{{ $category->name }}</a>
                    @endforeach
                </div>
                <span class="results-count" id="results-count">9 APIs</span>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="apis-grid" id="apis-grid">

            @forelse($products as $product)
                <a href="{{ route('public.api.detail', $product->slug) }}" class="api-card" 
                data-category="{{ $product->category->slug }}"
                    data-name="{{ $product->name }}">
                    <div class="api-card-head">
                        {!! $product->icon !!}
                    </div>
                    <div class="api-name">{{ $product->name }}</div>
                    <div class="api-desc">{{ $product->description }}</div>
                    <div class="api-card-footer"><span class="api-tag">{{ $product->category->name }}</span></div>
                </a>
            @empty
                <div class="text-center">No APIs found</div>
            @endforelse
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let currentCategory = 'all';

        function setCategory(el, cat) {
            document.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
            el.classList.add('active');
            currentCategory = cat;
            filterAPIs();
        }

        function filterAPIs() {
            const q = document.getElementById('api-search').value.toLowerCase();
            const cards = document.querySelectorAll('.api-card');
            let visible = 0;
            cards.forEach(card => {
                const name = card.dataset.name.toLowerCase();
                const cat = card.dataset.category;
                const matchQ = name.includes(q);
                const matchC = (currentCategory === 'all') || (cat === currentCategory);
                if (matchQ && matchC) {
                    card.style.display = '';
                    visible++;
                } else {
                    card.style.display = 'none';
                }
            });
            document.getElementById('results-count').textContent = visible + ' API' + (visible !== 1 ? 's' : '');
        }
    </script>
@endpush