component Map {
  outputs {
    // markerClick and select both fire for a marker press; select is the
    // generic name callers reach for, markerClick the explicit one.
    markerClick(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    select(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    zoom(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
  }

  props {
    size: string = "default"
    color: string = "primary"
    title: string = "Map"
    description: string = ""
    items: unknown[] = []
    variant: string = "default"
    class: string = ""
  }

  view {
    <section
      data-ui-component="Map"
      aria-label='{title}'
      class='wire-map {class}'
    >
      {#if title || description}
        <header class="wire-map__header">
          <div>
            {#if title}
              <h3 class="wire-map__title">{title}</h3>
            {/if}
            {#if description}
              <p class="wire-map__description">{description}</p>
            {/if}
          </div>
          <span class="wire-map__header-icon"><span class="icon-[lucide--map]" aria-hidden="true"></span>
          </span>
        </header>
      {/if}

      <div
        class="wire-map__viewport"
        data-size='{size}'
      >
        <div
          class="wire-map__grid"
          style="background-image: linear-gradient(var(--wire-color-border) 1px, transparent 1px), linear-gradient(90deg, var(--wire-color-border) 1px, transparent 1px); background-size: 32px 32px;"
          aria-hidden="true"
        ></div>

        <div class="wire-map__content">
          <slot></slot>
        </div>

        {#if items.length > 0}
          {#each items as item, index}
            <button
              type="button"
              aria-label='{item.label || item.title || "Map marker"}'
              class="wire-map__marker"
              style='left: {item.x || (20 + index * 12)}%; top: {item.y || (30 + (index % 3) * 18)}%;'
              @click='output.markerClick(item); output.select(item)'
            >
              <span class='{item.icon || "icon-[lucide--map-pin]"}' aria-hidden="true"></span>
            </button>
          {/each}
        {/if}

        <div class="wire-map__controls">
          <button
            type="button"
            aria-label="Zoom in"
            class="wire-map__control"
            @click='output.zoom({ direction: "in" })'
          >
            <span class="icon-[lucide--plus] wire-map__control-icon" aria-hidden="true"></span>
          </button>
          <button
            type="button"
            aria-label="Zoom out"
            class="wire-map__control"
            @click='output.zoom({ direction: "out" })'
          >
            <span class="icon-[lucide--minus] wire-map__control-icon" aria-hidden="true"></span>
          </button>
        </div>
      </div>
    </section>
  }

  style {
    .wire-map { overflow: hidden; border: 1px solid var(--wire-color-border); border-radius: calc(var(--wire-radius) * 1.5); background: var(--wire-color-surface-raised); box-shadow: var(--wire-shadow-1); }
    .wire-map__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--wire-color-border); }
    .wire-map__title { color: var(--wire-color-text); font-size: 1.125rem; font-weight: 700; }
    .wire-map__description { margin-top: 0.25rem; color: var(--wire-color-text-muted); font-size: 0.875rem; line-height: 1.5rem; }
    .wire-map__header-icon { display: flex; width: 2.5rem; height: 2.5rem; flex: none; align-items: center; justify-content: center; border-radius: var(--wire-radius); color: var(--wire-color-primary); background: var(--wire-color-primary-soft); }
    .wire-map__header-icon > span { width: 1.25rem; height: 1.25rem; }
    .wire-map__viewport { position: relative; isolation: isolate; height: 20rem; overflow: hidden; background: var(--wire-color-surface-soft); }
    .wire-map__viewport[data-size="sm"] { height: 16rem; }
    .wire-map__viewport[data-size="lg"] { height: 28rem; }
    .wire-map__grid { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; }
    .wire-map__content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
    .wire-map__marker { position: absolute; display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; padding: 0; border: 4px solid var(--wire-color-surface-raised); border-radius: 50%; color: var(--wire-color-on-primary); background: var(--wire-color-primary); box-shadow: var(--wire-shadow-3); transition: transform var(--wire-motion-base) var(--wire-ease-standard); }
    .wire-map__marker:hover { transform: scale(1.1); }
    .wire-map__controls { position: absolute; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
    .wire-map__control { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--wire-color-border); border-radius: var(--wire-radius); color: var(--wire-color-text); background: var(--wire-color-surface-raised); box-shadow: var(--wire-shadow-1); transition: background var(--wire-motion-base); }
    .wire-map__control:hover { background: var(--wire-color-surface-soft); }
    .wire-map__marker:focus-visible, .wire-map__control:focus-visible { outline: 2px solid var(--wire-color-focus); outline-offset: 2px; }
    .wire-map__control-icon { width: 1rem; height: 1rem; }
  }
}