<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <style>
        /* CRITICAL: Old-school CSS only — NO Tailwind. DomPDF requires simple CSS. */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'DejaVu Sans', sans-serif;
            font-size: 11pt;
            color: #1a1a1a;
            line-height: 1.5;
        }

        .header {
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid #333333;
        }

        .header h1 {
            font-size: 18pt;
            font-weight: bold;
            margin-bottom: 4px;
        }

        .header .arrangement-name {
            font-size: 11pt;
            color: #666666;
        }

        .group-section {
            margin-bottom: 16px;
            page-break-inside: avoid;
        }

        .group-header {
            padding: 4px 10px;
            margin-bottom: 6px;
            font-size: 10pt;
            font-weight: bold;
            color: #ffffff;
            border-radius: 3px;
        }

        .slide {
            margin-bottom: 10px;
            padding-left: 10px;
        }

        .slide-text {
            white-space: pre-wrap;
            font-size: 11pt;
            line-height: 1.6;
        }

        .slide-translation {
            white-space: pre-wrap;
            font-size: 10pt;
            font-style: italic;
            color: #555555;
            line-height: 1.5;
            margin-top: 4px;
            padding-left: 10px;
            border-left: 2px solid #cccccc;
        }

        .copyright-footer {
            margin-top: 30px;
            padding-top: 10px;
            border-top: 1px solid #cccccc;
            font-size: 8pt;
            color: #888888;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>{{ $song->title }}</h1>
        <div class="arrangement-name">Arrangement: {{ $arrangement->name }}</div>
    </div>

    @foreach ($groupsInOrder as $group)
        <div class="group-section">
            <div class="group-header" style="background-color: {{ $group['color'] }};">
                {{ $group['name'] }}
            </div>

            @foreach ($group['slides'] as $slide)
                <div class="slide">
                    <div class="slide-text">{{ $slide['text_content'] }}</div>

                    @if (!empty($slide['text_content_translated']))
                        <div class="slide-translation">{{ $slide['text_content_translated'] }}</div>
                    @endif
                </div>
            @endforeach
        </div>
    @endforeach

    @if ($song->copyright_text)
        <div class="copyright-footer">
            &copy; {{ $song->copyright_text }}
            @if ($song->ccli_id)
                &middot; CCLI {{ $song->ccli_id }}
            @endif
        </div>
    @endif
</body>
</html>
