@extends('layouts.main')

@section('title', 'Careers')
@section('description', 'Join Aruku R&B Limited — help build the future of football management gaming with blockchain, AI, and NFTs.')
@section('keywords', 'careers, jobs, aruku r&b, laravel jobs, tailwind jobs, alpine js, gsap, game studio')

@section('content')
<!-- Careers: Hero with Parallax and Particles -->
<section id="careers-root" x-data="careersPage()" x-init="Alpine.store('careers', { ids })" class="relative overflow-hidden py-6 md:py-16">
    <!-- Background layers -->
    <div class="absolute inset-0 -z-10">
        <div class="absolute inset-0 bg-dark-gradient opacity-90"></div>
        <div class="absolute inset-0 bg-dots opacity-10"></div>
    </div>

    <!-- floating particles -->
    <div class="particles -z-0" aria-hidden="true">
        <template x-for="(p,i) in particles" :key="i">
            <span class="particle" :style="`--x:${p.x};--y:${p.y};--dx:${p.dx};--dy:${p.dy};--dur:${p.d};--delay:${p.delay};`"></span>
        </template>
    </div>

    <div class="container-custom relative">
        <div class="grid lg:grid-cols-12 gap-8 items-center">
            <div class="lg:col-span-7">
                <span class="badge badge-accent reveal-up">We are hiring</span>
                <h1 :id="ids.title" class="mt-4 font-heading text-4xl sm:text-5xl lg:text-6xl font-extrabold text-text-primary text-glow leading-tight">
                    Build the future of
                    <span class="text-accent-blue-primary">football gaming</span>
                </h1>
                <p :id="ids.sub" class="mt-5 text-text-secondary text-lg lg:text-xl max-w-2xl">
                    Join a team pioneering blockchain, AI, and NFTs to create immersive football management experiences
                    where players own their digital assets.
                </p>
            </div>
            <div class="lg:col-span-5">
                <div :id="ids.stat" class="job-card job-card--featured">
                    <div class="inner p-6 relative">
                        <div class="corner-accent corner-accent-tl"></div>
                        <div class="corner-accent corner-accent-br"></div>
                        <div class="flex items-center justify-between">
                            <div>
                                <div class="text-sm text-text-secondary">Open roles</div>
                                <div class="mt-1 text-3xl font-heading text-text-primary" x-text="filtered().length"></div>
                            </div>
                            <div class="w-12 h-12 glass-blue rounded-xl flex items-center justify-center">
                                <svg class="w-6 h-6 text-accent-blue-primary" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 2 7l10 5 10-5-10-5ZM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                            </div>
                        </div>
                        <div class="mt-4 text-text-secondary text-sm">Across Engineering, Design, Product and Operations.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Filters -->
<section class="pb-8">
    <div class="container-custom">
        <div class="glass-dark rounded-2xl p-4 lg:p-6 border border-dark-border">
            <div class="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-6">
                <!-- Search -->
                <div class="flex-1">
                    <label class="form-label">Search</label>
                    <input type="text" class="form-input w-full px-4 py-2.5" placeholder="Search by title, skill, or keyword..." x-model="q"/>
                </div>
                <!-- Clear button on mobile -->
                <div class="lg:self-end">
                    <button type="button" class="btn-secondary" @click="clearAll()">Clear filters</button>
                </div>
            </div>

            <!-- Chip filters -->
            <div class="mt-5 grid md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- Category -->
                <div>
                    <div class="text-sm text-text-secondary mb-2">Category</div>
                    <div class="flex flex-wrap gap-2">
                        <template x-for="c in categories" :key="'c-'+c">
                            <button class="chip" :class="isActive('categories', c) ? 'chip-active' : ''" @click="toggle('categories', c)" x-text="c"></button>
                        </template>
                    </div>
                </div>
                <!-- Location -->
                <div>
                    <div class="text-sm text-text-secondary mb-2">Location</div>
                    <div class="flex flex-wrap gap-2">
                        <template x-for="l in locations" :key="'l-'+l">
                            <button class="chip" :class="isActive('locations', l) ? 'chip-active' : ''" @click="toggle('locations', l)" x-text="l"></button>
                        </template>
                    </div>
                </div>
                <!-- Level -->
                <div>
                    <div class="text-sm text-text-secondary mb-2">Level</div>
                    <div class="flex flex-wrap gap-2">
                        <template x-for="lv in levels" :key="'lv-'+lv">
                            <button class="chip" :class="isActive('levels', lv) ? 'chip-active' : ''" @click="toggle('levels', lv)" x-text="lv"></button>
                        </template>
                    </div>
                </div>
                <!-- Type -->
                <div>
                    <div class="text-sm text-text-secondary mb-2">Type</div>
                    <div class="flex flex-wrap gap-2">
                        <template x-for="t in types" :key="'t-'+t">
                            <button class="chip" :class="isActive('types', t) ? 'chip-active' : ''" @click="toggle('types', t)" x-text="t"></button>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Jobs list -->
