{{--
    Composant PropertyCard — porte fidele de maquettes/PropertyCard.dc.html.

    Reutilise sur la page Acheter (grille de resultats + biens similaires
    sur la page Bien), et sera reutilise sur l'Accueil dans un lot ulterieur.

    Prop :
    - bien (array) : structure d'un bien telle que renvoyee par
      CrmClientInterface::biens() / ::bien() (voir
      app/Services/Crm/fixtures/biens.php pour les champs disponibles).
      Champs utilises ici : id, localite, lot, prix, surface_habitable,
      chambres, terrain, photo_principale.

    Bouton favori : coeur togglable en JS vanilla (public/js/site.js),
    persistance dans localStorage (cle 'biome.favoris', tableau d'ids) —
    pas de compte utilisateur, comme dans la maquette (etat local au
    composant DCLogic, ici reporte sur localStorage cote client).
--}}
@props(['bien'])

@php
    // Titre "Localite - Lot N" compose cote reader (MiroirCrmClient) ; repli si absent
    // (fixtures / anciennes donnees).
    $titre = $bien['titre'] ?? ($bien['localite'].' - Lot '.$bien['lot']);
    $aPhoto = ! empty($bien['photo_principale']);
@endphp

<div
    class="biome-property-card"
    data-property-card
    data-bien-id="{{ $bien['id'] }}"
    style="position:relative;background:#fff;border:1px solid var(--couleur-bordure-carte);border-radius:var(--rayon-carte);overflow:hidden;box-shadow:var(--ombre-property-card);display:flex;flex-direction:column;transition:transform var(--transition-douce),box-shadow var(--transition-douce);"
>
    {{-- Lien "etale" : toute la carte est cliquable vers la fiche du bien. Les
         elements interactifs (favori, boutons) passent au-dessus via z-index.
         tabindex=-1 : pas un 2e arret clavier (le lien "Voir le bien" en fournit
         deja un). --}}
    <a href="{{ route('bien.show', ['id' => $bien['id']]) }}" class="biome-property-card__lien" aria-label="Voir {{ $titre }}" tabindex="-1" style="position:absolute;inset:0;z-index:1;"></a>
    <div style="position:relative;height:260px;">
        @if ($aPhoto)
            {{-- object-position vers le haut : la vignette reste en 'cover'
                 (remplit toute la carte, aucune bande), mais on ancre le
                 cadrage en haut pour ne plus couper les TOITS des maisons (le
                 rognage se fait davantage sur le bas / le terrain). Valeur
                 ajustable (0% = garde tout le haut, 50% = centre). --}}
            <img src="{{ asset($bien['photo_principale']) }}" alt="{{ $titre }}" loading="lazy" decoding="async" style="width:100%;height:260px;object-fit:cover;object-position:50% 20%;display:block;">
        @else
            <div style="width:100%;height:260px;display:flex;align-items:center;justify-content:center;background:#EEF2F7;color:#9AA6B6;font-size:13px;">{{ $titre }}</div>
        @endif
        <button
            type="button"
            data-bouton-favori
            title="Ajouter aux favoris"
            aria-label="Ajouter {{ $titre }} aux favoris"
            aria-pressed="false"
            style="position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border:none;border-radius:var(--rayon-cercle);background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--ombre-bouton-favori);transition:transform var(--transition-rapide);"
        >
            <svg data-icone-favori width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-texte-fonce)" stroke-width="1.9" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.5-7-9.5A3.8 3.8 0 0 1 12 7a3.8 3.8 0 0 1 7 3.5C19 15.5 12 20 12 20Z"/></svg>
        </button>
    </div>
    <div style="padding:18px 18px 20px;display:flex;flex-direction:column;flex:1;">
        <h3 style="font-family:var(--police-titres);font-size:var(--taille-h3-carte-sm);font-weight:600;color:var(--couleur-texte-titre-carte);margin:0 0 4px;">{{ $titre }}</h3>
        <div style="font-family:var(--police-titres);font-size:var(--taille-prix-carte);font-weight:700;color:var(--couleur-bleu-principal);margin-bottom:14px;">{{ $bien['prix'] }}</div>
        <div style="display:flex;justify-content:space-between;align-items:center;gap:7px;padding:14px 0;border-top:1px solid var(--couleur-bordure-separateur);border-bottom:1px solid var(--couleur-bordure-separateur);margin-bottom:16px;">
            <span style="display:flex;align-items:center;gap:5px;font-family:var(--police-texte);font-size:var(--taille-texte-carte);color:var(--couleur-texte-attenue);"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.8" aria-hidden="true"><path d="M4 4h16v16H4zM9 4v16M4 10h16"/></svg>{{ $bien['surface_habitable'] }}</span>
            <span style="display:flex;align-items:center;gap:5px;font-family:var(--police-texte);font-size:var(--taille-texte-carte);color:var(--couleur-texte-attenue);"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.8" aria-hidden="true"><path d="M3 17v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5M3 14h18M6 10V8a1 1 0 0 1 1-1h3"/></svg>{{ $bien['chambres'] }} ch.</span>
            <span style="display:flex;align-items:center;gap:5px;font-family:var(--police-texte);font-size:var(--taille-texte-carte);color:var(--couleur-texte-attenue);"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--couleur-bleu-principal)" stroke-width="1.8" aria-hidden="true"><path d="M3 20h18M5 20l3-8 4 4 3-6 4 10"/></svg>{{ $bien['terrain'] }}</span>
        </div>
        <div style="position:relative;z-index:2;display:flex;gap:10px;margin-top:auto;">
            <a href="{{ route('bien.show', ['id' => $bien['id']]) }}" class="biome-property-card__voir" style="flex:1;display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--police-titres);font-size:var(--taille-bouton-sm);font-weight:600;color:var(--couleur-texte-titre-carte);background:#fff;border:1.5px solid var(--couleur-bordure-bouton);border-radius:var(--rayon-bouton);padding:11px;text-decoration:none;transition:border-color var(--transition-standard),color var(--transition-standard);">
                Voir le bien
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </a>
            <button
                type="button"
                data-ouvre-modale="visite"
                data-bien-id="{{ $bien['id'] }}"
                data-bien-titre="{{ $titre }}"
                class="biome-property-card__planifier"
                style="flex:1;display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--police-titres);font-size:var(--taille-bouton-sm);font-weight:600;color:var(--couleur-bleu-principal);background:var(--couleur-fond-survol-bleu-clair);border:1.5px solid transparent;border-radius:var(--rayon-bouton);padding:11px;cursor:pointer;transition:background var(--transition-standard);"
            >
                Planifier
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="4" y="5" width="16" height="16" rx="2"/><path d="M4 9h16M8 3v4M16 3v4"/></svg>
            </button>
        </div>
    </div>
</div>