@props(['project'])

{{--
    Portfolio card (PRD 3.19 / 6.2) — thumbnail, category badge, title, short
    description, technology tags, and a Live Preview button when the project
    has a URL. No GitHub button anywhere, per 3.19 and 1.19.

    Shared by the homepage Featured Work grid and the /portfolio listing so the
    two can't drift apart (PRD 3.31). Previously these were two copy-pasted
    blocks of markup.

    The card is one <a> to the detail page. The Live Preview link can't be
    nested inside it (a link inside a link is invalid HTML and breaks keyboard
    navigation), so it sits as a sibling below the card body.
--}}
<article {{ $attributes->merge(['class' => 'h-100 d-flex flex-column']) }}>
    <a href="{{ route('portfolio.show', $project) }}" class="portfolio-card card-premium d-flex flex-column flex-grow-1 text-decoration-none">
        <div class="portfolio-card__media">
            <img
                src="{{ $project->featuredImageUrl() }}"
                alt="{{ $project->title }}"
                loading="lazy"
                decoding="async"
                width="800"
                height="500"
            >
        </div>

        <div class="d-flex flex-column flex-grow-1 p-4">
            @if($project->category)
                <span class="badge rounded-pill px-3 py-2 mb-2 align-self-start" style="background: var(--color-light-purple); color: var(--color-primary); font-weight: 600;">
                    {{ $project->category->name }}
                </span>
            @endif

            <h3 class="mb-2" style="font-size: var(--fs-card-title); color: var(--color-heading);">
                {{ $project->title }}
            </h3>

            <p class="mb-3" style="color: var(--color-paragraph); font-size: var(--fs-small);">
                {{ $project->excerpt(110) }}
            </p>

            @if($project->relationLoaded('technologies') && $project->technologies->isNotEmpty())
                <div class="d-flex flex-wrap gap-1 mb-3">
                    @foreach($project->technologies->take(4) as $technology)
                        <span class="badge rounded-pill px-2 py-1" style="background: var(--color-soft-background); color: var(--color-paragraph); border: 1px solid var(--color-border); font-weight: 500;">
                            {{ $technology->name }}
                        </span>
                    @endforeach
                </div>
            @endif

            <span class="mt-auto fw-semibold d-inline-flex align-items-center gap-2" style="color: var(--color-primary); font-size: var(--fs-small);">
                View details
                <i class="fa-solid fa-arrow-right portfolio-card__arrow" aria-hidden="true"></i>
            </span>
        </div>
    </a>

    {{-- Live Preview is hidden automatically when no URL exists (PRD 6.2). --}}
    @if($project->live_preview_url)
        <a
            href="{{ $project->live_preview_url }}"
            target="_blank"
            rel="noopener noreferrer"
            class="btn btn-secondary-outline btn-sm mt-2 align-self-start"
        >
            <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
            Live preview
        </a>
    @endif
</article>