botui/ui/suite/home.html

<link rel="stylesheet" href="css/home.css" />

<div class="home-container">
    <!-- Welcome Section -->
    <section class="welcome-section">
        <div class="welcome-content">
            <h1 class="welcome-title">Welcome back</h1>
            <p class="welcome-subtitle">
                Your AI-powered workspace. What would you like to do today?
            </p>
        </div>
        <div class="quick-search">
            <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <circle cx="11" cy="11" r="8" />
                <path d="m21 21-4.35-4.35" />
            </svg>
            <input
                type="text"
                placeholder="Search or ask anything..."
                id="home-search"
            />
            <kbd>⌘K</kbd>
        </div>
    </section>

    <!-- Recent Documents Section -->
    <section class="recent-section">
        <div class="section-header">
            <h2>Recent</h2>
            <a
                href="#drive"
                class="view-all"
                hx-get="/suite/drive/drive.html"
                hx-target="#main-content"
                hx-push-url="/#drive"
                >View all</a
            >
        </div>
        <div class="recent-grid" id="recent-documents">
            <!-- Recent items will be loaded here -->
            <div class="recent-card placeholder">
                <div class="recent-icon doc">
                    <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path
                            d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
                        />
                        <polyline points="14 2 14 8 20 8" />
                        <line x1="16" y1="13" x2="8" y2="13" />
                        <line x1="16" y1="17" x2="8" y2="17" />
                    </svg>
                </div>
                <div class="recent-info">
                    <span class="recent-name">Project Proposal</span>
                    <span class="recent-meta">Edited 2 hours ago</span>
                </div>
            </div>
            <div class="recent-card placeholder">
                <div class="recent-icon sheet">
                    <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <rect
                            x="3"
                            y="3"
                            width="18"
                            height="18"
                            rx="2"
                            ry="2"
                        />
                        <line x1="3" y1="9" x2="21" y2="9" />
                        <line x1="3" y1="15" x2="21" y2="15" />
                        <line x1="9" y1="3" x2="9" y2="21" />
                    </svg>
                </div>
                <div class="recent-info">
                    <span class="recent-name">Q4 Budget</span>
                    <span class="recent-meta">Edited yesterday</span>
                </div>
            </div>
            <div class="recent-card placeholder">
                <div class="recent-icon slides">
                    <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <rect
                            x="2"
                            y="3"
                            width="20"
                            height="14"
                            rx="2"
                            ry="2"
                        />
                        <line x1="8" y1="21" x2="16" y2="21" />
                        <line x1="12" y1="17" x2="12" y2="21" />
                    </svg>
                </div>
                <div class="recent-info">
                    <span class="recent-name">Team Presentation</span>
                    <span class="recent-meta">Edited 3 days ago</span>
                </div>
            </div>
            <div class="recent-card placeholder">
                <div class="recent-icon paper">
                    <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path
                            d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
                        />
                        <polyline points="14 2 14 8 20 8" />
                    </svg>
                </div>
                <div class="recent-info">
                    <span class="recent-name">Meeting Notes</span>
                    <span class="recent-meta">Edited this week</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Applications Section -->
    <section class="apps-section">
        <div class="section-header">
            <h2>Applications</h2>
        </div>
        <div class="apps-grid">
            <!-- Communication -->
            <a
                href="#chat"
                class="app-card"
                hx-get="/suite/chat/chat.html"
                hx-target="#main-content"
                hx-push-url="/#chat"
            >
                <div class="app-icon chat">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path
                            d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
                        />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Chat</h3>
                    <p>
                        AI-powered conversations. Ask questions, get help, and
                        automate tasks with your intelligent assistant.
                    </p>
                </div>
            </a>

            <a
                href="#people"
                class="app-card"
                hx-get="/suite/people/people.html"
                hx-target="#main-content"
                hx-push-url="/#people"
            >
                <div class="app-icon people">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
                        <circle cx="9" cy="7" r="4" />
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
                        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>People</h3>
                    <p>
                        Manage your contacts, groups, and organization
                        directory. Connect with colleagues and collaborators.
                    </p>
                </div>
            </a>

            <a
                href="#mail"
                class="app-card"
                hx-get="/suite/mail/mail.html"
                hx-target="#main-content"
                hx-push-url="/#mail"
            >
                <div class="app-icon mail">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path
                            d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
                        />
                        <polyline points="22,6 12,13 2,6" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Mail</h3>
                    <p>
                        Smart email with AI assistance. Write better emails,
                        organize your inbox, and never miss important messages.
                    </p>
                </div>
            </a>

            <a
                href="#meet"
                class="app-card"
                hx-get="/suite/meet/meet.html"
                hx-target="#main-content"
                hx-push-url="/#meet"
            >
                <div class="app-icon meet">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <polygon points="23 7 16 12 23 17 23 7" />
                        <rect
                            x="1"
                            y="5"
                            width="15"
                            height="14"
                            rx="2"
                            ry="2"
                        />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Meet</h3>
                    <p>
                        Video conferencing with screen sharing, live
                        transcription, and AI-powered meeting summaries.
                    </p>
                </div>
            </a>

            <!-- Productivity -->
            <a
                href="#calendar"
                class="app-card"
                hx-get="/suite/calendar/calendar.html"
                hx-target="#main-content"
                hx-push-url="/#calendar"
            >
                <div class="app-icon calendar">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <rect
                            x="3"
                            y="4"
                            width="18"
                            height="18"
                            rx="2"
                            ry="2"
                        />
                        <line x1="16" y1="2" x2="16" y2="6" />
                        <line x1="8" y1="2" x2="8" y2="6" />
                        <line x1="3" y1="10" x2="21" y2="10" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Calendar</h3>
                    <p>
                        Schedule meetings, events, and manage your time
                        effectively. Smart scheduling with conflict detection.
                    </p>
                </div>
            </a>

            <a
                href="#tasks"
                class="app-card"
                hx-get="/suite/tasks/tasks.html"
                hx-target="#main-content"
                hx-push-url="/#tasks"
            >
                <div class="app-icon tasks">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M9 11l3 3L22 4" />
                        <path
                            d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"
                        />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Tasks</h3>
                    <p>
                        Stay organized with to-do lists, priorities, and due
                        dates. Track progress and get things done.
                    </p>
                </div>
            </a>

            <a
                href="#project"
                class="app-card"
                hx-get="/suite/project/project.html"
                hx-target="#main-content"
                hx-push-url="/#project"
            >
                <div class="app-icon project">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <rect
                            x="3"
                            y="3"
                            width="18"
                            height="18"
                            rx="2"
                            ry="2"
                        />
                        <path d="M3 9h18" />
                        <path d="M9 21V9" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Project</h3>
                    <p>
                        Project management with Gantt charts, timelines, and
                        team collaboration. Plan and execute projects.
                    </p>
                </div>
            </a>

            <a
                href="#goals"
                class="app-card"
                hx-get="/suite/goals/goals.html"
                hx-target="#main-content"
                hx-push-url="/#goals"
            >
                <div class="app-icon goals">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <circle cx="12" cy="12" r="10" />
                        <circle cx="12" cy="12" r="6" />
                        <circle cx="12" cy="12" r="2" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Goals</h3>
                    <p>
                        Set objectives and key results (OKRs). Track progress,
                        align teams, and achieve your targets.
                    </p>
                </div>
            </a>

            <!-- Documents -->
            <a
                href="#paper"
                class="app-card"
                hx-get="/suite/paper/paper.html"
                hx-target="#main-content"
                hx-push-url="/#paper"
            >
                <div class="app-icon paper">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path
                            d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
                        />
                        <polyline points="14 2 14 8 20 8" />
                        <line x1="16" y1="13" x2="8" y2="13" />
                        <line x1="16" y1="17" x2="8" y2="17" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Paper</h3>
                    <p>
                        Write documents with AI assistance. Notes, reports, and
                        more with smart formatting and collaboration.
                    </p>
                </div>
            </a>

            <a
                href="#docs"
                class="app-card"
                hx-get="/suite/docs/docs.html"
                hx-target="#main-content"
                hx-push-url="/#docs"
            >
                <div class="app-icon docs">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path
                            d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
                        />
                        <polyline points="14 2 14 8 20 8" />
                        <line x1="16" y1="13" x2="8" y2="13" />
                        <line x1="16" y1="17" x2="8" y2="17" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Docs</h3>
                    <p>
                        Rich document editing with templates, real-time
                        collaboration, and advanced formatting options.
                    </p>
                </div>
            </a>

            <a
                href="#sheet"
                class="app-card"
                hx-get="/suite/sheet/sheet.html"
                hx-target="#main-content"
                hx-push-url="/#sheet"
            >
                <div class="app-icon sheet">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <rect
                            x="3"
                            y="3"
                            width="18"
                            height="18"
                            rx="2"
                            ry="2"
                        />
                        <line x1="3" y1="9" x2="21" y2="9" />
                        <line x1="3" y1="15" x2="21" y2="15" />
                        <line x1="9" y1="3" x2="9" y2="21" />
                        <line x1="15" y1="3" x2="15" y2="21" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Sheet</h3>
                    <p>
                        Spreadsheets with formulas, charts, and real-time
                        collaboration. Analyze data and create reports.
                    </p>
                </div>
            </a>

            <a
                href="#slides"
                class="app-card"
                hx-get="/suite/slides/slides.html"
                hx-target="#main-content"
                hx-push-url="/#slides"
            >
                <div class="app-icon slides">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <rect
                            x="2"
                            y="3"
                            width="20"
                            height="14"
                            rx="2"
                            ry="2"
                        />
                        <line x1="8" y1="21" x2="16" y2="21" />
                        <line x1="12" y1="17" x2="12" y2="21" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Slides</h3>
                    <p>
                        Create presentations with themes, animations, and
                        collaboration. Present with confidence.
                    </p>
                </div>
            </a>

            <!-- Storage & Media -->
            <a
                href="#drive"
                class="app-card"
                hx-get="/suite/drive/drive.html"
                hx-target="#main-content"
                hx-push-url="/#drive"
            >
                <div class="app-icon drive">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path
                            d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
                        />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Drive</h3>
                    <p>
                        Cloud storage for all your files. Upload, organize, and
                        share with powerful search and versioning.
                    </p>
                </div>
            </a>

            <a
                href="#video"
                class="app-card"
                hx-get="/suite/video/video.html"
                hx-target="#main-content"
                hx-push-url="/#video"
            >
                <div class="app-icon video">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <rect
                            x="2"
                            y="2"
                            width="20"
                            height="20"
                            rx="2.18"
                            ry="2.18"
                        />
                        <line x1="7" y1="2" x2="7" y2="22" />
                        <line x1="17" y1="2" x2="17" y2="22" />
                        <line x1="2" y1="12" x2="22" y2="12" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Video</h3>
                    <p>
                        Video library and player. Watch, organize, and share
                        videos with your team.
                    </p>
                </div>
            </a>

            <a
                href="#player"
                class="app-card"
                hx-get="/suite/player/player.html"
                hx-target="#main-content"
                hx-push-url="/#player"
            >
                <div class="app-icon player">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <polygon points="5 3 19 12 5 21 5 3" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Player</h3>
                    <p>
                        Media player for audio and video files. Stream content
                        with playlists and playback controls.
                    </p>
                </div>
            </a>

            <!-- Social & Learning -->
            <a
                href="#social"
                class="app-card"
                hx-get="/suite/social/social.html"
                hx-target="#main-content"
                hx-push-url="/#social"
            >
                <div class="app-icon social">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <circle cx="18" cy="5" r="3" />
                        <circle cx="6" cy="12" r="3" />
                        <circle cx="18" cy="19" r="3" />
                        <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
                        <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Social</h3>
                    <p>
                        Internal social network. Share updates, celebrate wins,
                        and stay connected with your team.
                    </p>
                </div>
            </a>

            <a
                href="#learn"
                class="app-card"
                hx-get="/suite/learn/learn.html"
                hx-target="#main-content"
                hx-push-url="/#learn"
            >
                <div class="app-icon learn">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
                        <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Learn</h3>
                    <p>
                        Learning management system. Courses, training materials,
                        and skill development for your team.
                    </p>
                </div>
            </a>

            <a
                href="#research"
                class="app-card"
                hx-get="/suite/research/research.html"
                hx-target="#main-content"
                hx-push-url="/#research"
            >
                <div class="app-icon research">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <circle cx="11" cy="11" r="8" />
                        <path d="m21 21-4.35-4.35" />
                        <path d="M11 8v6M8 11h6" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Research</h3>
                    <p>
                        AI-powered search and discovery. Find information across
                        all your sources with smart summaries.
                    </p>
                </div>
            </a>

            <!-- Analytics & Business -->
            <a
                href="#analytics"
                class="app-card"
                hx-get="/suite/analytics/analytics.html"
                hx-target="#main-content"
                hx-push-url="/#analytics"
            >
                <div class="app-icon analytics">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <line x1="18" y1="20" x2="18" y2="10" />
                        <line x1="12" y1="20" x2="12" y2="4" />
                        <line x1="6" y1="20" x2="6" y2="14" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Analytics</h3>
                    <p>
                        Dashboards and reports to track usage and insights.
                        Understand your data and make better decisions.
                    </p>
                </div>
            </a>

            <a
                href="#dashboards"
                class="app-card"
                hx-get="/suite/dashboards/dashboards.html"
                hx-target="#main-content"
                hx-push-url="/#dashboards"
            >
                <div class="app-icon dashboards">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <rect x="3" y="3" width="7" height="7" rx="1" />
                        <rect x="14" y="3" width="7" height="7" rx="1" />
                        <rect x="3" y="14" width="7" height="7" rx="1" />
                        <rect x="14" y="14" width="7" height="7" rx="1" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Dashboards</h3>
                    <p>
                        Custom dashboards with widgets and visualizations.
                        Monitor KPIs and business metrics in real-time.
                    </p>
                </div>
            </a>

            <a
                href="#sources"
                class="app-card"
                hx-get="/suite/sources/index.html"
                hx-target="#main-content"
                hx-push-url="/#sources"
            >
                <div class="app-icon sources">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <ellipse cx="12" cy="5" rx="9" ry="3" />
                        <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
                        <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Sources</h3>
                    <p>
                        Repositories, Apps, Prompts, Templates and MCP Servers.
                        Manage all your integrations in one place.
                    </p>
                </div>
            </a>

            <!-- Advanced Tools -->
            <a
                href="#canvas"
                class="app-card"
                hx-get="/suite/canvas/canvas.html"
                hx-target="#main-content"
                hx-push-url="/#canvas"
            >
                <div class="app-icon canvas">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <rect x="3" y="3" width="18" height="18" rx="2" />
                        <path d="M8 12h8" />
                        <path d="M12 8v8" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Canvas</h3>
                    <p>
                        Infinite whiteboard for brainstorming. Draw, add sticky
                        notes, and collaborate visually with your team.
                    </p>
                </div>
            </a>

            <a
                href="#workspace"
                class="app-card"
                hx-get="/suite/workspace/workspace.html"
                hx-target="#main-content"
                hx-push-url="/#workspace"
            >
                <div class="app-icon workspace">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <rect
                            x="2"
                            y="7"
                            width="20"
                            height="14"
                            rx="2"
                            ry="2"
                        />
                        <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Workspace</h3>
                    <p>
                        Organize your work environment. Create custom workspaces
                        for different projects and teams.
                    </p>
                </div>
            </a>

            <a
                href="#designer"
                class="app-card"
                hx-get="/designer.html"
                hx-target="#main-content"
                hx-push-url="/#designer"
            >
                <div class="app-icon designer">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M12 2L2 7l10 5 10-5-10-5z" />
                        <path d="M2 17l10 5 10-5" />
                        <path d="M2 12l10 5 10-5" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Designer</h3>
                    <p>
                        Visual dialog designer for bot conversations. Create
                        flows, manage intents, and build chatbots.
                    </p>
                </div>
            </a>

            <a
                href="#editor"
                class="app-card"
                hx-get="/editor.html"
                hx-target="#main-content"
                hx-push-url="/#editor"
            >
                <div class="app-icon editor">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <polyline points="16 18 22 12 16 6" />
                        <polyline points="8 6 2 12 8 18" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Editor</h3>
                    <p>
                        Code and text editor with syntax highlighting, AI
                        completion, and multi-file support.
                    </p>
                </div>
            </a>

            <!-- Admin & Operations -->
            <a
                href="#attendant"
                class="app-card"
                hx-get="/suite/attendant/index.html"
                hx-target="#main-content"
                hx-push-url="/#attendant"
            >
                <div class="app-icon attendant">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
                        <path d="M13.73 21a2 2 0 0 1-3.46 0" />
                        <path d="M12 2v2" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Attendant</h3>
                    <p>
                        Human handoff and queue management. Route conversations
                        to the right team members.
                    </p>
                </div>
            </a>

            <a
                href="#compliance"
                class="app-card"
                hx-get="/suite/tools/compliance.html"
                hx-target="#main-content"
                hx-push-url="/#compliance"
            >
                <div class="app-icon compliance">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                        <path d="M9 12l2 2 4-4" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Compliance</h3>
                    <p>
                        Security, auditing, and compliance tools. Monitor
                        access, track changes, and ensure data protection.
                    </p>
                </div>
            </a>

            <a
                href="#monitoring"
                class="app-card"
                hx-get="/suite/monitoring/monitoring.html"
                hx-target="#main-content"
                hx-push-url="/#monitoring"
            >
                <div class="app-icon monitoring">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Monitoring</h3>
                    <p>
                        System health, logs, and metrics. Real-time monitoring
                        of your infrastructure and applications.
                    </p>
                </div>
            </a>

            <a
                href="#settings"
                class="app-card"
                hx-get="/suite/settings/index.html"
                hx-target="#main-content"
                hx-push-url="/#settings"
            >
                <div class="app-icon settings">
                    <svg
                        width="28"
                        height="28"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <circle cx="12" cy="12" r="3" />
                        <path
                            d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
                        />
                    </svg>
                </div>
                <div class="app-content">
                    <h3>Settings</h3>
                    <p>
                        Personal preferences, account settings, and
                        administration. Customize your workspace experience.
                    </p>
                </div>
            </a>
        </div>
    </section>
</div>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        loadRecentDocuments();

        document
            .getElementById("home-search")
            ?.addEventListener("focus", () => {
                document.getElementById("omniboxInput")?.focus();
            });
    });

    async function loadRecentDocuments() {
        try {
            const response = await fetch("/api/activity/recent");
            if (response.ok) {
                const items = await response.json();
                renderRecentDocuments(items);
            }
        } catch (error) {
            console.log("Using placeholder recent documents");
        }
    }

    function renderRecentDocuments(items) {
        if (!items || items.length === 0) return;

        const container = document.getElementById("recent-documents");
        container.innerHTML = items
            .slice(0, 4)
            .map(
                (item) => `
        <div class="recent-card" onclick="window.location.href='${item.url}'">
            <div class="recent-icon ${item.type}">
                ${getIconForType(item.type)}
            </div>
            <div class="recent-info">
                <span class="recent-name">${item.name}</span>
                <span class="recent-meta">${item.meta}</span>
            </div>
        </div>
    `,
            )
            .join("");
    }

    function getIconForType(type) {
        const icons = {
            doc: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>',
            sheet: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="3" x2="9" y2="21"/></svg>',
            slides: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>',
            paper: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>',
        };
        return icons[type] || icons.doc;
    }
</script>