@extends('layouts.app')

@section('title', 'Portfolio')

@section('content')
<section class="page-hero page-hero--portfolio">
    <div class="container">
        <nav class="portfolio-breadcrumb" aria-label="Breadcrumb">
            <a href="{{ route('home') }}">Home</a>
            <span>/</span>
            <span aria-current="page">Portfolio</span>
        </nav>
        <span class="section-label">Portfolio</span>
        <h1>Our Work</h1>
        <p>Platforms and applications built for clients across web and mobile technologies.</p>
    </div>
</section>

<section class="section portfolio-section">
    <div class="container portfolio-showcase">
        @foreach($projects as $index => $project)
        @if(($project['layout'] ?? 'standard') === 'mobile')
        <article class="portfolio-card portfolio-card--featured reveal" id="portfolio-{{ $index }}">
            <div class="portfolio-card-badge">
                <span class="portfolio-index">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
            </div>
            <header class="portfolio-card-head portfolio-card-head--center">
                <h2>{{ $project['title'] }}</h2>
                @if(!empty($project['subtitle']))
                <p class="portfolio-card-sub">{{ $project['subtitle'] }}</p>
                @endif
            </header>
            <div class="portfolio-featured-body">
                <div class="portfolio-card-copy">
                    <p>{{ $project['text'] }}</p>
                </div>
                <div class="portfolio-mobile-visuals">
                    @if(isset($project['images'][0]))
                    <figure class="portfolio-figure portfolio-figure--primary">
                        <img src="{{ asset('images/' . $project['images'][0]['file']) }}" alt="{{ $project['images'][0]['alt'] }}" loading="lazy">
                    </figure>
                    @endif
                    @if(isset($project['images'][1]))
                    <figure class="portfolio-figure portfolio-figure--secondary">
                        <img src="{{ asset('images/' . $project['images'][1]['file']) }}" alt="{{ $project['images'][1]['alt'] }}" loading="lazy">
                    </figure>
                    @endif
                </div>
            </div>
        </article>
        @else
        <article class="portfolio-card portfolio-card--standard{{ !empty($project['reverse']) ? ' portfolio-card--reverse' : '' }} reveal" id="portfolio-{{ $index }}">
            <div class="portfolio-card-inner">
                <div class="portfolio-card-visual">
                    <span class="portfolio-index">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
                    <div class="portfolio-browser">
                        <div class="portfolio-browser-bar" aria-hidden="true">
                            <span></span><span></span><span></span>
                        </div>
                        <div class="portfolio-browser-viewport">
                            <img src="{{ asset('images/' . $project['image']) }}" alt="{{ $project['image_alt'] ?? $project['title'] }}" loading="lazy">
                        </div>
                    </div>
                </div>
                <div class="portfolio-card-content">
                    <h2>{{ $project['title'] }}</h2>
                    <p>{{ $project['text'] }}</p>
                </div>
            </div>
        </article>
        @endif
        @endforeach
    </div>
</section>
@endsection