@extends('jobs.layout')

@section('title', 'JULISTAH JOBS — Find Your Next Opportunity')
@section('meta_description', 'Discover jobs from verified employers across Kenya, create your career profile, and manage applications in one place.')

@section('content')
<main class="landing">
    <section class="preview-hero" @if (filled($siteSettings?->hero_image_path)) style="background-image:linear-gradient(115deg,rgba(7,34,64,.96),rgba(10,59,105,.87) 62%,rgba(11,155,75,.50)),url('{{ route('site.settings.asset', 'hero') }}')" @endif>
        <div class="preview-container preview-hero-grid">
            <div class="preview-hero-copy">
                <span class="preview-badge">KENYA'S JOB &amp; CAREER PLATFORM</span>
                <h1>{{ $siteSettings?->tagline ?: 'Find Your Next Opportunity' }}</h1>
                <p>{{ $siteSettings?->hero_description ?: 'Discover jobs, connect with employers, build your career and take your next professional step with JULISTAH JOBS.' }}</p>
                

                <form class="preview-search" method="GET" action="{{ route('jobs.index') }}">
                    <label><span class="sr-only">Job title, keyword, or company</span><input name="q" placeholder="Job title, keyword or company"></label>
                    <label><span class="sr-only">County</span><select name="county_id"><option value="">Select County</option>@foreach ($counties as $county)<option value="{{ $county->id }}">{{ $county->name }}</option>@endforeach</select></label>
                    <label><span class="sr-only">Category</span><select name="category_id"><option value="">Select Category</option>@foreach ($categories as $category)<option value="{{ $category->id }}">{{ $category->name }}</option>@endforeach</select></label>
                    <button type="submit">⌕ &nbsp;Search jobs</button>
                </form>
                @if ($categories->isNotEmpty())
                    <div class="preview-popular"><strong>Popular:</strong>@foreach ($categories->take(5) as $category)<a href="{{ route('jobs.index', ['category_id' => $category->id]) }}">{{ $category->name }}</a>@endforeach</div>
                @endif
            </div>
            <aside class="preview-hero-card">
                <span class="preview-card-eyebrow">YOUR NEXT CHAPTER</span>
                <h2>Build your career with confidence.</h2>
                <p>Create one professional profile and use it to discover opportunities that match your skills, location and career goals.</p>
                <a href="{{ route('seeker.register') }}" class="preview-card-link">Create your free profile <span aria-hidden="true">→</span></a>
                <div class="preview-stats">
                    <div><strong>{{ number_format($openJobCount) }}</strong><small>Open jobs</small></div>
                    <div><strong>{{ number_format($verifiedEmployerCount) }}</strong><small>Employers</small></div>
                    <div><strong>{{ number_format($countyCount) }}</strong><small>Counties</small></div>
                </div>
            </aside>
        </div>
    </section>

    <section class="preview-section" id="categories">
        <div class="preview-container">
            <div class="preview-section-head"><div><span class="preview-overline">Find the right fit</span><h2>Browse jobs by category</h2></div><a href="{{ route('jobs.index') }}">View all jobs <span aria-hidden="true">→</span></a></div>
            @if ($categories->isNotEmpty())
                <div class="preview-categories">
                    @foreach ($categories as $category)
                        <a class="preview-category" href="{{ route('jobs.index', ['category_id' => $category->id]) }}">
                            <span class="preview-category-icon" aria-hidden="true">{{ ['💻','💼','📊','🛠️','🎓','🏥','🌱','🚚','🎨','✦'][$loop->index % 10] }}</span>
                            <strong>{{ $category->name }}</strong>
                            <small>{{ number_format($category->job_postings_count) }} {{ $category->job_postings_count === 1 ? 'job' : 'jobs' }}</small>
                        </a>
                    @endforeach
                </div>
            @else
                <div class="preview-empty">Job categories are being prepared. You can still browse all current openings.</div>
            @endif
        </div>
    </section>

    <section class="preview-jobs" id="jobs">
        <div class="preview-container">
            <div class="preview-section-head"><div><span class="preview-overline">Fresh opportunities</span><h2>Recently posted jobs</h2><p>Current openings from verified employers.</p></div><a href="{{ route('jobs.index') }}">View all jobs <span aria-hidden="true">→</span></a></div>
            @if ($featuredJobs->isNotEmpty())
                <div class="preview-job-grid">
                    @foreach ($featuredJobs as $job)
                        <a class="preview-job" href="{{ route('jobs.show', $job) }}">
                            <img class="preview-job-image" src="{{ $job->cover_image_path ? route('content.image', ['type' => 'job', 'record' => $job->id]) : asset('images/job-listing-default.png') }}" alt="" loading="lazy">
                            <span class="preview-company">{{ $job->employer->company_name }}</span>
                            <h3>{{ $job->title }}</h3>
                            <div class="preview-job-meta"><span>⌖ {{ collect([$job->town, $job->county?->name])->filter()->join(', ') ?: 'Flexible location' }}</span><span>{{ str($job->employment_type)->replace('_', ' ')->title() }}</span></div>
                            @if ($job->category)<span class="preview-job-tag">{{ $job->category->name }}</span>@endif
                            <div class="preview-job-bottom"><span>{{ str($job->work_mode)->replace('_', ' ')->title() }}</span>@if ($job->salary_min || $job->salary_max)<strong>{{ $job->salary_currency }} {{ $job->salary_min ? number_format((float) $job->salary_min) : '—' }} – {{ $job->salary_max ? number_format((float) $job->salary_max) : '—' }}</strong>@endif</div>
                        </a>
                    @endforeach
                </div>
            @else
                <div class="preview-empty"><strong>New opportunities are on the way.</strong><br>Browse the job listings again soon or create an account to get started.</div>
            @endif
        </div>
    </section>

    <section class="preview-section" id="about">
        <div class="preview-container">
            <div class="preview-section-head"><div><span class="preview-overline">One platform, useful tools</span><h2>Everything you need for your next career move</h2><p>Practical tools for finding work and managing the hiring journey.</p></div></div>
            <div class="preview-features">
                <article><span>🔎</span><strong>Smart job search</strong><p>Search by title, county, category and workplace.</p></article>
                <article><span>👤</span><strong>Professional profile</strong><p>Show employers your skills, education and experience.</p></article>
                <article><span>📄</span><strong>Applications &amp; CVs</strong><p>Apply for roles and keep your documents together.</p></article>
                <article><span>🔔</span><strong>Job alerts</strong><p>Save a search and hear about matching opportunities.</p></article>
                <article><span>🏢</span><strong>Verified employers</strong><p>Explore opportunities from reviewed company profiles.</p></article>
                <article><span>📋</span><strong>Application tracking</strong><p>Follow your applications as employers review them.</p></article>
            </div>
        </div>
    </section>

    @if ($testimonials->isNotEmpty())
        <section class="preview-section preview-testimonials">
            <div class="preview-container">
                <div class="preview-section-head"><div><span class="preview-overline">Community voices</span><h2>Career journeys, shared</h2></div><a href="{{ route('testimonials') }}">More stories <span aria-hidden="true">→</span></a></div>
                <div class="preview-testimonial-grid">
                    @foreach ($testimonials as $testimonial)
                        <article class="preview-testimonial"><span class="preview-quote" aria-hidden="true">“</span><p>{{ $testimonial->quote }}</p><div>@if ($testimonial->image_path)<img src="{{ route('content.image', ['type' => 'testimonial', 'record' => $testimonial->id]) }}" alt="">@endif<strong>{{ $testimonial->name }}</strong><small>{{ collect([$testimonial->role, $testimonial->company])->filter()->join(' · ') }}</small></div></article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    @if ($articles->isNotEmpty())
        <section class="preview-section" id="blog">
            <div class="preview-container">
                <div class="preview-section-head"><div><span class="preview-overline">Career &amp; jobs blog</span><h2>Ideas for your next step</h2><p>Practical advice from the JULISTAH JOBS team.</p></div><a href="{{ route('blog.index') }}">Visit the blog <span aria-hidden="true">→</span></a></div>
                <div class="preview-blog-grid">
                    @foreach ($articles as $article)
                        <a class="preview-blog-card" href="{{ route('blog.show', $article->slug) }}">
                            @if ($article->category)<a class="preview-blog-category" href="{{ route('blog.category', $article->category->slug) }}">{{ $article->category->name }}</a>@endif
                            @if ($article->cover_image_path)<img src="{{ route('blog.cover', $article->slug) }}" alt="" loading="lazy">@else<span class="preview-blog-placeholder" aria-hidden="true">J</span>@endif
                            <div><small>{{ $article->published_at?->format('d M Y') ?: $article->created_at->format('d M Y') }}</small><h3>{{ $article->title }}</h3>@if ($article->excerpt)<p>{{ $article->excerpt }}</p>@endif</div>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="preview-cta" id="employers">
        <div><span class="preview-overline">For employers</span><h2>Find the people who move your business forward.</h2><p>Create a company profile, publish opportunities, and manage applications in one place.</p></div>
        <a class="preview-button" href="{{ route('employer.register') }}">Create employer account <span aria-hidden="true">→</span></a>
    </section>
</main>
@endsection