<script setup lang="ts">
import { shippingDetails } from '~/data/products'
const page = shippingDetails.company
useSeo({ title: page.title, description: page.description, keywords: '岸基科技,船公司运营管理系统,航运数字化', canonicalPath: '/products/shipping/company' })
const breadcrumbItems = [{ label: '首页', to: '/' }, { label: '航运数字系列产品', to: '/products/shipping' }, { label: page.title }]
</script>

<template>
  <ProductDetailLayout :title="page.title" :description="page.description" :banner-image="page.bannerImage" :breadcrumb-items="breadcrumbItems" :related-products="page.relatedProducts" :related-cases="page.cases.map((item) => ({ label: item.title, to: item.to }))">
    <ProductFeatureTabs :heading="page.featureHeading" :summary="page.featureSummary" :sections="page.featureSections" />
    <ProductArchitectureCard :image="page.architectureImage" :image-alt="page.architectureAlt" description="从底层到应用，构建全链路协同骨架。" />
    <ProductAdvantagesGrid heading="产品优势" summary="围绕船公司经营链路，强化智能化、可视化、全球化运营能力。" :items="page.advantages" />
    <ProductCaseCards heading="客户案例" summary="真实项目已经落地，产品价值看得见。" :items="page.cases" />
  </ProductDetailLayout>
</template>
