<bmx-floor-plan>

<bmx-floor-plan id="ex-fp" selection-mode="multiple" max-selection="3" style="--bmx-floor-plan-height: 30rem"></bmx-floor-plan>
<p class="note" id="ex-fp-out" role="status" style="margin: 12px 0 0">Choose up to three desks or rooms, then Book.</p>

<script type="module">
  await customElements.whenDefined('bmx-floor-plan');
  const fp = document.getElementById('ex-fp');
  const walls = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700"><g fill="none" stroke="#9aa0a6" stroke-width="6"><rect x="10" y="10" width="1180" height="680"/><path d="M760 10v260M760 340v350M10 380h300M380 380h380"/></g><g fill="#9aa0a6" font-family="sans-serif" font-size="22"><text x="40" y="660">Kitchen</text><text x="1050" y="660">Lifts</text></g></svg>`;
  const spaces = [];
  let n = 1;
  for (let row = 0; row < 3; row++) for (let col = 0; col < 8; col++) {
    const x = 60 + col * 82, y = 60 + row * 100;
    spaces.push({ id: `desk-${n}`, name: `Desk ${n}`, kind: 'desk', x, y, w: 70, h: 40, zone: col < 4 ? 'fin' : 'eng', amenities: n % 3 ? ['monitor'] : ['monitor', 'standing'] });
    n++;
  }
  for (let col = 0; col < 6; col++) spaces.push({ id: `desk-${n}`, name: `Desk ${n}`, kind: 'desk', x: 60 + col * 82, y: 430, w: 70, h: 40, zone: 'quiet', amenities: ['monitor'] }), n++;
  spaces.push({ id: 'room-a', name: 'Kingfisher', kind: 'room', capacity: 8, x: 800, y: 40, w: 360, h: 200, amenities: ['video', 'whiteboard'] });
  spaces.push({ id: 'room-b', name: 'Wren', kind: 'room', capacity: 4, x: 800, y: 370, w: 170, h: 140, amenities: ['video'] });
  spaces.push({ id: 'room-c', name: 'Heron', kind: 'room', capacity: 12, points: [[990,370],[1160,370],[1160,560],[1060,560],[990,500]] });
  for (let i = 0; i < 5; i++) spaces.push({ id: `seat-${i+1}`, name: `Sofa seat ${i+1}`, kind: 'seat', cx: 560 + i * 44, cy: 600, r: 16 });
  spaces.push({ id: 'p1', name: 'Print room', kind: 'area', bookable: false, x: 600, y: 430, w: 130, h: 80 });
  fp.plan = { floors: [
    { id: 'g', name: 'Ground floor', width: 1200, height: 700, background: { svg: walls }, zones: [
      { id: 'fin', name: 'Finance', x: 40, y: 40, w: 330, h: 300, color: '#bbdefb' },
      { id: 'eng', name: 'Engineering', x: 370, y: 40, w: 330, h: 300, color: '#c8e6c9' },
      { id: 'quiet', name: 'Quiet zone', x: 40, y: 410, w: 500, h: 80, color: '#fff9c4' } ], spaces },
    { id: '1', name: 'First floor', width: 1200, height: 700, spaces: [{ id: 'f-desk-1', name: 'Desk F1', kind: 'desk', x: 100, y: 100, w: 70, h: 40 }] },
  ] };
  fp.availability = { 'desk-2': 'booked', 'desk-3': { state: 'booked', holder: { name: 'Ana Silva' } }, 'desk-7': 'occupied', 'desk-10': { state: 'mine', holder: { name: 'Sam Reviewer' }, note: 'All day' }, 'desk-15': 'reserved', 'room-b': { state: 'occupied', note: 'until 14:00' }, 'desk-26': 'booked' };
  const out = document.getElementById('ex-fp-out');
  fp.addEventListener('bmxBook', e => (out.textContent = `Booking ${e.detail.spaces.map(s => s.name).join(', ')} - the page sends this to its own booking service.`));
</script>