{% extends "base.html" %}

{% block title %}欢迎 - {{ super() }}{% endblock %}

{% block content %}
<section class="home-grid">
    <a href="/article/create"
       class="home-grid__item home-grid__item--highlight home-grid__item--new"
       data-feature="article"
       @click="handleFeatureEntry($event, '/article/create', 'article')">
        <span>文章创作</span>
    </a>

    <a href="/detect"
       class="home-grid__item home-grid__item--highlight home-grid__item--new"
       data-feature="detect"
       @click="handleFeatureEntry($event, '/detect', 'detect')">
        <span>AI内容检测</span>
    </a>

    <a href="/novel"
       class="home-grid__item home-grid__item--highlight home-grid__item--new"
       data-feature="novel"
       @click="handleFeatureEntry($event, '/novel', 'novel')">
        <span>小说大纲</span>
    </a>

    <a href="/novel/chapter"
       class="home-grid__item home-grid__item--highlight home-grid__item--new"
       data-feature="novel_chapter"
       @click="handleFeatureEntry($event, '/novel/chapter', 'novel_chapter')">
        小说章节
    </a>

    <a href="#"
       class="home-grid__item"
       @click.prevent="showComingSoon('对联')">
        对联
    </a>

    <a href="#"
       class="home-grid__item"
       @click.prevent="showComingSoon('唐诗')">
        唐诗
    </a>

    <a href="#"
       class="home-grid__item"
       @click.prevent="showComingSoon('宋词')">
        宋词
    </a>

    <a href="#"
       class="home-grid__item"
       @click.prevent="showComingSoon('元曲')">
        元曲
    </a>

    <a href="#"
       class="home-grid__item"
       @click.prevent="showComingSoon('骈赋')">
        骈赋
    </a>
</section>
{% endblock %}

{% block head %}
{{ super() }}
<style>
    .home-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        max-width: 780px;
        margin: 60px auto 80px;
        justify-items: center;
    }

    .home-grid__item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 48px 12px;
        border-radius: 16px;
        background: #ffffff;
        color: var(--color-text-primary);
        font-size: 20px;
        font-weight: 600;
        text-decoration: none;
        border: 1px solid rgba(15, 23, 42, 0.08);
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        box-shadow: 0 10px 24px -20px rgba(15, 23, 42, 0.5);
    }

    .home-grid__item:hover {
        transform: translateY(-2px);
        border-color: rgba(234, 88, 12, 0.35);
        box-shadow: 0 18px 32px -18px rgba(234, 88, 12, 0.45);
    }

    .home-grid__item--highlight {
        font-size: 22px;
        letter-spacing: 0.6px;
    }

    .home-grid__item--new {
        position: relative;
        overflow: hidden;
    }

    .home-grid__item--new::after {
        content: '';
        position: absolute;
        top: 14px;
        right: 18px;
        background: transparent;
        color: transparent;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: color 0.18s ease, transform 0.18s ease;
    }

    .home-grid__item--new:hover::after {
        content: '+new';
        color: #f97316;
        transform: translateY(-2px);
    }

    @media (max-width: 920px) {
        .home-grid {
            max-width: 520px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 600px) {
        .home-grid {
            margin: 36px auto 48px;
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .home-grid__item {
            padding: 38px 10px;
            font-size: 18px;
        }

        .home-grid__item--highlight {
            font-size: 20px;
        }
    }
</style>
{% endblock %}