Product Grid

import type { ReactNode } from "react";
const css = `.prg { position: relative; isolation: isolate; width: 100%;
  padding-block: var(--ds-section-y, var(--ds-8, 80px));
  background: var(--ds-bg, oklch(0.14 0.02 275));
  color: var(--ds-fg, oklch(0.95 0.01 265));
  font-family: var(--ds-font, system-ui, sans-serif); }
.prg-in { max-width: var(--ds-container, 1120px); margin-inline: auto;
  padding-inline: var(--ds-gutter, clamp(18px, 5vw, 54px)); }
.prg-eyebrow { margin: 0 0 var(--ds-2, 8px); text-align: center;
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-xs, 0.75rem); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ds-accent, oklch(0.72 0.16 300)); }
.prg-h { margin: 0; text-align: center;
  font-size: var(--ds-text-xl, 2rem); font-weight: 750;
  letter-spacing: var(--ds-tracking-tight, -0.03em); }
.prg-sub { margin: var(--ds-2, 10px) auto 0; max-width: 56ch; text-align: center;
  font-size: var(--ds-text-sm, 0.92rem); line-height: var(--ds-leading-body, 1.55);
  color: var(--ds-muted, oklch(0.72 0.02 265)); }

.prg-grid { margin: var(--ds-7, 54px) 0 0; padding: 0; list-style: none;
  display: grid; gap: var(--ds-5, 22px);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Подъём — у КАРТОЧКИ, наезд — у КАДРА ВНУТРИ рамки (принцип showcase-gallery):
   рамка фиксированной пропорции, поэтому соседи не двигаются и сетка не пляшет */
.prg-card { display: flex; flex-direction: column;
  border-radius: var(--ds-radius-lg, 20px); overflow: hidden;
  border: 1px solid var(--ds-border, oklch(0.3 0.02 275));
  background: var(--ds-surface, oklch(0.17 0.02 273));
  transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; }
.prg-card:hover { translate: 0 -5px;
  box-shadow: 0 18px 44px oklch(0.05 0.02 265 / 0.35); }

.prg-shot { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.prg-shot img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: scale 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.prg-card:hover .prg-shot img { scale: 1.05; }
.prg-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-xs, 0.7rem); letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(0.14 0.02 275);
  background: var(--ds-accent, oklch(0.72 0.16 300)); }

.prg-body { display: grid; gap: 4px; padding: var(--ds-4, 16px);
  /* низ карточки на одной кромке у всего ряда, даже когда note нет */
  flex: 1; align-content: start; grid-template-rows: auto auto 1fr; }
.prg-name { margin: 0; font-size: var(--ds-text-md, 1.02rem); font-weight: 700;
  letter-spacing: var(--ds-tracking-tight, -0.02em); }
.prg-note { margin: 0;
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-xs, 0.72rem);
  color: var(--ds-muted, oklch(0.72 0.02 265)); }
.prg-price { margin: 0; align-self: end; padding-top: var(--ds-3, 12px);
  display: flex; align-items: baseline; gap: 10px;
  font-variant-numeric: tabular-nums; }
.prg-price b { font-size: var(--ds-text-md, 1.05rem); font-weight: 750; }
.prg-price s { font-size: var(--ds-text-sm, 0.85rem);
  color: var(--ds-muted, oklch(0.72 0.02 265)); }
.prg-card:hover .prg-price b { color: var(--ds-accent, oklch(0.72 0.16 300)); }

@media (prefers-reduced-motion: reduce) {
  .prg-card, .prg-shot img { transition: none; }
  .prg-card:hover { translate: none; }
  .prg-card:hover .prg-shot img { scale: none; }
}

/* СОКЕТ ФОНА — контракт как у остальных секций */
.prg-bg { position: absolute; inset: 0; z-index: -1; }
.prg[data-slot-bg] { background: transparent; }
.prg-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.prg[data-tone="dark"] { --ds-fg: oklch(0.96 0.01 265); --ds-muted: oklch(0.84 0.02 265);
  --ds-border: oklch(0.98 0.01 265 / 0.16); color: var(--ds-fg); }
.prg[data-tone="dark"] .prg-bg::after {
  background: oklch(0.09 0.02 265 / calc(var(--prg-scrim, 0.5) * 0.9)); }
.prg[data-tone="light"] { --ds-fg: oklch(0.2 0.02 265); --ds-muted: oklch(0.42 0.02 265);
  --ds-border: oklch(0.2 0.02 265 / 0.14); color: var(--ds-fg); }
.prg[data-tone="light"] .prg-bg::after {
  background: oklch(0.99 0 0 / calc(var(--prg-scrim, 0.5) * 0.9)); }
`;

export interface ProductCard {
  /** Фото товара; путь вида `https://motiva.pages.dev/img/<имя>.jpg`, кадр 4:5. */
  src: string;
  name: string;
  /** Цена строкой вместе с валютой (формат «2 400 ₽»). */
  price: string;
  /** Старая цена — рисуется зачёркнутой рядом. */
  oldPrice?: string;
  /** Плашка на фото (формат «новинка»). */
  badge?: string;
  /** Строка под названием: материал, размер. */
  note?: string;
}

