<!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>{{ $subject ?? config('app.name') }}</title>
<style>
    /* Reset */
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0; mso-table-rspace: 0; }
    img { -ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none; }
    body { margin: 0; padding: 0; background-color: #0f0f0f; width: 100% !important; }
    .wrapper { background-color: #0f0f0f; padding: 40px 16px; }
    .email-card {
        max-width: 600px;
        margin: 0 auto;
        background: #181818;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid #2a2a2a;
        box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    }
    /* Header */
    .email-header {
        background: #0f0f0f;
        border-bottom: 1px solid #2a2a2a;
        padding: 28px 40px;
        text-align: center;
    }
    .email-header img { height: 36px; display: block; margin: 0 auto; }
    /* Body */
    .email-body { padding: 40px; }
    .email-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin: 0 auto 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
    }
    h1.email-title {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: #f1f1f1;
        margin: 0 0 8px;
        text-align: center;
        line-height: 1.3;
    }
    p.email-subtitle {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 14px;
        color: #888;
        text-align: center;
        margin: 0 0 32px;
        line-height: 1.6;
    }
    p.email-text {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 15px;
        color: #c8c8c8;
        margin: 0 0 20px;
        line-height: 1.7;
    }
    /* CTA Button */
    .email-btn-wrap { text-align: center; margin: 32px 0; }
    .email-btn {
        display: inline-block;
        background: #e61e1e;
        color: #ffffff !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        padding: 14px 36px;
        border-radius: 50px;
        letter-spacing: 0.3px;
        box-shadow: 0 8px 24px rgba(230,30,30,0.35);
    }
    .email-btn:hover { background: #c91a1a; }
    /* Info box */
    .email-infobox {
        background: #222;
        border: 1px solid #2d2d2d;
        border-radius: 12px;
        padding: 20px 24px;
        margin: 24px 0;
    }
    .email-infobox-label {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #666;
        margin: 0 0 12px;
    }
    .email-inforow {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .email-inforow:last-child { margin-bottom: 0; }
    .email-inforow-key {
        font-size: 13px;
        color: #666;
        min-width: 90px;
        flex-shrink: 0;
    }
    .email-inforow-val {
        font-size: 13px;
        color: #c8c8c8;
        font-weight: 500;
        word-break: break-all;
    }
    /* Divider */
    .email-divider {
        border: none;
        border-top: 1px solid #2a2a2a;
        margin: 32px 0;
    }
    /* Small note */
    .email-note {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 12px;
        color: #555;
        text-align: center;
        line-height: 1.7;
        margin: 0;
    }
    .email-note a { color: #888; text-decoration: underline; }
    /* Footer */
    .email-footer {
        background: #0f0f0f;
        border-top: 1px solid #2a2a2a;
        padding: 24px 40px;
        text-align: center;
    }
    .email-footer p {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 12px;
        color: #444;
        margin: 4px 0;
        line-height: 1.6;
    }
    .email-footer a { color: #666; text-decoration: none; }
    .email-footer a:hover { color: #e61e1e; }
    /* Thumbnail */
    .email-thumb-wrap { margin: 0 0 28px; text-align: center; }
    .email-thumb-wrap a { display: block; }
    .email-thumb-wrap img {
        width: 100%;
        max-width: 520px;
        height: auto;
        border-radius: 12px;
        display: block;
        margin: 0 auto;
        border: 1px solid #2a2a2a;
    }
    .email-thumb-placeholder {
        width: 100%;
        max-width: 520px;
        height: 190px;
        background: linear-gradient(135deg, #1a1a1a 0%, #2a0808 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        border: 1px solid #2a2a2a;
        flex-direction: column;
        gap: 10px;
    }
    .email-thumb-placeholder span {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: #888;
    }
    @media only screen and (max-width: 600px) {
        .wrapper { padding: 20px 10px; }
        .email-body { padding: 28px 24px; }
        .email-header { padding: 22px 24px; }
        .email-footer { padding: 20px 24px; }
        h1.email-title { font-size: 20px; }
    }
</style>
</head>
<body>
<div class="wrapper">
    <div class="email-card">

        {{-- Header --}}
        <div class="email-header">
            <img src="{{ config('app.url') }}/storage/images/fullLogo.png" alt="{{ config('app.name') }}">
        </div>

        {{-- Body --}}
        <div class="email-body">
            {{ $slot }}
        </div>

        {{-- Footer --}}
        <div class="email-footer">
            <p>&copy; {{ date('Y') }} <strong style="color:#666;">TAKEONE</strong> &mdash; Video Platform</p>
            <p><a href="{{ config('app.url') }}">{{ config('app.url') }}</a></p>
            <p style="margin-top:8px;">This email was sent to you because you have an account on TAKEONE.</p>
        </div>

    </div>
</div>
</body>
</html>
