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

const services = [
  ["01", "AI 数字人", "既可基于创作者当前或年轻时期形象打造授权分身，也可从零创建原创数字人 IP。"],
  ["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 分身，也可以从零创建没有真人原型的原创数字人 IP，并持续生产内容、经营粉丝关系，让粉丝关系转化为可持续的商业收入。</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 AVATAR</span><strong>经典形象新生</strong><small>当前 · 年轻时期 · 声音</small></div>
          <div className="original-card"><span>ORIGINAL IP</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="economy-section">
      <div className="shell economy-grid">
        <div className="economy-copy">
          <p className="eyebrow">COZSWEET CREATOR REVENUE ENGINE</p>
          <h2>THE AI CREATOR<br/>ECONOMY HAS<br/><span>ARRIVED.</span></h2>
          <p>Cozsweet 不只帮你生产更多内容，更把内容带来的流量转化为可持续经营的粉丝关系，并通过订阅、付费聊天、付费内容、打赏与专属互动，帮助创作者持续增加账号收入。</p>
          <div className="economy-actions"><Link className="btn economy-btn" href="/advantages">了解增收方式 <b>→</b></Link><small>从流量，到关系，再到收入</small></div>
        </div>
        <div className="revenue-visual" aria-label="Cozsweet 创作者多元收入增长系统示意">
          <div className="revenue-glow"/>
          <div className="revenue-phone">
            <div className="phone-top"><i/><span>COZSWEET</span><b>•••</b></div>
            <div className="phone-greeting"><span>CREATOR REVENUE</span><strong>多元收入持续增长</strong><small>内容价值正在被转化</small></div>
            <div className="revenue-chart"><div/><div/><div/><div/><div/><div/></div>
            <div className="revenue-list">
              <div><i>01</i><span>订阅收入</span><b>↗</b></div>
              <div><i>02</i><span>付费聊天</span><b>↗</b></div>
              <div><i>03</i><span>付费内容</span><b>↗</b></div>
              <div><i>04</i><span>粉丝打赏</span><b>↗</b></div>
            </div>
          </div>
          <div className="revenue-float top"><small>关系运营</small><strong>评论 → 私信 → 私域</strong></div>
          <div className="revenue-float bottom"><small>增长目标</small><strong>账号收入 ↑</strong></div>
        </div>
      </div>
    </section>

    <section className="section shell">
      <div className="split"><div><p className="kicker">OUR MODEL</p><h2>不是替代创作者，<br/>而是放大创作者。</h2></div><div className="model-copy"><p>已有真人创作者，我们放大其形象、表达与粉丝信任；没有真人原型，也可以从零定义形象、人设与故事，打造完全原创的数字人 IP。</p><div className="model-paths"><span><i/>真人授权分身</span><span><i/>原创数字人 IP</span></div></div></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">PARTNERSHIP SCENARIOS</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>;
}