@php
    $phones = $tps['phones'] ?? [];
    $wa     = $tps['whatsapp'] ?? null;
    $email  = $tps['email'] ?? null;
    $site   = $tps['website'] ?? null;
@endphp
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Your VetOne demo has ended</title>
    <style>
        :root { --brand:#0d9488; --brand-d:#0f766e; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; }
        * { box-sizing:border-box; }
        body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
               font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink);
               background:linear-gradient(160deg,#0f766e 0%,#0d9488 40%,#f1f5f9 40.1%); }
        .card { background:#fff; border-radius:20px; box-shadow:0 20px 40px rgba(15,118,110,.25);
                max-width:520px; width:calc(100% - 40px); padding:40px 32px; text-align:center; margin:24px; }
        .icon { font-size:44px; }
        h1 { font-size:24px; margin:10px 0 6px; }
        p.lead { color:var(--muted); margin:0 0 24px; line-height:1.5; }
        .contacts { text-align:left; border-top:1px solid var(--line); padding-top:20px; margin-top:8px; }
        .contacts h2 { font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 12px; }
        .contact { display:flex; align-items:center; gap:12px; padding:9px 0; font-size:15px; }
        .contact a { color:var(--brand-d); text-decoration:none; font-weight:600; }
        .contact a:hover { text-decoration:underline; }
        .cta { display:inline-block; margin-top:20px; background:#25D366; color:#fff; text-decoration:none;
               padding:13px 22px; border-radius:12px; font-weight:700; }
        .cta:hover { filter:brightness(.95); }
        .brandline { margin-top:22px; color:var(--muted); font-size:13px; }
    </style>
</head>
<body>
<div class="card">
    <div class="icon">⏳</div>
    <h1>Your 48-hour VetOne demo has ended</h1>
    <p class="lead">We hope you enjoyed the tour. To keep your clinic, activate a full account, or extend the demo — the TPS team is one message away.</p>

    <div class="contacts">
        <h2>Contact TPS</h2>
        @if ($email)
            <div class="contact">📧 <a href="mailto:{{ $email }}">{{ $email }}</a></div>
        @endif
        @foreach ($phones as $p)
            <div class="contact">📞 <a href="tel:{{ preg_replace('/\s+/', '', $p) }}">{{ $p }}</a></div>
        @endforeach
        @if ($site)
            <div class="contact">🌐 <a href="{{ $site }}" target="_blank" rel="noopener">{{ preg_replace('#^https?://#', '', $site) }}</a></div>
        @endif
    </div>

    @if ($wa)
        <a class="cta" href="https://wa.me/{{ $wa }}" target="_blank" rel="noopener">💬 Chat with TPS on WhatsApp</a>
    @endif

    <div class="brandline">VetOne · powered by TPS</div>
</div>
</body>
</html>