export interface ProductGridProps {
  eyebrow?: string;
  title?: string;
  sub?: string;
  items?: ProductCard[];
  /**
   * Сокет фона: любой эффект с `mount.role: "background"`, например `<AuroraField />`.
   * Занят — секция снимает собственную заливку, чтобы не спорить за слой.
   */
  background?: ReactNode;
  /** Какой текст читается поверх фона; приходит из `mount.tone` подставленной записи. */
  tone?: "dark" | "light";
  /** Плотность скрима между фоном и текстом; 0 — выключить. */
  scrim?: number;
}

const ITEMS: ProductCard[] = [
  { src: "https://motiva.pages.dev/img/1015-600x750.jpg", name: "Северное устье", price: "2 400 ₽", badge: "новинка", note: "принт А2 · матовая бумага" },
  { src: "https://motiva.pages.dev/img/1016-600x750.jpg", name: "Закат на хребте", price: "2 400 ₽", note: "принт А2 · матовая бумага" },
  { src: "https://motiva.pages.dev/img/1024-600x750.jpg", name: "Гриф на подлёте", price: "1 900 ₽", oldPrice: "2 600 ₽", badge: "−25%", note: "принт А3 · плотная бумага" },
  { src: "https://motiva.pages.dev/img/1029-600x750.jpg", name: "Город и парк", price: "2 400 ₽", note: "принт А2 · матовая бумага" },
  { src: "https://motiva.pages.dev/img/1039-600x750.jpg", name: "Водопад во мхах", price: "3 200 ₽", badge: "хит", note: "принт А1 · холст" },
  { src: "https://motiva.pages.dev/img/1043-600x750.jpg", name: "Свет в долине", price: "1 900 ₽", note: "принт А3 · плотная бумага" },
  { src: "https://motiva.pages.dev/img/1050-600x750.jpg", name: "Бирюзовая бухта", price: "2 400 ₽", note: "принт А2 · матовая бумага" },
  { src: "https://motiva.pages.dev/img/1057-600x750.jpg", name: "Берег на закате", price: "3 200 ₽", note: "принт А1 · холст" },
];

/**
 * Витрина ТОВАРОВ — карточки с ценой, плашкой и ховер-подъёмом. Новый вид секции
 * (kind: products): у showcase витрина РАБОТ без коммерции, здесь же цена — главный
 * факт карточки, а плашка и зачёркнутая старая цена — обычный язык магазина.
 *
 * Наезд по ховеру — у КАДРА внутри рамки фиксированной пропорции (принцип
 * showcase-gallery): соседи не двигаются, сетка не пересчитывается. Цены строками
 * с `tabular-nums` — колонка цен в ряду не дрожит. Низ карточки прижат
 * (`flex: 1` + `align-self: end`): цены соседей на одной кромке, сколько бы строк
 * ни заняли названия.
 */
export function ProductGrid({
  eyebrow = "каталог",
  title = "Печатаем и отправляем в тубусе",
  sub = "Каждый принт печатается под заказ и уезжает в течение трёх дней. Рамки — отдельно.",
  items = ITEMS,
  background,
  tone,
  scrim = 0.5,
}: ProductGridProps) {
  return (
    <section
      className="prg"
      data-slot-bg={background ? "" : undefined}
      data-tone={tone}
      style={{ textAlign: "start", ["--prg-scrim" as string]: scrim }}
    >
      <style href="motiva-product-grid" precedence="medium">{css}</style>

      {background && <div className="prg-bg">{background}</div>}

      <div className="prg-in">
        {/* data-slot: адрес слота для inline-правки в конструкторе (/build) */}
        {eyebrow && <p className="prg-eyebrow" data-slot="eyebrow">{eyebrow}</p>}
        {title && <h2 className="prg-h" data-slot="title">{title}</h2>}
        {sub && <p className="prg-sub" data-slot="sub">{sub}</p>}

        <ul className="prg-grid">
          {items.map((p, i) => (
            <li className="prg-card" key={p.name}>
              <figure className="prg-shot">
                <img src={p.src} alt={p.name} loading="lazy" decoding="async" />
                {p.badge && (
                  <span className="prg-badge" data-slot="items" data-idx={i} data-field="badge">{p.badge}</span>
                )}
              </figure>
              <div className="prg-body">
                <h3 className="prg-name" data-slot="items" data-idx={i} data-field="name">{p.name}</h3>
                {p.note && (
                  <p className="prg-note" data-slot="items" data-idx={i} data-field="note">{p.note}</p>
                )}
                <p className="prg-price">
                  <b data-slot="items" data-idx={i} data-field="price">{p.price}</b>
                  {p.oldPrice && (
                    <s data-slot="items" data-idx={i} data-field="oldPrice">{p.oldPrice}</s>
                  )}
                </p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}