<?php
/**
 * Property Card Component
 * 
 * Expected variables:
 *   $cardPhoto    — image path
 *   $cardTitle    — property title
 *   $cardLocation — city / neighborhood
 *   $cardSpecs    — e.g. "320 m² · 4 ch · 3 sdb"
 *   $cardPrice    — formatted price string
 *   $cardBadge    — optional badge text (e.g. "À vendre", "Nouveau")
 *   $cardLink     — URL to property detail
 *   $cardType     — property type label
 */

$cardPhoto    = $cardPhoto    ?? 'assets/property-1.jpg';
$cardTitle    = $cardTitle    ?? 'Propriété';
$cardLocation = $cardLocation ?? 'Casablanca';
$cardSpecs    = $cardSpecs    ?? '';
$cardPrice    = $cardPrice    ?? 'Prix sur demande';
$cardBadge    = $cardBadge    ?? '';
$cardLink     = $cardLink     ?? '#';
$cardType     = $cardType     ?? '';
?>

<a href="<?= htmlspecialchars($cardLink) ?>" class="group cursor-pointer block">
  <article>
    <!-- Image -->
    <div class="overflow-hidden aspect-[4/3] sm:aspect-[3/2] mb-4 bg-gray-100 relative">
      <img 
        src="<?= htmlspecialchars(resolveAssetUrl($cardPhoto)) ?>" 
        alt="<?= htmlspecialchars($cardTitle) ?>" 
        class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
        loading="lazy"
      />
      <?php if ($cardBadge): ?>
        <span class="absolute top-3 left-3 bg-black text-white text-[10px] px-3 py-1.5 tracking-[0.15em] uppercase font-sans">
          <?= htmlspecialchars($cardBadge) ?>
        </span>
      <?php endif; ?>
      <?php if ($cardType): ?>
        <span class="absolute top-3 right-3 bg-white text-black text-[10px] px-3 py-1.5 tracking-[0.15em] uppercase font-sans">
          <?= htmlspecialchars($cardType) ?>
        </span>
      <?php endif; ?>
    </div>

    <!-- Meta -->
    <p class="text-[11px] text-gray-400 tracking-[0.2em] uppercase mb-1 font-sans">
      <?= htmlspecialchars($cardLocation) ?>
    </p>

    <!-- Title -->
    <h3 class="font-serif text-lg font-light mb-1 text-black group-hover:opacity-70 transition-opacity">
      <?= htmlspecialchars($cardTitle) ?>
    </h3>

    <!-- Specs -->
    <div class="flex items-center gap-4 text-sm text-gray-500 mb-3 font-sans">
      <?php if (!empty($cardSurface)): ?>
        <div class="flex items-center gap-1.5" title="Surface">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /></svg>
          <span><?= htmlspecialchars($cardSurface) ?></span>
        </div>
      <?php endif; ?>
      <?php if (!empty($cardBedrooms)): ?>
        <div class="flex items-center gap-1.5" title="Chambres">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
          <span><?= htmlspecialchars($cardBedrooms) ?></span>
        </div>
      <?php endif; ?>
      <?php if (!empty($cardBathrooms)): ?>
        <div class="flex items-center gap-1.5" title="Salles de bain">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 10V8a2 2 0 012-2h14a2 2 0 012 2v2M3 10a2 2 0 002 2h14a2 2 0 002-2M3 10v9a2 2 0 002 2h14a2 2 0 002-2v-9m-4-6V3m-8 1v.01" /></svg>
          <span><?= htmlspecialchars($cardBathrooms) ?></span>
        </div>
      <?php endif; ?>
    </div>

    <!-- Price -->
    <p class="text-sm font-medium text-black font-sans">
      <?= htmlspecialchars($cardPrice) ?>
    </p>
  </article>
</a>
