---
import Base from "../layouts/Base.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import SectionHeading from "../components/SectionHeading.astro";
import ProductCarousel from "../components/ProductCarousel.astro";
import CTA from "../components/CTA.astro";
import { site } from "../data/site";
import { fmtDate, getPublishedArticles } from "../lib/articles";

const latest = (await getPublishedArticles()).slice(0, 3);
const title = site.seo.title;
const jsonLd = {
  "@context": "https://schema.org",
  "@type": "ItemList",
  name: "智引未来全域搜索优化服务",
  numberOfItems: site.services.length,
  itemListElement: site.services.map((service, index) => ({
    "@type": "ListItem",
    position: index + 1,
    item: {
      "@type": "Service",
      name: service.name,
      description: service.intro,
      url: new URL(`/services/${service.slug}/`, Astro.site).href,
      provider: { "@id": new URL("/#organization", Astro.site).href },
    },
  })),
};
---
<Base {title} jsonLd={jsonLd}>
  <Header />
  <main id="main-content">
    <section class="hero">
      <div class="container hero__grid">
        <div class="hero__content" data-reveal>
          <h1>智引未来，让品牌<br /><em>被每一个搜索看见</em></h1>
          <p>{site.home.subhead}</p>
          <div class="hero__actions">
            <a class="button" href="/contact/">立即联系我们 <span>↗</span></a>
            <a class="button button--outline" href="#solutions">了解核心能力 <span>↓</span></a>
          </div>
          <div class="hero__proof"><span>真实搜索数据</span><span>双引擎协同</span><span>白盒化效果</span></div>
        </div>
        <div class="hero-platform-flow" data-reveal><ProductCarousel /></div>
      </div>
    </section>

    <section class="stat-band stat-band--light"><div class="container stat-grid">{site.home.stats.map((stat) => <div data-reveal><strong>{stat.value}</strong><p>{stat.label}</p></div>)}</div></section>

    <section id="solutions" class="section-pad section-muted">
      <div class="container">
        <SectionHeading eyebrow="DUAL-ENGINE SOLUTION" title="一套面向企业的全域搜索获客方案" description="蓝色负责技术与GEO，绿色负责增长与SMO。两条产品线共享数据底座，可独立交付，也可组合形成全搜索覆盖。" align="center" />
        <div class="engine-grid">
          {site.services.slice(0, 2).map((service) => <article class:list={["engine-card", `engine-card--${service.type}`]} data-reveal>
            <div class="engine-card__head"><span class="service-index">{service.index}</span><span class="service-badge">{service.type.toUpperCase()}</span></div>
            <p class="engine-card__kicker">{service.kicker}</p><h2>{service.name}</h2><p>{service.intro}</p>
            <ul>{service.features.slice(0, 2).map((feature) => <li>{feature}</li>)}</ul>
            <a href={`/services/${service.slug}/`}>了解{service.type.toUpperCase()}服务</a>
          </article>)}
        </div>
        <div class="support-service-grid">{site.services.slice(2).map((service) => <a href={`/services/${service.slug}/`} data-reveal>
          <span class="service-index">{service.index}</span><div><small>{service.kicker}</small><h3>{service.name}</h3><p>{service.intro}</p></div><i>↗</i>
        </a>)}</div>
      </div>
    </section>

    <section id="technology" class="section-pad tech-section">
      <div class="tech-grid-lines"></div>
      <div class="container tech-layout">
        <div><SectionHeading eyebrow="TECHNOLOGY FOUNDATION" title="数据不是装饰，而是每次判断的起点" description="从跨平台采集、语义溯源到时序分析，五项自研能力支撑GEO与SMO的监测、诊断和复盘。" light /><a class="text-link text-link--light" href="/about/#technology">查看自研技术 <span>↗</span></a></div>
        <div class="tech-stack">{site.about.technologies.map((item, index) => <div data-reveal><span>0{index + 1}</span><strong>{item}</strong><i></i></div>)}</div>
      </div>
      <div class="container tech-data-row">{[
        ["APP + WEB", "多端真实还原"], ["LLM TRACE", "引用来源解析"], ["GEO × SMO", "双频协同建模"], ["TIME SERIES", "持续趋势洞察"],
      ].map(([value, label]) => <div data-reveal><strong>{value}</strong><span>{label}</span></div>)}</div>
    </section>

    <section id="workflow" class="section-pad section-white">
      <div class="container">
        <div class="section-intro-row"><SectionHeading eyebrow="VISIBLE GROWTH LOOP" title="从看见问题，到看见增长" description="监测、诊断、优化、复盘四步贯通，让每个动作都能回到数据与证据。" /><a class="text-link" href="/methodology/">了解服务方法 <span>↗</span></a></div>
        <div class="workflow-grid">{site.workflow.map((item, index) => <article data-reveal><div><span>{item.number}</span><i>{index < site.workflow.length - 1 ? "→" : "✓"}</i></div><h3>{item.title}</h3><p>{item.desc}</p></article>)}</div>
      </div>
    </section>

    <section class="section-pad scenario-section">
      <div class="container scenario-layout">
        <div class="scenario-copy"><SectionHeading eyebrow="WHERE TO START" title="先从最影响增长的搜索缺口开始" description="不需要一次解决所有问题。用诊断确认优先级，再选择合适的产品与节奏。" /><a class="button button--outline" href="/contact/">预约全搜索诊断</a></div>
        <div class="scenario-grid">{[
          ["01", "AI里搜不到品牌", "了解品牌为什么没有进入回答，以及缺少哪些可信信息。", "geo"],
          ["02", "AI回答被竞品占据", "分析决策问题与引用来源，找到品牌进入推荐的路径。", "geo"],
          ["03", "抖音/小红书排名靠后", "识别真实搜索需求，重构内容矩阵与问题覆盖。", "smo"],
          ["04", "官网内容难被理解", "完善语义结构、品牌知识与结构化信息，建立官方信源。", "platform"],
        ].map(([num, title, desc, type]) => <article class={`scenario-card scenario-card--${type}`} data-reveal><span>{num}</span><h3>{title}</h3><p>{desc}</p></article>)}</div>
      </div>
    </section>

    {latest.length > 0 && <section class="section-pad section-white"><div class="container"><div class="section-intro-row"><SectionHeading eyebrow="AILEAD INSIGHTS" title="搜索增长洞察" description="关于GEO、SMO、AI品牌可见度与内容资产建设的持续观察。" /><a class="text-link" href="/articles/">查看全部文章 <span>↗</span></a></div><div class="article-grid">{latest.map((item, index) => <article class="article-card" data-reveal><a href={`/articles/${item.id}/`}><div class="article-card__meta"><span>{item.data.category}</span><time>{fmtDate(item.data.date)}</time></div><div class="article-card__index">0{index + 1}</div><h2>{item.data.title}</h2><p>{item.data.excerpt}</p><strong>阅读全文 ↗</strong></a></article>)}</div></div></section>}
    <CTA />
  </main>
  <Footer />
</Base>
