@extends('layouts.app')
@section('title', $project->title . ' — Portfolio · KiruDev Technologies')

@section('content')

<article>
    <header style="padding:5rem 0 3rem;background:#fff;border-bottom:1px solid #e5e7eb;">
        <div class="max-w-4xl mx-auto px-6 lg:px-8">
            <a href="{{ route('portfolio.index') }}" style="font-size:0.78rem;color:#9ca3af;text-decoration:none;display:inline-flex;align-items:center;gap:0.3rem;margin-bottom:1.5rem;" onmouseover="this.style.color='#2d3aff'" onmouseout="this.style.color='#9ca3af'">
                ← All Projects
            </a>
            <div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1.25rem;">
                <span class="tag tag-accent">{{ ucfirst($project->category) }}</span>
                @if($project->client)<span class="tag">{{ $project->client }}</span>@endif
                @if($project->featured)<span class="tag" style="background:#fdf8e8;border-color:#f3d87a;color:#92400e;">⭐ Featured</span>@endif
            </div>
            <h1 style="font-family:'Fraunces',serif;font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700;color:#0f0f14;line-height:1.15;letter-spacing:-0.02em;margin-bottom:1rem;">{{ $project->title }}</h1>
            <p style="font-size:1.05rem;color:#6b7280;line-height:1.7;max-width:42rem;margin-bottom:1.5rem;">{{ $project->summary }}</p>
            <div style="display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;">
                @if($project->completed_at)
                <div><span style="font-size:0.68rem;text-transform:uppercase;letter-spacing:0.1em;color:#9ca3af;font-weight:600;">Completed</span><p style="font-size:0.875rem;font-weight:600;color:#0f0f14;">{{ $project->completed_at->format('F Y') }}</p></div>
                @endif
                @if($project->url)
                <a href="{{ $project->url }}" target="_blank" rel="noopener" class="btn btn-outline" style="font-size:0.78rem;">View Live ↗</a>
                @endif
            </div>
        </div>
    </header>

    @if($project->cover_image)
    <div style="max-width:56rem;margin:0 auto;padding:2rem 1.5rem 0;">
        <img src="{{ $project->cover_image }}" alt="{{ $project->title }}" style="width:100%;border-radius:12px;aspect-ratio:16/9;object-fit:cover;border:1px solid #e5e7eb;">
    </div>
    @endif

    <div style="max-width:48rem;margin:3rem auto;padding:0 1.5rem;">

        {{-- Tech stack --}}
        @if($project->tech_stack && count($project->tech_stack))
        <div style="background:#f8f8fa;border:1px solid #e5e7eb;border-radius:10px;padding:1.25rem;margin-bottom:2rem;">
            <p style="font-size:0.68rem;text-transform:uppercase;letter-spacing:0.12em;color:#9ca3af;font-weight:600;margin-bottom:0.75rem;">Tech Stack</p>
            <div style="display:flex;flex-wrap:wrap;gap:0.4rem;">
                @foreach($project->tech_stack as $tech)
                <span class="tag">{{ $tech }}</span>
                @endforeach
            </div>
        </div>
        @endif

        {{-- Description --}}
        @if($project->description)
        <div style="font-size:1rem;line-height:1.85;color:#2a2a35;" class="prose-content">
            {!! $project->description !!}
        </div>
        @endif
    </div>
</article>

{{-- Related --}}
@if($related->count())
<section style="padding:4rem 0 5rem;background:#f8f8fa;">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <h2 style="font-family:'Fraunces',serif;font-size:1.25rem;font-weight:700;color:#0f0f14;margin-bottom:1.5rem;">More {{ ucfirst($project->category) }} Projects</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
            @foreach($related as $r)
            <a href="{{ route('portfolio.show', $r) }}" class="card" style="text-decoration:none;padding:1.25rem;display:block;">
                <span class="tag tag-accent" style="display:inline-flex;margin-bottom:0.75rem;">{{ ucfirst($r->category) }}</span>
                <h3 style="font-family:'Fraunces',serif;font-size:0.95rem;font-weight:700;color:#0f0f14;line-height:1.3;margin-bottom:0.4rem;">{{ $r->title }}</h3>
                <p style="font-size:0.78rem;color:#6b7280;line-height:1.55;">{{ Str::limit($r->summary,80) }}</p>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

@push('head')
<style>
.prose-content h2 { font-family:'Fraunces',serif;font-size:1.4rem;font-weight:700;color:#0f0f14;margin:2rem 0 0.75rem; }
.prose-content h3 { font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700;color:#0f0f14;margin:1.5rem 0 0.5rem; }
.prose-content p  { margin-bottom:1.25rem; }
.prose-content ul,.prose-content ol { padding-left:1.5rem;margin-bottom:1.25rem; }
.prose-content li { margin-bottom:0.4rem; }
.prose-content code { background:#f3f4f6;border:1px solid #e5e7eb;padding:0.15rem 0.45rem;border-radius:4px;font-size:0.875em;color:#2d3aff; }
.prose-content img { max-width:100%;border-radius:8px;margin:1rem 0; }
.prose-content blockquote { border-left:3px solid #2d3aff;padding-left:1.25rem;color:#6b7280;font-style:italic;margin:1.5rem 0; }
.prose-content a { color:#2d3aff;text-decoration:underline; }
</style>
@endpush
@endsection