---
import Base from "../../layouts/Base.astro";
import Header from "../../components/Header.astro";
import Footer from "../../components/Footer.astro";
import CTA from "../../components/CTA.astro";
import { site } from "../../data/site";

export function getStaticPaths() {
  return site.services.map((service) => ({ params: { slug: service.slug }, props: { service } }));
}
type Service = (typeof site.services)[number];
const { service } = Astro.props as { service: Service };
const pageUrl = new URL(`/services/${service.slug}/`, Astro.site).href;
const jsonLd = [{
  "@context": "https://schema.org", "@type": "Service", "@id": `${pageUrl}#service`, name: service.name,
  serviceType: service.name, description: service.seoDescription, url: pageUrl,
  provider: { "@id": new URL("/#organization", Astro.site).href }, areaServed: { "@type": "Country", name: "中国" },
}, { "@context": "https://schema.org", "@type": "BreadcrumbList", itemListElement: [{ "@type": "ListItem", position: 1, name: "首页", item: new URL("/", Astro.site).href }, { "@type": "ListItem", position: 2, name: "产品服务", item: new URL("/services/", Astro.site).href }, { "@type": "ListItem", position: 3, name: service.name, item: pageUrl }] }];
const related = site.services.filter((item) => item.slug !== service.slug);
---
<Base title={service.seoTitle} description={service.seoDescription} keywords={service.seoKeywords} {jsonLd}>
  <Header /><main id="main-content">
    <section class:list={["service-hero", `service-hero--${service.type}`]}><div class="service-hero__grid"></div><div class="container service-hero__inner"><div data-reveal><div class="breadcrumb"><a href="/">首页</a> / <a href="/services/">产品服务</a> / {service.name}</div><div class="service-hero__tag"><span>{service.index}</span>{service.kicker}</div><h1>{service.name}<br /><em>{service.intro}</em></h1><div class="hero__actions"><a class:list={["button", { "button--green": service.type === "smo" }]} href="/contact/">预约服务咨询 <span>↗</span></a><a class="button button--outline" href="#capabilities">查看核心能力</a></div></div>
      <div class="service-hero-console" data-reveal><div class="console-top"><i></i><i></i><i></i><span>AILEAD / {service.type.toUpperCase()} MONITOR</span></div><div class="console-main"><div class="console-score"><span>VISIBILITY</span><strong>{service.type === "smo" ? "91" : "86"}</strong><small>实时示意</small></div><div class="console-chart">{[48, 62, 54, 73, 69, 84, 92].map((height, index) => <i style={`height:${height}%`}><span>0{index + 1}</span></i>)}</div></div><div class="console-foot">{service.capabilities.map((item) => <span><i></i>{item.label}</span>)}</div></div>
    </div></section>
    <section id="capabilities" class="section-pad section-muted"><div class="container service-cap-layout"><div><div class="eyebrow"><span></span>WHAT WE DELIVER</div><h2>把复杂的搜索问题<br />拆成可执行的能力模块</h2><p>{service.seoDescription}</p></div><div class="service-cap-grid">{service.capabilities.map((capability, index) => <article data-reveal><span>0{index + 1}</span><h3>{capability.label}</h3><p>{capability.value}</p></article>)}</div></div></section>
    <section class="section-pad section-white"><div class="container service-feature-layout"><div class={`service-symbol service-symbol--${service.type}`} data-reveal><span>{service.type.toUpperCase()}</span><i></i><strong>{service.index}</strong></div><div><div class="eyebrow"><span></span>WHY IT WORKS</div><h2>以数据和内容，持续建立品牌搜索资产</h2><ul class="large-check-list">{service.features.map((feature, index) => <li data-reveal><span>0{index + 1}</span><p>{feature}</p></li>)}</ul></div></div></section>
    <section class="section-pad process-section"><div class="container"><div class="section-heading section-heading--center section-heading--light" data-reveal><div class="eyebrow"><span></span>STANDARD PROCESS</div><h2>四步标准化服务流程</h2><p>每个阶段都有清晰的输入、动作与可见输出，不做无法解释的黑盒操作。</p></div><div class="process-grid">{service.process.map((step, index) => <article data-reveal><span>0{index + 1}</span><h3>{step}</h3><i>{index < service.process.length - 1 ? "→" : "✓"}</i></article>)}</div></div></section>
    <nav class="related-services" aria-label="其他服务"><div class="container">{related.map((item) => <a href={`/services/${item.slug}/`}><span>{item.index}</span><strong>{item.name}</strong><i>↗</i></a>)}</div></nav>
    <CTA title={`从一次${service.name}诊断开始`} text="先看清品牌现状、关键问题和优先机会，再决定适合的优化节奏。" />
  </main><Footer />
</Base>
