@extends('emails.layout')

@section('content')
    <p style="margin:0 0 10px;color:#0f766e;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;">New matched roles</p>
    <h1 style="margin:0 0 12px;color:#0f172a;font-size:28px;line-height:1.18;font-weight:700;">Fresh remote jobs matched to your profile.</h1>
    <p style="margin:0 0 22px;color:#475569;font-size:15px;line-height:1.7;">
        These are newly added or recently updated roles from your matched job feed. Full details and application tracking stay inside your dashboard.
    </p>

    @foreach ($jobs as $job)
        <div style="margin:0 0 14px;border:1px solid #e2e8f0;border-radius:20px;background:#f8fafc;padding:18px;">
            <div style="margin:0 0 10px;">
                @if ($job->category)
                    <span style="display:inline-block;margin:0 6px 6px 0;border-radius:999px;background:#ccfbf1;color:#0f766e;font-size:11px;font-weight:700;padding:6px 10px;">{{ str($job->category)->headline() }}</span>
                @endif
                @if ($job->match_score ?? null)
                    <span style="display:inline-block;margin:0 6px 6px 0;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:11px;font-weight:700;padding:6px 10px;">{{ $job->match_score }}% match</span>
                @endif
                @if ($job->salaryLabel())
                    <span style="display:inline-block;margin:0 0 6px 0;border-radius:999px;background:#fef3c7;color:#92400e;font-size:11px;font-weight:700;padding:6px 10px;">{{ $job->salaryLabel() }}</span>
                @endif
            </div>
            <h2 style="margin:0 0 6px;color:#0f172a;font-size:18px;line-height:1.35;font-weight:700;">{{ $job->title }}</h2>
            <p style="margin:0 0 12px;color:#64748b;font-size:13px;line-height:1.6;">
                {{ collect([$job->company, str($job->location_type ?: 'remote')->headline(), $job->source?->name])->filter()->join(' • ') }}
            </p>
            <p style="margin:0 0 14px;color:#475569;font-size:14px;line-height:1.65;">{{ $job->displaySummary(180) }}</p>
            <a href="{{ route('jobs.show', $job) }}" style="display:inline-block;border-radius:999px;background:#0f766e;color:#ffffff;font-size:13px;font-weight:700;padding:11px 16px;text-decoration:none;">View in dashboard</a>
        </div>
    @endforeach

    <div style="margin:22px 0 0;text-align:center;">
        <a href="{{ route('jobs.index') }}" style="display:inline-block;border-radius:999px;background:#020617;color:#ffffff;font-size:14px;font-weight:700;padding:13px 20px;text-decoration:none;">Open matched jobs</a>
    </div>
@endsection