---
interface Props {
  title: string;
  description: string;
  comingSoonNote?: string;
}

const { title, description, comingSoonNote } = Astro.props;
---

<div class="support-item" role="listitem">
  <h3>{title}</h3>
  <p>
    {description}
    {comingSoonNote && (
      <span class="coming-soon-text">({comingSoonNote})</span>
    )}
  </p>
</div>

<style>
  .support-item {
    background: var(--color-bg);
    padding: var(--space-md);
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .support-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.15);
  }

  .support-item h3 {
    margin-bottom: var(--space-xs);
    font-size: 1.25rem;
  }

  .support-item p {
    color: var(--color-text-dim);
    margin: 0;
  }

  .coming-soon-text {
    font-style: italic;
    color: var(--color-warm);
  }

  @media (prefers-reduced-motion: reduce) {
    .support-item {
      transition: none;
    }

    .support-item:hover {
      transform: none;
    }
  }
</style>
