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

<section class="page-hero-light py-5 px-4 px-lg-5">
    <div class="container-fluid">
        <div class="text-brand fw-700 mb-1" style="font-size:.7rem;letter-spacing:2px;text-transform:uppercase">Join Our Team</div>
        <h1 class="fw-800 mb-2" style="font-size:1.6rem;color:var(--brand-dark)">Careers at MUVR Labs</h1>
        <p class="sec-intro">Join us in building practical engineering solutions for testing, automation, and advanced applications.</p>
    </div>
</section>

<section class="py-5 px-4 px-lg-5">
    <div class="container-fluid">
        {{-- Why Join --}}
        <div class="sec-label mb-3">Why Join Us</div>
        <div class="row g-3 mb-5">
            <div class="col-lg-4 col-md-6">
                <div class="p-3 h-100 rounded-3" style="background:#fff;border:1px solid var(--border-light)">
                    <div class="sol-icon-wrap mb-3"><i class="bi bi-star" style="font-size:1rem;color:var(--brand-primary)"></i></div>
                    <div class="fw-700 mb-1" style="font-size:.88rem;color:var(--brand-dark)">Real Engineering Work</div>
                    <p style="font-size:.78rem;color:#64748b;line-height:1.5">Work on meaningful engineering systems used in real applications, not just simulations.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="p-3 h-100 rounded-3" style="background:#fff;border:1px solid var(--border-light)">
                    <div class="sol-icon-wrap mb-3"><i class="bi bi-people" style="font-size:1rem;color:var(--brand-primary)"></i></div>
                    <div class="fw-700 mb-1" style="font-size:.88rem;color:var(--brand-dark)">Growing Team</div>
                    <p style="font-size:.78rem;color:#64748b;line-height:1.5">Be part of a team at an exciting stage of growth with strong product and project pipeline.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="p-3 h-100 rounded-3" style="background:#fff;border:1px solid var(--border-light)">
                    <div class="sol-icon-wrap mb-3"><i class="bi bi-book" style="font-size:1rem;color:var(--brand-primary)"></i></div>
                    <div class="fw-700 mb-1" style="font-size:.88rem;color:var(--brand-dark)">Technical Growth</div>
                    <p style="font-size:.78rem;color:#64748b;line-height:1.5">Exposure to diverse domains: test systems, automation, medtech, and advanced applications.</p>
                </div>
            </div>
        </div>

        {{-- Current Openings --}}
        <div class="sec-label mb-3">Current Openings</div>
        @forelse($jobs as $job)
        <div class="job-card mb-3">
            <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap">
                <div>
                    <h5 class="fw-800 mb-2" style="font-size:.95rem;color:var(--brand-dark)">{{ $job->title }}</h5>
                    <div class="d-flex flex-wrap gap-2 mb-2">
                        @if($job->department)<span class="job-tag job-tag-dept">{{ $job->department }}</span>@endif
                        @if($job->location)<span class="job-tag job-tag-loc">{{ $job->location }}</span>@endif
                        @if($job->job_type)<span class="job-tag job-tag-type">{{ $job->job_type }}</span>@endif
                    </div>
                    <p style="font-size:.8rem;color:#64748b;line-height:1.5;max-width:500px">{{ $job->description }}</p>
                </div>
                <a href="#submit-cv" class="btn btn-brand btn-sm px-3 flex-shrink-0">Apply Now</a>
            </div>
        </div>
        @empty
        <p class="text-muted" style="font-size:.85rem">No current openings listed. Please submit your CV for future opportunities.</p>
        @endforelse

        {{-- Submit CV --}}
        <hr class="divider-light my-5">
        <div id="submit-cv" class="row justify-content-center">
            <div class="col-lg-7">
                <div class="sec-label mb-2">Submit Your CV</div>
                <div class="fw-800 mb-4" style="font-size:1.1rem;color:var(--brand-dark)">Apply or Register Your Interest</div>
                @if(session('cv_success'))
                <div class="alert alert-success">{{ session('cv_success') }}</div>
                @endif
                <form method="POST" action="{{ route('career.apply') }}" enctype="multipart/form-data" class="p-4 rounded-3" style="background:#f8fafc;border:1px solid var(--border-light)">
                    @csrf
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Name *</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Email *</label>
                            <input type="email" name="email" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <input type="text" name="phone" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Position Applied For</label>
                            <input type="text" name="position_applied" class="form-control" placeholder="Role / area of interest">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Message / Cover Note</label>
                        <textarea name="message" class="form-control" rows="3" placeholder="Brief introduction..."></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Upload CV (PDF or Word)</label>
                        <input type="file" name="cv_file" class="form-control" accept=".pdf,.doc,.docx">
                    </div>
                    <button type="submit" class="btn btn-brand px-4">Submit CV</button>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection