<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>{{ $eventName }} – Einladungs-QR</title>
    @php
        $qrSize = $layout['qr']['size_px'] ?? 500;
        $isAdvanced = ! empty($advancedLayout['elements'] ?? null);
        $advancedBackground = null;
        $advancedBackgroundImage = $isAdvanced ? ($advancedLayout['background_image'] ?? null) : null;
        if ($isAdvanced) {
            $gradient = $advancedLayout['background_gradient'] ?? null;
            if (is_array($gradient) && ! empty($gradient['stops'])) {
                $angle = (int) ($gradient['angle'] ?? 180);
                $stops = implode(',', $gradient['stops']);
                $advancedBackground = "linear-gradient({$angle}deg,{$stops})";
            } else {
                $advancedBackground = $advancedLayout['background'] ?? '#FFFFFF';
            }
        } else {
            $advancedBackground = '#FFFFFF';
        }
        $containerPadding = $layout['container_padding_px'] ?? 48;
        $isDoublePanel = ($layout['panel_mode'] ?? null) === 'double-mirror';
        $backgroundImageInline = ($backgroundImage ?? null)
            ? 'background:'.$backgroundStyle.';background-image:url('.$backgroundImage.');background-size:cover;background-position:center;background-repeat:no-repeat;'
            : 'background:'.$backgroundStyle.';';
        $advancedBackgroundInline = ($advancedBackgroundImage ?? null)
            ? 'background:'.$advancedBackground.';background-image:url('.$advancedBackgroundImage.');background-size:cover;background-position:center;background-repeat:no-repeat;'
            : 'background:'.$advancedBackground.';';
    @endphp
    <style>
        :root {
            --accent: {{ $layout['accent'] }};
            --secondary: {{ $layout['secondary'] }};
            --text: {{ $layout['text'] }};
            --badge: {{ $layout['badge'] }};
            --container-padding: {{ $containerPadding }}px;
            --qr-size: {{ $qrSize }}px;
            --background: {{ $backgroundStyle }};
        }

        * {
            box-sizing: border-box;
        }

        html, body {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: var(--text);
        }

        body {
            min-height: 100%;
            position: relative;
        }

        .panel-sheet {
            width: 100%;
            height: 100%;
            display: flex;
        }

        .panel {
            flex: 1 1 0;
            display: flex;
            padding: 12px;
        }

        .panel--mirror {
            transform: scaleX(-1);
        }

        .panel--mirror .panel-inner {
            transform: scaleX(-1);
        }

        .layout-wrapper {
            width: 100%;
            height: 100%;
            padding: var(--container-padding);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: var(--background);
        }

        .header {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--badge);
            color: #fff;
            padding: 10px 18px;
            border-radius: 999px;
            font-size: 15px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            width: fit-content;
        }

        .logo {
            max-width: 140px;
            max-height: 80px;
            object-fit: contain;
        }

        .event-title {
            font-size: 72px;
            font-weight: 700;
            line-height: 1.05;
            margin: 0;
        }

        .subtitle {
            font-size: 24px;
            font-weight: 500;
            color: rgba(17, 24, 39, 0.7);
            margin: 0;
        }

        .content {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 40px;
            margin-top: 48px;
            align-items: center;
        }

        .info-card {
            background: rgba(255, 255, 255, 0.65);
            border-radius: 32px;
            padding: 32px;
            display: flex;
            flex-direction: column;
            gap: 18px;
            box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
        }

        .info-card h2 {
            margin: 0;
            font-size: 32px;
            font-weight: 700;
        }

        .info-card p {
            margin: 0;
            font-size: 18px;
            line-height: 1.6;
        }

        .instructions {
            margin: 0;
            padding-left: 22px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .instructions li {
            font-size: 18px;
            line-height: 1.5;
        }

        .link-box {
            background: var(--secondary);
            color: var(--text);
            font-family: "Courier New", Courier, monospace;
            border-radius: 16px;
            padding: 18px 20px;
            font-size: 18px;
            word-break: break-all;
        }

        .qr-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
        }

        .qr-wrapper img {
            width: var(--qr-size);
            height: var(--qr-size);
        }

        .cta {
            font-size: 20px;
            font-weight: 600;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .footer {
            margin-top: 48px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            font-size: 16px;
            color: rgba(17, 24, 39, 0.6);
        }

        .footer strong {
            color: var(--accent);
        }

        .advanced-wrapper {
            width: 100%;
            padding: 48px;
            background: var(--background);
        }

        .advanced-canvas {
            position: relative;
            width: {{ $advancedLayout['width'] ?? 1080 }}px;
            height: {{ $advancedLayout['height'] ?? 1520 }}px;
            border-radius: 32px;
            overflow: hidden;
            background: {{ $advancedBackground ?? '#FFFFFF' }};
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
        }

        .advanced-element {
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
        }

        .advanced-element--badge {
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 600;
        }

        .advanced-element--cta {
            border-radius: 20px;
            box-shadow: 0 16px 30px rgba(15, 23, 42, 0.2);
            font-weight: 600;
            letter-spacing: 0.05em;
        }

        .advanced-element--qr img,
        .advanced-element--logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    </style>
</head>
<body>
@php
    $renderStandard = function () use ($layout, $eventName, $tokenUrl, $qrPngDataUri, $token) {
        ob_start();
@endphp
    <div class="layout-wrapper panel-inner" style="{{ $backgroundImageInline }}">
        <div class="header">
            <div style="display:flex; align-items:center; justify-content:space-between; gap:24px;">
            <span class="badge">{{ $layout['badge_label'] ?? 'Digitale Gästebox' }}</span>
            @if(!empty($layout['logo_url']))
                <img src="{{ $layout['logo_url'] }}" alt="Logo" class="logo" />
                @endif
            </div>
            <h1 class="event-title">{{ $layout['headline'] ?? $eventName }}</h1>
            @if(!empty($layout['subtitle']))
                <p class="subtitle">{{ $layout['subtitle'] }}</p>
            @endif
        </div>

        <div class="content">
            <div class="info-card">
                <h2>{{ $layout['instructions_heading'] ?? "So funktioniert's" }}</h2>
                <p>{{ $layout['description'] }}</p>
                @if(!empty($layout['instructions']))
                    <ul class="instructions">
                        @foreach($layout['instructions'] as $step)
                            <li>{{ $step }}</li>
                        @endforeach
                    </ul>
                @endif
                <div>
                    <div class="cta">{{ $layout['link_heading'] ?? 'Alternative zum Einscannen' }}</div>
                    <div class="link-box">{{ $layout['link_label'] ?? $tokenUrl }}</div>
                </div>
            </div>

            <div class="qr-wrapper">
                <img src="{{ $qrPngDataUri }}" alt="QR-Code zum Event {{ $eventName }}">
                <div class="cta">{{ $layout['cta_label'] ?? 'Scan mich & starte direkt' }}</div>
            </div>
        </div>

        <div class="footer">
            <div>
                <strong>{{ config('app.name', 'Fotospiel') }}</strong> – Gästebox & Fotochallenges
            </div>
            <div>Einladungsgültigkeit: {{ $token->expires_at ? $token->expires_at->locale(app()->getLocale())->isoFormat('LLL') : 'bis Widerruf' }}</div>
        </div>
    </div>
@php
        return ob_get_clean();
    };
@endphp

@if($isAdvanced)
    <div class="advanced-wrapper">
        <div class="advanced-canvas" style="{{ $advancedBackgroundInline }}">
            @foreach($advancedLayout['elements'] as $element)
                @php
                    $style = $element['style_string'];
                    $textColor = $element['fill'] ?? ($element['type'] === 'badge' ? '#FFFFFF' : ($advancedLayout['text'] ?? '#111827'));
                    $fontSize = $element['font_size'] ? 'font-size:'.$element['font_size'].'px;' : '';
                    $lineHeight = $element['line_height'] ? 'line-height:'.$element['line_height'].';' : '';
                    $letterSpacing = $element['letter_spacing'] !== null ? 'letter-spacing:'.$element['letter_spacing'].'px;' : '';
                    $fontFamily = $element['font_family'] ? 'font-family:'.$element['font_family'].';' : '';
                    $textAlign = $element['align'] ? 'text-align:'.$element['align'].';' : '';
                    $contentStyle = $fontSize.$lineHeight.$letterSpacing.$fontFamily.$textAlign.'color:'.$textColor.';';

                    if ($element['type'] === 'badge') {
                        $style .= ';background:'.$advancedLayout['badge'].';color:#fff;border-radius:999px;padding:16px 26px;display:flex;align-items:center;justify-content:center;';
                    }

                    if ($element['type'] === 'cta') {
                        $style .= ';background:'.$advancedLayout['accent'].';color:#fff;display:flex;align-items:center;justify-content:center;padding:24px 28px;';
                    }

                    if ($element['type'] === 'link') {
                        $style .= ';border:2px solid '.$advancedLayout['accent'].';border-radius:18px;padding:16px 18px;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;';
                    }

                    if (in_array($element['type'], ['headline', 'subtitle', 'description'], true)) {
                        $style .= ';padding:16px 20px;';
                    }
                @endphp
                <div class="advanced-element advanced-element--{{ $element['type'] }}" style="{{ $style }}">
                    @switch($element['type'])
                        @case('qr')
                            @if($element['asset'])
                                <img src="{{ $element['asset'] }}" alt="QR Code" />
                            @endif
                            @break
                        @case('logo')
                            @if($element['asset'])
                                <img src="{{ $element['asset'] }}" alt="Logo" />
                            @endif
                            @break
                        @default
                            @if($element['content'])
                                <div style="{{ $contentStyle }}">{{ $element['content'] }}</div>
                            @endif
                    @endswitch
                </div>
            @endforeach
        </div>
    </div>
@elseif($isDoublePanel)
    <div class="panel-sheet">
        <div class="panel">
            {!! str_replace('class="layout-wrapper panel-inner"', 'class="layout-wrapper panel-inner" style="'.$backgroundImageInline.'"', $renderStandard()) !!}
        </div>
        <div class="panel panel--mirror">
            {!! str_replace('class="layout-wrapper panel-inner"', 'class="layout-wrapper panel-inner" style="'.$backgroundImageInline.'"', $renderStandard()) !!}
        </div>
    </div>
@else
    {!! str_replace('class="layout-wrapper panel-inner"', 'class="layout-wrapper panel-inner" style="'.$backgroundImageInline.'"', $renderStandard()) !!}
@endif
</body>
</html>
