<template>
  <div class="flex flex-col h-full bg-white">
    <div class="p-5 border-b border-gray-100">
      <h2 class="text-xl font-semibold">Где ты находишься?</h2>
      <p class="text-sm text-gray-500 mt-1">
        Укажи адрес в свободной форме. Для точного поиска рекомендую ввести в формате: улица Такая-то, дом N.
        Приложение работает по Нижнему Новгороду.
      </p>
    </div>

    <div class="flex-1 p-5">
      <input
          v-model="store.address"
          class="w-full border rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-cyan-500"
          placeholder="улица Дальняя, дом 8"
      />
    </div>

    <div class="p-4 border-t border-gray-100">
      <button
          :disabled="!store.address.trim()"
          :class="{
            'opacity-50 cursor-not-allowed': !store.address.trim()
          }"
          class="w-full bg-cyan-500 hover:bg-cyan-600 text-white py-3 rounded-2xl font-semibold transition"
          @click="goNext"
      >
        Продолжить
      </button>
    </div>
  </div>
</template>

<script setup>
import { useMainStore } from "../store/main";

const store = useMainStore();

function goNext() {
  if (store.address.trim()) {
    store.screen = 3;
  }
}
</script>
