/**
 * Archetype: sectionHeader — transition between deck sections.
 *
 * Slots:
 *   - number    (optional) section number e.g. "02"
 *   - title     (required) section name
 *   - subtitle  (optional) one-line description / theme of the section
 *
 * Visual: section number rendered huge + subtle as a backdrop, section
 * title overlaid in primary colour, hairline rule above the title.
 */
import { applyChrome, rule, placeText } from './_helpers.js';
import { textStyle } from '../typography.js';

export const id = 'sectionHeader';
export const slots = ['number', 'title', 'subtitle'];

export default function render(slide, resolved, content, _pptx, _ctx) {
  // Section transition — bare canvas, no chrome.
  applyChrome(slide, resolved, { bgOverride: content.background, seed: 17, chrome: false });

  const cfg = resolved.archetypeConfig('sectionHeader');
  const { safe } = resolved.spacing;

  // Huge backdrop number — sits ~middle-left, very low contrast.
  if (content.number !== undefined && content.number !== null) {
    slide.addText(String(content.number), {
      x: safe.x, y: safe.y + safe.h * 0.10,
      w: safe.w * 0.6, h: safe.h * 0.55,
      ...textStyle(resolved.typography, 'display', {
        color: resolved.palette.primary,
        align: 'left',
        fontSize: 160,
        charSpacing: -4,
        valign: 'top',
      }),
      transparency: 75,
    });
  }

  // Optional hairline above the title.
  const titleY = safe.y + safe.h * 0.55;
  if (cfg.ruleAbove) {
    rule(slide, safe.x, titleY - 0.25, 0.6, resolved.palette.primary, 1.2);
  }

  placeText(slide, resolved, 'title', content.title, {
    x: safe.x, y: titleY, w: safe.w * 0.85, h: 1.2,
  }, { color: resolved.palette.text, align: 'left' });

  if (content.subtitle) {
    placeText(slide, resolved, 'subtitle', content.subtitle, {
      x: safe.x, y: titleY + 1.1, w: safe.w * 0.7, h: 0.8,
    }, { color: resolved.palette.subtle, align: 'left' });
  }
}
