@extends('layouts.frontend')

@section('title', $project->title.' — Bavly × Movix')
@section('meta_description', $project->short_description)
@section('canonical', route('projects.show', $project))
@section('og_type', 'article')
@if($project->coverUrl())
    @section('og_image', $project->coverUrl())
@endif

@section('content')
<article>
    <header class="page-hero">
        <div class="container">
            <p class="eyebrow">{{ $project->category }}</p>
            <h1 class="display-4 fw-semibold">{{ $project->title }}</h1>
            <p class="lead text-secondary">{{ $project->short_description }}</p>
            <div class="d-flex flex-wrap gap-2">
                @if($project->hasLiveDemo())
                    <a class="btn btn-light" href="{{ $project->live_demo_url }}" target="_blank" rel="noopener noreferrer">Live Demo</a>
                @endif
                <a class="btn btn-outline-light" href="{{ route('contact') }}">Start a Project</a>
            </div>
        </div>
    </header>

    @if($project->coverUrl())
        <div class="container mb-4">
            <div class="shot">
                <img src="{{ $project->coverUrl() }}" alt="{{ $project->title }} live website screenshot" width="1440" height="900">
            </div>
        </div>
    @endif

    <section class="section pt-2">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-8 text-secondary fs-5">
                    {!! nl2br(e($project->description)) !!}
                </div>
                <aside class="col-lg-4">
                    @if(!empty($project->highlights))
                        <h2 class="h6 text-uppercase text-secondary">In this build</h2>
                        <ul class="list-unstyled">
                            @foreach($project->highlights as $item)
                                <li class="py-2 border-bottom border-secondary-subtle">{{ $item }}</li>
                            @endforeach
                        </ul>
                    @endif
                    <div class="d-flex flex-wrap gap-2 mt-3">
                        @foreach($project->technologies ?? [] as $tech)
                            <span class="badge text-bg-dark border">{{ $tech }}</span>
                        @endforeach
                    </div>
                </aside>
            </div>
        </div>
    </section>

    @if($project->dashboardUrl())
        <div class="container mb-5">
            <div class="shot">
                <img src="{{ $project->dashboardUrl() }}" alt="{{ $project->title }} dashboard screenshot" width="1440" height="900" loading="lazy">
            </div>
        </div>
    @endif
</article>

@if($related->isNotEmpty())
    <section class="section">
        <div class="container">
            <header class="section-header mb-4">
                <p class="eyebrow">More work</p>
                <h2 class="display-6 fw-semibold">Related projects.</h2>
            </header>
            <div class="row g-4">
                @foreach($related as $relatedProject)
                    <div class="col-md-6 col-xl-4" data-category="{{ $relatedProject->category }}">
                        @include('frontend.partials.project-card', ['project' => $relatedProject])
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif
@endsection