<template>
  <div class="circle-picker">
    <div
      v-for="circle in circles"
      :key="circle.value"
      class="circle-option"
      :class="{
        selected: modelValue === circle.value,
        current: savedValue === circle.value,
      }"
      @click="$emit('update:modelValue', circle.value)"
    >
      <span class="circle-name">{{ circle.label }}</span>
      <span class="circle-desc">{{ circle.description }}</span>
      <span
        v-if="savedValue === circle.value"
        class="circle-tag"
        :style="{ color: `var(--c-${circle.value})`, borderColor: `var(--c-${circle.value})` }"
      >Current</span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  modelValue: { type: String, default: '' },
  savedValue: { type: String, default: '' },
  circles: {
    type: Array,
    default: () => [
      { value: 'community', label: 'Community', description: 'Learning together, exploring cooperative models' },
      { value: 'founder', label: 'Founder', description: 'Actively building a cooperative studio' },
      { value: 'practitioner', label: 'Practitioner', description: 'Experienced in cooperative practice' },
    ],
  },
})

defineEmits(['update:modelValue'])
</script>

<style scoped>
.circle-picker {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.circle-option {
  border: 1px dashed var(--border);
  padding: 12px 12px;
  background: var(--bg);
  cursor: pointer;
  transition: all 0.15s;
}

.circle-option:hover {
  background: var(--surface-hover);
}

.circle-option.selected {
  border-color: var(--candle);
  border-style: solid;
  background: var(--surface);
}

.circle-name {
  font-size: 13px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.circle-option.selected .circle-name {
  color: var(--candle);
}

.circle-desc {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
  display: block;
}

.circle-tag {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 6px;
  display: inline-block;
  padding: 1px 6px;
  border: 1px dashed;
}

@media (max-width: 768px) {
  .circle-picker {
    grid-template-columns: 1fr;
  }
}
</style>
