ggdeals/app/Views/api.php

<?= $this->extend('layout') ?>
<?= $this->section('content') ?>

<div class="mb-8">
    <h1 class="text-2xl font-extrabold text-white tracking-tight">GG.deals API</h1>
    <p class="text-sm text-muted mt-1">
        Access real-time deals, discounts, bundles, and historical low prices — perfect for bots, apps, websites, side projects, and commercial platforms.
    </p>
</div>

<div class="grid lg:grid-cols-3 gap-6 mb-8">
    <!-- API key card -->
    <div class="bg-panel border border-line rounded-2xl p-6 lg:col-span-1">
        <h2 class="text-sm font-bold text-zinc-200 uppercase tracking-wider mb-4">Get your API key</h2>
        <p class="text-sm text-muted mb-4">
            Find the lowest prices for <span class="text-zinc-200 font-semibold"><?= number_format($stats['games']) ?> games</span> across
            <span class="text-zinc-200 font-semibold"><?= $stats['stores'] ?> stores</span>. Check historical low prices of digital games.
        </p>
        <div class="flex items-center gap-3 mb-4">
            <div class="flex-1 bg-page border border-line rounded-lg px-3 py-2.5 font-mono text-xs text-muted truncate">demo-key-<?= substr(md5((string) time()), 0, 12) ?></div>
            <button @click="navigator.clipboard.writeText(document.querySelector('#apikey').textContent.trim()); $el.textContent='✓'" 
                    class="px-3 py-2.5 rounded-lg bg-accent text-accent-ink text-xs font-bold hover:bg-accent/90 transition-colors shrink-0">Copy</button>
        </div>
        <p id="apikey" class="hidden">demo-key-<?= substr(md5((string) time()), 0, 12) ?></p>
        <p class="text-xs text-muted leading-relaxed">Integrate using simple HTTP requests. Free for non-commercial use.</p>
    </div>

    <!-- endpoint docs -->
    <div class="lg:col-span-2 space-y-4">
        <div class="bg-card border border-line rounded-2xl overflow-hidden">
            <div class="px-5 py-4 border-b border-line flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <span class="w-2 h-2 rounded-full bg-accent"></span>
                    <h2 class="text-sm font-bold text-zinc-200">Game Prices API</h2>
                </div>
                <span class="kind-tag kind-official">GET</span>
            </div>
            <div class="p-5">
                <p class="text-sm text-muted mb-3">Retrieve the lowest prices by Steam App ID.</p>
                <div class="bg-page border border-line rounded-xl p-4 font-mono text-xs text-zinc-200 mb-4 break-all">
                    <span class="text-accent">GET</span> /api/prices?appid=<span class="text-amber-300">1245620</span>
                </div>
                <div class="bg-page border border-line rounded-xl p-4 font-mono text-[11px] text-zinc-300 overflow-x-auto">
<pre>{
  "game": {
    "title": "Elden Ring",
    "slug": "elden-ring",
    "steam_appid": 1245620,
    "regular_price": 59.99,
    "best_official": { "price": 40.67, "store": "fanatical", "cut": 32 },
    "best_keyshop": { "price": 32.14, "store": "eneba", "cut": 46 },
    "all_time_low": { "price": 35.99, "store": "kinguin", "date": "2026-03-24" },
    "active_deals": 11,
    "metacritic": 96
  }
}</pre>
                </div>
            </div>
        </div>

        <div class="grid sm:grid-cols-2 gap-4">
            <div class="bg-card border border-line rounded-xl p-5">
                <div class="flex items-center gap-2 mb-2">
                    <span class="text-lg">🔌</span>
                    <span class="text-sm font-bold text-zinc-100">Browser extension</span>
                </div>
                <p class="text-xs text-muted leading-relaxed">Instantly view GG.deals price comparisons while browsing game stores.</p>
            </div>
            <div class="bg-card border border-line rounded-xl p-5">
                <div class="flex items-center gap-2 mb-2">
                    <span class="text-lg">✉️</span>
                    <span class="text-sm font-bold text-zinc-100">Suggest an endpoint</span>
                </div>
                <p class="text-xs text-muted leading-relaxed">Write to us — we'll get back to you shortly!</p>
            </div>
        </div>
    </div>
</div>

<!-- live test -->
<div class="bg-panel border border-line rounded-2xl p-6 mb-8" x-data="{ appid: '1245620', result: null, loading: false }">
    <h2 class="text-sm font-bold text-zinc-200 uppercase tracking-wider mb-4">Try it live</h2>
    <div class="flex flex-wrap items-center gap-3 mb-4">
        <input x-model="appid" type="number" placeholder="Steam App ID (e.g. 1245620)"
               class="filter-input flex-1 min-w-[220px]">
        <button @click="async () => { loading = true; try { const r = await fetch('/api/prices?appid=' + appid); result = { status: r.status, body: await r.json() }; } catch(e) { result = { status: 0, body: { error: e.message } }; } loading = false; }"
                class="bg-accent text-accent-ink font-bold text-sm py-2.5 px-6 rounded-lg hover:bg-accent/90 transition-colors">
            Send request
        </button>
    </div>
    <div x-show="loading" class="text-sm text-muted">Loading…</div>
    <template x-if="result">
        <div class="bg-page border border-line rounded-xl p-4 font-mono text-[11px]">
            <div class="mb-2">
                <span class="kind-tag" :class="result.status === 200 ? 'kind-official' : 'kind-keyshop'" x-text="'HTTP ' + result.status"></span>
            </div>
            <pre x-text="JSON.stringify(result.body, null, 2)" class="text-zinc-300 overflow-x-auto"></pre>
        </div>
    </template>
</div>

<?= $this->endSection() ?>