<!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; }
        .cover { background: #1c2b5f; color: #fff; height: 100%; padding: 70px 50px; page-break-after: always; }
        .cover .kicker { color: #58b9e6; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; }
        .cover h1 { font-size: 34px; margin-top: 26px; line-height: 1.2; }
        .cover .desc { color: #b9e4f8; margin-top: 16px; font-size: 13px; line-height: 1.6; max-width: 420px; }
        .cover .brand { margin-top: 60px; font-size: 18px; font-weight: bold; }
        .cover .brand span { color: #58b9e6; }
        .cover img.logo { height: 34px; margin-top: 60px; }
        .page { padding: 46px 50px; page-break-after: always; }
        .page:last-child { page-break-after: avoid; }
        .page .kicker { color: #2787b8; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; }
        .page h2 { font-size: 20px; color: #1c2b5f; margin: 10px 0 14px; border-bottom: 2px solid #58b9e6; padding-bottom: 8px; }
        .page p { line-height: 1.7; color: #28366a; margin-bottom: 10px; }
        .pagenum { position: fixed; bottom: 18px; right: 50px; font-size: 9px; color: #4b64ac; }
        .footer-note { position: fixed; bottom: 18px; left: 50px; 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;
@endphp
<body>
    <div class="cover">
        <div class="kicker">moneywise guides @if($guide->category) · {{ $guide->category }} @endif</div>
        <h1>{{ $guide->title }}</h1>
        <p class="desc">{{ $guide->description }}</p>
        @if ($logo)
            <img class="logo" src="{{ $logo }}" alt="Money-Wise">
        @else
            <div class="brand">money<span>wise</span></div>
        @endif
        <p style="color:#4b64ac; margin-top:6px; font-size:10px">moneywise.co.ke, Africa's financial confidence ecosystem</p>
    </div>

    <div class="footer-note">moneywise.co.ke · free to share, not to sell</div>
    <div class="pagenum">{{ $guide->title }}</div>

    @foreach ($guide->pages as $i => $page)
        <div class="page">
            <div class="kicker">Chapter {{ $i + 1 }} of {{ count($guide->pages) }}</div>
            <h2>{{ $page['title'] }}</h2>
            @foreach (explode("\n\n", $page['body']) as $paragraph)
                <p>{!! nl2br(e($paragraph)) !!}</p>
            @endforeach
        </div>
    @endforeach
</body>
</html>
