{% extends 'base.html.twig' %}

{% block body %}
    {# ——— Hero « Manuscrit & Sahel » ——— #}
    <section class="pattern-star relative overflow-hidden border-b border-night-700/40">
        <div class="mx-auto grid max-w-6xl items-center gap-8 px-4 py-10 md:grid-cols-[1.2fr_1fr] md:gap-10 md:py-24">
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.3em] text-gold-400">1922 — 1998 · Louga, Sénégal</p>
                <h1 class="mt-4 font-display text-3xl font-bold leading-tight sm:text-4xl md:text-6xl">
                    La voix d'un érudit,<br><span class="bg-gradient-to-r from-gold-300 to-gold-500 bg-clip-text text-transparent">préservée pour toujours.</span>
                </h1>
                <p class="mt-4 max-w-xl leading-relaxed text-sand sm:mt-5">
                    {{ total }} conférences de Serigne Sam Mbaye, islamologue et intellectuel sénégalais :
                    foi, histoire, éducation et spiritualité — en écoute libre.
                </p>
                <div class="mt-6 flex flex-wrap gap-4 sm:mt-8">
                    <a href="{{ path('app_podcasts') }}" class="btn-gold">▶ Commencer l'écoute</a>
                    <a href="{{ path('app_about') }}" class="btn-ghost">Découvrir sa vie</a>
                </div>
            </div>
            <div class="relative mx-auto hidden md:block">
                <div class="absolute -inset-6 rounded-full bg-gold-500/10 blur-3xl"></div>
                <div class="relative grid h-64 w-64 place-items-center rounded-full border-2 border-gold-600/40 bg-night-900 shadow-glow">
                    <span class="font-display text-7xl text-gold-300">﷽</span>
                </div>
            </div>
        </div>
    </section>

    {# ——— Biographie (extrait) ——— #}
    <section class="mx-auto max-w-6xl px-4 py-8 sm:py-14">
        <div class="grid gap-6 sm:grid-cols-[auto_1fr] sm:items-center sm:gap-8">
            <img
                src="{{ asset('images/img0.jpg') }}"
                alt="Portrait de Serigne Sam Mbaye"
                class="mx-auto h-40 w-40 rounded-2xl object-cover ring-1 ring-white/10 sm:mx-0 sm:h-48 sm:w-48"
                width="192"
                height="192"
                loading="lazy"
            >
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.3em] text-gold-400">Qui était Serigne Sam Mbaye ?</p>
                <p class="mt-3 leading-relaxed text-sand">
                    Érudit, pédagogue et conférencier, Serigne Sam Mbaye a consacré sa vie à faire dialoguer le savoir islamique et la culture moderne. Fils du grand soufi Mame Cheikh Mbaye, il a formé plusieurs générations d'auditeurs à travers des centaines de causeries données au Sénégal comme à l'étranger — un héritage oral que cette plateforme s'attache aujourd'hui à préserver.
                </p>
                <a href="{{ path('app_about') }}" class="nav-link mt-4 inline-block">Lire sa biographie complète →</a>
            </div>
        </div>
    </section>

    {# ——— Écouter maintenant : grand lecteur (gauche) + playlist (droite) — Twig + JS vanilla ——— #}
    <section class="mx-auto max-w-6xl px-4 py-8 sm:py-14">
        <div class="flex items-end justify-between">
            <h2 class="rule-gold font-display text-xl font-semibold sm:text-2xl">Écouter maintenant</h2>
            <a href="{{ path('app_podcasts') }}" class="nav-link text-sm sm:text-base">Toutes les conférences →</a>
        </div>

        {% include 'partials/listen_now.html.twig' with {
            podcasts: all_podcasts|default(latest|default([])),
            queue: 'home',
            list_title: 'Toutes les conférences'
        } only %}
    </section>

    {# ——— Thèmes ——— #}
    {% if themes|length %}
        <section class="mx-auto max-w-6xl px-4 py-4 sm:py-6">
            <h2 class="rule-gold font-display text-xl font-semibold sm:text-2xl">Explorer par thème</h2>
            <div class="mt-5 flex flex-wrap gap-2.5 sm:mt-8 sm:gap-3">
                {% for theme in themes %}
                    <a href="{{ path('app_theme_show', {slug: theme.slug}) }}"
                       class="card !rounded-full px-4 py-2 text-sm font-medium hover:text-gold-300 sm:px-6 sm:py-3">
                        {{ theme.name }} <span class="ml-1 text-sand-dim">{{ theme.podcasts|length }}</span>
                    </a>
                {% endfor %}
            </div>
        </section>
    {% endif %}

    {# ——— Les plus écoutées ——— #}
    {% if popular|length %}
        <section class="mx-auto max-w-6xl px-4 py-8 sm:py-14">
            <h2 class="rule-gold font-display text-xl font-semibold sm:text-2xl">Les plus écoutées</h2>
            <div class="mt-5 grid gap-4 sm:mt-8 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3">
                {% for podcast in popular %}
                    {% include 'partials/podcast_card.html.twig' with {podcast: podcast, queue: 'popular'} %}
                {% endfor %}
            </div>
        </section>
    {% endif %}
{% endblock %}

{% block structured_data %}
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "WebSite",
          "name": "Serigne Sam Mbaye — Conférences",
          "url": "{{ url('app_home') }}",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "{{ url('app_search') }}?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
    </script>
{% endblock %}