Product Feature

import type { ReactNode } from "react";
const css = `.prf { 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); }
.prf-in { max-width: var(--ds-container, 1120px); margin-inline: auto;
  padding-inline: var(--ds-gutter, clamp(18px, 5vw, 54px));
  display: grid; gap: clamp(24px, 4.5vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center; }

.prf-shot { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--ds-radius-lg, 20px);
  border: 1px solid var(--ds-border, oklch(0.3 0.02 275)); }
.prf-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prf-badge { position: absolute; top: 12px; left: 12px; padding: 5px 12px;
  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)); }

.prf-eyebrow { margin: 0 0 var(--ds-2, 8px);
  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)); }
.prf-h { margin: 0; font-size: var(--ds-text-xl, 2rem); font-weight: 750;
  letter-spacing: var(--ds-tracking-tight, -0.03em); text-wrap: balance; }

.prf-price { margin: var(--ds-3, 12px) 0 0; display: flex; align-items: baseline; gap: 12px;
  font-variant-numeric: tabular-nums; }
.prf-price b { font-size: var(--ds-text-lg, 1.5rem); font-weight: 800; }
.prf-price s { font-size: var(--ds-text-md, 1rem);
  color: var(--ds-muted, oklch(0.72 0.02 265)); }

.prf-text { margin: var(--ds-4, 16px) 0 0; max-width: 48ch;
  font-size: var(--ds-text-sm, 0.95rem); line-height: var(--ds-leading-body, 1.6);
  color: var(--ds-muted, oklch(0.78 0.02 265)); }

.prf-facts { margin: var(--ds-5, 22px) 0 0; padding: 0; list-style: none;
  display: grid; gap: 9px; }
.prf-facts li { position: relative; padding-left: 20px;
  font-size: var(--ds-text-sm, 0.9rem); }
.prf-facts li::before { content: ""; position: absolute; left: 0; top: 0.52em;
  width: 8px; height: 8px; border-radius: 2px; rotate: 45deg;
  background: var(--ds-accent, oklch(0.72 0.16 300)); }

.prf-row { display: flex; align-items: center; gap: var(--ds-4, 16px); flex-wrap: wrap;
  margin-top: var(--ds-6, 30px); }
.prf-cta { display: inline-block; padding: 13px 26px; border-radius: 999px;
  font: 600 var(--ds-text-sm, 0.95rem) / 1 var(--ds-font, system-ui, sans-serif);
  text-decoration: none; cursor: pointer; border: 0;
  color: var(--ds-accent-fg, oklch(0.14 0.02 275));
  background: var(--ds-accent, oklch(0.72 0.16 300));
  transition: filter 0.2s ease; }
.prf-cta:hover { filter: brightness(1.1); }
.prf-cta:focus-visible { outline: 2px solid var(--ds-accent-ring, oklch(0.72 0.16 300 / 0.4));
  outline-offset: 2px; }
.prf-note { margin: 0;
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-xs, 0.74rem);
  color: var(--ds-muted, oklch(0.72 0.02 265)); }

/* СОКЕТ ФОНА — контракт как у остальных секций */
.prf-bg { position: absolute; inset: 0; z-index: -1; }
.prf[data-slot-bg] { background: transparent; }
.prf-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.prf[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); }
.prf[data-tone="dark"] .prf-bg::after {
  background: oklch(0.09 0.02 265 / calc(var(--prf-scrim, 0.5) * 0.9)); }
.prf[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); }
.prf[data-tone="light"] .prf-bg::after {
  background: oklch(0.99 0 0 / calc(var(--prf-scrim, 0.5) * 0.9)); }
`;

export interface ProductFeatureProps {
  eyebrow?: string;
  /** Название товара. */
  title?: string;
  /** Цена строкой вместе с валютой (формат «6 900 ₽»). */
  price?: string;
  /** Старая цена — рисуется зачёркнутой рядом. */
  oldPrice?: string;
  /** Плашка на фото (формат «последний тираж»). */
  badge?: string;
  /** Абзац о товаре. */
  text?: string;
  /** Факты списком: материал, размеры, комплект. */
  facts?: string[];
  ctaLabel?: string;
  ctaHref?: string;
  /** Строка возле кнопки: доставка, наличие. */
  note?: string;
  /** Фото; путь вида `https://motiva.pages.dev/img/<имя>.jpg`, кадр 4:5. */
  photo?: string;
  /**
   * Сокет фона: любой эффект с `mount.role: "background"`, например `<AuroraField />`.
   * Занят — секция снимает собственную заливку, чтобы не спорить за слой.
   */
  background?: ReactNode;
  /** Какой текст читается поверх фона; приходит из `mount.tone` подставленной записи. */
  tone?: "dark" | "light";
  /** Плотность скрима между фоном и текстом; 0 — выключить. */
  scrim?: number;
}

const FACTS = [
  "Плотная бумага 240 г/м², матовая",
  "Размер А1 · 594 × 841 мм",
  "Тубус и открытка — в комплекте",
  "Тираж 100 экземпляров, каждый пронумерован",
];

/**
 * ОДИН ТОВАР КРУПНО — второй вариант вида products: у product-grid витрина
 * каталога, здесь — страница-презентация флагмана (лимитированный тираж,
 * главный продукт, подарочный набор). Фото в рамке 4:5 слева, справа —
 * цена как главный факт (крупнее заголовков соседей, tabular-nums),
 * факты списком с гранёными маркерами и ОДИН CTA: у флагмана не бывает
 * второй кнопки.
 */
export function ProductFeature({
  eyebrow = "флагман каталога",
  title = "«Полярный день» — принт номерного тиража",
  price = "6 900 ₽",
  oldPrice,
  badge = "тираж 100 шт.",
  text = "Снят на рассвете, который длился всю ночь. Печатаем на плотной матовой бумаге, каждый экземпляр нумеруем от руки и подписываем — второго тиража не будет.",
  facts = FACTS,
  ctaLabel = "Забрать свой номер",
  ctaHref = "#",
  note = "осталось 23 из 100 · отправка завтра",
  photo = "https://motiva.pages.dev/img/1022-600x750.jpg",
  background,
  tone,
  scrim = 0.5,
}: ProductFeatureProps) {
  return (
    <section
      className="prf"
      data-slot-bg={background ? "" : undefined}
      data-tone={tone}
      style={{ textAlign: "start", ["--prf-scrim" as string]: scrim }}
    >
      <style href="motiva-product-feature" precedence="medium">{css}</style>

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

      <div className="prf-in">
        <figure className="prf-shot">
          <img src={photo} alt={title} loading="lazy" decoding="async" />
          {badge && <figcaption className="prf-badge" data-slot="badge">{badge}</figcaption>}
        </figure>

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

          {(price || oldPrice) && (
            <p className="prf-price">
              {price && <b data-slot="price">{price}</b>}
              {oldPrice && <s data-slot="oldPrice">{oldPrice}</s>}
            </p>
          )}

          {text && <p className="prf-text" data-slot="text">{text}</p>}

          {facts.length > 0 && (
            <ul className="prf-facts">
              {facts.map((f, i) => (
                <li key={f} data-slot="facts" data-idx={i}>{f}</li>
              ))}
            </ul>
          )}

          <div className="prf-row">
            {ctaLabel && (
              <a className="prf-cta" href={ctaHref} data-slot="ctaLabel">{ctaLabel}</a>
            )}
            {note && <p className="prf-note" data-slot="note">{note}</p>}
          </div>
        </div>
      </div>
    </section>
  );
}