@extends('layouts.app')
@section('title', 'JOBES — Find Your Dream Job & Choose Your Level Best Career')
@section('meta_description', '2400+ Positions are waiting for you. Browse jobs, apply to top companies, and build your career today.')

@section('content')

<!-- ═══════════════════════════ HERO SECTION ═══════════════════════════ -->
<section class="hero-section position-relative py-5" style="background: radial-gradient(circle at 80% 20%, #115e59 0%, #0f766e 35%, #0f172a 100%); min-height: 80vh; display:flex; align-items:center; overflow:hidden;">

    <!-- Decorative mesh of light -->
    <div style="position:absolute;top:-10%;right:10%;width:600px;height:600px;background:radial-gradient(circle,rgba(45,209,197,0.1) 0%,transparent 70%);border-radius:50%;filter:blur(50px);"></div>
    <div style="position:absolute;bottom:-10%;left:-5%;width:400px;height:400px;background:radial-gradient(circle,rgba(6,182,212,0.06) 0%,transparent 70%);border-radius:50%;filter:blur(30px);"></div>

    <div class="container position-relative py-4">
        <div class="row align-items-center g-5">
            <div class="col-lg-7 col-md-12">
                <div class="animate__animated animate__fadeInLeft">
                    <span class="badge px-3 py-2 mb-4 d-inline-flex align-items-center gap-2" style="background:rgba(45,209,197,0.12);border:1px solid rgba(45,209,197,0.3);color:#2fd1c5;border-radius:30px;font-size:0.88rem;font-weight:700;">
                        <i class="fas fa-bolt text-warning animate__animated animate__flash animate__infinite animate__slower"></i> {{ number_format($stats['total_jobs'] * 12 + 2400) }}+ Active Positions Waiting
                    </span>

                    <h1 class="display-3 fw-900 mb-4 lh-sm text-white" style="font-weight:900; letter-spacing:-1.5px;">
                        To Choose Your Level<br>
                        Best <span style="background:linear-gradient(135deg, #2fd1c5 0%, #06b6d4 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:900;">Dream Career.</span>
                    </h1>
                    
                    <p class="lead mb-5" style="color:#94a3b8; font-size:1.15rem; max-width:550px; font-weight:500; line-height:1.7;">
                        {{ number_format($stats['total_jobs'] * 12 + 2400) }}+ Positions are waiting for you. Browse curated jobs across {{ number_format($stats['total_categories']) }} high-paying categories!
                    </p>

                    <!-- Advanced Search Bar -->
                    <form action="{{ route('jobs.index') }}" method="GET" class="search-box-form">
                        <div class="search-box-wrapper d-flex flex-column flex-md-row gap-2 p-2 bg-white rounded-4 shadow-lg" style="border:1px solid #e2e8f0;">
                            <div class="flex-fill d-flex align-items-center gap-2 px-3 py-2 py-md-0 border-right-custom">
                                <i class="fas fa-search text-teal-accent fs-5"></i>
                                <input type="text" name="q" placeholder="Job title, skills, keyword..." class="form-control border-0 bg-transparent text-dark p-0 focus-none" style="outline:none; box-shadow:none; font-weight:500;" id="hero-search">
                            </div>
                            <div class="flex-fill d-flex align-items-center gap-2 px-3 py-2 py-md-0">
                                <i class="fas fa-map-marker-alt text-teal-accent fs-5"></i>
                                <input type="text" name="location" placeholder="City or remote location" class="form-control border-0 bg-transparent text-dark p-0 focus-none" style="outline:none; box-shadow:none; font-weight:500;" id="hero-location">
                            </div>
                            <button type="submit" class="btn btn-primary-gradient px-4 py-3 fw-700 rounded-3" style="min-width:160px; font-size:0.95rem;">
                                <i class="fas fa-search me-2"></i>Search Job
                            </button>
                        </div>

                        <!-- Popular searches -->
                        <div class="mt-4 d-flex align-items-center gap-2 flex-wrap">
                            <span class="text-white-50" style="font-size:0.88rem; font-weight:600;">Popular Search:</span>
                            @foreach(['PHP Developer','UI/UX Designer','Laravel','React JS','Product Manager'] as $tag)
                            <a href="{{ route('jobs.index', ['q' => $tag]) }}" class="popular-search-tag badge px-3 py-2 text-decoration-none">
                                {{ $tag }}
                            </a>
                            @endforeach
                        </div>
                    </form>
                </div>
            </div>

            <!-- Floating Collage Graphic -->
            <div class="col-lg-5 col-md-12 d-none d-lg-block animate__animated animate__fadeInRight">
                <div class="position-relative collage-wrapper">
                    <!-- Outer glows -->
                    <div class="position-absolute" style="top:-30px; left:-30px; width:450px; height:450px; background:radial-gradient(circle, rgba(13,148,136,0.2) 0%, transparent 60%); border-radius:50%; z-index:-1;"></div>
                    
                    <!-- Collage Image -->
                    <img src="{{ asset('images/hero_collage.png') }}" alt="JOBES Professionals" class="img-fluid rounded-5 shadow-2xl hover-zoom-slow" style="border: 4px solid rgba(255,255,255,0.1); width:100%; object-fit:cover;">
                    
                    <!-- Floating Stat Badge -->
                    <div class="floating-badge bg-white p-3 rounded-4 shadow-lg animate__animated animate__bounce animate__infinite animate__slower d-flex align-items-center gap-3">
                        <div class="badge-icon bg-success-light text-success rounded-circle d-flex align-items-center justify-content-center" style="width:48px; height:48px;">
                            <i class="fas fa-briefcase fs-5"></i>
                        </div>
                        <div>
                            <div class="fw-800 text-dark fs-5">2400+</div>
                            <div class="text-muted small fw-600">Active Jobs Available</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════ FLOATING STATS BAR ═══════════════════════════ -->
