<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex,nofollow">
    <title>دعوت همکاری کلینیک</title>
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
    <style>
        @font-face {
            font-family: 'Vazirmatn';
            src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
            font-weight: 400; font-display: swap;
        }
        @font-face {
            font-family: 'Vazirmatn';
            src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
            font-weight: 700; font-display: swap;
        }
        :root {
            --ok:#15a35a; --ok-600:#12904f;
            --err:#e0394a; --err-600:#c62f3f;
            --ink:#0f1b2e; --muted:#56657c; --line:#e4e9f1;
            --primary:#5457dd;
            --shadow-lg:0 12px 32px rgba(15,27,46,.12), 0 4px 10px rgba(15,27,46,.06);
            --ease:cubic-bezier(.22,.61,.36,1);
        }
        * { box-sizing: border-box; }
        html, body { height: 100%; }
        body {
            margin:0; font-family:'Vazirmatn', ui-sans-serif, system-ui, sans-serif; color:var(--ink);
            background: radial-gradient(1200px 600px at 50% -10%, #e9eefb 0%, #eef2f8 45%, #e6ecf4 100%);
            min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
        }
        .card {
            position:relative; overflow:hidden; background:#fff; border:1px solid var(--line);
            border-radius:24px; box-shadow:var(--shadow-lg); width:100%; max-width:420px;
            padding:40px 28px 30px; text-align:center; animation:rise .45s var(--ease) both;
        }
        @keyframes rise { from { opacity:0; transform:translateY(14px) scale(.98); } }
        .accent { position:absolute; inset:0 0 auto 0; height:6px; background:linear-gradient(90deg,#5457dd,#8a8cf0); }
        .logo { width:70px; height:70px; margin:6px auto 20px; border-radius:20px; background:#eef0fe;
                display:flex; align-items:center; justify-content:center; font-size:34px; }
        h1 { font-size:21px; font-weight:700; margin:0 0 12px; }
        p.msg { color:var(--muted); font-size:14.5px; margin:0 auto 10px; line-height:2.1; max-width:330px; }
        p.msg b { color:var(--ink); }
        .hint { color:#9aa1ad; font-size:12.5px; margin:4px 0 24px; }
        .btn { display:block; width:100%; padding:13px; border-radius:12px; text-decoration:none;
               font-weight:700; font-size:15px; border:none; cursor:pointer; color:#fff;
               transition:filter .15s, transform .05s; }
        .btn + .btn { margin-top:12px; }
        .btn:active { transform:translateY(1px); }
        .btn-ok { background:var(--ok); }
        .btn-ok:hover { background:var(--ok-600); }
        .btn-err { background:#fff; color:var(--err); border:1px solid var(--err); }
        .btn-err:hover { background:#fdebed; }
        .brand { margin-top:20px; font-size:11.5px; color:#aeb4c0; letter-spacing:.2px; }
    </style>
</head>
<body>
    <div class="card">
        <div class="accent"></div>
        <div class="logo">🩺</div>

        <h1>دعوت به همکاری</h1>
        {% if doctor %}<p class="msg">{{ doctor }} عزیز،</p>{% endif %}
        <p class="msg">کلینیک <b>{{ clinic }}</b> شما را برای همکاری دعوت کرده است.</p>
        <p class="hint">این دعوت تا ۷۲ ساعت معتبر است.</p>

        <form method="post" action="{{ path('invitation_web_respond', {token: token}) }}">
            <input type="hidden" name="_token" value="{{ csrf_token('invitation_' ~ token) }}">
            <button type="submit" name="action" value="accept" class="btn btn-ok">تایید و پذیرش دعوت</button>
            <button type="submit" name="action" value="reject" class="btn btn-err">رد دعوت</button>
        </form>

        <div class="brand">کلینیک پرو</div>
    </div>
</body>
</html>
