{% extends "base.html" %}

{% block title %}Lamb{% endblock %}

{% block body %}
<main class="mx-auto max-w-6xl px-4 py-7 sm:px-6 lg:px-8">
    {% include "_page_header.html" with header_label="Life Automation Machine" header_title="Lamb" header_description="Orchestrate your email, calendar, and messaging tools with a UI that feels tactile and human." %}

    <div class="mb-6 flex flex-wrap gap-2">
        <a href="/integrations/" class="btn btn-sm sketch-border rounded-2xl border-stone-900 bg-[var(--color-accent)] text-stone-950 hover:bg-[var(--color-pop)]">Open Integrations</a>
        <a href="/memories/" class="btn btn-sm sketch-border rounded-2xl border-stone-900 bg-base-100 text-stone-900 hover:bg-base-200">Browse Memories</a>
        <a href="/api/docs" class="btn btn-sm sketch-border rounded-2xl border-stone-900 bg-base-100 text-stone-900 hover:bg-base-200">API Docs</a>
        <a href="/accounts/login/" class="btn btn-sm sketch-border rounded-2xl border-stone-900 bg-base-200 text-stone-900 hover:bg-base-300">Sign In</a>
    </div>

    <section class="grid grid-cols-1 gap-6 md:grid-cols-3">
        <article class="sketch-border paper-card bg-base-100/95 p-5">
            <h2 class="title-font text-4xl text-stone-900">Connect</h2>
            <p class="mt-2 text-stone-700">Link integrations like Google Calendar and configure what should sync.</p>
        </article>
        <article class="sketch-border paper-card bg-[var(--color-accent-soft)]/45 p-5">
            <h2 class="title-font text-4xl text-stone-900">Automate</h2>
            <p class="mt-2 text-stone-700">Turn incoming signals into memory, reminders, and actions without busywork.</p>
        </article>
        <article class="sketch-border paper-card bg-[var(--color-aqua)]/35 p-5">
            <h2 class="title-font text-4xl text-stone-900">Remember</h2>
            <p class="mt-2 text-stone-700">Keep your memories and reminders in one place.</p>
        </article>
    </section>
</main>
{% endblock %}