<?php
/**
 * Service Card Component
 * 
 * Expected variables:
 *   $serviceTitle — service heading
 *   $serviceDesc  — short description
 *   $serviceIcon  — SVG path data (for a 24x24 viewBox)
 */

$serviceTitle = $serviceTitle ?? 'Service';
$serviceDesc  = $serviceDesc  ?? '';
$serviceIcon  = $serviceIcon  ?? '';
?>

<div class="bg-white p-10 group hover:bg-black transition-colors duration-500 cursor-default">
  <!-- Icon -->
  <?php if ($serviceIcon): ?>
  <div class="mb-6">
    <svg class="w-8 h-8 text-black group-hover:text-white transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1">
      <path stroke-linecap="round" stroke-linejoin="round" d="<?= $serviceIcon ?>"/>
    </svg>
  </div>
  <?php endif; ?>

  <!-- Title -->
  <h3 class="font-serif text-xl font-light mb-3 text-black group-hover:text-white transition-colors duration-500">
    <?= htmlspecialchars($serviceTitle) ?>
  </h3>

  <!-- Description -->
  <p class="text-sm text-gray-500 group-hover:text-gray-400 transition-colors duration-500 leading-relaxed font-sans">
    <?= htmlspecialchars($serviceDesc) ?>
  </p>

</div>
