@extends('layouts.app')

@section('title', $project->title . ' | Ubon Software House')

@section('content')
<section class="page-hero">
    <div class="container">
        <span class="section-kicker">{{ $project->category ?: 'PROJECT' }}</span>
        <h1>{{ $project->title }}</h1>
        <p>{{ $project->excerpt }}</p>
    </div>
</section>

<section class="section">
    <div class="container detail-layout">
        @if ($project->image)
            <img src="{{ asset($project->image) }}" alt="{{ $project->title }}" class="project-detail-image">
        @else
            @include('components.project-card', ['project' => $project])
        @endif

        <h2>รายละเอียดผลงาน</h2>
        <p class="section-intro">{{ $project->description }}</p>

        @if ($project->technologies)
            <h2>ขอบเขตงาน</h2>
            <p class="section-intro">{{ implode(' • ', $project->technologies) }}</p>
        @endif

        @if ($project->website_url)
            <a class="btn btn-primary" href="{{ $project->website_url }}" rel="noopener noreferrer" target="_blank">ดูเว็บไซต์ <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
        @endif
    </div>
</section>
@endsection