// Poster-style tiled composition. Blobs pack edge-to-edge like a puzzle.
// Each blob declares a kind (organ or 'fill'), a color, a grid position
// (x/y/w/h as % of the canvas), border-radius, and internal marks.
// Two compositions — Safe (A) and Experimental (B).

const C = {
  paper:   'var(--paper)',
  ink:     'var(--ink)',
  mustard: 'var(--mustard)',
  tomato:  'var(--tomato)',
  sage:    'var(--sage)',
  pink:    'var(--pink)',
  deep:    'var(--deep)',
  blue:    'var(--blue)',
  sand:    'var(--sand)',
  // muted fill tones — sit close to paper so they recede
  fillWarm: 'var(--fill-warm)',
  fillCool: 'var(--fill-cool)',
};

// Marks to render inside a blob, positioned absolutely.
// `at`: [x%, y%] from top-left of the blob.
// `mark`: the Marks.* component name as a string
// `props`: props to pass
// `rot`: rotation

// -------- LAYOUT A: faithful to the poster (safe) --------
// 5 organ blobs + 2 fill blobs, tiled like the reference.
const LAYOUT_A = [
  // EYE (mustard) top-left, tall rounded square
  {
    id: 'eye', kind: 'eye', color: C.mustard,
    x: 4, y: 5, w: 44, h: 40, r: 90,
    decor: [
      { mark: 'DotGrid', at: [22, 18], props: { cols: 6, rows: 5, gap: 10 } },
      { mark: 'Hatch',   at: [72, 10], props: { w: 52, count: 5, gap: 5 }, rot: -15 },
      { mark: 'Squiggle',at: [72, 50], props: { w: 40, amp: 8, cycles: 3 }, rot: 90 },
    ],
  },
  // EAR top-right — terracotta block with cream blob ear and scattered marks
  {
    id: 'ear', kind: 'ear', color: C.deep,
    x: 52, y: 5, w: 44, h: 40, r: 90,
    decor: [
      { mark: 'TriangleOutline', at: [12, 14], props: { s: 22 } },
      { mark: 'DotPair',         at: [22, 16], props: { s: 9 } },
      { mark: 'Plus',            at: [78, 12], props: { s: 14 } },
      { mark: 'ArcMark',         at: [88, 14], props: { s: 30 } },
      { mark: 'Paren',           at: [92, 50], props: { s: 18 } },
      { mark: 'DashedLine',      at: [16, 88], props: { w: 56, h: 2 } },
      { mark: 'Asterisk',        at: [90, 88], props: { s: 18 } },
    ],
  },
  // BRAIN (tomato) middle-right — warm, active processing
  {
    id: 'brain', kind: 'brain', color: C.tomato,
    x: 52, y: 47, w: 44, h: 24, r: 90,
    decor: [
      { mark: 'Bowtie',  at: [18, 30], props: { s: 22 } },
      { mark: 'XMark',   at: [82, 28], props: { s: 20 } },
      { mark: 'Plus',    at: [40, 65], props: { s: 22 } },
      { mark: 'Sunburst',at: [76, 65], props: { s: 36 } },
    ],
  },
  // HAND (blue) middle-left, square
  {
    id: 'hand', kind: 'hand', color: C.blue,
    x: 4, y: 47, w: 44, h: 24, r: 90,
    decor: [
      { mark: 'SmallPlus', at: [78, 30], props: { s: 14 } },
      { mark: 'Zigzag',    at: [30, 70], props: { w: 50, h: 16 } },
    ],
  },
  // MOUTH (sand) bottom — spans full width
  {
    id: 'mouth', kind: 'mouth', color: C.sand,
    x: 4, y: 73, w: 92, h: 19, r: 80,
    decor: [
      { mark: 'Sunburst', at: [8,  48], props: { s: 54, rays: 20 } },
      { mark: 'XMark',    at: [40, 30], props: { s: 18 } },
      { mark: 'SmallPlus',at: [92, 60], props: { s: 16 } },
      { mark: 'Squiggle', at: [70, 78], props: { w: 80, amp: 8, cycles: 3 } },
    ],
  },
];

// -------- LAYOUT B: experimental — different tiling, same vocabulary --------
const LAYOUT_B = [
  // BRAIN dominates — top, wide
  {
    id: 'brain', kind: 'brain', color: C.tomato,
    x: 4, y: 5, w: 58, h: 30, r: 80,
    decor: [
      { mark: 'Plus',     at: [20, 30], props: { s: 24 } },
      { mark: 'Sunburst', at: [82, 30], props: { s: 40 } },
      { mark: 'XMark',    at: [55, 70], props: { s: 20 } },
      { mark: 'Target',   at: [78, 70], props: { s: 22 } },
    ],
  },
  // EAR top-right — concentric cream rings on sage block
  {
    id: 'ear', kind: 'ear', color: C.sage,
    x: 58, y: 5, w: 38, h: 40, r: 90,
    decor: [],
  },
  // EYE middle-left, big square
  {
    id: 'eye', kind: 'eye', color: C.mustard,
    x: 4, y: 37, w: 38, h: 34, r: 90,
    decor: [
      { mark: 'DotGrid', at: [22, 22], props: { cols: 5, rows: 5, gap: 11 } },
      { mark: 'Hatch',   at: [78, 15], props: { w: 46, count: 5, gap: 5 }, rot: -18 },
    ],
  },
  // MOUTH middle-right
  {
    id: 'mouth', kind: 'mouth', color: C.sand,
    x: 44, y: 37, w: 52, h: 22, r: 80,
    decor: [
      { mark: 'XMark',    at: [22, 50], props: { s: 20 } },
      { mark: 'SmallPlus',at: [85, 55], props: { s: 14 } },
    ],
  },
  // HAND under mouth
  {
    id: 'hand', kind: 'hand', color: C.blue,
    x: 44, y: 61, w: 26, h: 18, r: 60,
    decor: [
      { mark: 'Zigzag', at: [55, 72], props: { w: 60, h: 14 } },
    ],
  },
  // fill
  {
    id: 'fill-r', kind: 'fill', color: C.fillCool,
    x: 72, y: 61, w: 24, h: 18, r: 60,
    decor: [
      { mark: 'Squiggle', at: [50, 50], props: { w: 70, amp: 10, cycles: 3 } },
    ],
  },
  // fill bottom
  {
    id: 'fill-b', kind: 'fill', color: C.fillWarm,
    x: 4, y: 73, w: 38, h: 19, r: 60,
    decor: [
      { mark: 'Sunburst', at: [25, 50], props: { s: 50 } },
      { mark: 'Target',   at: [75, 50], props: { s: 26 } },
    ],
  },
  {
    id: 'fill-b2', kind: 'fill', color: C.fillCool,
    x: 44, y: 81, w: 52, h: 11, r: 40,
    decor: [
      { mark: 'Zigzag', at: [50, 50], props: { w: 180, h: 10 } },
    ],
  },
];

window.LAYOUTS = { A: LAYOUT_A, B: LAYOUT_B };
window.POSTER_COLORS = C;