@extends('layouts.app')

@section('title', 'Career')

@section('content')
<section class="page-hero page-hero--career">
    <div class="container">
        <span class="section-label">Careers</span>
        <h1>Join Our Team</h1>
        <p>We believe in teamwork and creativity. Grow with Golden Era Software Solutions and Consultancy.</p>
    </div>
</section>

<section class="section career-section">
    <div class="container career-container">
        <div class="career-layout">
            <aside class="career-side reveal">
                <div class="career-side-card">
                    <h2>Careers at GERG</h2>
                    <p>Explore open positions and send your resume to <a href="mailto:{{ $apply_email }}">{{ $apply_email }}</a>. {{ $apply_note }}</p>
                    <div class="career-side-meta">
                        <div class="career-meta-chip">
                            <strong>{{ count($positions) }}</strong>
                            <span>Open Roles</span>
                        </div>
                        <div class="career-meta-chip">
                            <strong>Now</strong>
                            <span>Hiring</span>
                        </div>
                    </div>
                </div>
            </aside>

            <div class="career-main">
                <div class="career-jobs">
                    @foreach($positions as $index => $job)
                    <details class="career-job reveal" @if($index === 0) open @endif>
                        <summary class="career-job-summary">
                            <span class="career-job-title-wrap">
                                <span class="career-job-title">{{ $job['title'] }}</span>
                                @if(!empty($job['experience']))
                                <span class="career-job-exp">{{ $job['experience'] }}</span>
                                @endif
                            </span>
                            <span class="career-job-toggle" aria-hidden="true"><i class="fas fa-chevron-down"></i></span>
                        </summary>
                        <div class="career-job-body">
                            @foreach($job['sections'] as $section)
                            <div class="career-job-section">
                                <h3>{{ $section['heading'] }}</h3>
                                @if(!empty($section['paragraphs']))
                                    @foreach($section['paragraphs'] as $paragraph)
                                    <p>{{ $paragraph }}</p>
                                    @endforeach
                                @endif
                                @if(!empty($section['items']))
                                <ul>
                                    @foreach($section['items'] as $item)
                                    <li>{{ $item }}</li>
                                    @endforeach
                                </ul>
                                @endif
                            </div>
                            @endforeach

                            @if(!empty($job['footer']))
                            <p class="career-job-footer-note">{{ $job['footer'] }}</p>
                            @endif

                            <p class="career-job-apply">
                                Mail your resume to <a href="mailto:{{ $apply_email }}">{{ $apply_email }}</a>.
                                {{ $apply_note }}
                            </p>
                        </div>
                    </details>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endsection