{% for block in content.sections %}

    {% if block.type == 'hero' %}
        <section class="relative min-h-64 flex items-center justify-center overflow-hidden bg-neutral text-white"
            {% 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"></div>
            <div class="relative z-10 text-center px-6 py-16 max-w-3xl mx-auto">
                <h2 class="font-title text-4xl md:text-5xl font-bold mb-4">{{ block.title }}</h2>
                {% if block.subtitle is defined and block.subtitle %}
                    <p class="text-lg md:text-xl mb-8 opacity-90">{{ block.subtitle }}</p>
                {% endif %}
                {% if block.cta_label is defined and block.cta_label and block.cta_url is defined and block.cta_url %}
                    <a href="{{ block.cta_url }}" class="btn-cta">{{ block.cta_label }}</a>
                {% endif %}
            </div>
        </section>

    {% elseif block.type == 'text_image' %}
        <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="block-text-image {{ block.alignment is defined and block.alignment[0] == 'right' ? 'block-text-image--right' }}">
                {% if block.image is defined and block.image %}
                    <div class="block-text-image__image">
                        <img src="{{ block.image.url }}"
                             alt="{{ block.image.title ?? '' }}"
                             class="w-full object-cover">
                    </div>
                {% endif %}
                <div class="prose max-w-none flex-1 text-neutral-content leading-relaxed">
                    {{ block.text|raw }}
                </div>
            </div>
        </section>

    {% elseif block.type == 'cta' %}
        <section class="py-12 text-center">
            <a href="{{ block.url }}" class="btn-cta">{{ block.label }}</a>
        </section>

    {% elseif block.type == 'text' %}
        <section class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
            <div class="prose max-w-none text-neutral-content leading-relaxed">
                {{ block.text|raw }}
            </div>
        </section>

    {% endif %}

{% endfor %}