{{- /* pros-cons-table.html — reads .Params.pros and .Params.cons (arrays of
       strings) from the page front matter and renders a two-column comparison. */ -}}
{{- $pros := .Params.pros -}}
{{- $cons := .Params.cons -}}
{{- if or $pros $cons -}}
<div class="grid gap-4 sm:grid-cols-2">
  <div class="card border-emerald-200 bg-emerald-50">
    <h3 class="flex items-center gap-2 text-lg font-bold text-emerald-800">
      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
      Pros
    </h3>
    <ul class="mt-3 space-y-2 text-sm text-emerald-900">
      {{- range $pros }}<li class="flex gap-2"><span aria-hidden="true" class="text-emerald-500">&#10003;</span><span>{{ . }}</span></li>{{ end -}}
    </ul>
  </div>
  <div class="card border-rose-200 bg-rose-50">
    <h3 class="flex items-center gap-2 text-lg font-bold text-rose-800">
      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
      Cons
    </h3>
    <ul class="mt-3 space-y-2 text-sm text-rose-900">
      {{- range $cons }}<li class="flex gap-2"><span aria-hidden="true" class="text-rose-500">&#10007;</span><span>{{ . }}</span></li>{{ end -}}
    </ul>
  </div>
</div>
{{- end -}}