@extends('layouts.app')
@php $tr = fn ($de, $en) => request()->segment(1) === 'en' ? $en : $de; @endphp
@section('title', $tr('Wie KARC funktioniert — Schritt für Schritt an einem echten Bild | KOTSCH.TECH', 'How KARC works — step by step on a real image | KOTSCH.TECH'))
@section('meta_description', $tr('Ein echtes Foto wandert Schritt für Schritt durch die KARC-Pipeline — mit echten Zwischenbildern: Farbtrennung, PLANE/DCT-Regionen, Quantisierung, Rekonstruktion.', 'A real photo goes step by step through the KARC pipeline — with real intermediate images: color split, PLANE/DCT regions, quantization, reconstruction.'))
@section('content')
@include('karc.partials.styles')
<style>
  .k-step{display:grid;grid-template-columns:2.4rem 1fr;gap:1.1rem;align-items:start;padding:1.8rem 0;border-top:1px solid var(--k-line)}
  .k-step:first-of-type{border-top:0}
  .k-no{font-family:'Space Grotesk',sans-serif;font-weight:700;color:#fff;background:var(--k-acc);width:2.4rem;height:2.4rem;border-radius:9px;display:grid;place-items:center}
  .k-step h3{font-family:'Space Grotesk',sans-serif;margin:.2rem 0 .2rem;font-size:1.2rem;color:var(--k-ink)}
  .k-step .lead{color:var(--k-ink2);font-size:1rem;line-height:1.55;max-width:62ch;margin:0}
  .k-imgs{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.9rem}
  .k-imgs figure{margin:0;flex:1 1 200px;max-width:330px}
  .k-imgs img{width:100%;border-radius:10px;border:1px solid var(--k-line);display:block;background:var(--k-paper)}
  .k-imgs figcaption{font-size:.78rem;color:var(--k-muted);margin-top:.4rem;text-align:center;font-family:'Space Grotesk',sans-serif}
  .k-leg{display:inline-flex;gap:1.2rem;margin-top:.7rem;font-size:.85rem;color:var(--k-ink2)}
  .k-sw{display:inline-block;width:13px;height:13px;border-radius:3px;vertical-align:-1px;margin-right:.35rem}
  .k-ba{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--k-line);border:1px solid var(--k-line);border-radius:12px;overflow:hidden;margin-top:1.2rem}
  .k-ba figure{margin:0;background:#fff}.k-ba img{width:100%;display:block}.k-ba figcaption{padding:.7rem .9rem;font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--k-ink)}
  .k-ba .s{font-weight:400;color:var(--k-muted);font-size:.85rem}
</style>
@php $px = '/assets/pipeline'; @endphp

<div class="k-wrap">
  <section class="k-hero" style="max-width:760px">
    <span class="k-eyebrow">{{ $tr('Wie es funktioniert', 'How it works') }}</span>
    <h1>{{ $tr('Ein Bild, Schritt für Schritt', 'One image, step by step') }}</h1>
    <p class="k-lead">{{ $tr('Wir schicken ein echtes Foto durch die KARC-Pipeline — jeder Schritt zeigt seinen echten Zwischenstand.', 'We send a real photo through the KARC pipeline — each step shows its real intermediate result.') }}</p>
  </section>

  <section class="k-section" style="border-top:0;padding-top:0">

    <div class="k-step">
      <div class="k-no">1</div>
      <div>
        <h3>{{ $tr('Das Originalbild', 'The original image') }}</h3>
        <p class="lead">{{ $tr('Start: ein verlustfreies Foto, 512×341 Pixel, unkomprimiert rund 512 KB.', 'Start: a lossless photo, 512×341 pixels, about 512 KB uncompressed.') }}</p>
        <div class="k-imgs"><figure><img src="{{ $px }}/01_original.png" width="512" height="341" loading="lazy" decoding="async" alt="{{ $tr('Originalfoto, 512×341 Pixel', 'Original photo, 512×341 pixels') }}"><figcaption>{{ $tr('Original · ~512 KB', 'Original · ~512 KB') }}</figcaption></figure></div>
      </div>
    </div>

    <div class="k-step">
      <div class="k-no">2</div>
      <div>
        <h3>{{ $tr('Helligkeit von Farbe trennen', 'Separate brightness from color') }}</h3>
        <p class="lead">{{ $tr('Der reversible YCoCg-R-Transform zerlegt das Bild in Helligkeit (Y) und Farbe (Co/Cg). Das Auge sieht Helligkeit schärfer als Farbe.', 'The reversible YCoCg-R transform splits the image into brightness (Y) and color (Co/Cg). The eye sees brightness more sharply than color.') }}</p>
        <div class="k-imgs">
          <figure><img src="{{ $px }}/02_luma.png" width="512" height="341" loading="lazy" alt="{{ $tr('Helligkeitskanal (Y) des Bildes', 'Brightness channel (Y) of the image') }}"><figcaption>{{ $tr('Helligkeit (Y)', 'Brightness (Y)') }}</figcaption></figure>
          <figure><img src="{{ $px }}/02_color.png" width="512" height="341" loading="lazy" alt="{{ $tr('Farbkanäle (Co/Cg) des Bildes', 'Color channels (Co/Cg) of the image') }}"><figcaption>{{ $tr('Farbe (Co/Cg)', 'Color (Co/Cg)') }}</figcaption></figure>
        </div>
      </div>
    </div>

    <div class="k-step">
      <div class="k-no">3</div>
      <div>
        <h3>{{ $tr('Farbe gröber speichern (4:2:0)', 'Store color more coarsely (4:2:0)') }}</h3>
        <p class="lead">{{ $tr('Die Farbe wird nur halb so fein gespeichert — kaum sichtbar, aber spart Bits.', 'Color is stored at half resolution — barely visible, but saves bits.') }}</p>
        <div class="k-imgs"><figure><img src="{{ $px }}/03_chroma420.png" width="512" height="341" loading="lazy" alt="{{ $tr('Bild mit auf 4:2:0 reduzierter Farbauflösung', 'Image with color resolution reduced to 4:2:0') }}"><figcaption>{{ $tr('Farbe halbiert · sieht fast gleich aus', 'Color halved · looks almost identical') }}</figcaption></figure></div>
      </div>
    </div>

    <div class="k-step">
      <div class="k-no">4</div>
      <div>
        <h3>{{ $tr('Pro Region die Darstellung wählen', 'Choose the representation per region') }}</h3>
        <p class="lead">{{ $tr('Der Kern von KARC: Jeder 8×8-Block entscheidet selbst — glatte Flächen werden als Ebene (PLANE) beschrieben, Detail per DCT. Hier wählt KARC bei 19,5 % der Blöcke PLANE.', 'The heart of KARC: each 8×8 block decides for itself — smooth areas are described as a plane (PLANE), detail via DCT. Here KARC picks PLANE for 19.5% of blocks.') }}</p>
        <div class="k-imgs"><figure><img src="{{ $px }}/04_regionmap.png" width="512" height="341" loading="lazy" alt="{{ $tr('Regionenkarte: pro 8×8-Block der gewählte Modus PLANE oder DCT', 'Region map: chosen mode PLANE or DCT per 8×8 block') }}"><figcaption>{{ $tr('Modus pro Block', 'Mode per block') }}</figcaption></figure></div>
        <div class="k-leg">
          <span><span class="k-sw" style="background:#b45309"></span>{{ $tr('PLANE (glatt)', 'PLANE (smooth)') }}</span>
          <span><span class="k-sw" style="background:#285a96"></span>{{ $tr('DCT (Detail)', 'DCT (detail)') }}</span>
        </div>
      </div>
    </div>

    <div class="k-step">
      <div class="k-no">5</div>
      <div>
        <h3>{{ $tr('Runden und packen', 'Round and pack') }}</h3>
        <p class="lead">{{ $tr('Die Koeffizienten werden gröber gerundet (Quantisierung) und mit rANS platzsparend codiert. Aus ~512 KB wird eine 8-KB-Datei.', 'The coefficients are rounded more coarsely (quantization) and packed compactly with rANS. The ~512 KB become an 8 KB file.') }}</p>
        <div class="k-leg"><span><span class="k-sw" style="background:var(--k-acc)"></span>{{ $tr('Ergebnis: 8 KB · 0,38 bpp', 'Result: 8 KB · 0.38 bpp') }}</span></div>
      </div>
    </div>

    <div class="k-step">
      <div class="k-no">6</div>
      <div>
        <h3>{{ $tr('Zurück zum Bild', 'Back to the image') }}</h3>
        <p class="lead">{{ $tr('Der Decoder baut das Bild wieder auf. Die Fehlerkarte (×6 verstärkt) zeigt: die Abweichungen sitzen an den Kanten, die glatten Flächen bleiben sauber.', 'The decoder rebuilds the image. The error map (amplified ×6) shows: deviations sit at the edges, the smooth areas stay clean.') }}</p>
        <div class="k-imgs">
          <figure><img src="{{ $px }}/05_recon.png" width="512" height="341" loading="lazy" alt="{{ $tr('Vom Decoder rekonstruiertes Bild', 'Image reconstructed by the decoder') }}"><figcaption>{{ $tr('Rekonstruktion', 'Reconstruction') }}</figcaption></figure>
          <figure><img src="{{ $px }}/06_error.png" width="512" height="341" loading="lazy" alt="{{ $tr('Fehlerkarte, ×6 verstärkt: Abweichungen an den Kanten', 'Error map, amplified ×6: deviations at the edges') }}"><figcaption>{{ $tr('Fehlerkarte (×6)', 'Error map (×6)') }}</figcaption></figure>
        </div>
      </div>
    </div>

  </section>

  <section class="k-section">
    <span class="k-eyebrow">{{ $tr('Ergebnis', 'Result') }}</span>
    <h2 class="k-h2">{{ $tr('Aus ~512 KB werden 8 KB', '~512 KB become 8 KB') }}</h2>
    <div class="k-ba">
      <figure><img src="{{ $px }}/01_original.png" width="512" height="341" loading="lazy" alt="{{ $tr('Originalfoto, ~512 KB', 'Original photo, ~512 KB') }}"><figcaption>{{ $tr('Original', 'Original') }} <span class="s">~512 KB</span></figcaption></figure>
      <figure><img src="{{ $px }}/05_recon.png" width="512" height="341" loading="lazy" alt="{{ $tr('Mit KARC komprimiertes Bild, 8 KB', 'Image compressed with KARC, 8 KB') }}"><figcaption>KARC <span class="s">8 KB · PSNR 30,7 dB · SSIM 0,89</span></figcaption></figure>
    </div>
    <div class="k-actions">
      <a class="k-btn" href="/karc/demo">{{ $tr('Mit deinem Bild ausprobieren', 'Try it with your image') }} <span aria-hidden="true">→</span></a>
      <a class="k-btn-ghost" href="/karc/technik">{{ $tr('Technische Details', 'Technical details') }}</a>
    </div>
  </section>
</div>
@endsection