<template>
  <div>
    <UPageHero
      title="客制化高定系统"
      description="以自研技术为核心，专注打造高度定制化的交互展示系统。首创动态竞标与赞助商展示方案，全面支持宴会、活动与颁奖典礼等多场景应用，让每一场盛会更具视觉冲击与品牌价值。"
    />

    <UContainer>
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
          <UForm :schema="orderSchema" :state="orderState" class="space-y-4">
            <!-- 基本信息 -->
            <EventOrderMetaDetails />
            <!-- 竞价系统 -->
            <EventOrderProductBidding />
            <!-- 舞台背景设计 -->
            <EventOrderProductBackgroundDesign />
            <!-- 流程 / 投影 PPT 设计 -->
            <EventOrderProductFlowDesign />
            <!-- 赞助商位设计 -->
            <EventOrderProductSponsor />
          </UForm>
        </div>
        <div class="lg:col-span-1">
          <EventOrderSummary />
        </div>
      </div>
    </UContainer>
  </div>
</template>

<script lang="ts" setup>
const { orderSchema, orderState } = useEventOrder();

useSeoMeta({
  title: "Tootaio · 活动价目估算",
  description:
    "在线选择服务，实时获得预算估算，包括竞价系统、舞台背景设计、流程/投影PPT与赞助商位设计。",
  ogTitle: "Tootaio · 活动价目估算",
  ogDescription: "在线选择服务，实时获得预算估算：竞价系统、舞台背景、PPT等。",
  twitterCard: "summary_large_image",
});
</script>

<style></style>
