<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: DejaVu Sans, sans-serif; color: #15204a; font-size: 12px; }
        .header { background: #1c2b5f; color: #fff; padding: 22px 36px; }
        .header img { height: 26px; }
        .header .brand { font-size: 20px; font-weight: bold; }
        .header .brand span { color: #58b9e6; }
        .header .meta { color: #b9e4f8; margin-top: 8px; font-size: 11px; }
        .wrap { padding: 24px 36px; }
        .viz { width: 100%; margin-bottom: 8px; }
        .viz td { vertical-align: middle; text-align: center; padding: 6px; }
        .band { font-size: 17px; font-weight: bold; color: #2787b8; }
        .match { font-size: 10px; color: #4b64ac; }
        .headline { font-size: 12px; color: #28366a; margin-top: 6px; font-style: italic; }
        .viz-title { font-size: 11px; font-weight: bold; color: #1c2b5f; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
        h2 { font-size: 14px; color: #1c2b5f; margin: 18px 0 8px; border-bottom: 2px solid #58b9e6; padding-bottom: 4px; }
        p { line-height: 1.55; color: #28366a; }
        .dim { margin: 7px 0; }
        .dim .label { font-weight: bold; font-size: 11px; margin-bottom: 3px; }
        .bar { background: #dce3f3; border-radius: 6px; height: 10px; width: 100%; }
        .bar .fill { background: #58b9e6; border-radius: 6px; height: 10px; }
        .advice { margin: 6px 0; }
        .advice li { margin: 6px 0; line-height: 1.5; list-style: none; }
        .advice .num { display: inline-block; background: #58b9e6; color: #0d142e; font-weight: bold; border-radius: 50%; width: 16px; height: 16px; text-align: center; font-size: 10px; line-height: 16px; margin-right: 6px; }
        .footer { position: fixed; bottom: 0; left: 0; right: 0; background: #eef1f9; padding: 10px 36px; font-size: 9px; color: #4b64ac; }
    </style>
</head>
@php
    $logoPath = public_path('images/logo-white-pdf.png');
    $logo = is_file($logoPath) ? 'data:image/png;base64,'.base64_encode(file_get_contents($logoPath)) : null;

    $percent = (int) round($attempt->percent);
    $isProfile = $attempt->assessment->isProfileMode();

    $labels = $isProfile
        ? collect($attempt->assessment->profileTypes())
        : $attempt->assessment->questions->groupBy('dimension')->map(fn ($q) => $q->first()->section);

    $dims = collect($attempt->dimension_percents ?? []);
@endphp
<body>
    <div class="header">
        @if ($logo)
            <img src="{{ $logo }}" alt="Money-Wise">
        @else
            <div class="brand">money<span>wise</span></div>
        @endif
        <div class="meta">{{ $attempt->assessment->title }}, Personal Report · {{ $attempt->completed_at->format('j F Y') }}</div>
    </div>

    <div class="wrap">
        {{-- Visuals: score gauge + radar money map (rendered as PNG by App\Support\ReportChart) --}}
        <table class="viz">
            <tr>
                <td style="width: {{ $radarImg ? '42%' : '100%' }}">
                    <div class="viz-title">{{ $isProfile ? 'How strongly this fits' : 'Your score' }}</div>
                    @if ($gaugeImg)
                        <img src="{{ $gaugeImg }}" style="width: 140px; height: 140px;" alt="Score {{ $percent }}%">
                    @else
                        <div class="band" style="font-size:38px">{{ $percent }}%</div>
                    @endif
                    <div class="band">{{ $attempt->band?->label }}</div>
                    <div class="headline">{{ $attempt->band?->headline }}</div>
                </td>
                @if ($radarImg)
                    <td style="width: 58%">
                        <div class="viz-title">Your money map</div>
                        <img src="{{ $radarImg }}" style="width: 250px;" alt="Your money map">
                    </td>
                @endif
            </tr>
        </table>

        <h2>{{ $isProfile ? 'Your personality blend' : 'Your dimensions' }}</h2>
        @foreach ($dims as $dim => $pct)
            <div class="dim">
                <div class="label">{{ $labels[$dim] ?? ucfirst($dim) }}, {{ $pct }}%</div>
                <div class="bar"><div class="fill" style="width: {{ max($pct, 2) }}%"></div></div>
            </div>
        @endforeach

        <h2>What this means</h2>
        <p>{{ $attempt->band?->message }}</p>

        @if ($attempt->band?->advice)
            <h2>Your next moves</h2>
            <ul class="advice">
                @foreach ($attempt->band->advice as $i => $tip)
                    <li><span class="num">{{ $i + 1 }}</span> {{ $tip }}</li>
                @endforeach
            </ul>
        @endif
    </div>

    <div class="footer">
        moneywise.co.ke, Africa's financial confidence ecosystem · This report is educational guidance, not regulated financial advice.
    </div>
</body>
</html>
