@extends('layout.headerAndFooter')

@section('headLinks')
    <link rel="stylesheet" href="{{ asset('siteStyle/joinusStyle.css') }}">
    <link rel="preload" as="image" href="{{ asset('images/contact/ju-hero-1600.webp') }}" media="(min-width: 701px)" fetchpriority="high">
    <link rel="preload" as="image" href="{{ asset('images/contact/ju-hero-900.webp') }}" media="(max-width: 700px)" fetchpriority="high">
    <meta name="description" content="Rejoignez l'équipe Atirao – talents passionnés de marketing digital bienvenue.">
@stop

@section('title')
    Rejoignez-nous
@stop

@section('bodyClass')
    join-us-page
@stop

@section('content')

    {{-- ═══════════════════════════════════════════════════
         HERO — full-viewport, ju.png background
    ═══════════════════════════════════════════════════ --}}
    <section class="join-hero" aria-label="Hero Rejoignez-nous">

        {{-- Subtle grid overlay --}}
        <div class="join-hero__grid" aria-hidden="true"></div>

        {{-- Bottom vignette --}}
        <div class="join-hero__fade" aria-hidden="true"></div>

        {{-- Bokeh glow orbs --}}
        <div class="join-hero__orb join-hero__orb--1" aria-hidden="true"></div>
        <div class="join-hero__orb join-hero__orb--2" aria-hidden="true"></div>
        <div class="join-hero__orb join-hero__orb--3" aria-hidden="true"></div>
        <div class="join-hero__orb join-hero__orb--4" aria-hidden="true"></div>
        <div class="join-hero__orb join-hero__orb--5" aria-hidden="true"></div>

        {{-- Floating bokeh dots --}}
        <div class="join-hero__dots" aria-hidden="true">
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
        </div>

        {{-- ── Main content ────────────────────────────── --}}
        <div class="join-hero__inner">

            {{-- Eyebrow label --}}
            <div class="join-hero__eyebrow-row">
                <span class="join-hero__rule"></span>
                <span class="join-hero__label">Carrières · Atirao</span>
                <span class="join-hero__rule"></span>
            </div>

            {{-- Giant metallic title --}}
            <h1 class="join-hero__title">
                <span class="join-hero__word join-hero__word--join">JOIN</span>
                <span class="join-hero__word join-hero__word--us">US</span>
            </h1>

            {{-- Description --}}
            <p class="join-hero__desc">
                Rejoignez une équipe passionnée qui repousse les limites du marketing digital.
                Ensemble, nous créons de l'impact.
            </p>

            {{-- CTA row --}}
            <div class="join-hero__ctas">
                <a href="#application-form" class="join-hero__cta-primary">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M14 6l-1-2H5v17h2v-7h5l1 2h7V6h-6zm4 8h-4l-1-2H7V6h5l1 2h5v6z"/>
                    </svg>
                    Postuler maintenant
                </a>
                <a href="#jobs" class="join-hero__cta-ghost">
                    Voir les offres
                </a>
            </div>

            {{-- Glass stats pill --}}
            <div class="join-hero__stats">
                <div class="join-hero__stat">
                    <strong>50+</strong>
                    <span>Collaborateurs</span>
                </div>
                <div class="join-hero__divider" aria-hidden="true"></div>
                <div class="join-hero__stat">
                    <strong>8+</strong>
                    <span>Nationalités</span>
                </div>
                <div class="join-hero__divider" aria-hidden="true"></div>
                <div class="join-hero__stat">
                    <strong>100%</strong>
                    <span>Remote-friendly</span>
                </div>
            </div>

        </div>{{-- /.join-hero__inner --}}

        {{-- Scroll indicator --}}
        <div class="join-hero__scroll-hint" aria-label="Défiler">
            <span></span>
        </div>

    </section>{{-- /.join-hero --}}

@endsection