{{ 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-10" style="background-image:radial-gradient(circle at 1px 1px,white 1px,transparent 0);background-size:34px 34px"></div>
  <div class="relative mx-auto max-w-6xl">
    <span class="inline-flex items-center gap-2 rounded-full border border-green-700 bg-green-900 px-4 py-1.5 text-xs font-bold uppercase tracking-widest text-green-400 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 max-w-3xl gap-4 sm:grid-cols-3">
      {{ range $p.hero.metrics }}
        <div class="rounded-xl border border-green-900 bg-green-900/55 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>

<!-- PRINCIPLES -->
<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.principles.title }}</h2>
    <p class="mt-4 max-w-3xl text-slate-600">{{ $p.principles.intro }}</p>

    <div class="mt-10 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
      {{ range $p.principles.items }}
        <article 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>
        </article>
      {{ end }}
    </div>
  </div>
</section>

<!-- BODIES -->
<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.bodies.title }}</h2>
    <p class="mt-4 max-w-3xl text-slate-600">{{ $p.bodies.intro }}</p>

    <div class="mt-10 grid gap-6 md:grid-cols-3">
      {{ range $p.bodies.items }}
        <article class="rounded-2xl border border-slate-200 bg-white p-7 shadow-sm">
          <div class="flex items-center gap-3">
            <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>
            <h3 class="text-xl font-black text-slate-900">{{ .title }}</h3>
          </div>
          <p class="mt-4 text-slate-600">{{ .text }}</p>
          <ul class="mt-5 space-y-2 text-sm text-slate-600">
            {{ range .missions }}
              <li class="flex items-start gap-2">
                <span class="mt-1 inline-flex h-1.5 w-1.5 rounded-full bg-green-600"></span>
                <span>{{ . }}</span>
              </li>
            {{ end }}
          </ul>
        </article>
      {{ end }}
    </div>
  </div>
</section>

<!-- DECISION LOOP -->
<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.decisions.title }}</h2>
    <p class="mt-4 max-w-3xl text-slate-600">{{ $p.decisions.intro }}</p>

    <div class="mt-10 space-y-4">
      {{ range $index, $item := $p.decisions.steps }}
        <div class="rounded-2xl border border-slate-200 bg-slate-50 p-6">
          <div class="flex items-start gap-4">
            <span class="inline-flex h-9 min-w-9 items-center justify-center rounded-full bg-green-900 px-3 text-sm font-black text-green-300">{{ add $index 1 }}</span>
            <div>
              <h3 class="text-lg font-black text-slate-900">{{ .title }}</h3>
              <p class="mt-2 text-slate-600">{{ .text }}</p>
            </div>
          </div>
        </div>
      {{ end }}
    </div>
  </div>
</section>

<!-- TRANSPARENCY -->
<section class="bg-green-950 px-6 py-20 lg:px-8">
  <div class="mx-auto max-w-6xl">
    <h2 class="text-3xl md:text-4xl font-black text-white">{{ $p.transparency.title }}</h2>
    <p class="mt-4 max-w-3xl text-green-200">{{ $p.transparency.intro }}</p>

    <div class="mt-10 grid gap-5 md:grid-cols-2">
      {{ range $p.transparency.items }}
        <div class="rounded-2xl border border-green-900 bg-green-900/45 p-6">
          <h3 class="text-lg font-black text-white">{{ .title }}</h3>
          <p class="mt-2 text-green-200">{{ .text }}</p>
        </div>
      {{ end }}
    </div>
  </div>
</section>

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

{{ end }}