<section class="stats-bar-section position-relative" style="margin-top:-60px; z-index:100;">
    <div class="container">
        <div class="card bg-white border-0 shadow-xl rounded-4 p-4 p-md-5">
            <div class="row g-4 text-center">
                <div class="col-lg-3 col-md-6 border-end-custom-grey">
                    <div class="d-flex align-items-center justify-content-center gap-3">
                        <div class="stat-circle" style="background:#ccfbf1; color:#0d9488;">
                            <i class="fas fa-clipboard-list fs-4"></i>
                        </div>
                        <div class="text-start">
                            <h3 class="stat-title mb-0">28,000+</h3>
                            <p class="text-muted small mb-0 fw-600">Live Jobs Listed</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 border-end-custom-grey">
                    <div class="d-flex align-items-center justify-content-center gap-3">
                        <div class="stat-circle" style="background:#e0f2fe; color:#0284c7;">
                            <i class="fas fa-building fs-4"></i>
                        </div>
                        <div class="text-start">
                            <h3 class="stat-title mb-0">{{ $stats['total_companies'] * 15 + 120 }}+</h3>
                            <p class="text-muted small mb-0 fw-600">Top Recruiters</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 border-end-custom-grey">
                    <div class="d-flex align-items-center justify-content-center gap-3">
                        <div class="stat-circle" style="background:#fef9c3; color:#ca8a04;">
                            <i class="fas fa-users fs-4"></i>
                        </div>
                        <div class="text-start">
                            <h3 class="stat-title mb-0">75,000+</h3>
                            <p class="text-muted small mb-0 fw-600">Happy Candidates</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="d-flex align-items-center justify-content-center gap-3">
                        <div class="stat-circle" style="background:#fee2e2; color:#dc2626;">
                            <i class="fas fa-bolt fs-4"></i>
                        </div>
                        <div class="text-start">
                            <h3 class="stat-title mb-0">150+</h3>
                            <p class="text-muted small mb-0 fw-600">New Jobs Daily</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════ TRENDING CATEGORIES ═══════════════════════════ -->
<section class="py-6 mt-4" style="background:#ffffff;">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h2 class="section-title text-dark">Trending Jobs <span class="gradient-text">Category</span></h2>
            <p class="section-subtitle">Choose your best job category from here today!</p>
        </div>

        <div class="row g-4">
            @if($categories->count())
                @php
                    $colors = [
                        ['bg' => 'rgba(13,148,136,0.08)', 'text' => '#0d9488'],
                        ['bg' => 'rgba(2,132,199,0.08)', 'text' => '#0284c7'],
                        ['bg' => 'rgba(168,85,247,0.08)', 'text' => '#a855f7'],
                        ['bg' => 'rgba(234,179,8,0.08)', 'text' => '#eab308'],
                        ['bg' => 'rgba(244,63,94,0.08)', 'text' => '#f43f5e'],
                        ['bg' => 'rgba(16,185,129,0.08)', 'text' => '#10b981'],
                        ['bg' => 'rgba(249,115,22,0.08)', 'text' => '#f97316'],
                        ['bg' => 'rgba(99,102,241,0.08)', 'text' => '#6366f1']
                    ];
                @endphp
                @foreach($categories as $i => $cat)
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <a href="{{ route('jobs.index', ['category' => $cat->id]) }}" class="category-card shadow-sm border-0 d-flex align-items-center gap-3 p-4 bg-white rounded-4 text-decoration-none transition-all-300">
                            <div class="category-icon-round" style="background:{{ $colors[$i % count($colors)]['bg'] }}; color:{{ $colors[$i % count($colors)]['text'] }};">
                                {{ $cat->icon ?? '💼' }}
                            </div>
                            <div class="text-start">
                                <h5 class="fw-700 text-dark mb-1" style="font-size:1.02rem;">{{ $cat->name }}</h5>
                                <p class="text-muted small mb-0 fw-600">{{ $cat->jobs_count ?? 12 }} Open Positions</p>
                            </div>
                        </a>
                    </div>
                @endforeach
            @else
                <!-- Realistic fallback grid -->
                @foreach([
                    ['💻','Information Technology','145 Open Jobs'],
                    ['📊','Finance & Banking','98 Open Jobs'],
                    ['🎨','Design & Creative','67 Open Jobs'],
                    ['📈','Marketing & Sales','84 Open Jobs'],
                    ['👥','Human Resources','45 Open Jobs'],
                    ['🏥','Healthcare','38 Open Jobs'],
                    ['📚','Education & Academic','29 Open Jobs'],
                    ['📞','Customer Service','54 Open Jobs']
                ] as $i => $item)
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <a href="{{ route('jobs.index') }}" class="category-card shadow-sm border-0 d-flex align-items-center gap-3 p-4 bg-white rounded-4 text-decoration-none transition-all-300">
                            <div class="category-icon-round" style="background:rgba(13,148,136,0.08); color:#0d9488;">
                                {{ $item[0] }}
                            </div>
                            <div class="text-start">
                                <h5 class="fw-700 text-dark mb-1" style="font-size:1.02rem;">{{ $item[1] }}</h5>
                                <p class="text-muted small mb-0 fw-600">{{ $item[2] }}</p>
                            </div>
                        </a>
                    </div>
                @endforeach
            @endif
        </div>

        <div class="text-center mt-5">
            <a href="{{ route('jobs.index') }}" class="btn btn-outline-glass px-5 py-3 fw-700 rounded-3">
                Explore More Category <i class="fas fa-arrow-right ms-2 small"></i>
            </a>
        </div>
    </div>
