import Link from "next/link";
import { SiteShell } from "../components/SiteShell";

const services = [
  ["01", "AI 分身", "在创作者授权与边界内，建立可持续更新的数字形象。"],
  ["02", "内容增长", "把一次创意延展为多平台、多语言、多形态内容资产。"],
  ["03", "关系运营", "承接评论与私聊，让粉丝被回应、被理解、愿意留下。"],
  ["04", "粉丝变现", "组合订阅、付费内容、打赏与专属互动，构建长期收入。"],
];

export default function Home() {
  return <SiteShell><main>
    <section className="hero paper">
      <div className="shell hero-grid">
        <div className="hero-copy">
          <p className="eyebrow">AI CREATOR PARTNERSHIP</p>
          <h1>让你的影响力，<br/>拥有第二条<span className="accent">增长曲线</span></h1>
          <p className="lead">为成熟创作者与机构打造专属 AI 分身，持续生产内容、经营粉丝关系，让每一次互动都沉淀为长期价值。</p>
          <div className="actions"><Link className="btn primary" href="/contact">申请合作 <b>→</b></Link><Link className="link" href="/cases">查看合作案例 <b>→</b></Link></div>
        </div>
        <div className="hero-art" aria-label="AI 创作者增长系统示意">
          <div className="portrait-card"><span>CREATOR</span><div className="portrait-shape"><i/><i/><i/></div><strong>真实影响力</strong><small>表达 · 审美 · 信任</small></div>
          <div className="twin-card"><span>AI TWIN</span><strong>持续放大</strong><small>内容 · 关系 · 商业化</small></div>
          <div className="orbit-label">AI 分身已连接 <i/></div>
        </div>
      </div>
      <div className="shell proof"><div><i>✦</i>一套完整的创作者增长系统</div><div><strong>1:1</strong><span>专属合作方案</span></div><div><strong>4</strong><span>核心增长模块</span></div><div><strong>∞</strong><span>可扩展场景</span></div></div>
    </section>

    <section className="section shell">
      <div className="split"><div><p className="kicker">OUR MODEL</p><h2>不是替代创作者，<br/>而是放大创作者。</h2></div><p>你的形象、表达与粉丝信任是核心。AI 负责把这些珍贵资产延展到更多内容、更多互动和更多可持续收入中。</p></div>
      <div className="service-grid">{services.map(([no,title,text])=><article key={no}><span>{no}</span><div/><h3>{title}</h3><p>{text}</p></article>)}</div>
    </section>

    <section className="section dark"><div className="shell"><div className="split light"><div><p className="kicker">PARTNERSHIP VALUE</p><h2>从“做更多内容”，<br/>到“经营更多价值”。</h2></div><Link className="btn pale" href="/advantages">了解合作优势 <b>→</b></Link></div><div className="flow">{[["01","内容被看见","扩大触达"],["02","互动被回应","建立关系"],["03","信任被沉淀","形成资产"],["04","影响力变现","持续增长"]].map((x,i)=><article className={i===3?"hot":""} key={x[0]}><span>{x[0]}</span><strong>{x[1]}</strong><small>{x[2]}</small></article>)}</div></div></section>

    <section className="section shell">
      <div className="title-row"><div><p className="kicker">USE CASES</p><h2>适配不同阶段的合作方式</h2></div><Link className="link" href="/cases">查看全部案例 <b>→</b></Link></div>
      <div className="scenario-grid">{[
        ["个人创作者","把个人影响力变成可持续经营的品牌资产","AI 分身 · 多平台内容 · 粉丝私域","purple"],
        ["关系型 IP","从内容关注走向更深、更长期的粉丝关系","评论运营 · 私聊体验 · 付费内容","coral"],
        ["MCN / Agency","用一套系统承接多个创作者增长与变现","批量上架 · 标准流程 · 数据复盘","blue"],
      ].map(([label,title,tags,color])=><article className={`scenario ${color}`} key={label}><span>{label}</span><h3>{title}</h3><p>{tags}</p><Link href="/cases">↗</Link></article>)}</div>
    </section>

    <section className="cta shell"><div><p className="kicker">START A PARTNERSHIP</p><h2>你带来影响力，<br/>我们把它经营得更远。</h2></div><div><p>告诉我们你的创作者类型、粉丝规模与当前目标，我们会据此设计第一版合作路径。</p><Link className="btn primary" href="/contact">开始合作 <b>→</b></Link></div></section>
  </main></SiteShell>;
}