{% extends "_layouts/default" %}

{% 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>

  <!-- ═══════════════════════════════ SPLIT SECTION ═══════════════════════════════ -->
  <section class="split">

    <!-- Left: Journal Promo -->
    <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>

    <!-- Right: Signature Project + Chairman -->
    <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>

  <!-- ═══════════════════════════════ EXPERTISE ═══════════════════════════════ -->
  <section class="expertise">
    <div style="max-width:1200px;margin:0 auto;">
      <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-darkstyle="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">
        {# <!-- Card 1 -->
        <div class="expertise-card">
          <div class="expertise-card-bg" style="background:url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=800&q=80') center/cover;"></div>
          <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;">01</p>
            <h4>Editorial Perspective</h4>
            <p>Decoding ultra-prime market dynamics</p>
          </div>
        </div>

        <!-- Card 2 -->
        <div class="expertise-card">
          <div class="expertise-card-bg" style="background:url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=800&q=80') center/cover;"></div>
          <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;">02</p>
            <h4>Bespoke Development</h4>
            <p>From concept to completion</p>
          </div>
        </div>

        <!-- Card 3 -->
        <div class="expertise-card">
          <div class="expertise-card-bg" style="background:url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=800&q=80') center/cover;"></div>
          <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;">03</p>
            <h4>Trophy Asset Curation</h4>
            <p>Cultivating unrivalled value</p>
          </div>
        </div> #}
      
        {# boucle pour ajouter les articles de la section expertise #}
        {% 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 %}
                    {% set image = article.image.one() %}
                    {% if image %}
                    {% do image.setTransform({ height: 600 }) %}
                    style="background:url('{{image.url}}')
                    {% endif %}
                    {% endif %}
                center/contain no-repeat;"></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 %}
                          {% set nombreDeMots = article.pageSubheading|split(' ')|length %}
                          {{ article.pageSubheading |striptags|split(' ')|slice(0, 16)|join(' ') }}
                          {% if nombreDeMots > 16 %}
                                ...
                          {% endif %}
                        {% endif %}
                </p>
                <p>
                        {# % set content = article.pageContent ?? article.body ?? article.richText ?? "" %}
                        {{ article.pageContent|striptags|split(' ')|slice(0, 6)|join(' ') }}... #}
                </p>
            </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </section>
{% endblock %}