---
/**
 * PortfolioPreview - Portfolio preview section
 */
import PortfolioPreviewCard from '@/components/PortfolioPreviewCard.astro'
import type { HomeData } from '@/lib/api/home'
import type { PortfolioItem } from '@/lib/api/home'

interface Props {
  homeData?: HomeData | null
  portfolioItems?: PortfolioItem[]
}

const { homeData, portfolioItems = [] } = Astro.props

// Get section config from CMS or use defaults
const portfolioSection = homeData?.portfolioSection
const headline = portfolioSection?.headline || '精選案例'
const subheadline = portfolioSection?.subheadline || '探索我們為客戶打造的優質網站'

// Show section only if we have items
const showSection = portfolioItems.length > 0
---

{
  showSection && (
    <section
      class="py-16 md:py-24 bg-white"
      aria-labelledby="portfolio-heading"
    >
      <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-12 md:mb-16">
          <h2
            id="portfolio-heading"
            class="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)] mb-4"
          >
            {headline}
          </h2>
          <p class="text-lg text-[var(--color-text-muted)] max-w-2xl mx-auto">
            {subheadline}
          </p>
        </div>

        <!-- Portfolio Grid -->
        <ul
          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 mb-12"
          role="list"
        >
          {
            portfolioItems.map((item) => (
              <PortfolioPreviewCard item={item} />
            ))
          }
        </ul>

        <!-- View All CTA -->
        <div class="text-center">
          <a
            href="/website-portfolio"
            class="inline-flex items-center justify-center px-8 py-3 bg-[var(--color-enchunblue)] text-white font-semibold rounded-lg hover:bg-[var(--color-enchunblue-dark)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-enchunblue)] focus:ring-offset-2"
          >
            查看所有作品
            <svg
              class="w-5 h-5 ml-2"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </a>
        </div>
      </div>
    </section>
  )
}
