{% extends 'base.html' %}{% load static %}
{% block title %}Products & Creative Services{% endblock %}{% block breadcrumb %}Categories{% endblock %}
{% block content %}
<div class="page-head v20-catalogue-head"><div><div class="kicker">EXPLORE GENEZ</div><h2>Products & creative services</h2><p>Professional printing, photography, publishing, design and merchandise.</p></div></div>
<form class="search catalogue-search" method="get" action="{% url 'categories' %}" role="search"><span aria-hidden="true">⌕</span><label for="catalogue-search" class="sr-only">Search products and services</label><input id="catalogue-search" type="search" name="q" value="{{ search_query }}" placeholder="Search printing, business cards, banners, design..."><button class="btn small" type="submit">Search</button></form>
<div class="page-note"><a href="{% url 'audience_bundles' %}">Explore ready-made packages for businesses, schools, events and more →</a></div><div class="section-title v20-catalogue-heading"><h2>Shop by category</h2><span class="small muted">{{ categories|length }} categories</span></div>
<div class="category-rail"><a class="category-chip {% if not selected_category %}active{% endif %}" href="{% url 'categories' %}{% if search_query %}?q={{ search_query|urlencode }}{% endif %}">All services</a>{% for cat in categories %}<a class="category-chip {% if selected_category == cat.slug %}active{% endif %}" href="?category={{ cat.slug|urlencode }}{% if search_query %}&amp;q={{ search_query|urlencode }}{% endif %}">{{ cat.icon }} {{ cat.name }}</a>{% endfor %}</div>
<div class="section-title"><h2>{% if search_query %}Results for “{{ search_query }}”{% elif selected_category %}Selected category{% else %}All products & packages{% endif %}</h2><span class="small muted">{{ products|length }} result(s)</span></div>
<div class="product-list catalogue-products v20-catalogue-products">{% for product in products %}<article class="product-card"><a href="{{ product.get_absolute_url }}" class="prod-photo"><img src="{% if product.has_service_image %}{% url 'product_image' product.pk %}{% else %}{% static 'img/' %}{{ product.catalogue_image_key }}{% endif %}" alt="{{ product.name }}" loading="lazy" decoding="async"></a><div class="details"><span class="product-category">{{ product.category.name }}</span><h3>{{ product.name }}</h3><p class="small muted product-description">{{ product.description|truncatechars:90 }}</p><div class="price-label">Starting estimate</div><div class="price">₦{{ product.starting_unit_price|floatformat:2 }} <small>/ unit</small></div><a class="btn small block" href="{{ product.get_absolute_url }}" aria-label="Configure {{ product.name }}">Configure &amp; Order →</a></div></article>{% empty %}<div class="card card-pad"><h3>No matching products</h3><p class="muted">Try another search or browse all services.</p><a href="{% url 'categories' %}" class="btn small">View all products</a></div>{% endfor %}</div>
<div class="v20-catalogue-help"><span>Need a specific size, material, or custom production quote?</span><a href="{% url 'help' %}">Contact Genez support →</a></div>
<p class="page-note">Displayed catalogue prices are sample starting estimates until Genez staff confirms the live price list. Final price depends on product configuration and delivery.</p>
{% endblock %}