---
interface Props {
  title: string;
  description: string;
  url?: string;
  comingSoon?: boolean;
}

const { title, description, url, comingSoon = false } = Astro.props;
---

<div class="service-item" class:list={{ "coming-soon": comingSoon }} role="listitem">
  <h3>
    {url ? (
      <a
        href={url}
        target="_blank"
        rel="noopener noreferrer"
        aria-label={`Visit ${title}`}
      >
        {title}
      </a>
    ) : (
      title
    )}
  </h3>
  <p>{description}</p>
</div>

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

  .service-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 8px rgba(212, 165, 116, 0.2);
  }

  .service-item.coming-soon {
    border-left-color: var(--color-warm);
    opacity: 0.8;
  }

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

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

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

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