@extends('layouts.app')
@php $tr = fn ($de, $en) => request()->segment(1) === 'en' ? $en : $de; @endphp
@section('title', $tr('KARC Live-Demo — KARC vs. JPEG für dein Bild | KOTSCH.TECH', 'KARC Live Demo — KARC vs. JPEG for your image | KOTSCH.TECH'))
@section('meta_description', $tr('Lade ein Bild hoch und sieh die echte Rate-Distortion-Kurve: KARC gegen JPEG, mit BD-Rate für genau dein Bild.', 'Upload an image and see the real rate-distortion curve: KARC vs JPEG, with BD-rate for your exact image.'))
@section('robots', 'noindex,follow')
@section('content')
@include('karc.partials.styles')
<style>
  .k-rdchart{background:#fff;border:1px solid var(--k-line);border-radius:14px;padding:1rem;margin-top:1.2rem}
  .k-rdchart svg{width:100%;height:auto;display:block}
  .k-head{background:var(--k-paper);border:1px solid var(--k-line);border-left:3px solid var(--k-acc);border-radius:12px;padding:1rem 1.2rem;margin-top:1.4rem;font-size:1.05rem;color:var(--k-ink2)}
  .k-head b{color:var(--k-ink)}
  .k-head.win b{color:#15803d}
  .k-trip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--k-line);border:1px solid var(--k-line);border-radius:12px;overflow:hidden;margin-top:1.2rem}
  .k-trip figure{margin:0;background:#fff}
  .k-trip img{width:100%;display:block;background:var(--k-paper)}
  .k-trip figcaption{padding:.7rem .9rem}
  .k-trip .nm{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--k-ink)}
  .k-trip .mm{font-size:.82rem;color:var(--k-muted);margin-top:.3rem;font-variant-numeric:tabular-nums}
  .k-ref{font-size:.9rem;color:var(--k-ink2);margin-top:1.2rem;background:#fff;border:1px solid var(--k-line);border-radius:10px;padding:.8rem 1rem}
  /* visually hidden but keyboard-focusable (file input stays in tab order) */
  .k-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .k-drop:focus-within{outline:2px solid var(--k-acc);outline-offset:2px;border-color:var(--k-acc)}
</style>

<div class="k-wrap k-section">
  <span class="k-eyebrow">{{ $tr('Live-Demo', 'Live demo') }}</span>
  <h1 class="k-h2">{{ $tr('Dein Bild: KARC gegen JPEG', 'Your image: KARC vs. JPEG') }}</h1>
  <p class="k-p">{{ $tr('Lade ein Bild hoch. KARC erzeugt die komplette Rate-Distortion-Kurve und vergleicht sie fair mit JPEG — die BD-Rate sagt, wie viele Bits KARC bei gleicher Qualität spart. (Bild wird auf max. 512 px verkleinert, nichts wird gespeichert.)', 'Upload an image. KARC computes the full rate-distortion curve and compares it fairly with JPEG — the BD-rate says how many bits KARC saves at equal quality. (Resized to max 512 px, nothing is stored.)') }}</p>

  <div style="max-width:820px">
    <div class="k-levels" role="radiogroup" aria-label="{{ $tr('Vorschau-Stärke', 'Preview strength') }}">
      <input type="radio" name="level" id="lvl1" value="1"><label for="lvl1">{{ $tr('Stark komprimiert', 'Strongly compressed') }}</label>
      <input type="radio" name="level" id="lvl2" value="2" checked><label for="lvl2">{{ $tr('Mittel', 'Medium') }}</label>
      <input type="radio" name="level" id="lvl3" value="3"><label for="lvl3">{{ $tr('Leicht', 'Light') }}</label>
    </div>
    <label class="k-drop" id="drop">
      <input type="file" id="file" accept="image/png,image/jpeg,image/webp" class="k-vh" aria-label="{{ $tr('Bild auswählen (PNG, JPG oder WebP, max. 10 MB)', 'Choose an image (PNG, JPG or WebP, max 10 MB)') }}">
      <div><i class="fas fa-cloud-arrow-up" style="font-size:1.5rem;color:var(--k-acc)"></i><br><br>
        <strong>{{ $tr('Bild auswählen', 'Choose an image') }}</strong> {{ $tr('oder hierher ziehen', 'or drag it here') }}<br>
        <span style="font-size:.85rem;color:var(--k-muted)">PNG, JPG, WebP · max. 10 MB</span></div>
    </label>
    <div style="margin-top:1.1rem">
      <button class="k-btn" id="go" disabled><i class="fas fa-bolt"></i> {{ $tr('Vergleichen', 'Compare') }}</button>
      <span style="font-size:.82rem;color:var(--k-muted);margin-left:.7rem">{{ $tr('berechnet die ganze Kurve — dauert ein paar Sekunden', 'computes the whole curve — takes a few seconds') }}</span>
    </div>
    <div class="k-err" id="err"></div>
  </div>

  <div id="result" style="display:none">
    <div class="k-head" id="head"></div>
    <div class="k-rdchart" id="chart"></div>
    <p class="k-note">{{ $tr('Rate-Distortion-Kurve für dein Bild: höher und weiter links = besser. KARC liegt über JPEG.', 'Rate-distortion curve for your image: higher and further left = better. KARC sits above JPEG.') }}</p>
    <h2 class="k-h2" style="font-size:1.3rem;margin-top:2rem">{{ $tr('Bei gleicher Dateigröße', 'At equal file size') }}</h2>
    <div class="k-trip" id="trip"></div>
    <div class="k-ref">
      <i class="fas fa-circle-info" style="color:var(--k-acc)"></i>
      {{ $tr('Moderne Codecs wie WebP und AVIF sind effizienter als KARC und JPEG — diesen vollständigen Vergleich zeigen wir offen in den', 'Modern codecs like WebP and AVIF are more efficient than KARC and JPEG — we show that full comparison openly in the') }}
      <a href="/karc/testberichte" style="color:var(--k-acc);font-weight:600">{{ $tr('Testberichten', 'benchmarks') }}</a>.
    </div>
  </div>
</div>

<script>
(function () {
  const CSRF = @json(csrf_token());
  const tr = (de, en) => @json(request()->segment(1)) === 'en' ? en : de;
  const file = document.getElementById('file'), go = document.getElementById('go'), drop = document.getElementById('drop');
  const err = document.getElementById('err'), result = document.getElementById('result');
  const head = document.getElementById('head'), chartEl = document.getElementById('chart'), trip = document.getElementById('trip');
  const path = location.pathname.replace(/^\/(de|en)(?=\/|$)/, '').replace(/\/+$/, '');
  const URL_ = path + '/compare';

  file.addEventListener('change', () => { err.style.display = 'none'; go.disabled = !file.files[0]; });
  ['dragover', 'dragenter'].forEach(e => drop.addEventListener(e, ev => { ev.preventDefault(); drop.classList.add('drag'); }));
  ['dragleave', 'drop'].forEach(e => drop.addEventListener(e, ev => { ev.preventDefault(); drop.classList.remove('drag'); }));
  drop.addEventListener('drop', ev => { if (ev.dataTransfer.files[0]) { file.files = ev.dataTransfer.files; go.disabled = false; } });

  function rdChart(karc, jpeg) {
    const W = 600, H = 300, pl = 52, pr = 16, pt = 16, pb = 38;
    const all = karc.concat(jpeg);
    const xs = all.map(p => p[0]), ys = all.map(p => p[1]);
    let xmin = Math.min(...xs), xmax = Math.max(...xs), ymin = Math.min(...ys), ymax = Math.max(...ys);
    const padY = (ymax - ymin) * 0.08 || 1; ymin -= padY; ymax += padY;
    const X = v => pl + (v - xmin) / ((xmax - xmin) || 1) * (W - pl - pr);
    const Y = v => H - pb - (v - ymin) / ((ymax - ymin) || 1) * (H - pt - pb);
    const poly = (pts, col, dash) =>
      `<polyline fill="none" stroke="${col}" stroke-width="2.6" ${dash ? 'stroke-dasharray="5 4"' : ''} points="${pts.map(p => X(p[0]).toFixed(1) + ',' + Y(p[1]).toFixed(1)).join(' ')}"/>`
      + pts.map(p => `<circle cx="${X(p[0]).toFixed(1)}" cy="${Y(p[1]).toFixed(1)}" r="3.2" fill="${col}"/>`).join('');
    const tick = (v, x, y, anchor) => `<text x="${x}" y="${y}" font-size="11" fill="#878c96" text-anchor="${anchor}" font-family="sans-serif">${v}</text>`;
    let g = `<svg viewBox="0 0 ${W} ${H}" role="img" aria-label="${tr('Rate-Distortion-Kurve: KARC im Vergleich zu JPEG', 'Rate-distortion curve: KARC compared to JPEG')}">`;
    g += `<line x1="${pl}" y1="${pt}" x2="${pl}" y2="${H - pb}" stroke="#e7e2d8"/><line x1="${pl}" y1="${H - pb}" x2="${W - pr}" y2="${H - pb}" stroke="#e7e2d8"/>`;
    g += tick(xmin.toFixed(2), pl, H - pb + 16, 'start') + tick(xmax.toFixed(2), W - pr, H - pb + 16, 'end');
    g += tick(ymin.toFixed(0), pl - 6, Y(ymin), 'end') + tick(ymax.toFixed(0), pl - 6, Y(ymax) + 8, 'end');
    g += `<text x="${(pl + W - pr) / 2}" y="${H - 6}" font-size="11" fill="#44474f" text-anchor="middle" font-family="sans-serif">${tr('Bitrate (bpp)', 'Bitrate (bpp)')}</text>`;
    g += `<text transform="translate(13,${(pt + H - pb) / 2}) rotate(-90)" font-size="11" fill="#44474f" text-anchor="middle" font-family="sans-serif">PSNR (dB)</text>`;
    g += poly(jpeg, '#44474f', true) + poly(karc, '#B45309', false);
    g += `<rect x="${W - pr - 118}" y="${pt}" width="118" height="40" fill="#fff" stroke="#e7e2d8" rx="6"/>`;
    g += `<line x1="${W - pr - 108}" y1="${pt + 14}" x2="${W - pr - 88}" y2="${pt + 14}" stroke="#B45309" stroke-width="2.6"/><text x="${W - pr - 82}" y="${pt + 18}" font-size="12" fill="#17181c" font-family="sans-serif" font-weight="600">KARC</text>`;
    g += `<line x1="${W - pr - 108}" y1="${pt + 30}" x2="${W - pr - 88}" y2="${pt + 30}" stroke="#44474f" stroke-width="2.6" stroke-dasharray="5 4"/><text x="${W - pr - 82}" y="${pt + 34}" font-size="12" fill="#17181c" font-family="sans-serif">JPEG</text>`;
    return g + '</svg>';
  }

  function fig(name, m) {
    const extra = m.quality ? ' · Q' + m.quality : '';
    return `<figure><img alt="${name}" src="${m.image}"><figcaption><div class="nm">${name}</div>`
      + `<div class="mm">${m.bpp} bpp · PSNR ${m.psnr} dB · SSIM ${m.ssim}${extra}</div></figcaption></figure>`;
  }

  go.addEventListener('click', async () => {
    if (!file.files[0]) return;
    err.style.display = 'none'; go.disabled = true;
    const lbl = go.innerHTML; go.innerHTML = '<span class="k-spin"></span> ' + tr('Rechne die Kurve…', 'Computing the curve…');
    const fd = new FormData();
    fd.append('image', file.files[0]);
    fd.append('level', (document.querySelector('input[name=level]:checked') || {}).value || '2');
    try {
      const res = await fetch(URL_, { method: 'POST', headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' }, body: fd });
      const data = await res.json();
      if (!res.ok || !data.ok) { throw new Error(data.errors ? Object.values(data.errors)[0][0] : (data.message || 'Fehler')); }
      const m = data.metrics, bd = m.bd_jpeg;
      if (bd !== null && bd < 0) {
        head.className = 'k-head win';
        head.innerHTML = tr('Für dein Bild braucht KARC ', 'For your image, KARC needs ') + '<b>' + Math.abs(bd) + ' % ' + tr('weniger Bits als JPEG', 'fewer bits than JPEG') + '</b> ' + tr('bei gleicher Qualität (BD-Rate, PSNR).', 'at equal quality (BD-rate, PSNR).');
      } else if (bd !== null) {
        head.className = 'k-head';
        head.innerHTML = tr('Bei diesem Bild liegt KARC ', 'On this image, KARC is ') + '<b>' + bd + ' %</b> ' + tr('hinter JPEG (BD-Rate) — das kommt bei sehr texturreichen oder synthetischen Bildern vor.', 'behind JPEG (BD-rate) — this happens with very textured or synthetic images.');
      } else {
        head.className = 'k-head'; head.textContent = tr('BD-Rate für dieses Bild nicht bestimmbar.', 'BD-rate not determinable for this image.');
      }
      chartEl.innerHTML = rdChart(m.curves.karc, m.curves.jpeg);
      trip.innerHTML = fig(tr('Original', 'Original'), { image: m.original, bpp: '—', psnr: '—', ssim: '—' })
        + fig('KARC', m.karc) + fig('JPEG', m.jpeg);
      result.style.display = 'block';
      result.scrollIntoView({ behavior: 'smooth', block: 'start' });
    } catch (e) {
      err.textContent = e.message || tr('Verarbeitung fehlgeschlagen.', 'Processing failed.'); err.style.display = 'block';
    } finally {
      go.disabled = false; go.innerHTML = lbl;
    }
  });
})();
</script>
@endsection