{{define "workflow-landing.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.Data.Name}} — {{.InstanceName}}</title>
    <link rel="icon" type="image/svg+xml" href="{{.BasePath}}/favicon.svg?v={{.Version}}">
    <link rel="stylesheet" href="{{.BasePath}}/css/variables.css?v={{.Version}}">
    <link rel="stylesheet" href="{{.BasePath}}/css/primitives.css?v={{.Version}}">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --wf-accent: {{if .Data.Branding.AccentColor}}{{.Data.Branding.AccentColor}}{{else}}var(--accent){{end}};
        }
        body {
            font-family: var(--font);
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .wf-landing {
            max-width: 480px;
            width: 100%;
            padding: 24px;
            text-align: center;
        }
        .wf-logo {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            background: var(--wf-accent);
            margin: 0 auto 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: #fff;
        }
        .wf-logo img {
            width: 100%;
            height: 100%;
            border-radius: 16px;
            object-fit: cover;
        }
        .wf-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
        }
        .wf-description {
            font-size: 15px;
            color: var(--text-2);
            line-height: 1.6;
            margin-bottom: 32px;
        }
        .wf-tagline {
            font-size: 13px;
            color: var(--text-3);
            margin-bottom: 24px;
            font-style: italic;
        }
        .wf-persona {
            display: flex;
            align-items: center;
            gap: 10px;
            justify-content: center;
            margin-bottom: 32px;
            font-size: 14px;
            color: var(--text-2);
        }
        .wf-persona-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--bg-raised);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        .wf-start-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 40px;
            background: var(--wf-accent);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            font-family: var(--font);
            cursor: pointer;
            transition: opacity 0.15s;
        }
        .wf-start-btn:hover { opacity: 0.9; }
        .wf-start-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .wf-resume {
            display: block;
            margin-top: 16px;
            font-size: 14px;
            color: var(--wf-accent);
            text-decoration: none;
        }
        .wf-resume:hover { text-decoration: underline; }
        .wf-footer {
            margin-top: 48px;
            font-size: 12px;
            color: var(--text-3);
        }

        @media (prefers-color-scheme: dark) {
            body { background: var(--bg); color: var(--text); }
        }
    </style>
    <script>
        // Apply dark/light based on OS preference
        (function() {
            const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
        })();
    </script>
</head>
<body>
    <div class="wf-landing">
        {{if .Data.Branding.LogoURL}}
        <div class="wf-logo">
            <img src="{{.Data.Branding.LogoURL}}" alt="{{.Data.Name}}">
        </div>
        {{else}}
        <div class="wf-logo">{{if .Data.PersonaIcon}}{{.Data.PersonaIcon}}{{else}}⚡{{end}}</div>
        {{end}}

        <h1 class="wf-title">{{.Data.Name}}</h1>

        {{if .Data.Branding.Tagline}}
        <p class="wf-tagline">{{.Data.Branding.Tagline}}</p>
        {{end}}

        {{if .Data.Description}}
        <p class="wf-description">{{.Data.Description}}</p>
        {{end}}

        {{if and .Data.PersonaName (ne .Data.FirstStageMode "form_only")}}
        <div class="wf-persona">
            <div class="wf-persona-icon">{{if .Data.PersonaIcon}}{{.Data.PersonaIcon}}{{else}}🤖{{end}}</div>
            {{if eq .Data.FirstStageMode "form_chat"}}
            <span>Fill out a form and chat with <strong>{{.Data.PersonaName}}</strong></span>
            {{else}}
            <span>You'll be chatting with <strong>{{.Data.PersonaName}}</strong></span>
            {{end}}
        </div>
        {{end}}

        <button class="wf-start-btn" id="startBtn" onclick="startWorkflow()">
            {{if eq .Data.FirstStageMode "form_only"}}Fill Out Form{{else}}Start{{end}}
        </button>

        {{if .Data.ResumeURL}}
        <a class="wf-resume" href="{{.Data.ResumeURL}}">Resume previous session →</a>
        {{end}}

        <div class="wf-footer">
            Powered by {{.InstanceName}}
        </div>
    </div>

    <script>
        async function startWorkflow() {
            const btn = document.getElementById('startBtn');
            btn.disabled = true;
            btn.textContent = 'Starting…';

            try {
                const resp = await fetch('{{.BasePath}}/api/v1/workflow-entry/{{.Data.Scope}}/{{.Data.Slug}}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                });
                const data = await resp.json();
                if (resp.ok && data.redirect_to) {
                    window.location.href = '{{.BasePath}}' + data.redirect_to;
                } else {
                    alert(data.error || 'Failed to start workflow');
                    btn.disabled = false;
                    btn.textContent = 'Start';
                }
            } catch (err) {
                alert('Network error — please try again');
                btn.disabled = false;
                btn.textContent = 'Start';
            }
        }
    </script>
</body>
</html>
{{end}}
