<script setup lang="ts">
// Sticky capture bar — the ONE entry of every decision (gesture 1 of 2).
// Enter → /decider?titre=… ; nothing else is mandatory.
import { CAPTURE_PLACEHOLDER } from '~/lexicon'

const text = ref('')

function go() {
  const title = text.value.trim()
  if (title.length === 0) return
  navigateTo({ path: '/decider', query: { titre: title } })
}
</script>

<template>
  <!-- ld-v2 -->
  <div class="feed-capture">
    <div class="ld-card feed-capture__card">
      <UIcon name="i-lucide-zap" class="feed-capture__icon" />
      <input
        v-model="text"
        type="text"
        class="feed-capture__input"
        :placeholder="CAPTURE_PLACEHOLDER"
        :aria-label="CAPTURE_PLACEHOLDER"
        enterkeyhint="go"
        @keydown.enter.prevent="go"
      >
      <button
        v-if="text.trim().length > 0"
        class="ld-btn feed-capture__go"
        type="button"
        @click="go"
      >
        <UIcon name="i-lucide-arrow-right" />
      </button>
    </div>
  </div>
</template>

<style scoped>
.feed-capture {
  position: sticky;
  top: 3.5rem;
  z-index: 20;
  padding: 0.5rem 0 0.75rem;
  background: var(--mood-bg);
}
.feed-capture__card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem 0.5rem 1rem;
}
.feed-capture__icon {
  font-size: 1.125rem;
  color: var(--mood-accent);
  flex-shrink: 0;
}
.feed-capture__input {
  flex: 1;
  min-width: 0;
  background: none;
  font-size: 1.0625rem;
  font-weight: 600;
  padding: 0.5rem 0;
}
.feed-capture__input:focus-visible { box-shadow: none; }
.feed-capture__input::placeholder {
  color: var(--mood-text-muted);
  font-weight: 500;
}
.feed-capture__go {
  padding: 0.5rem 0.875rem;
  min-height: 2.25rem;
}
</style>