<section class="section pt-10">
    <div class="container-custom">
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6" id="jobs-grid">
            <template x-for="job in filtered()" :key="job.id">
                <article class="job-card card-animate" :class="job.featured ? 'job-card--featured' : ''">
                    <div class="inner p-6 h-full flex flex-col">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <div class="text-sm text-text-secondary" x-text="job.category"></div>
                                <h3 class="mt-1 font-heading text-xl text-text-primary" x-text="job.title"></h3>
                            </div>
                            <span class="badge badge-accent" x-show="job.featured">Featured</span>
                        </div>

                        <p class="mt-3 text-text-secondary" x-text="job.description"></p>

                        <div class="mt-4 flex flex-wrap gap-2">
                            <template x-for="tag in job.tags" :key="job.id+'-t-'+tag">
                                <span class="tag" x-text="tag"></span>
                            </template>
                        </div>

                        <div class="mt-5 grid grid-cols-3 gap-3 text-xs text-text-secondary">
                            <div class="glass p-2 rounded-lg text-center"><span class="block">Location</span><span class="block text-text-primary mt-1" x-text="job.location"></span></div>
                            <div class="glass p-2 rounded-lg text-center"><span class="block">Level</span><span class="block text-text-primary mt-1" x-text="job.level"></span></div>
                            <div class="glass p-2 rounded-lg text-center"><span class="block">Type</span><span class="block text-text-primary mt-1" x-text="job.type"></span></div>
                        </div>

                        <div class="mt-6 flex items-center gap-3">
                            <a href="{{ route('contact') }}" class="btn-primary">Apply Now</a>
                            <a href="#" class="btn-secondary">View Details</a>
                        </div>
                    </div>
                </article>
            </template>
        </div>

        <!-- No results state -->
        <div x-show="filtered().length === 0" class="mt-10 text-center text-text-secondary">
            No roles match your filters. Try adjusting filters or search terms.
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
    function careersPage() {
        const uid = () => 'id-' + Math.random().toString(36).slice(2, 8);
        return {
            ids: { title: uid(), sub: uid(), stat: uid() },
            q: '',
            categories: ['Engineering', 'Design', 'Product', 'Operations'],
            locations: ['Remote', 'Onsite'],
            levels: ['Junior', 'Mid', 'Senior'],
            types: ['Full-time', 'Contract', 'Internship'],
            selected: { categories: [], locations: [], levels: [], types: [] },
            jobs: [
                { id: 1, title: 'Senior PHP/Laravel Engineer', category: 'Engineering', level: 'Senior', type: 'Full-time', location: 'Remote', featured: true, tags: ['Laravel 11', 'Livewire 3', 'MySQL 8', 'TDD'], description: 'Design and build scalable microservices and APIs powering football management gameplay.' },
                { id: 2, title: 'Frontend Engineer (Tailwind/Alpine/GSAP)', category: 'Engineering', level: 'Mid', type: 'Full-time', location: 'Remote', featured: false, tags: ['Tailwind CSS', 'Alpine.js', 'GSAP'], description: 'Craft performant UIs with glassmorphism, animations, and responsive layouts.' },
                { id: 3, title: 'Product Designer (UX/UI)', category: 'Design', level: 'Mid', type: 'Contract', location: 'Remote', featured: false, tags: ['Figma', 'Design Systems', 'Prototyping'], description: 'Design beautiful, accessible interfaces with a premium, minimalist aesthetic.' },
                { id: 4, title: 'AI Gameplay Engineer', category: 'Engineering', level: 'Senior', type: 'Full-time', location: 'Onsite', featured: true, tags: ['Python', 'Reinforcement Learning', 'Game AI'], description: 'Build intelligent agents and AI features that adapt to player strategies.' },
                { id: 5, title: 'Technical Producer', category: 'Product', level: 'Senior', type: 'Full-time', location: 'Remote', featured: false, tags: ['Agile', 'Roadmaps', 'Stakeholders'], description: 'Drive planning and delivery of features across cross-functional teams.' },
                { id: 6, title: 'Community Manager', category: 'Operations', level: 'Junior', type: 'Internship', location: 'Remote', featured: false, tags: ['Discord', 'Content', 'Engagement'], description: 'Grow and nurture our player community across channels.' },
            ],
            toggle(group, value) {
                const arr = this.selected[group];
                const i = arr.indexOf(value);
                if (i === -1) arr.push(value); else arr.splice(i, 1);
                setTimeout(() => ScrollTrigger.refresh(), 100);
            },
            isActive(group, value) { return this.selected[group].includes(value); },
            clearAll() { this.q = ''; this.selected = { categories: [], locations: [], levels: [], types: [] }; setTimeout(() => ScrollTrigger.refresh(), 120); },
            filtered() {
                const q = this.q.trim().toLowerCase();
                return this.jobs.filter(j => {
                    const matchQ = !q || [j.title, j.description, ...(j.tags||[])].join(' ').toLowerCase().includes(q);
                    const matchC = this.selected.categories.length === 0 || this.selected.categories.includes(j.category);
                    const matchL = this.selected.locations.length === 0 || this.selected.locations.includes(j.location);
                    const matchLv = this.selected.levels.length === 0 || this.selected.levels.includes(j.level);
                    const matchT = this.selected.types.length === 0 || this.selected.types.includes(j.type);
                    return matchQ && matchC && matchL && matchLv && matchT;
                });
            },
        };
    }

    document.addEventListener('DOMContentLoaded', () => {
        const ids = Alpine.store('careers')?.ids || {};

        // Job cards stagger in
        gsap.utils.toArray('#jobs-grid .card-animate').forEach((el, i) => {
            gsap.from(el, {
                y: 24,
                opacity: 0,
                duration: 0.6,
                ease: 'power2.out',
                delay: i * 0.05,
                scrollTrigger: { trigger: el, start: 'top 90%' }
            });
        });

        // Parallax hero (desktop)
        const mm = gsap.matchMedia();
        mm.add('(min-width: 1024px)', () => {
            const tl = gsap.timeline({
                scrollTrigger: {
                    trigger: '#careers-root',
                    start: 'top top',
                    end: '+=400',
                    scrub: true
                }
            });
            if (ids.title) tl.to('#' + ids.title, { yPercent: -10 }, 0);
            if (ids.sub) tl.to('#' + ids.sub, { yPercent: -16 }, 0);
            if (ids.stat) tl.to('#' + ids.stat, { yPercent: -22 }, 0);
        });

        // Cleanup
        window.addEventListener('unload', () => {
            ScrollTrigger.getAll().forEach(t => t.kill());
        });
    });
</script>
@endpush