{# Reusable SaaS-style sponsored showcase (landing placement). Two-column promo
   card: copy on the left (badge, headline, description, CTA), floating product
   preview on the right. Self-contained styling in landing.css. Renders nothing
   without an ad. Pass: ad (title, description, image_path, icon, redirect_url,
   public_id). Swap those fields to reuse for any advertisement. #}
{% if ad %}
<section class="spon-hero" aria-label="Sponsored content">
  <div class="spon-hero-copy">
    <span class="spon-hero-badge">Sponsored</span>
    {# Accent the final word (typically the brand) in the primary blue. #}
    {% set _words = ad.title.split() %}
    <h2 class="spon-hero-title">
      {%- if _words|length > 1 -%}
        {{ _words[:-1]|join(' ') }} <span class="spon-hero-accent">{{ _words[-1] }}</span>
      {%- else -%}
        {{ ad.title }}
      {%- endif -%}
    </h2>
    {% if ad.description %}<p class="spon-hero-desc">{{ ad.description }}</p>{% endif %}
    {% if ad.redirect_url %}
      <a class="spon-hero-cta" href="{{ url_for('advertisements.click', public_id=ad.public_id) }}"
         target="_blank" rel="noopener sponsored">
        Learn More <i class="bi bi-arrow-right" aria-hidden="true"></i>
      </a>
    {% endif %}
  </div>
  <div class="spon-hero-media" aria-hidden="true">
    {% if ad.image_path %}
      <img class="spon-hero-img" src="{{ ad.image_path }}" alt="" loading="lazy" decoding="async">
    {% else %}
      <div class="spon-hero-img spon-hero-img--ph">
        <i class="bi {{ ad.icon or 'bi-easel2' }}"></i>
      </div>
    {% endif %}
  </div>
</section>
{% endif %}