</section>

<!-- ═══════════════════════════ JOBES LATEST JOBS ═══════════════════════════ -->
<section class="py-6" style="background:#f8fafc;">
    <div class="container py-4">
        <div class="d-flex justify-content-between align-items-end mb-5">
            <div class="text-start">
                <h2 class="section-title text-dark">JOBES <span class="gradient-text">Latest Job</span></h2>
                <p class="section-subtitle">Fresh job opportunities matching your criteria.</p>
            </div>
            <a href="{{ route('jobs.index') }}" class="btn btn-outline-glass px-4 py-2.5 rounded-3 fw-600">
                Browse Jobs <i class="fas fa-arrow-right ms-2"></i>
            </a>
        </div>

        <div class="row g-4">
            @if($latestJobs->count())
                @foreach($latestJobs as $job)
                    <div class="col-lg-4 col-md-6">
                        <div class="card shadow-sm border-0 p-4 rounded-4 bg-white position-relative hover-lift transition-all-300">
                            @if($job->is_urgent)
                                <span class="badge position-absolute" style="top:1.2rem; left:1.2rem; background:rgba(239,68,68,0.1); color:#ef4444; border-radius:20px; font-weight:700; font-size:0.75rem; border: 1px solid rgba(239,68,68,0.2);">Urgent</span>
                            @elseif($job->is_featured)
                                <span class="badge position-absolute" style="top:1.2rem; left:1.2rem; background:rgba(245,158,11,0.1); color:#f59e0b; border-radius:20px; font-weight:700; font-size:0.75rem; border: 1px solid rgba(245,158,11,0.2);">Featured</span>
                            @endif

                            <div class="d-flex align-items-center justify-content-between mb-4 mt-2">
                                <div class="d-flex align-items-center gap-3">
                                    <img src="{{ $job->company->logo_url ?? 'https://ui-avatars.com/api/?name=C&background=0d9488&color=fff' }}" alt="{{ $job->company->name ?? 'Company' }}" class="rounded-circle shadow-sm" style="width:48px; height:48px; object-fit:contain; border:1px solid #f1f5f9;">
                                    <div>
                                        <h6 class="fw-700 text-dark mb-0">{{ $job->company->name ?? 'Company Name' }}</h6>
                                        <p class="text-muted small mb-0 fw-600"><i class="fas fa-map-marker-alt me-1"></i>{{ $job->location->city ?? $job->city ?? 'Remote' }}</p>
                                    </div>
                                </div>
                                <button class="btn btn-save-job rounded-circle" data-id="{{ $job->id }}" style="background:#f1f5f9; color:#475569; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:none; transition:all 0.2s;" title="Save Job">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>

                            <h5 class="fw-800 text-dark mb-3 hover-teal" style="font-size:1.15rem;"><a href="{{ route('jobs.show', $job->slug) }}" class="text-decoration-none text-dark">{{ $job->title }}</a></h5>

                            <p class="text-muted mb-4 text-line-clamp-2" style="font-size:0.88rem; font-weight:500;">
                                {{ Str::limit(strip_tags($job->description), 100) }}
                            </p>

                            <div class="d-flex align-items-center justify-content-between pt-3 border-top" style="border-top-color:#f1f5f9 !important;">
                                <div class="d-flex align-items-center gap-2">
                                    <span class="badge text-teal-accent bg-teal-accent-light" style="font-size:0.75rem; font-weight:700; border-radius:30px; padding:0.35rem 0.7rem;">{{ ucfirst($job->job_type) }}</span>
                                    <span class="text-muted small fw-600"><i class="fas fa-money-bill-wave me-1"></i>{{ $job->salary_range }}</span>
                                </div>
                                <a href="{{ route('jobs.show', $job->slug) }}" class="btn btn-primary-gradient btn-sm px-3 fw-700" style="border-radius:8px; font-size:0.8rem;">Apply Now</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <!-- Pre-populated fallback cards -->
                @for($k=0;$k<3;$k++)
                    <div class="col-lg-4 col-md-6">
                        <div class="card shadow-sm border-0 p-4 rounded-4 bg-white position-relative">
                            <span class="badge position-absolute" style="top:1.2rem; left:1.2rem; background:rgba(13,148,136,0.1); color:#0d9488; border-radius:20px; font-weight:700; font-size:0.75rem;">Full-time</span>
                            
                            <div class="d-flex align-items-center justify-content-between mb-4 mt-2">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="rounded-circle bg-teal-accent-light text-teal-accent d-flex align-items-center justify-content-center" style="width:48px; height:48px; font-weight:700;">🏢</div>
                                    <div>
                                        <h6 class="fw-700 text-dark mb-0">Mock Corp</h6>
                                        <p class="text-muted small mb-0 fw-600"><i class="fas fa-map-marker-alt me-1"></i>Mumbai, IN</p>
                                    </div>
                                </div>
                            </div>
                            
                            <h5 class="fw-800 text-dark mb-3" style="font-size:1.15rem;">Senior Software Architect</h5>
                            <p class="text-muted mb-4" style="font-size:0.88rem;">We are seeking a senior software engineer to architect high throughput microservices and dashboard interfaces.</p>
                            
                            <div class="d-flex align-items-center justify-content-between pt-3 border-top" style="border-top-color:#f1f5f9 !important;">
                                <span class="text-muted small fw-600"><i class="fas fa-money-bill-wave me-1"></i>₹12L - ₹18L</span>
                                <a href="#" class="btn btn-primary-gradient btn-sm px-3 fw-700" style="border-radius:8px; font-size:0.8rem;">Apply Now</a>
                            </div>
                        </div>
                    </div>
                @endfor
            @endif
        </div>
    </div>
