@{
    ViewData["Title"] = "Connect Calendar";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section HeadStyles {
<style>
    .hero { min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; }
    .connect-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 3rem 2.5rem; max-width: 480px; width: 100%; text-align: center; }
    .connect-card h1 { font-size: 1.6rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }
    .connect-card p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2rem; line-height: 1.6; }
    .btn-connect { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--accent-blue); color: #fff; border: none; border-radius: 8px; padding: 0.75rem 1.75rem; font-size: 0.95rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: opacity 0.15s; }
    .btn-connect:hover { opacity: 0.85; color: #fff; }
    .feature-list { list-style: none; padding: 0; margin: 1.5rem 0 0; text-align: left; font-size: 0.83rem; color: var(--text-muted); }
    .feature-list li { padding: 0.3rem 0; }
    .feature-list li::before { content: "→ "; color: var(--accent-green); }
    .ms-logo { width: 20px; height: 20px; }
</style>
}

<div class="hero">
    <div class="connect-card">
        <div style="font-size: 2.5rem; margin-bottom: 1rem;">📅</div>
        <h1>Hotline Planner Sync</h1>
        <p>
            Connect your Microsoft 365 calendar to enable real-time webhook synchronisation.
            Changes in your calendar are captured instantly via Graph delta queries.
        </p>

        <a href="@Url.Action("Login", "Home")" class="btn-connect">
            <svg class="ms-logo" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
                <rect x="1" y="1" width="9" height="9" fill="#f25022"/>
                <rect x="11" y="1" width="9" height="9" fill="#7fba00"/>
                <rect x="1" y="11" width="9" height="9" fill="#00a4ef"/>
                <rect x="11" y="11" width="9" height="9" fill="#ffb900"/>
            </svg>
            Connect Microsoft Calendar
        </a>

        <ul class="feature-list">
            <li>Real-time webhook notifications via Microsoft Graph</li>
            <li>Delta query sync — only fetches what changed</li>
            <li>Live activity dashboard with full audit trail</li>
            <li>Auto-renewal of webhook subscriptions every 12h</li>
            <li>Duplicate event filtering (Subject + Start + End hash)</li>
        </ul>
    </div>
</div>