{% extends "_layouts/default" %}

{#
  Configuration Craft conseillee cote admin:
  - champ Matrix/Neo "homepageBlocks" sur l'entree homepage
  - chaque bloc peut etre deplace par drag and drop dans Craft
  - champs par bloc:
    - blockWidth: small | medium | large
    - blockHeight: short | tall

  Les classes Tailwind restent ici pour eviter de laisser l'admin saisir du CSS.
  Si Tailwind purge les classes dynamiques, safelister:
  md:col-span-2 md:col-span-4 md:col-span-6 md:row-span-1 md:row-span-2
 #}
{% set hpBlockWidthClasses = {
  small: 'md:col-span-2',
  medium: 'md:col-span-4',
  large: 'md:col-span-6'
} %}

{% set hpBlockHeightClasses = {
  short: 'md:row-span-1',
  tall: 'md:row-span-2'
} %}

{% set configuredHomepageBlocks = entry is defined and entry.homepageBlocks is defined
  ? entry.homepageBlocks.all()
  : [] %}

{% set homepageBlocks = configuredHomepageBlocks|length ? configuredHomepageBlocks : [
  {
    type: 'journalPromo',
    blockWidth: 'medium',
    blockHeight: 'short'
  },
  {
    type: 'signatureProject',
    blockWidth: 'medium',
    blockHeight: 'tall'
  },
  {
    type: 'expertiseTeaser',
    blockWidth: 'large',
    blockHeight: 'tall'
  }
] %}

{% block content %}
 <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>

    <!-- Scroll indicator -->
    <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>

  <!-- ═══════════════════════════════ ADMIN LAYOUT BLOCKS ═══════════════════════════════ -->
  <section class="expertise">
    <div class="mx-auto max-w-[1200px]">
      <div class="grid grid-cols-1 gap-4 md:grid-cols-6 md:auto-rows-[20rem] lg:auto-rows-[22rem]">
        {% for block in homepageBlocks %}
          {% set blockHandle = block.type.handle ?? block.type ?? block.blockHandle ?? '' %}
          {% set widthKey = block.blockWidth.value ?? block.blockWidth ?? 'medium' %}
          {% set heightKey = block.blockHeight.value ?? block.blockHeight ?? 'short' %}
          {% set widthClass = hpBlockWidthClasses[widthKey]|default(hpBlockWidthClasses.medium) %}
          {% set heightClass = hpBlockHeightClasses[heightKey]|default(hpBlockHeightClasses.short) %}
          {% set blockClass = [
            'w-full',
            'overflow-hidden',
            'md:min-h-0',
            widthClass,
            heightClass
          ]|join(' ') %}

          {% if blockHandle == 'journalPromo' %}
            <div class="{{ blockClass }} 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>

          {% elseif blockHandle == 'signatureProject' %}
            <div class="{{ blockClass }} split-right">
              <p class="split-right-label">Signature Project</p>
              <div class="project-card flex h-full w-full flex-col justify-between gap-4">
                <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="h-full min-h-24 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>

          {% elseif blockHandle == 'expertiseTeaser' %}
            <div class="{{ blockClass }} flex flex-col">
              <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="grid min-h-0 flex-1 grid-cols-1 gap-4 md:grid-cols-3">
                {% set articles = craft.entries()
                  .section('expertise')
                  .orderBy('postDate desc')
                  .limit(3)
                  .all() %}

                {% for article in articles %}
                  {% set image = article.image.one() ?? null %}
                  <article class="expertise-card min-h-[14rem]">
                    {% if image %}
                      {% do image.setTransform({ height: 600 }) %}
                      <div class="expertise-card-bg" style="background:url('{{ image.url }}') center/contain no-repeat;"></div>
                    {% endif %}
                    <div class="expertise-card-overlay"></div>
                    <div class="expertise-card-content">
                      <h4>
                        <a href="{{ article.url }}" class="transition-colors hover:text-indigo-600">
                          {{ article.title }}
                        </a>
                      </h4>
                      {% if article.pageSubheading %}
                        {% set nombreDeMots = article.pageSubheading|split(' ')|length %}
                        <p>
                          {{ article.pageSubheading|striptags|split(' ')|slice(0, 16)|join(' ') }}{% if nombreDeMots > 16 %}...{% endif %}
                        </p>
                      {% endif %}
                    </div>
                  </article>
                {% endfor %}
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>
  </section>
{% endblock %}