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


    {# ——— É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>

        <div class="mt-6 grid gap-4 sm:mt-8 lg:grid-cols-[1fr_1.2fr] lg:items-stretch lg:gap-6">
            {# Gauche : grand panneau lecteur, généré par podcast-player.js #}
            <div id="home-player-panel" class="h-[380px] sm:h-[440px] lg:h-[560px]"></div>

            {# Droite : playlist complète — rendu Twig pur, crawlable, bon pour le SEO #}
            <div id="home-playlist" class="card flex h-[420px] flex-col overflow-hidden !p-0 sm:h-[480px] lg:h-[560px]">
                <div class="flex items-center justify-between gap-3 border-b border-night-700/40 px-5 py-4">
                    <div class="flex items-center gap-3">
                        <span class="grid h-9 w-9 place-items-center rounded-full bg-gradient-to-br from-gold-600 to-gold-300 text-night-950">♪</span>
                        <p class="font-display text-lg font-semibold">Playlist</p>
                    </div>
                    <span class="chip">{{ all_podcasts|default(latest|default([]))|length }}</span>
                </div>

                <div class="border-b border-night-700/40 px-5 py-3">
                    <input type="search" class="field text-sm" placeholder="Rechercher…" aria-label="Rechercher dans la playlist"
                           data-playlist-search="home-playlist">
                </div>

                <div class="flex-1 divide-y divide-night-700/40 overflow-y-auto">
                    {% for podcast in all_podcasts|default(latest|default([])) %}
                        <div class="flex items-center gap-3 px-5 py-4 transition-colors"
                             data-row-id="{{ podcast.id }}" data-row-title="{{ podcast.title|e('html_attr') }}">
                            <button type="button" class="grid h-8 w-8 shrink-0 place-items-center rounded-full border border-gold-500/40 text-gold-300 transition hover:bg-gold-500/10"
                                    aria-label="Écouter {{ podcast.title }}"
                                    data-play data-id="{{ podcast.id }}" data-title="{{ podcast.title|e('html_attr') }}"
                                    data-url="{{ podcast.audioPath starts with '/' ? podcast.audioPath : '/' ~ podcast.audioPath }}"
                                    data-theme="{{ podcast.theme ? podcast.theme.name|e('html_attr') }}"
                                    data-duration="{{ podcast.durationSeconds }}" data-queue="home">▶</button>
                            <div class="min-w-0 flex-1">
                                <p class="truncate font-display text-[15px] font-semibold leading-snug">
                                    <a data-row-title href="{{ path('app_podcast_show', {slug: podcast.slug}) }}" class="transition-colors hover:text-gold-300">{{ podcast.title }}</a>
                                </p>
                                <p class="mt-0.5 text-xs text-sand-dim">{{ podcast.durationLabel }}{{ podcast.recordedYear ? ' · ' ~ podcast.recordedYear }}</p>
                            </div>
                            <button type="button" class="shrink-0 grid h-8 w-8 place-items-center rounded-full border border-night-700/50 text-base text-sand-dim transition-colors hover:border-gold-500/40 hover:text-gold-300"
                                    data-playlist-add="{{ podcast.id }}" aria-label="Ajouter {{ podcast.title }} à une playlist">＋</button>
                            <button type="button" class="shrink-0 px-1 text-lg text-sand-dim transition-colors hover:text-gold-300"
                                    data-favorite="{{ podcast.id }}" aria-label="Ajouter {{ podcast.title }} aux favoris">♡</button>
                        </div>
                    {% else %}
                        <p class="px-5 py-4 text-sand-dim">Aucune conférence pour l'instant — utilisez l'import admin pour en ajouter.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </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 %}

    {# ——— 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 border-none 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>

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