# Claude Code — Task Prompt (Chunk 02: Option Thumbnails)

> Paste the block below into Claude Code (run from project root). Spec: `docs/02-option-thumbnails.md`.

---

```
We are improving RongBerong AI chunk by chunk. This chunk adds a THUMBNAIL IMAGE to each
parameter option so merchants can see what each choice means (e.g. fabrics, lighting, necklines).
Style = image card with the label below (Fotor tool-card style), matching docs/mockup-editor-shell.html.

READ FIRST, in this order:
1. docs/02-option-thumbnails.md   ← the spec for this chunk (Part A is the preservation contract).
2. docs/01-design-spec.md         ← Part A is the global preservation contract; honor it too.
3. resources/views/rongberong/partials/config/*.blade.php   ← current option markup.
4. public/js/rongberong.js        ← the selection engine. DO NOT rewrite its logic.
5. resources/css/app.css          ← where component styles live.

HARD RULES (must not break):
- Keep every option's existing hooks: the `.opt` class, exact `data-v="<value>"`, the parent
  `.opts` with `data-group="<key>"`, the `.opt.sel` selected class, and role/aria/tabindex.
- DO NOT change any `data-v` value (they are the API payload values) or any `data-group` key.
- DO NOT edit rongberong.js logic. The `<img>` goes INSIDE the `.opt` so closest('.opt') still works;
  the image must be non-interactive (no separate click handlers).
- No new endpoints / no controller changes for this chunk. Images are static assets.
- No hardcoded strings — labels stay as {{ __('group.Value') }}.

WHAT TO BUILD (see spec §B):
- New option markup (image card), preserving all existing attributes:
    <span class="opt opt--thumb" data-v="Georgette" role="checkbox" aria-checked="false" tabindex="0">
      <span class="opt-thumb" aria-hidden="true">
        <img loading="lazy" alt="" src="{{ asset('img/options/fabric/georgette.webp') }}"
             onerror="this.closest('.opt-thumb').classList.add('opt-thumb--fallback')">
      </span>
      <span class="opt-label">{{ __('fabric.Georgette') }}</span>
    </span>
- Derive the image src from data-group + a slug of data-v (lowercase, spaces->hyphens),
  e.g. "Golden Hour" -> golden-hour.webp, under public/img/options/<group>/<slug>.webp.
- CSS: .opt--thumb, .opt-thumb (3:4 ratio, radius, object-fit cover, hover scale 1.03),
  .opt.sel ring in accent, .opt-label (12px/500, centered, 2-line clamp), .opt-thumb--fallback
  (hide img, show a per-group icon on --color-bg-subtle), and a responsive grid on .opts that use
  .opt--thumb: repeat(auto-fill, minmax(84px,1fr)), gap 10px. Use chunk-01 brand tokens.
- Fallback FIRST: with the onerror icon fallback the UI must look correct even before images exist.
- Apply to all visual groups; update @foreach templates once each. Leave free-text fields alone.

IMAGES (free / open source only — see spec §B.3):
- Use Unsplash / Pexels / Pixabay / Openverse(CC0) / Wikimedia(public domain). Prefer CC0/no-attribution.
- Download, optimize to ~320x420 webp (<40 KB), serve from public/img/options/... . Do NOT hotlink.
- Start with the garment group, then fabric, pattern, pose, lighting, bg. Commit group by group.
- If any CC-BY image is used, record attribution in docs/credits/option-images.md.

WORKFLOW:
- Small commits. Land markup + CSS + fallback first (works immediately), then images per group.
- After building, run the Acceptance Checklist in docs/02-option-thumbnails.md and report pass/fail,
  testing in EN and বাংলা, desktop and mobile. Confirm the /generate payload still sends the exact
  same data-v values as before.
- Update the status row for chunk 02 in docs/README.md.

Start by reading the files above and giving me: (a) the list of option groups you'll convert,
(b) the slug rule you'll use for image filenames, and (c) any group better served by an icon than a
photo — BEFORE editing.
```

---

## How to use
1. Spec lives at `docs/02-option-thumbnails.md`; this is its prompt.
2. **Gate 1:** approve the group list + slug rule before edits.
3. **Gate 2:** require the Acceptance Checklist (EN + বাংলা, desktop + mobile) and confirm `/generate`
   payload values are unchanged.
4. Images can land incrementally — the fallback keeps the UI clean meanwhile.