@extends('layouts.frontend')

@section('title', 'Work — Bavly × Movix')
@section('meta_description', 'Selected software, SaaS, ERP, EdTech, healthcare, eCommerce and corporate projects by Bavly × Movix. 200+ projects worked on.')

@section('content')
<section class="page-hero">
    <div class="container">
        <p class="eyebrow">Selected Work</p>
        <h1 class="display-4 fw-semibold">200+ projects worked on. These are the ones we show.</h1>
        <p class="lead text-secondary">Selected projects across SaaS, business systems, eCommerce, education, healthcare, corporate websites and digital products.</p>
        <div class="filter-bar d-flex flex-wrap gap-2 mt-4" data-filter-bar role="group" aria-label="Filter projects by category">
            <button type="button" class="btn btn-outline-light active" data-filter="all">All</button>
            @foreach($projects->pluck('category')->filter()->unique() as $category)
                <button type="button" class="btn btn-outline-light" data-filter="{{ $category }}">{{ $category }}</button>
            @endforeach
        </div>
    </div>
</section>

<section class="section pt-0">
    <div class="container">
        <div class="row g-4" data-project-grid>
            @foreach($projects as $project)
                <div class="col-md-6 col-xl-4" data-category="{{ $project->category }}">
                    @include('frontend.partials.project-card', ['project' => $project])
                </div>
            @endforeach
        </div>
    </div>
</section>
@endsection