<template>
  <article
    id="dtl-page"
    class="bg-black rounded-xl p-64"
    :style="'--background: url(' + background + ')'"
  >
    <header
      class="flex flex-col justify-center | text-center text-white | flow"
      style="--flow-space: 2rem"
    >
      <hgroup class="flow" data-icon="leaf-thin">
        <h1 class="text-xl font-serif">{{ page.content.sectiontitle }}</h1>
        <p class="intro" v-html="page.content.introduction"></p>
      </hgroup>
      <div class="ctas | flex" style="--column-gap: 1rem">
        <button
          @click="isOptimizationDialogOpen = true"
          class="btn btn--white-10"
        >
          Optimiser un projet existant
        </button>
        <button
          @click="isProjectRequestDialogOpen = true"
          class="btn btn--white"
        >
          Créer un nouveau projet avec DTL
        </button>
      </div>
    </header>
    <div class="presentation | mt-64 flow">
      <div v-for="row in page.presentation" :key="row.id" class="flex items-stretch">
        <div
          v-for="column in row.columns"
          :key="column.id"
          class="flex-1 | flex flex-col"
          style="min-width: 16.5rem"
        >
          <div
            v-for="block in column.blocks"
            :key="block.id"
            class="card w-full h-full | bg-white-10 text-grey-200"
          >
            <img
              :src="block.content.cover.url"
              alt=""
              width=""
              height=""
              class="rounded-md"
            />
            <h2 class="font-serif text-lg text-white">
              {{ block.content.title }}
            </h2>
            <div v-html="block.content.text"></div>
          </div>
        </div>
      </div>
    </div>
  </article>

  <OptimizationRequestDialog
    v-if="isOptimizationDialogOpen"
    @close="isOptimizationDialogOpen = false"
  />

  <ProjectRequestDialog
    v-if="isProjectRequestDialogOpen"
    @close="isProjectRequestDialogOpen = false"
  />
</template>
<script setup>
import { storeToRefs } from 'pinia';
import { usePageStore } from '../stores/page';
import OptimizationRequestDialog from '../components/design-to-light/OptimizationRequestDialog.vue';
import ProjectRequestDialog from '../components/ProjectRequestDialog.vue';
import { computed, ref } from 'vue';

const { page } = storeToRefs(usePageStore());

const isOptimizationDialogOpen = ref(false);
const isProjectRequestDialogOpen = ref(false);

const background = computed(() => {
  return page.value?.background?.url;
});
</script>
