{% extends 'base.html.twig' %}

{% block content %}
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10">

    <h1 class="font-title text-3xl text-neutral mb-8">{{ content.title }}</h1>

    {% for block in content.sections %}

        {% if block.type == 'text' %}
            <div class="prose max-w-none mb-8 leading-relaxed">
                {{ block.text|raw }}
            </div>

        {% elseif block.type == 'product_grid' %}
            <section class="mb-8">
                {% if block.title is not empty %}
                    <h2 class="font-title text-2xl text-neutral mb-5">{{ block.title }}</h2>
                {% endif %}
                {% if block.product_ids is not empty %}
                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                        {% for product in block.product_ids %}
                            {{ include('articles/_product_card.html.twig') }}
                        {% endfor %}
                    </div>
                {% endif %}
            </section>

        {% elseif block.type == 'hero' %}
            <section class="relative min-h-48 flex items-center justify-center overflow-hidden rounded-xl bg-neutral text-white mb-8"
                {% if block.image is defined and block.image %}
                    style="background-image: url('{{ block.image.url }}'); background-size: cover; background-position: center"
                {% endif %}>
                <div class="absolute inset-0 bg-black/40 rounded-xl"></div>
                <div class="relative z-10 text-center px-6 py-12 max-w-2xl mx-auto">
                    <h2 class="font-title text-3xl font-bold mb-3">{{ block.title }}</h2>
                    {% if block.subtitle is not empty %}
                        <p class="text-lg mb-6 opacity-90">{{ block.subtitle }}</p>
                    {% endif %}
                    {% if block.cta_label is not empty and block.cta_url is not empty %}
                        <a href="{{ block.cta_url }}" class="inline-block px-6 py-2 bg-white text-neutral font-semibold rounded-lg hover:bg-neutral-100">{{ block.cta_label }}</a>
                    {% endif %}
                </div>
            </section>

        {% elseif block.type == 'text_image' %}
            <section class="flex gap-8 mb-8 flex-col md:flex-row {% if block.alignment[0] is defined and block.alignment[0] == 'right' %}md:flex-row-reverse{% endif %}">
                <div class="prose max-w-none md:w-1/2 leading-relaxed">
                    {{ block.text|raw }}
                </div>
                {% if block.image is not empty %}
                    <div class="md:w-1/2">
                        <img src="{{ block.image.url }}" alt="{{ block.image.title ?? '' }}" class="rounded-lg w-full object-cover">
                    </div>
                {% endif %}
            </section>

        {% elseif block.type == 'cta' %}
            <section class="mb-8 text-center">
                <a href="{{ block.url }}" class="inline-block px-8 py-3 bg-primary text-white font-semibold rounded-lg hover:bg-primary/90">{{ block.label }}</a>
            </section>

        {% endif %}

    {% endfor %}

</div>
{% endblock %}