{% extends "base.html" %}
{% block title %}Sponsors — {{ brand }}{% endblock %}
{% block content %}
<section class="max-w-7xl mx-auto px-6 py-16">
  <div class="flex items-end justify-between gap-6">
    <div>
      <h1 class="text-4xl font-bold">Sponsors</h1>
      <p class="mt-2 text-white/75">Support student-led tech for the Panhandle.</p>
    </div>
    <a href="{{ url_for('join') }}" class="hidden sm:inline-block px-4 py-2 rounded-xl border border-white/20 hover:border-white/40">Get in touch</a>
  </div>

  {% for tier, companies in tiers.items() %}
  <h2 class="mt-10 mb-4 text-2xl font-semibold">{{ tier }}</h2>
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
    {% for c in companies %}
    <a href="{{ c.url }}" class="aspect-[3/2] rounded-2xl border border-white/10 bg-white/5 grid place-items-center">
      <img src="{{ c.logo }}" alt="{{ c.name }}" class="max-h-10 opacity-80">
    </a>
    {% endfor %}
  </div>
  {% endfor %}
</section>
{% endblock %}