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

@push('styles')
    <link type="text/css" href="{{ asset('assets/libs/toastr/build/toastr.min.css') }}" rel="stylesheet">
    <script>
        window.__recaptcha_sitekey = "{{ $page_init['setting']['recapcha'] ?? '' }}";
    </script>
    <script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
@endpush

@section('content')
    @php
        $sp_word = explode(' ', $link_career['name']);
        $last_word = end($sp_word);
        $title = str_replace($last_word, '', $link_career['name']);
        if (empty($title)) {
            $title = $link_career['name'];
            $last_word = '';
        }
    @endphp

    @include('frontend::components.page-hero', [
        'title' => $title,
        'titleHighlight' => $last_word,
        'subtitle' => $link_career['desc'] ?? '',
        'image' => !empty($link_career['image']) ? asset($link_career['image']) : '',
        'imageAlt' => $link_career['name'] ?? '',
        'imagePosition' => 'object-center',
    ])

    {{-- Benefits Section --}}
    @if (!empty($careers['detail']))
        <section class="relative overflow-hidden py-16 bg-white">
            @include('frontend::components.tsic-ellipse-decoration')
            <div class="container relative z-10 mx-auto px-4 lg:px-8">
                {!! $careers['detail'] !!}

                {{-- Save Class: Why Work at TSIC? Content for input into a text editor --}}
                {{--
                <!-- <div class="container relative z-10 mx-auto px-4 lg:px-8">
                    <div class="text-center mb-12">
                        <h2 class="text-3xl lg:text-4xl font-bold mb-4">Why Work at TSIC?</h2>
                        <p class="text-[var(--muted-foreground)] text-lg max-w-2xl mx-auto">
                            We believe in investing in our people and creating an environment where everyone can thrive.
                        </p>
                    </div>
                    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                        <div class="bg-tsic-blue/5 p-6 rounded-[2rem] border-2 border-tsic-blue/25 shadow-[0_16px_36px_-24px_rgba(15,17,207,0.45)] hover:-translate-y-1 transition-all duration-300">
                            <img class="w-12 h-12 object-contain" src="../../modules/frontend/images/icon/icon-box.svg" alt="Product icon" width="48" height="48" />
                            <h3 class="font-bold text-lg mb-2 text-tsic-blue">Competitive Salary</h3>
                            <p class="text-[var(--muted-foreground)] text-sm">Market-leading compensation packages</p>
                        </div>
                        <div class="bg-tsic-green/5 p-6 rounded-[2rem] border-2 border-tsic-green/25 shadow-[0_16px_36px_-24px_rgba(51,153,51,0.45)] hover:-translate-y-1 transition-all duration-300">
                            <img class="w-12 h-12 object-contain" src="../../modules/frontend/images/icon/icon-box.svg" alt="Product icon" width="48" height="48" />
                            <h3 class="font-bold text-lg mb-2 text-tsic-dark-green">Health Insurance</h3>
                            <p class="text-[var(--muted-foreground)] text-sm">Comprehensive medical and dental coverage</p>
                        </div>
                        <div class="bg-tsic-blue/5 p-6 rounded-[2rem] border-2 border-tsic-blue/25 shadow-[0_16px_36px_-24px_rgba(15,17,207,0.45)] hover:-translate-y-1 transition-all duration-300">
                            <img class="w-12 h-12 object-contain" src="../../modules/frontend/images/icon/icon-box.svg" alt="Product icon" width="48" height="48" />
                            <h3 class="font-bold text-lg mb-2 text-tsic-blue">Career Growth</h3>
                            <p class="text-[var(--muted-foreground)] text-sm">Professional development opportunities</p>
                        </div>
                        <div class="bg-tsic-green/5 p-6 rounded-[2rem] border-2 border-tsic-green/25 shadow-[0_16px_36px_-24px_rgba(51,153,51,0.45)] hover:-translate-y-1 transition-all duration-300">
                            <img class="w-12 h-12 object-contain" src="../../modules/frontend/images/icon/icon-box.svg" alt="Product icon" width="48" height="48" />
                            <h3 class="font-bold text-lg mb-2 text-tsic-dark-green">Performance Bonus</h3>
                            <p class="text-[var(--muted-foreground)] text-sm">Annual bonuses based on performance</p>
                        </div>
                    </div>
                </div> -->
                --}}
            </div>
        </section>
    @endif

    <livewire:frontend::section.career slug_uid="{{ $page_init['slug_uid'] ?? '' }}" cur_page="{{ $opt['cur_page'] ?? 1 }}" />

    {{-- CTA Section --}}
    @include('frontend::components.cta-section')
@endsection

@push('scripts')
    <script src="{{ asset('assets/libs/toastr/build/toastr.min.js') }}"></script>
    {{ module_vite('build-frontend', 'resources/assets/js/career.js') }}
    <script>
        document.addEventListener('livewire:init', () => {
            Livewire.on('toastMessageSuccess', (e) => {
                toastr.success(e[0] ?? '');
            });
            Livewire.on('toastMessageError', (e) => {
                toastr.error(e[0] ?? '');
            });
        });
    </script>
@endpush