ElevenLabs MCP Server

<script lang="ts">
    import { page } from '$app/stores';
</script>

<div class="layout">
    <header>
        <div class="header-content">
            <h1>ElevenLabs MCP Client Example</h1>
            <p>A sample MCP client implementation using SvelteKit, demonstrating integration with ElevenLabs Text-to-Speech API through MCP Server.</p>
        </div>
    </header>
    <nav>
        <a 
            href="/" 
            class="nav-link" 
            class:active={$page.url.pathname === '/'}
        >
            Simple TTS
        </a>
        <a 
            href="/script" 
            class="nav-link" 
            class:active={$page.url.pathname === '/script'}
        >
            Script TTS
        </a>
        <a 
            href="/history" 
            class="nav-link" 
            class:active={$page.url.pathname === '/history'}
        >
            History
        </a>
    </nav>

    <slot />
</div>

<style>
    .layout {
        min-height: 100vh;
        background: var(--color-background);
    }

    header {
        background: var(--color-surface);
        border-bottom: 1px solid var(--border-color);
        padding: var(--spacing-8) var(--spacing-4);
        text-align: center;
    }

    .header-content {
        max-width: 800px;
        margin: 0 auto;
    }

    header h1 {
        color: var(--color-text);
        font-size: var(--font-size-2xl);
        margin: 0 0 var(--spacing-2);
    }

    header p {
        color: var(--color-text-light);
        font-size: var(--font-size-base);
        margin: 0;
        line-height: 1.5;
    }

    nav {
        background: var(--color-surface);
        padding: var(--spacing-4);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        gap: var(--spacing-4);
        justify-content: center;
        box-shadow: var(--shadow-sm);
    }

    .nav-link {
        padding: var(--spacing-2) var(--spacing-4);
        color: var(--color-secondary);
        text-decoration: none;
        border-radius: var(--border-radius-base);
        transition: all var(--transition-base);
        font-size: var(--font-size-base);
    }

    .nav-link:hover {
        background: var(--color-background);
        color: var(--color-text);
        transform: translateY(-1px);
    }

    .nav-link.active {
        background: var(--color-primary);
        color: var(--color-surface);
        font-weight: 500;
    }

    @media (max-width: 640px) {
        header {
            padding: var(--spacing-6) var(--spacing-4);
        }

        header h1 {
            font-size: var(--font-size-xl);
        }

        header p {
            font-size: var(--font-size-sm);
        }

        nav {
            padding: var(--spacing-3);
            gap: var(--spacing-2);
        }

        .nav-link {
            padding: var(--spacing-2) var(--spacing-3);
            font-size: var(--font-size-sm);
        }
    }
</style>