@extends('layouts.app')
@section('title', 'Case Studies — MUVR Labs')
@section('content')

<section class="page-hero-dark py-5 px-4 px-lg-5">
    <div class="container-fluid">
        <div class="hero-eyebrow mb-2">Track Record</div>
        <h1 class="fw-800 text-white mb-2" style="font-size:1.6rem">Case Studies</h1>
        <p style="font-size:.85rem;color:#94a3b8">Selected examples of systems developed, projects executed, and engineering capability demonstrated.</p>
    </div>
</section>

<section class="py-5 px-4 px-lg-5">
    <div class="container-fluid">
        {{-- Tabs --}}
        <ul class="nav nav-tabs mb-4" id="csTabs">
            <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#all-tab" style="font-size:.82rem">All</a></li>
            @foreach($categories as $cat)
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#cat-{{ Str::slug($cat) }}" style="font-size:.82rem">{{ $cat }}</a></li>
            @endforeach
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="all-tab">
                <div class="row g-3">
                    @foreach($caseStudies as $cs)
                    <div class="col-lg-4 col-md-6">
                        <div class="case-card h-100">
                            <div class="case-card-img">
                                <span class="case-card-img-label">{{ $cs->tab_label }}</span>
                            </div>
                            <div class="p-3">
                                <h6 class="fw-700 mb-2" style="font-size:.85rem;color:var(--brand-dark);line-height:1.4">{{ $cs->title }}</h6>
                                <p class="mb-2" style="font-size:.78rem;color:#64748b;line-height:1.5">{{ Str::limit($cs->summary, 120) }}</p>
                                <a href="{{ route('case-study.show', $cs->slug) }}" class="text-brand fw-600 text-decoration-none" style="font-size:.78rem">Read Case Study →</a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @foreach($categories as $cat)
            <div class="tab-pane fade" id="cat-{{ Str::slug($cat) }}">
                <div class="row g-3">
                    @foreach($caseStudies->where('category', $cat) as $cs)
                    <div class="col-lg-4 col-md-6">
                        <div class="case-card h-100">
                            <div class="case-card-img">
                                <span class="case-card-img-label">{{ $cs->tab_label }}</span>
                            </div>
                            <div class="p-3">
                                <h6 class="fw-700 mb-2" style="font-size:.85rem;color:var(--brand-dark)">{{ $cs->title }}</h6>
                                <p class="mb-2" style="font-size:.78rem;color:#64748b">{{ Str::limit($cs->summary, 120) }}</p>
                                <a href="{{ route('case-study.show', $cs->slug) }}" class="text-brand fw-600 text-decoration-none" style="font-size:.78rem">Read Case Study →</a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<section class="final-cta py-5 text-center">
    <div class="container">
        <h3 class="text-white fw-800 mb-2" style="font-size:1.1rem">Looking for a similar engineering solution?</h3>
        <p class="text-secondary mb-4" style="font-size:.82rem">Discuss your requirement with our team and explore how we can support your project.</p>
        <div class="d-flex gap-3 justify-content-center flex-wrap">
            <a href="{{ route('contact') }}" class="btn btn-brand px-4">Discuss Similar Requirement</a>
            <a href="{{ route('contact') }}" class="btn btn-outline-light-custom px-4">Contact Us</a>
        </div>
    </div>
</section>
@endsection