<template>
  <div class="hero-content">
    <!-- 5-line heading with alternating typography -->
    <div class="hero-heading">
      <h1 v-if="hero.heading?.length" class="hero-lines">
        <span
          v-for="(line, i) in hero.heading"
          :key="i"
          class="hero-line"
          :class="`hero-line--${i + 1}`"
        >{{ line }}</span>
      </h1>
    </div>

    <!-- Discrete aside block -->
    <details class="hero-aside">
      <summary class="hero-aside-toggle">En savoir plus</summary>

      <div class="hero-aside-body">
        <!-- Citations -->
        <blockquote v-if="hero.citations?.length" class="hero-citations">
          <p v-for="(cite, i) in hero.citations" :key="i" class="hero-cite">
            {{ cite }}
          </p>
        </blockquote>

        <!-- Approach + Axes -->
        <div v-if="hero.approach" class="hero-approach">
          <p class="hero-approach-text">{{ hero.approach }}</p>
          <dl v-if="hero.axes?.length" class="hero-axes">
            <div v-for="(axis, i) in hero.axes" :key="i" class="hero-axis">
              <dt>{{ axis.label }}</dt>
              <dd>{{ axis.value }}</dd>
            </div>
          </dl>
        </div>

        <!-- Audience + Addressees -->
        <div v-if="hero.audience" class="hero-approach hero-audience">
          <p class="hero-approach-text">{{ hero.audience }}</p>
          <dl v-if="hero.addressees?.length" class="hero-axes">
            <div v-for="(item, i) in hero.addressees" :key="i" class="hero-axis">
              <dt>{{ item.label }}</dt>
              <dd>{{ item.value }}</dd>
            </div>
          </dl>
        </div>
      </div>
    </details>
  </div>
</template>

<script setup lang="ts">
interface HeroAxis {
  label: string
  value: string
}

interface HeroData {
  heading: string[]
  citations: string[]
  approach: string
  axes: HeroAxis[]
  audience: string
  addressees: HeroAxis[]
}

defineProps<{
  hero: HeroData
}>()
</script>

<style scoped>
.hero-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── Heading — 5 lines ── */

.hero-heading {
  margin-bottom: 1.5rem;
}

.hero-lines {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
}

.hero-line {
  display: block;
  font-family: var(--font-display);
  line-height: 1.3;
}

/* l1: Construire une autonomie collective. — bold, large */
.hero-line--1 {
  font-weight: 700;
  font-size: clamp(1.45rem, 3.8vw, 2.5rem);
  color: hsl(var(--color-text) / 0.95);
  letter-spacing: -0.02em;
}

/* l2: à l'échelle des bassins de vie — light, same size, softer */
.hero-line--2 {
  font-weight: 300;
  font-size: clamp(1.3rem, 3.2vw, 2.1rem);
  color: hsl(var(--color-text) / 0.55);
  letter-spacing: -0.01em;
}

/* l3: Pousser les curseurs — accent color, medium */
.hero-line--3 {
  font-weight: 600;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  color: hsl(var(--color-accent));
  margin-top: 0.5em;
  letter-spacing: 0.02em;
}

/* l4: Autonomie numérique, économique, citoyenne. — small-caps feel */
.hero-line--4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.9rem, 2vw, 1.15rem);
  color: hsl(var(--color-text) / 0.65);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.15em;
}

/* l5: — s'en donner les moyens — — italic, same tone as l4 */
.hero-line--5 {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.95rem, 2.2vw, 1.2rem);
  color: hsl(var(--color-text) / 0.65);
  margin-top: 0.3em;
}

/* ── Discrete aside block ── */

.hero-aside {
  width: 100%;
  max-width: 36em;
}

.hero-aside-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 auto;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: hsl(var(--color-text) / 0.35);
  border: 1px solid hsl(var(--color-text) / 0.08);
  cursor: pointer;
  transition: all 0.2s;
  list-style: none;
}

.hero-aside-toggle::-webkit-details-marker {
  display: none;
}

.hero-aside-toggle::before {
  content: '▸';
  font-size: 0.65em;
  transition: transform 0.2s;
}

.hero-aside[open] .hero-aside-toggle::before {
  transform: rotate(90deg);
}

.hero-aside-toggle:hover {
  color: hsl(var(--color-text) / 0.55);
  border-color: hsl(var(--color-text) / 0.15);
}

.hero-aside-body {
  margin-top: 1.25rem;
  animation: aside-reveal 0.3s ease;
}

@keyframes aside-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Citations ── */

.hero-citations {
  margin: 0 0 1.25rem;
  padding: 0.6rem 0 0.6rem 1rem;
  border-left: 2px solid hsl(var(--color-accent) / 0.3);
  text-align: left;
}

.hero-cite {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.55;
  color: hsl(var(--color-text) / 0.45);
  margin: 0;
}

.hero-cite + .hero-cite {
  margin-top: 0.25rem;
}

/* ── Approach + Axes ── */

.hero-approach {
  text-align: center;
}

.hero-audience {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid hsl(var(--color-text) / 0.07);
}

.hero-approach-text {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: hsl(var(--color-text) / 0.35);
  margin: 0 0 0.6rem;
}

.hero-axes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
}

.hero-axis {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  justify-content: center;
}

.hero-axis dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: hsl(var(--color-primary));
}

.hero-axis dt::after {
  content: ' →';
  color: hsl(var(--color-text) / 0.2);
  font-weight: 400;
}

.hero-axis dd {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: hsl(var(--color-text) / 0.5);
  margin: 0;
}
</style>
