{{ define "main" }}

  {{ $manifestoPath := cond (eq .Site.Language.Lang "fr") "manifeste" "manifesto" }}
  {{ $projectsPath := cond (eq .Site.Language.Lang "fr") "projets" "projects" }}
  {{ $joinPath := cond (eq .Site.Language.Lang "fr") "devenir-membre" "become-member" }}

  <!-- ─── HERO ───────────────────────────────────── -->
  <section class="px-6 py-28 lg:px-8 lg:py-36 bg-green-950">
    <div class="mx-auto max-w-4xl">
      <p class="text-sm font-semibold uppercase tracking-widest text-green-400 mb-6">{{ .Params.hero.kicker }}</p>
      <h1 class="text-5xl md:text-6xl lg:text-7xl font-black leading-tight text-white mb-8">
        {{ .Params.hero.titleLine1 }}<br>{{ .Params.hero.titleLine2 }}<br><span class="text-green-400">{{ .Params.hero.titleLine3 }}</span>
      </h1>
      <p class="text-xl text-green-200 max-w-xl mb-10 leading-relaxed">
        {{ partial "brand-highlight.html" .Params.hero.subtitle }}
      </p>
      <div class="flex flex-wrap gap-4">
        <a href="{{ $manifestoPath | relLangURL }}" class="inline-flex items-center gap-2 rounded-lg bg-green-500 px-7 py-3.5 text-sm font-bold text-white hover:bg-green-400 transition">
          {{ .Params.hero.ctaManifesto }}
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
        <a href="{{ $projectsPath | relLangURL }}" class="inline-flex items-center gap-2 rounded-lg border-2 border-green-700 px-7 py-3.5 text-sm font-bold text-green-200 hover:border-green-500 hover:text-white transition">
          {{ .Params.hero.ctaProjects }}
        </a>
      </div>
    </div>
  </section>

  <!-- ─── DIVIDER ───────────────────────────────── -->
  <div class="border-t border-slate-100"></div>

  <!-- ─── STATS ─────────────────────────────────── -->
  <section class="px-6 py-16 lg:px-8 bg-slate-100">
    <div class="mx-auto max-w-5xl">
      <h2 class="text-3xl lg:text-4xl font-black text-slate-900 mb-3 text-center">{{ .Params.whyJoin.title }}</h2>
      <p class="text-center text-slate-600 mb-12 max-w-2xl mx-auto">{{ partial "brand-highlight.html" .Params.whyJoin.intro }}</p>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        {{ range .Params.whyJoin.cards }}
        <div class="rounded-xl border border-slate-100 bg-white p-8 shadow-md hover:shadow-lg transition">
          <div class="text-5xl mb-4">{{ .icon }}</div>
          <h3 class="text-xl font-bold text-slate-900 mb-2">{{ .title }}</h3>
          <p class="text-slate-600">{{ partial "brand-highlight.html" .text }}</p>
        </div>
        {{ end }}
      </div>
    </div>
  </section>

  <!-- ─── DIVIDER ───────────────────────────────── -->
  <div class="border-t border-slate-100"></div>

  <!-- ─── PILIERS ───────────────────────────────── -->
  <section class="px-6 py-24 lg:px-8 bg-white">
    <div class="mx-auto max-w-5xl">
      <h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-12 text-center">{{ .Params.pillars.title }}</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        {{ range $index, $item := .Params.pillars.items }}
        {{ $bgColorClass := cond (eq $index 0) "bg-green-50" (cond (eq $index 1) "bg-green-100" "bg-green-200") }}
        {{ $borderColorClass := cond (eq $index 0) "border-green-600" (cond (eq $index 1) "border-green-700" "border-green-800") }}
        {{ $textColorClass := cond (eq $index 0) "text-green-600" (cond (eq $index 1) "text-green-700" "text-green-800") }}
        <div class="rounded-lg p-8 {{ $bgColorClass }} border-l-4 {{ $borderColorClass }} shadow-sm hover:shadow-md transition">
          <div class="text-4xl font-black {{ $textColorClass }} mb-4">{{ add $index 1 }}</div>
          <h3 class="text-xl font-bold text-slate-900 mb-3">{{ $item.title }}</h3>
          <p class="text-slate-600 leading-relaxed">{{ $item.text }}</p>
        </div>
        {{ end }}
      </div>
    </div>
  </section>

  <!-- ─── PROJETS ───────────────────────────────── -->
  <section id="projects" class="px-6 py-24 lg:px-8 bg-green-900">
    <div class="mx-auto max-w-6xl">
      <h2 class="text-3xl md:text-4xl font-black text-white mb-4 text-center">{{ .Params.projects.title }}</h2>
      <p class="text-green-100 mb-14 max-w-3xl mx-auto text-center">{{ partial "brand-highlight.html" .Params.projects.intro }}</p>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        {{ range .Params.projects.items }}
        {{ $statusColor := cond (eq .status "Production") "bg-green-200 text-green-900" (cond (eq .status "Incubation") "bg-amber-200 text-amber-900" "bg-slate-200 text-slate-800") }}
        <div class="rounded-2xl border border-green-700 bg-green-800 p-8 min-h-[320px] flex flex-col justify-between shadow-md hover:shadow-lg hover:bg-green-700 transition">
          <div>
            <span class="inline-flex rounded-full {{ $statusColor }} px-3 py-1 text-xs font-black uppercase tracking-wide mb-5">{{ .status }}</span>
            <h3 class="text-2xl font-black text-white mb-4">{{ .name }}</h3>
            <p class="text-green-100 leading-relaxed">{{ partial "brand-highlight.html" .text }}</p>
          </div>
          <a href="#" class="mt-8 inline-flex items-center justify-center rounded-lg bg-white px-5 py-3 text-sm font-black text-green-900 hover:bg-green-100 transition">
            {{ .cta }} →
          </a>
        </div>
        {{ end }}
      </div>
    </div>
  </section>

  <!-- ─── MEMBRES ───────────────────────────────── -->
  <section id="membres" class="px-6 py-24 lg:px-8 bg-slate-50">
    <div class="mx-auto max-w-4xl">
      <h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-4">{{ .Params.members.title }}</h2>
      <p class="text-slate-600 mb-14 max-w-xl">{{ partial "brand-highlight.html" .Params.members.subtitle }}</p>

      <div class="grid md:grid-cols-2 gap-8">
        {{ range .Params.members.categories }}
        <div class="rounded-xl bg-white border border-slate-200 p-8 shadow-sm hover:shadow-md transition">
          <p class="text-xs font-bold uppercase tracking-widest text-green-700 mb-3">{{ .label }}</p>
          <h3 class="text-2xl font-bold text-slate-900 mb-4">{{ .title }}</h3>
          <p class="text-slate-600 mb-6">{{ partial "brand-highlight.html" .text }}</p>
          <a href="{{ (or .link $joinPath) | relLangURL }}" class="inline-flex items-center gap-2 font-bold text-green-800 hover:text-green-900 transition">
            {{ .cta }}
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
          </a>
        </div>
        {{ end }}
      </div>
    </div>
  </section>

{{ end }}