<!DOCTYPE html>
<html lang="{{ default_locale | default('en') }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ site.title }}</title>
    {% if theme.favicon %}
    <link rel="icon" href="{{ theme.favicon }}">
    {% endif %}
    <style>
        :root {
            --td-color-primary: {{ theme.colors.primary | default('#3D352F') }};
            --td-color-accent: {{ theme.colors.accent | default('#B7522C') }};
            --td-color-bg: {{ theme.colors.bg | default('#F9F6F2') }};
            --td-color-text: {{ theme.colors.text | default('#333333') }};
            --td-color-text-secondary: {{ theme.colors.text_secondary | default('#555555') }};
            --td-color-surface: {{ theme.colors.surface | default('#FFFFFF') }};
            --td-color-border: {{ theme.colors.border | default('#E8E4DF') }};
            --td-radius: {{ theme.border_radius | default('4px') }};
            --td-font-family: {{ theme.font_family | default("-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif") }};
        }
        * { box-sizing: border-box; }
        body {
            font-family: var(--td-font-family);
            line-height: 1.6;
            max-width: 600px;
            margin: 0 auto;
            padding: 2rem 1rem;
            background: var(--td-color-bg);
            color: var(--td-color-text);
            text-align: center;
        }
        h1 { color: var(--td-color-primary); font-size: 2.5rem; margin-bottom: 0.5rem; }
        .subtitle { color: var(--td-color-text-secondary); font-size: 1.2rem; margin-bottom: 2rem; }
        .logo {
            width: 88px;
            height: 88px;
            margin: 0 auto 1rem auto;
            display: block;
            object-fit: contain;
        }
        .languages {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        .lang-card {
            display: block;
            background: var(--td-color-surface);
            border: 1px solid var(--td-color-border);
            border-radius: var(--td-radius);
            padding: 2rem 3rem;
            text-decoration: none;
            color: inherit;
            transition: border-color 0.2s;
            min-width: 200px;
        }
        .lang-card:hover { border-color: var(--td-color-accent); }
        .lang-card h2 { margin: 0 0 0.25rem 0; color: var(--td-color-primary); }
    </style>
</head>
<body>
    {% if theme.logo %}
    <img src="{{ theme.logo }}" alt="" class="logo">
    {% endif %}
    <h1>{{ site.title }}</h1>
    <p class="subtitle">{{ site.tagline }}</p>
    <div class="languages">
        {% for loc in locales %}
        <a href="{{ loc.code }}/index.html" class="lang-card">
            <h2>{{ loc.label }}</h2>
        </a>
        {% endfor %}
    </div>
</body>
</html>
