{% 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 %}
                                    <div class="carousel-slides" id="carousel-{{ block.id }}">
                                        {% for article in articles %}
                                            {% set img = (article.image is defined and article.image|length) ? article.image.one() : null %}
                                            <div class="carousel-slide{{ loop.first ? ' active' : '' }}">
                                                {% if img %}
                                                    <div class="expertise-card-bg" style="background:url('{{ img.url|e('html_attr') }}') center/cover;"></div>
                                                {% else %}
                                                    <div class="expertise-card-bg" style="background:#1a1a1a;"></div>
                                                {% endif %}
                                                <div class="expertise-card-overlay"></div>
                                                <div class="expertise-card-content">
                                                    <p style="font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:#D4763B;margin-bottom:.4rem;">{{ '%02d'|format(loop.index) }}</p>
                                                    <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 %}{{ article.pageSubheading|striptags|split(' ')|slice(0, 16)|join(' ') }}{% endif %}</p>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                    {% if articles|length > 1 %}
                                        <button class="carousel-arrow carousel-arrow-prev" data-prev aria-label="Previous slide">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"></polyline></svg>
                                        </button>
                                        <button class="carousel-arrow carousel-arrow-next" data-next aria-label="Next slide">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"></polyline></svg>
                                        </button>
                                        <div class="carousel-dots" id="dots-{{ block.id }}">
                                            {% for article in articles %}
                                                <button class="carousel-dot{{ loop.first ? ' active' : '' }}" data-slide="{{ loop.index0 }}" aria-label="Slide {{ loop.index }}"></button>
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                {% 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 : carousel 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>

                {% set articles = craft.entries()
                    .section('expertise')
                    .orderBy('postDate desc')
                    .limit(3)
                    .all() %}
                {% if articles|length %}
                    <div class="expertise-card" style="position:relative;height:24rem;overflow:hidden;border-radius:.5rem;">
                        <div class="carousel-slides" id="carousel-fallback">
                            {% for article in articles %}
                                {% set img = (article.image is defined and article.image|length) ? article.image.one() : null %}
                                <div class="carousel-slide{{ loop.first ? ' active' : '' }}">
                                    {% if img %}
                                        <div class="expertise-card-bg" style="background:url('{{ img.url|e('html_attr') }}') center/cover;"></div>
                                    {% else %}
                                        <div class="expertise-card-bg" style="background:#1a1a1a;"></div>
                                    {% endif %}
                                    <div class="expertise-card-overlay"></div>
                                    <div class="expertise-card-content">
                                        <p style="font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:#D4763B;margin-bottom:.4rem;">{{ '%02d'|format(loop.index) }}</p>
                                        <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 %}{{ article.pageSubheading|striptags|split(' ')|slice(0, 16)|join(' ') }}{% endif %}</p>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        {% if articles|length > 1 %}
                            <button class="carousel-arrow carousel-arrow-prev" data-prev aria-label="Previous slide">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"></polyline></svg>
                            </button>
                            <button class="carousel-arrow carousel-arrow-next" data-next aria-label="Next slide">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"></polyline></svg>
                            </button>
                            <div class="carousel-dots" id="dots-fallback">
                                {% for article in articles %}
                                    <button class="carousel-dot{{ loop.first ? ' active' : '' }}" data-slide="{{ loop.index0 }}" aria-label="Slide {{ loop.index }}"></button>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        {% endif %}
    </div>
</section>

<style>
/* 12-column grid system (replaces missing Tailwind grid utilities) */
.homepage-grid-section .grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}
.my-8{margin-top:2rem;margin-bottom:2rem}
.gap-4{gap:1rem}
.mb-4{margin-bottom:1rem}
@media(min-width:768px){
  .homepage-grid-section .grid{grid-template-columns:repeat(12,1fr)}
  .md\:col-span-1{grid-column:span 1/span 1}
  .md\:col-span-2{grid-column:span 2/span 2}
  .md\:col-span-3{grid-column:span 3/span 3}
  .md\:col-span-4{grid-column:span 4/span 4}
  .md\:col-span-5{grid-column:span 5/span 5}
  .md\:col-span-6{grid-column:span 6/span 6}
  .md\:col-span-7{grid-column:span 7/span 7}
  .md\:col-span-8{grid-column:span 8/span 8}
  .md\:col-span-9{grid-column:span 9/span 9}
  .md\:col-span-10{grid-column:span 10/span 10}
  .md\:col-span-11{grid-column:span 11/span 11}
  .md\:col-span-12{grid-column:span 12/span 12}
  .md\:mb-0{margin-bottom:0}
}

.carousel-slides{position:relative;width:100%;height:100%;overflow:hidden}
.carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;z-index:1}
.carousel-slide.active{opacity:1;z-index:2}
.carousel-dots{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem;z-index:10}
.carousel-dot{width:8px;height:8px;border-radius:50%;border:1px solid rgba(243,237,227,.6);background:transparent;cursor:pointer;padding:0;transition:all .3s ease}
.carousel-dot.active{background:rgba(243,237,227,.9);border-color:rgba(243,237,227,.9)}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:36px;height:36px;border-radius:50%;border:1px solid rgba(243,237,227,.4);background:rgba(0,0,0,.4);color:rgba(243,237,227,.8);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all .3s ease;backdrop-filter:blur(4px)}
.carousel-arrow:hover{background:rgba(0,0,0,.7);border-color:rgba(243,237,227,.8)}
.carousel-arrow-prev{left:.75rem}
.carousel-arrow-next{right:.75rem}
</style>

<script>
document.addEventListener('DOMContentLoaded',function(){
document.querySelectorAll('.carousel-slides').forEach(function(slides){
var card=slides.closest('.expertise-card');if(!card)return;
var slideEls=slides.querySelectorAll('.carousel-slide');
var dots=card.querySelector('.carousel-dots');if(!dots)return;
var dotBtns=dots.querySelectorAll('.carousel-dot');if(slideEls.length<2)return;
var cur=0,interval;
function goTo(n){
if(n===cur)return;
slideEls[cur].classList.remove('active');
if(dotBtns[cur])dotBtns[cur].classList.remove('active');
cur=n;
slideEls[cur].classList.add('active');
if(dotBtns[cur])dotBtns[cur].classList.add('active');
}
function startAuto(){clearInterval(interval);interval=setInterval(function(){goTo((cur+1)%slideEls.length)},5000)}
 dotBtns.forEach(function(btn){btn.addEventListener('click',function(){goTo(parseInt(this.getAttribute('data-slide')));startAuto()})});
 var prevBtn=card.querySelector('[data-prev]'),nextBtn=card.querySelector('[data-next]');
 if(prevBtn)prevBtn.addEventListener('click',function(){goTo((cur-1+slideEls.length)%slideEls.length);startAuto()});
 if(nextBtn)nextBtn.addEventListener('click',function(){goTo((cur+1)%slideEls.length);startAuto()});
 card.addEventListener('mouseenter',function(){clearInterval(interval)});
 card.addEventListener('mouseleave',startAuto);
 startAuto()})});
</script>
{% endblock %}