---
/**
 * MOREMINIMORE - PORTFOLIO CARD COMPONENT (LIGHT THEME)
 */

interface Props {
  name: string;
  url: string;
  category: string;
  category_label: string;
  industry?: string;
  thumbnail: string;
  description: string;
  what_we_did?: string;
  result?: string;
}

const { name, url, category, category_label, industry, thumbnail, description, what_we_did, result } = Astro.props;
---

<a href={url || '#'} target="_blank" rel="noopener noreferrer" class="portfolio-card" data-category={category}
   ontouchstart="this.classList.toggle('tapped')"
   onclick="if(this.classList.contains('tapped')&&window.innerWidth<768){this.classList.remove('tapped');return false;}">
  <div class="portfolio-image">
    <img src={thumbnail} alt={name} loading="lazy" />
    <div class="portfolio-overlay">
      {what_we_did && <p class="overlay-did">{what_we_did}</p>}
      <span class="visit-btn">
        เยี่ยมชมเว็บไซต์
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
        </svg>
      </span>
    </div>
  </div>
  <div class="portfolio-info">
    {industry && <span class="portfolio-industry">{industry}</span>}
    <span class="portfolio-category">{category_label}</span>
    <h3 class="portfolio-name">{name}</h3>
    {result && <p class="portfolio-result">→ {result}</p>}
    {!what_we_did && description && <p class="portfolio-desc">{description}</p>}
  </div>
</a>

<style>
  /* ============================================
     PORTFOLIO CARD (LIGHT THEME)
     ============================================ */

  .portfolio-card {
    display: block;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.4s var(--ease-out-expo);
  }

  .portfolio-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
  }

  .portfolio-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--color-bg-soft);
  }

  .portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .portfolio-card:hover .portfolio-image img {
    transform: scale(1.05);
  }

  /* Yellow overlay on hover */
  .portfolio-overlay {
    position: absolute;
    inset: 0;
    background: rgba(254, 212, 0, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .portfolio-card:hover .portfolio-overlay,
  .portfolio-card.tapped .portfolio-overlay {
    opacity: 1;
  }

  .overlay-did {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-black);
    text-align: center;
    max-width: 280px;
  }

  .visit-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-black);
    color: var(--color-white);
    padding: 14px 28px;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .visit-btn svg {
    width: 18px;
    height: 18px;
  }

  /* Info section */
  .portfolio-info {
    padding: 24px;
  }

  .portfolio-industry {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-black);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .portfolio-category {
    display: inline-block;
    background: var(--color-bg-soft);
    color: var(--color-gray-600);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    margin-bottom: 8px;
  }

  .portfolio-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 8px;
  }

  .portfolio-did,
  .portfolio-desc {
    font-size: 14px;
    color: var(--color-gray-600);
    line-height: 1.5;
    margin-bottom: 4px;
  }

  .portfolio-result {
    font-size: 14px;
    color: var(--color-black);
    font-weight: 600;
    line-height: 1.5;
    margin-top: 4px;
  }
</style>
