<template>
  <div class="h-full flex flex-col justify-between bg-[#0b61a8] text-white">
    <div
        class="flex-1 flex flex-col items-center justify-center text-center p-6"
    >
      <h1 class="text-2xl font-bold mb-2">
        Привет. Я ИИ-помощник туриста.
      </h1>
      <p class="mt-6 mb-6">Давай составим пешеходный маршрут по Нижнему Новгороду?</p>
      <div class="text-6xl mt-4 flex gap-4 justify-center">
        <PlaneIcon class="w-12 h-12" />
        <MapIcon class="w-12 h-12" />
      </div>
      <p class="mt-10">
        Я помогу подобрать прогулку — расскажи, где ты, что любишь и
        сколько времени хочешь потратить.
      </p>
    </div>
    <div class="p-4">
      <button
          class="w-full bg-cyan-500 hover:bg-cyan-600 text-white font-semibold py-3 rounded-2xl cursor-pointer"
          @click="store.screen = 2"
      >
        Давай
      </button>
    </div>
  </div>
</template>

<script setup>
import { useMainStore } from "../store/main";
import { Plane as PlaneIcon, Map as MapIcon } from "lucide-vue-next";

const store = useMainStore();
</script>
