<?php
$participant = $report['participant'];
$primaryArea = $report['primary_area'] ?? null;
$locale = (string) ($participant['language'] ?? config('default_language', 'en'));
?>
<!DOCTYPE html>
<html lang="<?= htmlspecialchars($locale, ENT_QUOTES, 'UTF-8') ?>">
<head>
    <meta charset="UTF-8">
    <style>
        body { font-family: DejaVu Sans, sans-serif; color: #1e1a18; font-size: 12px; line-height: 1.5; }
        .header { margin-bottom: 24px; }
        .brand-logo { width: 290px; height: auto; margin-bottom: 12px; }
        .title { font-size: 24px; font-weight: bold; color: #1c6944; margin: 0 0 4px; }
        .meta { color: #4d5b53; margin: 0; }
        .section { margin-bottom: 18px; }
        .card { border: 1px solid #d8e8dd; border-radius: 12px; padding: 14px; margin-bottom: 16px; }
        .two-col { width: 100%; }
        .two-col td { vertical-align: top; width: 50%; }
        .detail-table { width: 100%; border-collapse: collapse; }
        .detail-table td { padding: 6px 0; }
        .label { font-weight: bold; color: #1c6944; width: 120px; }
        .primary-area { background: #eef6f1; border-left: 5px solid #1c6944; padding: 10px 12px; margin-top: 10px; }
        .ranking-card { border: 1px solid #e5ece7; padding: 12px; margin-bottom: 14px; }
        .ranking-title { font-size: 16px; font-weight: bold; margin: 0 0 8px; }
        .score { float: right; color: #1c6944; font-weight: bold; }
        .track { height: 10px; background: #edf1ee; border-radius: 999px; margin: 8px 0 10px; }
        .fill { height: 10px; border-radius: 999px; }
        ul { margin: 8px 0 0 18px; padding: 0; }
        .small { color: #4d5b53; font-size: 11px; }
        .footer { margin-top: 22px; color: #4d5b53; font-size: 10px; }
    </style>
</head>
<body>
    <div class="header">
        <?php if ($brandLogoDataUri !== null): ?>
            <img class="brand-logo" src="<?= $brandLogoDataUri ?>" alt="SENTRAL College Penang">
        <?php endif; ?>
        <p class="title"><?= htmlspecialchars((string) trans('page_titles.your_report', [], $locale), ENT_QUOTES, 'UTF-8') ?></p>
        <p class="meta"><?= htmlspecialchars((string) trans('participant.report_meta', ['reference' => $report['reference'], 'generated' => $report['generated_at']], $locale), ENT_QUOTES, 'UTF-8') ?></p>
    </div>

    <div class="card section">
        <table class="two-col" cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <table class="detail-table">
                        <tr><td class="label"><?= htmlspecialchars((string) trans('participant.full_name', [], $locale), ENT_QUOTES, 'UTF-8') ?></td><td><?= htmlspecialchars((string) $participant['full_name'], ENT_QUOTES, 'UTF-8') ?></td></tr>
                        <tr><td class="label"><?= htmlspecialchars((string) trans('participant.email', [], $locale), ENT_QUOTES, 'UTF-8') ?></td><td><?= htmlspecialchars((string) $participant['email'], ENT_QUOTES, 'UTF-8') ?></td></tr>
                    </table>
                </td>
                <td>
                    <table class="detail-table">
                        <tr><td class="label"><?= htmlspecialchars((string) trans('participant.phone', [], $locale), ENT_QUOTES, 'UTF-8') ?></td><td><?= htmlspecialchars((string) $participant['phone'], ENT_QUOTES, 'UTF-8') ?></td></tr>
                        <tr><td class="label"><?= htmlspecialchars((string) trans('common.language', [], $locale), ENT_QUOTES, 'UTF-8') ?></td><td><?= htmlspecialchars((string) config('supported_languages.' . $participant['language'], strtoupper((string) $participant['language'])), ENT_QUOTES, 'UTF-8') ?></td></tr>
                    </table>
                </td>
            </tr>
        </table>

        <?php if (is_array($primaryArea)): ?>
            <div class="primary-area">
                <strong><?= htmlspecialchars((string) trans('participant.report_top_interest', [], $locale), ENT_QUOTES, 'UTF-8') ?>:</strong>
                <?= htmlspecialchars((string) $primaryArea['name'], ENT_QUOTES, 'UTF-8') ?>
                (<?= htmlspecialchars((string) $primaryArea['score'], ENT_QUOTES, 'UTF-8') ?>/<?= htmlspecialchars((string) $primaryArea['max_score'], ENT_QUOTES, 'UTF-8') ?>)
            </div>
        <?php endif; ?>
    </div>

    <div class="section">
        <?php foreach ($report['rankings'] as $ranking): ?>
            <?php $width = $ranking['max_score'] > 0 ? round(($ranking['score'] / $ranking['max_score']) * 100) : 0; ?>
            <div class="ranking-card">
                <p class="ranking-title">
                    <?= htmlspecialchars((string) trans('participant.report_rank', ['rank' => $ranking['rank']], $locale), ENT_QUOTES, 'UTF-8') ?>:
                    <?= htmlspecialchars((string) $ranking['name'], ENT_QUOTES, 'UTF-8') ?>
                    (<?= htmlspecialchars((string) $ranking['code'], ENT_QUOTES, 'UTF-8') ?>)
                    <span class="score"><?= htmlspecialchars((string) $ranking['score'], ENT_QUOTES, 'UTF-8') ?>/<?= htmlspecialchars((string) $ranking['max_score'], ENT_QUOTES, 'UTF-8') ?></span>
                </p>
                <div class="track">
                    <div class="fill" style="width: <?= htmlspecialchars((string) $width, ENT_QUOTES, 'UTF-8') ?>%; background: <?= htmlspecialchars((string) $ranking['color'], ENT_QUOTES, 'UTF-8') ?>;"></div>
                </div>
                <p><?= htmlspecialchars((string) $ranking['description'], ENT_QUOTES, 'UTF-8') ?></p>
                <table class="two-col" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <strong><?= htmlspecialchars((string) trans('participant.career_opportunities', [], $locale), ENT_QUOTES, 'UTF-8') ?></strong>
                            <ul>
                                <?php foreach ($ranking['career_opportunities'] as $item): ?>
                                    <li><?= htmlspecialchars((string) $item, ENT_QUOTES, 'UTF-8') ?></li>
                                <?php endforeach; ?>
                            </ul>
                        </td>
                        <td>
                            <strong><?= htmlspecialchars((string) trans('participant.suitable_programme', [], $locale), ENT_QUOTES, 'UTF-8') ?></strong>
                            <ul>
                                <?php foreach ($ranking['suitable_programmes'] as $item): ?>
                                    <li><?= htmlspecialchars((string) $item, ENT_QUOTES, 'UTF-8') ?></li>
                                <?php endforeach; ?>
                            </ul>
                        </td>
                    </tr>
                </table>
            </div>
        <?php endforeach; ?>
    </div>

    <p class="footer">SENTRAL College Penang RIASEC</p>
</body>
</html>