{{ define "main" }}

{{ $p := .Params }}

<!-- HERO -->
<section class="relative overflow-hidden bg-green-950 px-6 py-28 lg:px-8">
  <div class="absolute inset-0 opacity-20" style="background:radial-gradient(circle at 20% 20%,#166534 0%,transparent 40%),radial-gradient(circle at 80% 0%,#15803d 0%,transparent 35%)"></div>
  <div class="relative mx-auto max-w-6xl">
    <span class="inline-flex items-center gap-2 rounded-full border border-green-800 bg-green-900/40 px-4 py-1.5 text-xs font-bold uppercase tracking-widest text-green-300 mb-7">
      <span class="h-1.5 w-1.5 rounded-full bg-green-400"></span>
      TheAfriForge
    </span>
    <h1 class="max-w-4xl text-5xl md:text-7xl font-black leading-tight text-white">{{ .Title }}</h1>
    {{ with $p.description }}
      <p class="mt-6 max-w-3xl text-lg leading-relaxed text-green-200">{{ . }}</p>
    {{ end }}
    <div class="mt-10 grid gap-4 sm:grid-cols-3 max-w-3xl">
      {{ range $p.hero.metrics }}
        <div class="rounded-xl border border-green-900 bg-green-900/60 px-4 py-4">
          <p class="text-2xl font-black text-green-300">{{ .value }}</p>
          <p class="text-xs uppercase tracking-wider text-green-500">{{ .label }}</p>
        </div>
      {{ end }}
    </div>
  </div>
</section>

<!-- PROJECTS -->
<section class="bg-white px-6 py-20 lg:px-8">
  <div class="mx-auto max-w-6xl">
    <div class="mb-12 flex flex-wrap items-end justify-between gap-4">
      <div>
        <p class="text-xs font-bold uppercase tracking-[0.2em] text-green-700">{{ $p.portfolio.tag }}</p>
        <h2 class="mt-3 text-3xl md:text-4xl font-black text-slate-900">{{ $p.portfolio.title }}</h2>
      </div>
      <p class="max-w-2xl text-slate-600">{{ $p.portfolio.intro }}</p>
    </div>

    <div class="grid gap-6 md:grid-cols-3">
      {{ range $p.portfolio.items }}
        {{ $status := lower .status }}
        {{ $statusClass := "bg-slate-100 text-slate-700" }}
        {{ if eq $status "production" }}
          {{ $statusClass = "bg-green-100 text-green-800" }}
        {{ else if eq $status "incubation" }}
          {{ $statusClass = "bg-amber-100 text-amber-800" }}
        {{ else if eq $status "research" }}
          {{ $statusClass = "bg-sky-100 text-sky-800" }}
        {{ else if eq $status "recherche" }}
          {{ $statusClass = "bg-sky-100 text-sky-800" }}
        {{ end }}
        <article class="group rounded-2xl border border-slate-200 bg-slate-50 p-7 shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
          <div class="mb-5 flex items-center justify-between gap-3">
            <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold uppercase tracking-wide {{ $statusClass }}">{{ .status }}</span>
            <span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-slate-900 text-green-300">
              {{ partial "icon.html" .icon }}
            </span>
          </div>
          <h3 class="text-2xl font-black text-slate-900">{{ .name }}</h3>
          <p class="mt-4 text-slate-600 leading-relaxed">{{ .text }}</p>
          <p class="mt-5 text-sm text-slate-500"><span class="font-bold text-slate-700">{{ $p.portfolio.impactLabel }}:</span> {{ .impact }}</p>
          <p class="mt-2 text-sm text-slate-500"><span class="font-bold text-slate-700">{{ $p.portfolio.stackLabel }}:</span> {{ .stack }}</p>
          <a href="{{ .link }}" class="mt-7 inline-flex items-center gap-2 text-sm font-bold text-green-800 transition group-hover:text-green-600">
            {{ .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>
        </article>
      {{ end }}
    </div>
  </div>
</section>

<!-- ROADMAP -->
<section class="bg-slate-100 px-6 py-20 lg:px-8">
  <div class="mx-auto max-w-6xl">
    <h2 class="text-3xl md:text-4xl font-black text-slate-900">{{ $p.roadmap.title }}</h2>
    <p class="mt-4 max-w-3xl text-slate-600">{{ $p.roadmap.intro }}</p>

    <div class="mt-10 grid gap-5 md:grid-cols-3">
      {{ range $p.roadmap.items }}
        <div class="rounded-2xl border border-slate-200 bg-white p-6">
          <p class="text-xs font-black uppercase tracking-[0.2em] text-green-700">{{ .period }}</p>
          <h3 class="mt-3 text-xl font-black text-slate-900">{{ .title }}</h3>
          <p class="mt-3 text-slate-600">{{ .text }}</p>
        </div>
      {{ end }}
    </div>
  </div>
</section>

<!-- SELECTION CRITERIA -->
<section class="bg-white px-6 py-20 lg:px-8">
  <div class="mx-auto max-w-6xl">
    <h2 class="text-3xl md:text-4xl font-black text-slate-900">{{ $p.selection.title }}</h2>
    <p class="mt-4 max-w-3xl text-slate-600">{{ $p.selection.intro }}</p>

    <div class="mt-10 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
      {{ range $p.selection.items }}
        <div class="rounded-2xl border border-slate-200 bg-slate-50 p-6">
          <span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-green-900 text-green-300">
            {{ partial "icon.html" .icon }}
          </span>
          <h3 class="mt-4 text-lg font-black text-slate-900">{{ .title }}</h3>
          <p class="mt-2 text-sm leading-relaxed text-slate-600">{{ .text }}</p>
        </div>
      {{ end }}
    </div>
  </div>
</section>

<!-- CTA -->
<section class="bg-green-950 px-6 py-20 lg:px-8">
  <div class="mx-auto max-w-4xl text-center">
    <h2 class="text-4xl font-black text-white">{{ $p.call.title }}</h2>
    <p class="mt-5 text-lg leading-relaxed text-green-200">{{ $p.call.text }}</p>
    <a href="{{ $p.call.link | relLangURL }}" class="mt-10 inline-flex items-center justify-center rounded-xl bg-green-500 px-8 py-4 text-sm font-black uppercase tracking-wide text-white transition hover:bg-green-400">
      {{ $p.call.cta }}
    </a>
  </div>
</section>

{{ end }}