---
import type { TranslationKey } from '@/i18n/ui';

interface Props {
  href: string;
  title: string;
  description: string;
  Icon: any;
  borderColor?: string;
}

const { href, title, description, Icon, borderColor = 'var(--color-hds-naranja)' } = Astro.props;
---
<a
  href={href}
  class="glass-card service-tilt-card group flex flex-col h-full p-6 md:p-7"
  style={`border-top: 3px solid ${borderColor}; transform-style: preserve-3d;`}
>
  <div class="service-icon-3d mb-5" style="width: 52px; height: 52px;">
    <Icon class="w-6 h-6" />
  </div>
  <h3 class="text-xl font-semibold mb-2 transition-colors" style="color: var(--hds-fg);">
    {title}
  </h3>
  <p class="text-sm leading-relaxed mb-4 flex-grow" style="color: var(--hds-fg-soft);">
    {description}
  </p>
  <span class="btn-ghost mt-auto service-cta-3d">
    Ver detalles
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <line x1="5" y1="12" x2="19" y2="12"/>
      <polyline points="12 5 19 12 12 19"/>
    </svg>
  </span>
</a>

<style>
  .service-icon-3d {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    color: var(--color-hds-naranja);
    transform: translateZ(0);
    transition: transform 0.4s var(--ease-spring, cubic-bezier(0.16, 1.2, 0.3, 1));
  }

  .group:hover .service-icon-3d {
    transform: translateZ(40px);
  }

  .service-cta-3d {
    transform: translateZ(0);
    transition: transform 0.4s var(--ease-spring, cubic-bezier(0.16, 1.2, 0.3, 1));
  }

  .group:hover .service-cta-3d {
    transform: translateZ(25px);
  }

  @media (prefers-reduced-motion: reduce) {
    .service-icon-3d,
    .service-cta-3d {
      transform: none !important;
      transition: none !important;
    }
  }
</style>
