<template>
  <Teleport to="body">
    <Transition name="fade">
      <div
        v-if="visible"
        class="intention-overlay"
        style="
          position: fixed;
          inset: 0;
          z-index: 2000;
          background: rgba(20, 18, 14, 0.85);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 24px;
        "
        @click.self="dismiss"
      >
        <div style="
          max-width: 540px;
          width: 100%;
          background: #faf8f5;
          border-radius: 8px;
          padding: 32px;
          color: #2c2416;
        ">
          <p style="font-size: 1rem; line-height: 1.7; margin: 0 0 12px 0;">
            Cette carte recense les réseaux, collectifs, agences et projets où des
            pensées écologiques deviennent des pratiques d'architecture et d'habiter.
          </p>
          <p style="font-size: 0.875rem; line-height: 1.6; opacity: 0.75; margin: 0 0 24px 0;">
            Elle ne prétend pas à l'exhaustivité. Elle est un geste politique :
            rendre visible ce qui se transforme, comment, par qui, où.
            5 familles et des hashtags vous permettent d'explorer.
          </p>
          <button
            @click="dismiss"
            style="
              background: #2c2416;
              color: #faf8f5;
              border: none;
              border-radius: 4px;
              padding: 10px 24px;
              font-size: 0.875rem;
              font-weight: 600;
              cursor: pointer;
              width: 100%;
            "
          >Explorer la carte</button>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
const visible = ref(false)

onMounted(() => {
  if (typeof localStorage !== 'undefined' && !localStorage.getItem('aep_intention_seen')) {
    visible.value = true
  }
})

function dismiss() {
  visible.value = false
  if (typeof localStorage !== 'undefined') {
    localStorage.setItem('aep_intention_seen', '1')
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>
