{{-- resources/views/pages/portfolio/index.blade.php --}}
@extends('layouts.app')
@section('title', 'Portfolio — KiruDev Technologies')

@section('content')

<section style="padding:6rem 0 3rem; background:#fff;">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <p class="eyebrow mb-3">Our Work</p>
        <h1 style="font-family:'Fraunces',serif;font-size:clamp(2rem,4vw,3rem);font-weight:700;color:#0f0f14;letter-spacing:-0.02em;line-height:1.1;margin-bottom:1rem;">Project Portfolio</h1>
        <p style="font-size:1rem;color:#6b6b7a;max-width:36rem;line-height:1.75;">A selection of products and platforms we've designed, built, and shipped.</p>
    </div>
</section>

<section style="padding:3rem 0 5rem; background:#f8f8fa;">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">

        @if($categories->count())
        <div class="flex flex-wrap gap-2 mb-8">
            <a href="{{ route('portfolio.index') }}" class="tag {{ !request('category') ? 'tag-accent' : '' }}">All</a>
            @foreach($categories as $cat)
            <a href="{{ route('portfolio.index', ['category'=>$cat]) }}" class="tag {{ request('category')===$cat ? 'tag-accent' : '' }}">{{ ucfirst($cat) }}</a>
            @endforeach
        </div>
        @endif

        @if($projects->count())
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($projects as $p)
            <article class="card reveal" style="display:flex;flex-direction:column;">
                <div style="aspect-ratio:16/9;overflow:hidden;position:relative;">
                    @if($p->cover_image)
                    <img src="{{ $p->cover_image }}" alt="{{ $p->title }}" style="width:100%;height:100%;object-fit:cover;transition:transform 0.4s;" onmouseover="this.style.transform='scale(1.04)'" onmouseout="this.style.transform='scale(1)'">
                    @else
                    <div style="width:100%;height:100%;background:linear-gradient(135deg,#eef0ff,#e6f5f0);display:flex;align-items:center;justify-content:center;">
                        <span style="font-family:'Fraunces',serif;font-size:2.5rem;color:#2d3aff;opacity:0.25;">{{ substr($p->title,0,1) }}</span>
                    </div>
                    @endif
                    @if($p->featured)
                    <div style="position:absolute;top:0.75rem;left:0.75rem;background:#c9a227;color:#fff;font-size:0.65rem;font-weight:700;padding:0.2rem 0.6rem;border-radius:999px;letter-spacing:0.08em;text-transform:uppercase;">Featured</div>
                    @endif
                </div>
                <div style="padding:1.5rem;display:flex;flex-direction:column;flex:1;">
                    <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;flex-wrap:wrap;">
                        <span class="tag tag-accent">{{ ucfirst($p->category) }}</span>
                        @if($p->client)<span class="tag">{{ $p->client }}</span>@endif
                    </div>
                    <h2 style="font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;color:#0f0f14;margin-bottom:0.5rem;line-height:1.3;">
                        <a href="{{ route('portfolio.show', $p) }}" style="text-decoration:none;color:inherit;" onmouseover="this.style.color='#2d3aff'" onmouseout="this.style.color='inherit'">{{ $p->title }}</a>
                    </h2>
                    <p style="font-size:0.82rem;color:#6b6b7a;line-height:1.6;flex:1;margin-bottom:1.25rem;">{{ Str::limit($p->summary, 100) }}</p>
                    @if($p->tech_stack && count($p->tech_stack))
                    <div style="display:flex;flex-wrap:wrap;gap:0.35rem;margin-bottom:1rem;">
                        @foreach(array_slice($p->tech_stack, 0, 4) as $tech)
                        <span class="tag" style="font-size:0.65rem;">{{ $tech }}</span>
                        @endforeach
                        @if(count($p->tech_stack) > 4)<span class="tag" style="font-size:0.65rem;">+{{ count($p->tech_stack)-4 }}</span>@endif
                    </div>
                    @endif
                    <div style="display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid #f3f4f6;margin-top:auto;">
                        @if($p->completed_at)<span style="font-size:0.72rem;color:#9ca3af;">{{ $p->completed_at->format('M Y') }}</span>@endif
                        <a href="{{ route('portfolio.show', $p) }}" style="font-size:0.78rem;font-weight:600;color:#2d3aff;text-decoration:none;">View Case Study →</a>
                    </div>
                </div>
            </article>
            @endforeach
        </div>
        <div class="mt-8">{{ $projects->links() }}</div>
        @else
        <div style="text-align:center;padding:5rem 1rem;">
            <p style="font-family:'Fraunces',serif;font-size:1.25rem;font-weight:700;color:#0f0f14;margin-bottom:0.5rem;">No projects yet</p>
            <p style="color:#9ca3af;">Check back soon as we add case studies from our portfolio.</p>
        </div>
        @endif
    </div>
</section>

@endsection