<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{ config('app.name') }} Release Notes &mdash; {{ $sprint }}</title>
    <!--
    ┌─────────────────────────────────────────────────────────────────────┐
    │  release_template.blade.php                                         │
    │  Email-safe HTML: all CSS is inline, max-width 600px.               │
    │  Compatible with Gmail, Apple Mail, Outlook 2016+.                  │
    │  Rendered standalone via view('emails.release_template', [...])     │
    │  or used as structural reference for Claude's Skill #2 prompt.      │
    └─────────────────────────────────────────────────────────────────────┘
    -->
</head>
<body style="margin:0;padding:0;background-color:#f4f5f7;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;">

{{-- Outer wrapper table (email-client safe) --}}
<table role="presentation" cellpadding="0" cellspacing="0" border="0"
       width="100%" style="background-color:#f4f5f7;padding:32px 16px;">
<tr><td align="center">

    {{-- Email Card --}}
    <table role="presentation" cellpadding="0" cellspacing="0" border="0"
           width="600" style="max-width:600px;width:100%;background:#ffffff;
                              border-radius:8px;overflow:hidden;
                              box-shadow:0 2px 8px rgba(0,0,0,0.08);">

        {{-- ── Header ── --}}
        <tr>
            <td style="background:linear-gradient(135deg,#4F46E5 0%,#7C3AED 100%);
                        padding:32px 40px;text-align:center;">
                {{-- Logo Placeholder --}}
                <div style="display:inline-block;background:rgba(255,255,255,0.15);
                             border-radius:8px;padding:8px 20px;margin-bottom:16px;">
                    <span style="color:#ffffff;font-size:20px;font-weight:700;
                                 letter-spacing:-0.5px;">
                        {{ config('app.name', 'YourProduct') }}
                    </span>
                </div>
                <br>
                <h1 style="color:#ffffff;font-size:22px;font-weight:600;
                            margin:0;letter-spacing:-0.3px;">
                    Release Notes
                </h1>
                <p style="color:rgba(255,255,255,0.8);font-size:14px;
                           margin:6px 0 0;">
                    Sprint {{ $sprint }}
                </p>
            </td>
        </tr>

        {{-- ── Intro ── --}}
        <tr>
            <td style="padding:28px 40px 12px;">
                <p style="font-size:15px;color:#374151;margin:0;line-height:1.6;">
                    Here's what changed in this sprint. We've been hard at work on
                    improvements and fixes to make your experience better.
                </p>
            </td>
        </tr>

        {{-- ── What's New (features + RFCs) ── --}}
        @php $features = collect($items)->where('type', '!=', 'bug')->values(); @endphp
        @if($features->isNotEmpty())
        <tr>
            <td style="padding:16px 40px 0;">
                <h2 style="font-size:16px;font-weight:700;color:#111827;
                            margin:0 0 12px;padding-bottom:8px;
                            border-bottom:2px solid #E5E7EB;">
                    ✨ What's New
                </h2>
            </td>
        </tr>
        @foreach($features as $item)
        <tr>
            <td style="padding:4px 40px 4px 56px;">
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="border-left:3px solid #10B981;padding:10px 16px;
                                background:#F0FDF4;border-radius:0 4px 4px 0;">
                        <p style="font-size:14px;font-weight:700;color:#065F46;margin:0 0 4px;">
                            {{ $item['title'] }}
                        </p>
                        <p style="font-size:13px;color:#374151;margin:0;line-height:1.5;">
                            {{ $item['note'] }}
                        </p>
                    </td>
                </tr>
                </table>
            </td>
        </tr>
        <tr><td style="height:8px;"></td></tr>
        @endforeach
        @endif

        {{-- ── Bug Fixes ── --}}
        @php $bugs = collect($items)->where('type', 'bug')->values(); @endphp
        @if($bugs->isNotEmpty())
        <tr>
            <td style="padding:20px 40px 0;">
                <h2 style="font-size:16px;font-weight:700;color:#111827;
                            margin:0 0 12px;padding-bottom:8px;
                            border-bottom:2px solid #E5E7EB;">
                    🐛 Bug Fixes
                </h2>
            </td>
        </tr>
        @foreach($bugs as $item)
        <tr>
            <td style="padding:4px 40px 4px 56px;">
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="border-left:3px solid #3B82F6;padding:10px 16px;
                                background:#EFF6FF;border-radius:0 4px 4px 0;">
                        <p style="font-size:14px;font-weight:700;color:#1E3A8A;margin:0 0 4px;">
                            {{ $item['title'] }}
                        </p>
                        <p style="font-size:13px;color:#374151;margin:0;line-height:1.5;">
                            {{ $item['note'] }}
                        </p>
                    </td>
                </tr>
                </table>
            </td>
        </tr>
        <tr><td style="height:8px;"></td></tr>
        @endforeach
        @endif

        {{-- ── Divider ── --}}
        <tr>
            <td style="padding:24px 40px 0;">
                <hr style="border:none;border-top:1px solid #E5E7EB;margin:0;">
            </td>
        </tr>

        {{-- ── CTA ── --}}
        <tr>
            <td style="padding:24px 40px;text-align:center;">
                <p style="font-size:14px;color:#6B7280;margin:0 0 16px;">
                    Have feedback on these changes?
                </p>
                <a href="mailto:support@yourcompany.com"
                   style="display:inline-block;background:#4F46E5;color:#ffffff;
                           text-decoration:none;padding:11px 28px;border-radius:6px;
                           font-size:14px;font-weight:600;">
                    Send Feedback
                </a>
            </td>
        </tr>

        {{-- ── Footer ── --}}
        <tr>
            <td style="background:#F9FAFB;padding:20px 40px;border-top:1px solid #E5E7EB;">
                <p style="font-size:12px;color:#9CA3AF;margin:0;text-align:center;line-height:1.6;">
                    Questions? Contact
                    <a href="mailto:support@yourcompany.com"
                       style="color:#6B7280;text-decoration:underline;">support@yourcompany.com</a>
                    <br>
                    {{ config('app.name', 'YourProduct') }} &bull;
                    <a href="#" style="color:#9CA3AF;text-decoration:underline;">Unsubscribe</a> &bull;
                    <a href="{{ config('app.url') }}" style="color:#9CA3AF;text-decoration:underline;">Privacy Policy</a>
                    <br><br>
                    <span style="font-size:11px;">
                        This email was auto-generated by the Notion &times; Claude documentation pipeline.
                    </span>
                </p>
            </td>
        </tr>

    </table>
</td></tr>
</table>

</body>
</html>