<template>
    <div class="quick-page h-full over-y-auto py-40">
        <div class="card-box">
            <header class="quick-header">
                <div class="premium-chip items-center gap-6 h-26 px-12 round-14 fs-12 fw-700">
                    <el-icon>
                        <StarFilled />
                    </el-icon>
                    <span>PREMIUM PLATFORM</span>
                </div>
                <h1 class="mt-8 fs-24 lh-44 fw-700">
                    <span>梦畅AIGC，</span>
                    <span class="gradient-title">为电商而生的 AIGC 平台</span>
                </h1>
            </header>
            <CreativeComposer class="mt-30" :active-scene="activeScene" @select-scene="activeScene = $event"
                @clear-scene="activeScene = undefined" />
        </div>
        <div class="content">
            <ToolGroup class="mt-86" />
            <InspirationGallery class="mt-36" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { StarFilled } from '@element-plus/icons-vue';
import CreativeComposer from './components/CreativeComposer.vue';
import ToolGroup from './components/ToolGroup.vue';
import InspirationGallery from './components/InspirationGallery.vue';
import type { SceneKey } from './types';

const activeScene = ref<SceneKey>();
</script>

<style scoped lang="scss">
.card-box {
    width: 1400px;
    margin: auto;
}
.content {
    width: 1600px;
    margin: auto;
}

.quick-page {
    background: #f6f9fc;
}

.quick-header h1 {
    color: #001a3d;
    letter-spacing: 0;
}

.premium-chip {
    display: inline-flex;
    color: rgba(var(--main-color), 1);
    background: #fbf1ff;
    border: 1px solid #efd6ff;
    letter-spacing: 1.4px;
}

.gradient-title {
    background: linear-gradient(90deg, #9d19ff 0%, #e01892 48%, #ff8a00 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
</style>
