<script setup lang="ts">
// Couverture du portfolio — reprend l'accueil du site figureslibres.cc
// (docs/portfolios-examples/screenshot-site-figures-libres.png) : la phrase
// d'intro seule, bloc centré à 65 % de large, chaque keyword dans sa fonte
// (sans soulignement, contrairement au site), flèche vers le bas. Rien d'autre.
import type { Background } from '~~/types'

const props = withDefaults(
  defineProps<{
    title: string // titre du portfolio — en-tête + métadonnées PDF
    subtitle?: string
    recipient?: string
    background: Background
    bandColor?: string // filet couleur en bas (définit aussi celui du sommaire)
    date?: string // texte libre de l'en-tête (ex. « Juillet 2026 »)
    siteUrl?: string
    contactEmail?: string
    renderMode?: 'preview' | 'print'
  }>(),
  { renderMode: 'preview' },
)

const strip = computed(() => props.bandColor || FL_INK)

// Fond : « Plein » = couleur du filet ; « Blanc » rend le gris charte du site
// (l'intro y est présentée sur gris clair) ; « Teinté » = aplat beige.
const pageStyle = computed(() => {
  const base
    = props.background.mode === 'full'
      ? strip.value
      : props.background.mode === 'tint'
        ? TINT_COLOR
        : FL_BASE
  return { backgroundColor: base, color: inkOn(base) }
})

// En-tête : coordonnées en liens actifs (le PDF et l'aperçu partagent le
// template ; Chromium convertit les <a href> en liens cliquables du PDF).
const siteHref = computed(() => props.siteUrl?.trim() || DEFAULT_SITE_URL)
const siteLabel = computed(() => siteHref.value.replace(/^https?:\/\//, '').replace(/\/$/, ''))
const email = computed(() => props.contactEmail?.trim() || DEFAULT_CONTACT_EMAIL)
// Laissée vide, la date affiche par défaut le mois courant (ex. « Juillet 2026 »).
const displayDate = computed(() => props.date?.trim() || formatMonthYear())
</script>

<template>
  <div class="fl-page" :style="pageStyle">
    <!-- En-tête : titre du portfolio + date, site et mail (liens actifs PDF/viewer) -->
    <header
      class="absolute inset-x-0 top-0 flex items-start justify-between gap-8"
      :style="{ padding: 'var(--fl-margin)', fontFamily: 'Syne, sans-serif' }"
    >
      <div class="max-w-[60%]">
        <h1 :style="{ fontSize: '30px', lineHeight: '1.2' }">{{ title }}</h1>
        <p class="opacity-70" :style="{ fontSize: '19px', lineHeight: '1.5' }">{{ displayDate }}</p>
      </div>
      <div class="flex shrink-0 flex-col items-end" :style="{ fontSize: '19px', lineHeight: '1.5' }">
        <a :href="siteHref" target="_blank" rel="noopener" class="text-current no-underline">{{ siteLabel }}</a>
        <a :href="`mailto:${email}`" class="text-current no-underline">{{ email }}</a>
      </div>
    </header>

    <div class="absolute inset-0 flex flex-col items-center justify-center">
      <!-- Phrase d'intro du site (pages/01.home) — Lato, keywords dans les
           fontes d'« utilité » du thème Grav, non soulignés -->
      <p class="w-[65%]" :style="{ fontFamily: 'Lato, sans-serif', fontSize: '54px', lineHeight: '1.35' }">
        <span class="font-bold" style="font-family: 'Syne', sans-serif">Figures&nbsp;Libres</span>
        est un&nbsp;collectif de&nbsp;design graphique et interactif porteur de messages d'utilité
        <span class="fl-font-publique">publique</span>,
        <span class="fl-font-sociale">sociale</span> et
        <span class="fl-font-culturelle">culturelle</span>
        qui œuvre sur logiciels&nbsp;libres.
      </p>
    </div>

    <!-- Filet couleur pleine largeur en bas (masqué en fond plein) -->
    <div v-if="background.mode !== 'full'" class="absolute inset-x-0 bottom-0" :style="{ height: 'var(--fl-strip)', backgroundColor: strip }" />
  </div>
</template>
