ambient/src/components/EventCard.astro

---
// src/components/EventCard.astro
const { frontmatter } = Astro.props;
const {
    title,
    date,
    location,
    target_date,
    participants,
    summary,
    status,
    circle,
    type,
    image,
} = frontmatter;

// Définition des couleurs par catégorie
const categoryColors = {
    Festival: "#f59e0b",
    IRL: "#a1be18",
    Amical: "#8b5cf6",
    SI_Arbitrage: "violet",
    SI_Applicatif: "#5ca6e8",
    SI_Logistique: "Gold",
    SI_Strategie: "Grey",
    default: "#ec4899",
};

const accentColor = categoryColors[type] || categoryColors["default"];

// --- LOGIQUE DE NOTIFICATION DE STATUT ---
const today = new Date();
const eventDate = new Date(date);

// Mise à zéro des heures pour comparer uniquement les jours
today.setHours(0, 0, 0, 0);
const compareDate = new Date(eventDate);
compareDate.setHours(0, 0, 0, 0);

const diffTime = compareDate - today;
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

let dynamicStatus = { label: status, color: "rgba(255,255,255,0.3)", icon: "" };

if (status === "Terminé") {
    dynamicStatus = { label: "Terminé", color: "#10b981" };
} else if (diffDays < 0) {
    dynamicStatus = { label: "En retard", color: "#ef4444" };
} else if (diffDays === 0) {
    dynamicStatus = { label: "Aujourd'hui", color: "#3b82f6" };
} else if (diffDays > 0 && diffDays <= 7) {
    dynamicStatus = { label: "Imminent", color: "#f59e0b" };
}
---

<article
    class={`event-card ${image ? "has-bg" : ""}`}
    style={`--accent-color: ${accentColor}; --bg-image: url('${image}'); --status-bg: ${dynamicStatus.color};`}
>
    <div class="card-inner">
        <header class="event-header">
            <span class="event-type">{type.toUpperCase()}</span>
            <span class="status-notification">
                {
                    dynamicStatus.icon && (
                        <span class="status-icon">{dynamicStatus.icon}</span>
                    )
                }
                {dynamicStatus.label}
            </span>
        </header>

        <div class="event-art">
            <div class="location-tag">{location}</div>
            <h2 class="event-title">{title}</h2>
        </div>

        <div class="event-info-line">
            Prévu le : <strong
                >{new Date(date).toLocaleDateString("fr-FR")}</strong
            >
        </div>

        <div class="event-body">
            <p class="summary">{summary}</p>

            <div class="participants-box">
                <span class="label">
                    {
                        type === "Festival"
                            ? "Artistes invités :"
                            : "Membres impliqués :"
                    }
                </span>
                <div class="tags">
                    {participants.map((p) => <span class="p-tag">{p}</span>)}
                </div>
            </div>
        </div>

        <footer class="event-footer">
            <div class="date-recorded">
                Projet détecté le : <strong>{target_date}</strong>
            </div>
            <div class="social-impact">{circle}</div>
        </footer>
    </div>
</article>

<style>
    .event-card {
        width: 320px;
        height: 480px;
        background-color: var(--accent-color);
        border-radius: 18px;
        padding: 12px;
        font-family: "Philosopher", serif;
        color: rgba(0, 0, 0, 0.7);
        transition: background 0.3s ease;
        position: relative;
        background-size: cover;
        background-position: center;
    }

    .event-card.has-bg {
        color: #fff;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
        background-image:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.1) 100%
            ),
            var(--bg-image) !important;
    }

    .card-inner {
        height: 100%;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        padding: 12px;
        background: linear-gradient(
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.1) 70%,
            rgba(0, 0, 0, 0.3) 100%
        );
    }

    .event-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.7rem;
        font-weight: bold;
        letter-spacing: 1px;
    }

    /* Style du nouveau badge de notification */
    .status-notification {
        background: var(--status-bg);
        color: white;
        padding: 2px 10px;
        border-radius: 5px;
        font-size: 0.6rem;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        text-shadow: none;
    }

    @keyframes blink {
        0%,
        100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }

    .event-art {
        flex: 1;
        border: 1px solid rgba(0, 0, 0, 0.1);
        margin: 10px 0;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 10px;
    }

    .event-card.has-bg .event-art {
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .event-title {
        font-size: 1.4rem;
        margin: 5px 0;
    }

    .location-tag {
        font-size: 0.7rem;
        opacity: 0.9;
    }

    .event-card.has-bg .location-tag {
        opacity: 1;
    }

    .event-info-line {
        font-size: 0.8rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    .event-card.has-bg .event-info-line {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .event-body {
        flex: 1.2;
        font-size: 0.85rem;
    }

    .event-type {
        text-transform: uppercase;
        background: rgba(255, 255, 255, 0.3);
        padding: 2px 8px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .event-card.has-bg .event-type {
        background: rgba(0, 0, 0, 0.4);
        text-shadow: none;
    }

    .summary {
        font-style: italic;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .participants-box .label {
        font-size: 0.65rem;
        text-transform: uppercase;
        display: block;
        margin-bottom: 5px;
    }

    .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .p-tag {
        background: rgba(255, 255, 255, 0.2);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.65rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .event-card.has-bg .p-tag {
        background: rgba(0, 0, 0, 0.4);
        text-shadow: none;
    }

    .event-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.7rem;
        padding-top: 10px;
    }

    .social-impact {
        background: #ffffff80;
        padding: 2px 8px;
        border-radius: 5px;
        font-weight: bold;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .event-card.has-bg .social-impact {
        background: rgba(0, 0, 0, 0.4);
        text-shadow: none;
    }
</style>