</section>

<!-- ═══════════════════════════ JOBES WORKING PROCESS ═══════════════════════════ -->
<section class="py-6" style="background:#ffffff;">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h2 class="section-title text-dark">JOBES Working <span class="gradient-text">Process</span></h2>
            <p class="section-subtitle">How it works in 4 simple steps today!</p>
        </div>

        <div class="row g-4 position-relative">
            <!-- Step connectors -->
            <div class="d-none d-lg-block position-absolute" style="top:25%; left:12%; right:12%; height:2px; background:repeating-linear-gradient(to right, #cbd5e1, #cbd5e1 5px, transparent 5px, transparent 10px); z-index:1;"></div>

            @foreach([
                ['01','👤','Register Account','First, you need to sign up as a Job Seeker or Recruiter to launch your professional workspace.'],
                ['02','📝','Upload Resume','Build a stunning live resume using our layout creator or upload a pre-built PDF resume.'],
                ['03','🔍','Search Best Job','Leverage our fast filters to find active positions matching your expected salary and city.'],
                ['04','🚀','Apply Your Job','Apply with a single tap, track your application status live, and attend hiring interviews.']
            ] as $step)
                <div class="col-lg-3 col-md-6 col-sm-6 text-center position-relative" style="z-index:2;">
                    <div class="card border-0 bg-transparent h-100 p-3">
                        <div class="process-circle-wrapper position-relative mx-auto mb-4">
                            <!-- Circular Step Indicator -->
                            <div class="process-icon-circle bg-white shadow-md mx-auto d-flex align-items-center justify-content-center text-teal-accent" style="width:96px; height:96px; border-radius:50%; border:2px solid #e2e8f0; font-size:2rem; transition:all 0.3s;">
                                {{ $step[1] }}
                            </div>
                            <!-- Small Number -->
                            <span class="position-absolute translate-middle badge rounded-circle bg-primary-gradient p-2 text-white" style="top:90%; left:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.75rem; border: 2px solid #ffffff;">
                                {{ $step[0] }}
                            </span>
                        </div>
                        <h4 class="fw-800 text-dark mb-2" style="font-size:1.18rem;">{{ $step[2] }}</h4>
                        <p class="text-muted small mb-0 px-2 fw-500" style="line-height:1.6;">{{ $step[3] }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- ═══════════════════════════ OUR FEATURED JOBS ═══════════════════════════ -->
<section class="py-6" style="background:#f8fafc;">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h2 class="section-title text-dark">Our Featured <span class="gradient-text">Jobs</span></h2>
            <p class="section-subtitle">Explore featured jobs from top tier employers hiring now.</p>
        </div>

        <div class="row g-4">
            @if($featuredJobs->count())
                @foreach($featuredJobs as $job)
                    <div class="col-lg-6">
                        <div class="card shadow-sm border-0 p-4 rounded-4 bg-white position-relative hover-lift hover-shadow transition-all-300">
                            <div class="d-flex flex-column flex-sm-row align-items-start gap-4">
                                <img src="{{ $job->company->logo_url ?? 'https://ui-avatars.com/api/?name=C&background=0d9488&color=fff' }}" alt="" class="rounded-3 shadow-xs" style="width:64px; height:64px; object-fit:contain; border:1px solid #f1f5f9; background:#fff;">
                                
                                <div class="flex-fill text-start">
                                    <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                                        <h5 class="fw-800 text-dark mb-0 hover-teal" style="font-size:1.2rem;">
                                            <a href="{{ route('jobs.show', $job->slug) }}" class="text-decoration-none text-dark">{{ $job->title }}</a>
                                        </h5>
                                        <span class="badge text-teal-accent bg-teal-accent-light" style="font-size:0.7rem; font-weight:700; border-radius:20px;">{{ ucfirst($job->job_type) }}</span>
                                    </div>
                                    
                                    <p class="text-muted small mb-3 fw-600">
                                        <span class="text-dark fw-700">{{ $job->company->name ?? 'Company' }}</span> · {{ $job->location->city ?? $job->city ?? 'Remote' }}
                                    </p>
                                    
                                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 pt-3 border-top" style="border-top-color:#f1f5f9 !important;">
                                        <div class="d-flex align-items-center gap-3 text-muted small fw-600">
                                            <span><i class="fas fa-money-bill-wave me-1 text-teal-accent"></i>{{ $job->salary_range }}</span>
                                            <span><i class="far fa-clock me-1 text-teal-accent"></i>{{ $job->created_at->diffForHumans() }}</span>
                                        </div>
                                        <a href="{{ route('jobs.show', $job->slug) }}" class="btn btn-primary-gradient px-4 py-2 fw-700" style="border-radius:10px; font-size:0.85rem;">Apply Job</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <!-- Fallback list -->
                @for($j=0;$j<2;$j++)
                    <div class="col-lg-6">
                        <div class="card shadow-sm border-0 p-4 rounded-4 bg-white position-relative">
                            <div class="d-flex flex-column flex-sm-row align-items-start gap-4">
                                <div class="rounded-circle bg-teal-accent-light text-teal-accent d-flex align-items-center justify-content-center" style="width:64px; height:64px; font-weight:700; font-size:1.5rem;">🏢</div>
                                <div class="flex-fill text-start">
                                    <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                                        <h5 class="fw-800 text-dark mb-0">Lead Product Specialist</h5>
                                        <span class="badge text-teal-accent bg-teal-accent-light" style="font-size:0.75rem;">Remote</span>
                                    </div>
                                    <p class="text-muted small mb-3">TATA Consultancy Services · Mumbai, IN</p>
                                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 pt-3 border-top" style="border-top-color:#f1f5f9 !important;">
                                        <div class="text-muted small"><i class="fas fa-money-bill-wave me-1"></i>₹8L - ₹14L</div>
                                        <a href="#" class="btn btn-primary-gradient px-4 py-2 fw-700" style="border-radius:10px; font-size:0.85rem;">Apply Job</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endfor
            @endif
        </div>
    </div>
</section>

<!-- ═══════════════════════════ CALL TO ACTION MIDDLE BANNER ═══════════════════════════ -->
<section class="py-5" style="background:#ffffff;">
    <div class="container">
        <div class="card border-0 rounded-5 shadow-2xl position-relative overflow-hidden" style="background: linear-gradient(135deg, #0b1d33 0%, #0d9488 100%);">
            
            <!-- Graphic element -->
            <div style="position:absolute;top:-40%;left:-20%;width:500px;height:500px;background:radial-gradient(circle,rgba(45,209,197,0.12) 0%,transparent 60%);border-radius:50%;z-index:1;"></div>

            <div class="row align-items-center position-relative" style="z-index:2;">
                <div class="col-lg-7 text-start p-5 p-md-5 text-white">
                    <h2 class="display-5 fw-900 mb-3" style="font-weight:900; letter-spacing:-1px;">
                        Are You Looking For A <br><span style="color:#2fd1c5;">Dream Job?</span>
                    </h2>
                    <p class="lead mb-4" style="color:#94a3b8; font-size:1.1rem; max-width:500px; font-weight:500;">
                        Join 50k+ active corporate professionals, connect with India's top employers, and boost your monthly earnings.
                    </p>
                    <div class="d-flex gap-3 flex-wrap">
                        <a href="{{ route('register') }}" class="btn btn-primary-gradient px-5 py-3 fw-700 fs-6 rounded-3">Apply Now</a>
                        <a href="{{ route('contact') }}" class="btn btn-outline-glass border-white text-white px-5 py-3 fw-700 fs-6 rounded-3" style="background:rgba(255,255,255,0.05);">Contact Us</a>
                    </div>
                </div>
                
                <!-- Graphic Image overlap -->
                <div class="col-lg-5 col-md-12 text-center p-0 d-none d-lg-block position-relative align-self-end">
                    <img src="{{ asset('images/seeker_banner.png') }}" alt="Seeking Career Job" class="img-fluid" style="max-height:420px; object-fit:contain; margin-bottom:-10px; margin-top:20px; filter:drop-shadow(0 15px 30px rgba(0,0,0,0.3));">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════ TOP LEVEL RECRUITERS ═══════════════════════════ -->
<section class="py-6" style="background:#ffffff;">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h2 class="section-title text-dark">Top Level <span class="gradient-text">Recruiters</span></h2>
            <p class="section-subtitle">Work with the best. Join industry-leading organizations.</p>
        </div>

        <div class="row g-4">
            @if($featuredCompanies->count())
                @foreach($featuredCompanies as $company)
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <a href="{{ route('companies.show', $company->slug) }}" class="card shadow-sm border-0 p-4 text-center bg-white rounded-4 text-decoration-none hover-lift transition-all-300 d-block">
                            <div class="mx-auto rounded-circle d-flex align-items-center justify-content-center p-2 mb-3 bg-light shadow-sm" style="width:72px; height:72px; border:1px solid #f1f5f9;">
                                <img src="{{ $company->logo_url }}" alt="{{ $company->name }}" class="rounded-circle" style="width:56px; height:56px; object-fit:contain;">
                            </div>
                            <h5 class="text-dark fw-800 mb-1" style="font-size:1.1rem;">{{ $company->name }}</h5>
                            <p class="text-muted small mb-2 fw-600">{{ $company->industry ?? 'Technology' }}</p>
                            
                            <!-- Star Rating -->
                            <div class="d-flex justify-content-center gap-1 text-warning mb-3" style="font-size:0.8rem;">
                                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
                            </div>

                            <span class="badge text-teal-accent bg-teal-accent-light" style="font-size:0.75rem; font-weight:700; border-radius:20px; padding:0.35rem 0.85rem;">{{ $company->jobs_count ?? 2 }} Open Roles</span>
                        </a>
                    </div>
                @endforeach
            @else
                <!-- Fallback grid -->
                @foreach(['TechCorp India','InnovaLabs','FinFlow Technologies','CloudSoft Labs'] as $co)
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <div class="card shadow-sm border-0 p-4 text-center bg-white rounded-4">
                            <div class="mx-auto rounded-circle bg-light d-flex align-items-center justify-content-center mb-3" style="width:72px; height:72px; font-size:1.8rem;">🏢</div>
                            <h5 class="text-dark fw-800 mb-1" style="font-size:1.1rem;">{{ $co }}</h5>
                            <p class="text-muted small mb-2 fw-600">Enterprise IT Services</p>
                            <div class="d-flex justify-content-center gap-1 text-warning mb-3" style="font-size:0.8rem;">
                                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
                            </div>
                            <span class="badge text-teal-accent bg-teal-accent-light" style="font-size:0.75rem; font-weight:700; border-radius:20px;">8 Open Roles</span>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</section>

<!-- ═══════════════════════════ USER FEEDBACKS (TESTIMONIALS) ═══════════════════════════ -->
@if($testimonials->count())
<section class="py-6" style="background:#f8fafc;">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h2 class="section-title text-dark">Feedback Of <span class="gradient-text">Users</span></h2>
            <p class="section-subtitle">Thousands of professionals found their dream jobs here today!</p>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-9">
                <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        @foreach($testimonials as $idx => $t)
                            <div class="carousel-item {{ $idx === 0 ? 'active' : '' }}">
                                <div class="card border-0 shadow-sm p-4 p-md-5 rounded-5 text-center bg-white position-relative">
                                    <div class="position-absolute" style="top:20px; left:30px; font-size:6rem; color:rgba(13,148,136,0.06); font-family:serif; line-height:1; font-weight:900;">“</div>
                                    
                                    <p class="lead text-dark mb-4 px-md-4 style-italic" style="font-size:1.25rem; font-weight:500; line-height:1.8;">
                                        "{{ $t->content }}"
                                    </p>

                                    <!-- Rating -->
                                    <div class="d-flex justify-content-center gap-1 text-warning mb-4">
                                        @for($s=0;$s<$t->rating;$s++)
                                            <i class="fas fa-star fs-5"></i>
                                        @endfor
                                    </div>

                                    <div class="d-flex align-items-center justify-content-center gap-3">
                                        <div class="avatar-circle bg-primary-gradient text-white d-flex align-items-center justify-content-center shadow-sm" style="width:56px; height:56px; border-radius:50%; font-weight:800; font-size:1.2rem;">
                                            {{ strtoupper(substr($t->name, 0, 1)) }}
                                        </div>
                                        <div class="text-start">
                                            <h6 class="text-dark fw-800 mb-0" style="font-size:1.05rem;">{{ $t->name }}</h6>
                                            <p class="text-muted small mb-0 fw-600">{{ $t->designation }} @if($t->company)· {{ $t->company }}@endif</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    
                    <!-- Controls -->
                    <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev" style="width:50px;">
                        <span class="carousel-control-prev-icon rounded-circle bg-dark p-3 shadow-md" aria-hidden="true" style="background-size:60%;"></span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next" style="width:50px;">
                        <span class="carousel-control-next-icon rounded-circle bg-dark p-3 shadow-md" aria-hidden="true" style="background-size:60%;"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

<!-- ═══════════════════════════ TRUSTED PARTNERS ═══════════════════════════ -->
<section class="py-5" style="background:#ffffff; border-top:1px solid #f1f5f9; border-bottom:1px solid #f1f5f9;">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-around gap-4 opacity-75">
            <h5 class="fw-800 text-muted small text-uppercase tracking-wider mb-0" style="letter-spacing:1px;">Trusted Partners:</h5>
            <div class="fw-800 text-muted fs-4">Microsoft</div>
            <div class="fw-800 text-muted fs-4">ROZORPAY</div>
            <div class="fw-800 text-muted fs-4">INFOSYS</div>
            <div class="fw-800 text-muted fs-4">TATA GROUP</div>
            <div class="fw-800 text-muted fs-4">ZEPHYR CO</div>
            <div class="fw-800 text-muted fs-4">INNOVATIVE</div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════ PORTAL RECENT ARTICLES ═══════════════════════════ -->
@if(isset($latestJobs) && count($latestJobs) > 0)
<section class="py-6" style="background:#ffffff;">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h2 class="section-title text-dark">Portal Recent <span class="gradient-text">Article</span></h2>
            <p class="section-subtitle">Choose your best job tips and guides from here today!</p>
        </div>

        <div class="row g-4">
            <!-- Blog Card 1 -->
            <div class="col-lg-4 col-md-6">
                <div class="card shadow-sm border-0 rounded-4 overflow-hidden bg-white hover-lift transition-all-300">
                    <div style="height:210px; background:linear-gradient(135deg, #0f766e 0%, #1e1b4b 100%); display:flex; align-items:center; justify-content:center; color:#fff; font-size:3.5rem;">📝</div>
                    <div class="card-body p-4 text-start">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <span class="badge text-teal-accent bg-teal-accent-light" style="font-size:0.75rem; font-weight:700; padding:0.35rem 0.75rem; border-radius:30px;">Resume Tips</span>
                            <span class="text-muted small fw-600"><i class="far fa-calendar me-1"></i>May 27, 2026</span>
                        </div>
                        <h5 class="fw-800 text-dark mb-3 hover-teal" style="font-size:1.15rem; line-height:1.4;">
                            <a href="#" class="text-decoration-none text-dark">5 Ways to Make Your Resume Stand Out to Tech Scouts</a>
                        </h5>
                        <p class="text-muted small mb-4 fw-500" style="line-height:1.6;">Discover how to refine your professional profile to easily grab the attention of top technical scouts.</p>
                        <a href="#" class="fw-700 text-teal-accent text-decoration-none small">Read More <i class="fas fa-arrow-right ms-1"></i></a>
                    </div>
                </div>
            </div>

            <!-- Blog Card 2 -->
            <div class="col-lg-4 col-md-6">
                <div class="card shadow-sm border-0 rounded-4 overflow-hidden bg-white hover-lift transition-all-300">
                    <div style="height:210px; background:linear-gradient(135deg, #0284c7 0%, #0369a1 100%); display:flex; align-items:center; justify-content:center; color:#fff; font-size:3.5rem;">💻</div>
                    <div class="card-body p-4 text-start">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <span class="badge text-teal-accent bg-teal-accent-light" style="font-size:0.75rem; font-weight:700; padding:0.35rem 0.75rem; border-radius:30px;">Hiring Guide</span>
                            <span class="text-muted small fw-600"><i class="far fa-calendar me-1"></i>May 25, 2026</span>
                        </div>
                        <h5 class="fw-800 text-dark mb-3 hover-teal" style="font-size:1.15rem; line-height:1.4;">
                            <a href="#" class="text-decoration-none text-dark">The Ultimate Guide to Ace Remote Technical Interviews</a>
                        </h5>
                        <p class="text-muted small mb-4 fw-500" style="line-height:1.6;">Proven strategies to impress tech interviewers online while writing clean optimized scripts.</p>
                        <a href="#" class="fw-700 text-teal-accent text-decoration-none small">Read More <i class="fas fa-arrow-right ms-1"></i></a>
                    </div>
                </div>
            </div>

            <!-- Blog Card 3 -->
            <div class="col-lg-4 col-md-6">
                <div class="card shadow-sm border-0 rounded-4 overflow-hidden bg-white hover-lift transition-all-300">
                    <div style="height:210px; background:linear-gradient(135deg, #a855f7 0%, #701a75 100%); display:flex; align-items:center; justify-content:center; color:#fff; font-size:3.5rem;">📈</div>
                    <div class="card-body p-4 text-start">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <span class="badge text-teal-accent bg-teal-accent-light" style="font-size:0.75rem; font-weight:700; padding:0.35rem 0.75rem; border-radius:30px;">Career Choice</span>
                            <span class="text-muted small fw-600"><i class="far fa-calendar me-1"></i>May 22, 2026</span>
                        </div>
                        <h5 class="fw-800 text-dark mb-3 hover-teal" style="font-size:1.15rem; line-height:1.4;">
                            <a href="#" class="text-decoration-none text-dark">Why Full-Stack Devs are in Elite Demand in 2026</a>
                        </h5>
                        <p class="text-muted small mb-4 fw-500" style="line-height:1.6;">How the demand of PHP/Laravel paired with modern JavaScript has surged in start-up markets.</p>
                        <a href="#" class="fw-700 text-teal-accent text-decoration-none small">Read More <i class="fas fa-arrow-right ms-1"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

@endsection

@section('styles')
<style>
    /* ── Advanced Styles for perfect layout ── */
    .hero-section {
        position: relative;
    }
    
    .fw-900 { font-weight: 900; }
    .fw-800 { font-weight: 800; }
    .fw-700 { font-weight: 700; }
    .fw-600 { font-weight: 600; }
    .fw-500 { font-weight: 500; }

    .text-teal-accent {
        color: #0d9488 !important;
    }
    .text-teal-accent:hover {
        color: #0f766e !important;
    }
    .bg-teal-accent-light {
        background: rgba(13,148,136,0.08) !important;
    }

    .focus-none:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .border-right-custom {
        border-right: 1px solid #e2e8f0;
    }
    @media (max-width: 768px) {
        .border-right-custom {
            border-right: none;
            border-bottom: 1px solid #e2e8f0;
        }
    }

    .border-end-custom-grey {
        border-end: none;
    }
    @media (min-width: 992px) {
        .border-end-custom-grey {
            border-right: 1px solid #f1f5f9;
        }
    }

    /* Popular Searches Tag styling */
    .popular-search-tag {
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
        color: #cbd5e1;
        border-radius: 30px;
        transition: all 0.25s;
        font-weight: 600;
        font-size: 0.82rem;
    }
    .popular-search-tag:hover {
        background: #2fd1c5;
        border-color: #2fd1c5;
        color: #0f172a;
    }

    /* Stat circle styling */
    .stat-circle {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .stat-title {
        font-weight: 900;
        color: #0f172a;
        font-size: 1.55rem;
        letter-spacing: -0.5px;
    }

    /* Category card round circle */
    .category-icon-round {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.45rem;
        flex-shrink: 0;
    }

    .category-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .category-card:hover {
        background: rgba(13,148,136,0.04) !important;
        border-color: rgba(13,148,136,0.2) !important;
        transform: translateY(-4px);
    }

    .hover-teal a:hover {
        color: #0d9488 !important;
    }

    .hover-lift {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.05) !important;
    }

    /* Step Working Process */
    .process-icon-circle {
        position: relative;
        z-index: 2;
        background: #ffffff;
    }
    .process-circle-wrapper:hover .process-icon-circle {
        border-color: #0d9488 !important;
        transform: scale(1.05);
        box-shadow: 0 10px 25px rgba(13,148,136,0.15);
    }

    /* Collage wrapping animations */
    .collage-wrapper {
        animation: float-slow 8s ease-in-out infinite;
    }
    @keyframes float-slow {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-12px) rotate(0.5deg); }
    }

    .floating-badge {
        position: absolute;
        bottom: 25px;
        left: -35px;
        z-index: 5;
        border: 1px solid #f1f5f9;
    }

    .bg-success-light {
        background: rgba(16,185,129,0.1);
    }

    .py-6 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .text-line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;  
        overflow: hidden;
    }

    .carousel-control-prev, .carousel-control-next {
        opacity: 0.65;
        transition: opacity 0.2s;
    }
    .carousel-control-prev:hover, .carousel-control-next:hover {
        opacity: 1;
    }
</style>
@endsection