{% extends "_layouts/default" %}

{% block content %}
{# Récupérer la config des blocs depuis le plugin #}
{% set blocksConfig = craft.app.plugins.getPlugin('homepage-grid').homepageGridService.getBlockConfig() %}
{% set settings = craft.app.plugins.getPlugin('homepage-grid').getSettings() %}

{# Mapper les tailles de colonnes #}
{% set colSpanClasses = {
    1: 'md:col-span-1',
    2: 'md:col-span-2',
    3: 'md:col-span-3',
    4: 'md:col-span-4',
    5: 'md:col-span-5',
    6: 'md:col-span-6',
    7: 'md:col-span-7',
    8: 'md:col-span-8',
    9: 'md:col-span-9',
    10: 'md:col-span-10',
    11: 'md:col-span-11',
    12: 'md:col-span-12'
} %}

{% set colSizes = {
    1: colSpanClasses[settings.colSpan1] ?? 'md:col-span-2',
    2: colSpanClasses[settings.colSpan2] ?? 'md:col-span-4',
    3: colSpanClasses[settings.colSpan3] ?? 'md:col-span-6'
} %}

{% set heightStyles = {
    1: 'height:' ~ settings.heightSmall ~ 'rem;',
    3: 'height:' ~ settings.heightLarge ~ 'rem;'
} %}

<section class="hero">
    <div class="hero-content">
        <p class="hero-label fade-up delay-1">Rosengart</p>

        <h1 class="hero-heading fade-up delay-2">
            Ultra-prime real estate,<br>
            decoded, curated, and developed<br>
            with institutional rigor.
        </h1>

        <p class="hero-sub fade-up delay-3">Skyblade Signature creation by Rosengart</p>

        <div class="hero-ctas fade-up delay-4">
            <button class="btn-amber">Explore Projects</button>
            <a href="/journal" class="btn-ghost">Read the Journal</a>
            <button class="btn-ghost">
                Private Inquiry
                <span class="diamond" style="width:6px;height:6px;margin-left:.2rem;"></span>
            </button>
        </div>
    </div>

    <div style="position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);opacity:.35;display:flex;flex-direction:column;align-items:center;gap:.4rem;">
        <span style="font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;">Scroll</span>
        <div style="width:1px;height:32px;background:rgba(243,237,227,.5);animation:fadeUp 1.2s ease infinite alternate;"></div>
    </div>
</section>

<!-- ═══════════════════════════════ SPLIT SECTION ═══════════════════════════════ -->
<section class="split">
    <div class="split-left">
        <div class="section-rule"></div>
        <h2>A specialist perspective<br>on ultra-prime real estate.</h2>
        <p>Insights, strategy, architecture,<br>and market intelligence.</p>
        <a href="/journal" class="btn-dark" style="align-self:flex-start;">Discover the Journal</a>
    </div>

    <div class="split-right">
        <p class="split-right-label">Signature Project</p>
        <div class="project-card w-full space-y-2">
            <div class="project-card-content">
                <h3>Skyblade</h3>
                <p>A new language for ultra-prime residential architecture.</p>
            </div>
            <div class="aspect-w-16 aspect-h-9 w-full aspect-video">
                <iframe class="min-h-24 aspect-video w-full" src="https://www.youtube.com/embed/pgLNqc5hr8o?si=MoUQ8ajBRhK2ZSdM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <button class="btn-dark" style="align-self:flex-start;margin:0 auto">Discover the Project</button>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════ GRILLE DES BLOCS ═══════════════════════════════ -->
<section class="homepage-grid-section" style="max-width:1200px;margin:0 auto;">
    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 my-8">
        {% if blocksConfig is not empty %}
            {% for block in blocksConfig %}
                {% set rawBlockSize = block.size|default(2) %}
                {% set blockSize = rawBlockSize in [1, 2, 3] ? rawBlockSize : 2 %}
                {% set colClass = colSizes[blockSize] %}
                {% set heightStyle = heightStyles[blockSize] ?? '' %}

                <div class="{{ colClass }} mb-4 md:mb-0" style="{{ heightStyle }}">
                    {% if block.type == 'category' %}
                        {# Bloc section #}
                        {% set sectionId = block.sectionId %}
                        {% if sectionId %}
                            <div class="expertise-card h-full relative overflow-hidden rounded-lg" style="height: 100%;">
                                {% set articles = craft.entries().sectionId(sectionId).limit(block.articleLimit|default(3)).orderBy('postDate desc').all() %}

                                {% if articles|length %}
                                    {% set firstArticle = articles|first %}
                                    {% if firstArticle.image is defined and firstArticle.image|length %}
                                        {% set image = firstArticle.image.one() %}
                                        {% if image %}
                                            <div class="expertise-card-bg" style="background:url('{{ image.url|e('html_attr') }}'); background-size:cover; background-position:center;"></div>
                                        {% endif %}
                                    {% endif %}

                                    <div class="expertise-card-overlay"></div>
                                    <div class="expertise-card-content">
                                        <h4>
                                            <a href="{{ firstArticle.url }}" class="hover:text-indigo-600 transition-colors">
                                                {{ block.label ?? sectionId }}
                                            </a>
                                        </h4>
                                        <p>{{ block.label ?? sectionId }}</p>

                                        {% for article in articles %}
                                            <div class="mt-2 text-sm">
                                                <a href="{{ article.url }}" class="text-white hover:text-amber-300">
                                                    {{ article.title }}
                                                </a>
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}

                    {% elseif block.type == 'edito' %}
                        {# Bloc édito (texte simple) #}
                        <div class="p-6 bg-gray-50 border rounded-lg h-full flex items-center justify-center">
                            <div>
                                <h4 class="text-lg font-medium mb-2">{{ block.label ?? 'Édito' }}</h4>
                                <div class="text-sm text-gray-600">
                                    {{ block.content ?? '' }}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
        {% else %}
            {# Fallback : afficher la section expertise par défaut #}
            <div class="md:col-span-12">
                <div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:0.5rem;flex-wrap:wrap;gap:1rem;">
                    <h2 class="expertise-label" style="margin:0;">Expertise</h2>
                    <a href="/expertise/rosengart-expertise" class="btn-dark" style="font-size:.68rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:rgba(243,237,227,.45);text-decoration:none;border-bottom:1px solid rgba(243,237,227,.2);padding-bottom:2px;">View Expertise</a>
                </div>

                <div class="expertise-grid">
                    {% set articles = craft.entries()
                        .section('expertise')
                        .orderBy('postDate desc')
                        .limit(3)
                        .all() %}
                    {% for article in articles %}
                        <div class="expertise-card">
                            <div class="expertise-card-bg"
                                 {% if article.image is defined and article.image %}
                                     {% set image = article.image.one() %}
                                     {% if image %}
                                         {% do image.setTransform({ height: 600 }) %}
                                         style="background:url('{{ image.url|e('html_attr') }}') center/contain no-repeat;"
                                     {% endif %}
                                 {% endif %}>
                            </div>
                            <div class="expertise-card-overlay"></div>
                            <div class="expertise-card-content">
                                <h4>
                                    <a href="{{ article.url }}" class="hover:text-indigo-600 transition-colors">
                                        {{ article.title }}
                                    </a>
                                </h4>
                                <p>
                                    {% if article.pageSubheading is defined and article.pageSubheading %}
                                        {% set nombreDeMots = article.pageSubheading|split(' ')|length %}
                                        {{ article.pageSubheading|striptags|split(' ')|slice(0, 16)|join(' ') }}
                                        {% if nombreDeMots > 16 %}...{% endif %}
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>
</section>
{% endblock %}