<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Set up your VetOne demo</title>
    <style>
        :root { --brand:#0d9488; --brand-d:#0f766e; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#f1f5f9; }
        * { box-sizing:border-box; }
        body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
        .wrap { max-width:760px; margin:0 auto; padding:32px 20px 64px; }
        h1 { font-size:26px; margin:6px 0; text-align:center; }
        .sub { text-align:center; color:var(--muted); margin:0 0 24px; }
        .note { background:#ecfeff; border:1px solid #a5f3fc; color:#0e7490; padding:12px 14px; border-radius:12px; font-size:14px; margin-bottom:20px; }
        .ok  { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; padding:10px 12px; border-radius:10px; margin-bottom:14px; font-size:14px; }
        .bad { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; padding:10px 12px; border-radius:10px; margin-bottom:14px; font-size:14px; }
        .card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; margin-bottom:16px; }
        .card h2 { font-size:17px; margin:0 0 4px; display:flex; align-items:center; gap:8px; }
        .card p { color:var(--muted); font-size:14px; margin:4px 0 12px; }
        .pill { font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; }
        .pill-ok { background:#dcfce7; color:#166534; }
        .pill-todo { background:#fef9c3; color:#854d0e; }
        .btn { display:inline-block; text-decoration:none; text-align:center; border:none; cursor:pointer; padding:11px 16px; border-radius:10px; font-size:14px; font-weight:600; }
        .btn-primary { background:var(--brand); color:#fff; } .btn-primary:hover { background:var(--brand-d); }
        .btn-ghost { background:#fff; color:var(--ink); border:1px solid var(--line); }
        .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
        input[type=text]{ flex:1; min-width:200px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; }
        details { margin-top:10px; font-size:13px; color:var(--muted); }
        details summary { cursor:pointer; color:var(--brand-d); font-weight:600; }
        ol { margin:8px 0 0; padding-left:18px; } ol li { margin:4px 0; }
        .finish { display:flex; gap:12px; justify-content:space-between; margin-top:8px; }
        code { background:#f1f5f9; padding:1px 5px; border-radius:5px; }
    </style>
</head>
<body>
<div class="wrap">
    <h1>Your clinic is ready 🎉</h1>
    <p class="sub">Two optional integrations before you jump in. You can skip either and set it up later.</p>

    @if ($provisioned)
        <div class="note">
            Your admin login is <strong>{{ $provisioned['username'] }}</strong> and your portal address is
            <strong>vetone.app/t/{{ $provisioned['slug'] }}</strong>. This demo stays active for <strong>48 hours</strong>.
        </div>
    @endif
    @if (session('success'))<div class="ok">{{ session('success') }}</div>@endif
    @if (session('error'))<div class="bad">{{ session('error') }}</div>@endif

    {{-- WhatsApp --}}
    <div class="card">
        <h2>💬 Connect WhatsApp
            <span class="pill {{ $waConfigured ? 'pill-ok' : 'pill-todo' }}">{{ $waConfigured ? 'Connected' : 'Optional' }}</span>
        </h2>
        <p>Pair a WhatsApp number by scanning a QR code — enables appointment reminders and the AI auto-reply.</p>
        <a class="btn btn-primary" href="{{ url('/whatsapp/channels') }}">Open WhatsApp setup →</a>
    </div>

    {{-- Groq --}}
    <div class="card">
        <h2>🤖 Add a Groq API key
            <span class="pill {{ $groqConfigured ? 'pill-ok' : 'pill-todo' }}">{{ $groqConfigured ? 'Configured' : 'Optional' }}</span>
        </h2>
        <p>Powers the AI scribe, SOAP structuring and clinical suggestions. Free tier available. Skip it and AI simply stays off until you add a key.</p>

        <form class="row" method="POST" action="{{ route('vetone.onboarding.groq') }}">
            @csrf
            <input type="text" name="api_key" placeholder="gsk_..." autocomplete="off">
            <button type="submit" class="btn btn-primary">Save key</button>
        </form>

        <details>
            <summary>How do I get a free Groq API key?</summary>
            <ol>
                <li>Go to <code>https://console.groq.com</code> and sign in (Google/GitHub works).</li>
                <li>Open <strong>API Keys</strong> in the left menu.</li>
                <li>Click <strong>Create API Key</strong>, name it (e.g. “VetOne”), and copy it — it starts with <code>gsk_</code>.</li>
                <li>Paste it above and press <strong>Save key</strong>. You can revoke it any time from the Groq console.</li>
            </ol>
            <p>Prefer the full settings screen? <a href="{{ url('/ai-core/settings') }}">Open AI settings →</a></p>
        </details>
    </div>

    <div class="finish">
        <form method="POST" action="{{ route('vetone.onboarding.skip') }}">
            @csrf
            <button type="submit" class="btn btn-ghost">Skip for now</button>
        </form>
        <form method="POST" action="{{ route('vetone.onboarding.finish') }}">
            @csrf
            <button type="submit" class="btn btn-primary">Go to my dashboard →</button>
        </form>
    </div>
</div>
</body>
</html>
