@extends('frontend::layouts.master')

@section('content')
    @php
        $careerPage = $data['career']['page'] ?? [];
        $careerHeroImage = !empty(trim((string) ($careerPage['image'] ?? '')))
            ? $careerPage['image']
            : asset('modules/frontend/images/bg/bg-image-section-01.png');
        $heroButtonUrl = trim((string) ($careerPage['link'] ?? ''));
        $showHeroButton = $heroButtonUrl !== '';
        $heroButtonOpenInNewTab = $showHeroButton && (str_starts_with($heroButtonUrl, 'http://') || str_starts_with($heroButtonUrl, 'https://'));
    @endphp
    <x-frontend::page-hero title="{{ $careerPage['name'] ?? 'Career' }}" :image="$careerHeroImage" :showButton="$showHeroButton" buttonLabel="View More" buttonUrl="{{ $heroButtonUrl }}" :buttonOpenInNewTab="$heroButtonOpenInNewTab">
        <p>{!! _html($careerPage['desc'] ?? '') !!}</p>
    </x-frontend::page-hero>

    <section class="relative py-12 lg:py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto space-y-16 lg:space-y-20">
            @if (!empty($data['career']['list']))
                @foreach ($data['career']['list'] as $career)
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-14 items-center">
                        <div class="relative rounded-3xl overflow-hidden bg-white/5 border border-white/10 aspect-[16/9]">
                            <img src="{{ check_file($career['image']) }}" alt="{{ $career['name'] }}" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-br from-black/30 via-black/10 to-transparent"></div>
                        </div>

                        <div class="space-y-4 lg:space-y-6">
                            <p class="text-sm font-semibold tracking-[0.25em] uppercase text-le-primary">
                                {{ $career['text'] }}
                            </p>
                            <div>
                                <h2 class="text-3xl md:text-4xl font-bold leading-tight">
                                    {{ $career['name'] }}
                                </h2>
                            </div>
                            <p class="text-sm md:text-base text-gray-300 leading-relaxed max-w-xl">
                                {{ $career['desc'] }}
                            </p>
                        </div>
                    </div>
                @endforeach
            @endif

            {{-- Middle: Benefits --}}
            <div class="space-y-8">
                <div class="max-w-3xl">
                    <p class="text-sm font-semibold tracking-[0.25em] uppercase text-le-primary">
                        {{ $data['benefit']['page']['text'] ?? 'Why L&E Beyond' }}
                    </p>
                    <h3 class="mt-2 text-2xl md:text-3xl lg:text-4xl font-bold uppercase">
                        {{ $data['benefit']['page']['name'] ?? 'The Benefits' }}
                    </h3>
                    <p class="mt-4 text-sm md:text-base text-gray-300 leading-relaxed">
                        {{ $data['benefit']['page']['desc'] ?? '' }}
                    </p>
                </div>
                @if (!empty($data['benefit']['list']))
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                        @foreach ($data['benefit']['list'] as $benefit)
                            <div class="flex flex-col rounded-3xl bg-white/5 border border-white/10 px-6 py-8 space-y-4">
                                <div class="flex items-center justify-center rounded-2xl bg-white/10 overflow-hidden aspect-video mb-4">
                                    <img src="{{ check_file($benefit['image']) }}" alt="{{ $benefit['name'] }}" class="w-full h-full object-cover">
                                </div>
                                <h4 class="text-lg font-semibold tracking-[0.25em] uppercase">
                                    {{ $benefit['name'] }}
                                </h4>
                                <p class="text-xs md:text-sm text-gray-400 leading-relaxed">
                                    {{ $benefit['desc'] }}
                                </p>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- Growth --}}
            <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)] gap-10 lg:gap-14 items-center">
                <div class="space-y-4 lg:space-y-6 order-2 lg:order-1">
                    <p class="text-sm font-semibold tracking-[0.25em] uppercase text-le-primary">
                        {{ $data['growth']['page']['text'] ?? 'Why L&E Beyond' }}
                    </p>
                    <h3 class="text-2xl md:text-3xl lg:text-4xl font-bold uppercase">
                        {{ $data['growth']['page']['name'] ?? 'The Growth' }}
                    </h3>
                    <p class="text-sm md:text-base text-gray-300 leading-relaxed">
                        {{ $data['growth']['page']['desc'] ?? '' }}
                    </p>
                </div>

                <div class="relative rounded-3xl overflow-hidden bg-white/5 border border-white/10 aspect-[4/5] order-1 lg:order-2">
                    <img src="{{ check_file($data['growth']['page']['image']) }}" alt="{{ $data['growth']['page']['name'] }}" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-br from-black/30 via-black/10 to-transparent"></div>
                </div>
            </div>

            {{-- Open Positions --}}
            @if (!empty($data['growth']['list']))
                <div class="space-y-8">
                    <h3 class="text-center text-2xl md:text-3xl lg:text-4xl font-bold uppercase tracking-[0.3em]">
                        {{ __('field.open_positions') }}
                    </h3>
                    <div class="space-y-4 max-w-5xl mx-auto">
                        @foreach ($data['growth']['list'] as $growth)
                            <details class="group rounded-3xl bg-white/5 border border-white/10 overflow-hidden" @if ($loop->first) open @endif>
                                <summary class="flex items-center justify-between px-6 md:px-8 py-4 md:py-5 bg-white/5 cursor-pointer">
                                    <div class="space-y-1">
                                        <p class="text-xs md:text-sm text-gray-300">
                                            {{ $growth['publish_at'] ?? '' }} {{ !empty($growth['publish_at']) && !empty($growth['text']) ? '·' : '' }} {{ $growth['text'] ?? '' }}
                                        </p>
                                        <p class="text-sm md:text-base font-medium">
                                            {{ $growth['name'] }}
                                        </p>
                                    </div>
                                    <span class="ml-4 flex-shrink-0 w-8 h-8 rounded-full border border-white/30 flex items-center justify-center group-open:rotate-180 transition-transform">
                                        <i class="ph ph-caret-down text-sm"></i>
                                    </span>
                                </summary>

                                @if (!empty($growth['detail']))
                                    <div class="px-6 md:px-8 py-6 space-y-6 text-xs md:text-sm text-gray-300 leading-relaxed">
                                        {!! _html($growth['detail'] ?? '') !!}
                                    </div>
                                @endif
                            </details>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Bottom CTA bar --}}
            {!! _html($data['growth']['page']['detail'] ?? '') !!}
            {{-- <div class="rounded-3xl border border-white/10 bg-white/5 px-6 md:px-10 py-6 md:py-8 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                <div class="flex items-start gap-4 w-full md:w-1/2">
                    <div class="mt-1 flex h-9 w-9 items-center justify-center rounded-full bg-white/10 border border-white/20">
                        <i class="ph ph-envelope text-sm"></i>
                    </div>
                    <div>
                        <p class="text-xs md:text-sm text-gray-400">
                            To Apply, Please Send Full Resumes With Your Last and Expected Salary To
                        </p>
                        <a href="mailto:hr05-le@lighting.co.th" class="mt-2 inline-flex items-center gap-2 text-sm md:text-base font-medium hover:text-le-primary transition-colors">
                            hr05-le@lighting.co.th
                        </a>
                    </div>
                </div>

                <div class="flex items-start gap-4 w-full md:w-1/2">
                    <div class="mt-1 flex h-9 w-9 items-center justify-center rounded-full bg-white/10 border border-white/20">
                        <i class="ph ph-phone text-sm"></i>
                    </div>
                    <div>
                        <p class="text-xs md:text-sm text-gray-400">
                            For Any Questions Please Contact To
                        </p>
                        <a href="tel:+6622488133" class="mt-2 inline-flex items-center gap-2 text-sm md:text-base font-medium hover:text-le-primary transition-colors">
                            (+66) 2 248 8133
                        </a>
                    </div>
                </div>
            </div> --}}
        </div>
    </section>
@endsection