import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import AcidExperience from "./AcidExperience";

export const metadata: Metadata = {
  title: "BossAI / New Signal",
  description:
    "BossAI 官网实验页：以高反差酸性图形语言展示统一 API 网关、模型路由、Comfy 工作流和创作生产平台。",
};

const signalCards = [
  ["Gateway", "/v1/*", "OpenAI、Claude、图像、视频和语音请求进入同一套鉴权、路由、日志和计费。"],
  ["Router", "P0 / P1", "按站点、账号、模型能力、失败冷却和成本信号选择可用通道。"],
  ["Comfy", "Cloud API", "Comfy Cloud、RunningHub、External 和 BoosAPI 执行器统一进工作流前端。"],
  ["Studio", "Media OS", "生图助手、短视频工厂、数字人和工作空间共享模型资产与产出归档。"],
];

const routeRows = [
  ["chat", "gpt-5.5", "reasoning"],
  ["image", "gpt-image-2", "archive"],
  ["video", "Comfy API", "queue"],
  ["voice", "tts", "timeline"],
];

const stackItems = [
  "API aggregation",
  "Token billing",
  "Model marketplace",
  "Workspace archive",
  "Comfy workflow",
  "User self-service",
];

const proofItems = [
  ["01", "用户调用", "下游 API Key 或创作应用发起请求。"],
  ["02", "模型路由", "系统选择健康、可用、成本合理的账号通道。"],
  ["03", "生产归档", "图片、视频、音频和日志进入用户工作空间。"],
];

export default function NewWebsiteExperiment() {
  return (
    <main className="new-acid-page">
      <AcidExperience />
      <div className="new-acid-noise" aria-hidden="true" />
      <header className="new-acid-nav" aria-label="BossAI 实验页导航">
        <Link className="new-acid-brand" href="/" aria-label="BossAI 首页">
          <Image src="/logo.png" width={40} height={40} alt="" priority />
          <span>BossAI</span>
        </Link>
        <nav aria-label="实验页锚点导航">
          <a href="#gateway">Gateway</a>
          <a href="#workflow">Workflow</a>
          <a href="#studio">Studio</a>
        </nav>
        <Link className="new-acid-console-link" href="/user/register">
          开始使用
        </Link>
      </header>

      <section className="new-acid-hero" data-new-motion="section">
        <div className="new-acid-hero-copy">
          <div className="new-acid-kicker">
            <span />
            EXPERIMENTAL WEBSITE ROUTE / NEW
          </div>
          <h1>
            BoosAPI
            <span>acid control plane</span>
          </h1>
          <p>
            统一 API 网关、智能模型路由、Comfy 工作流和创作生产平台，被压缩成一个可以运营、可以计费、可以归档的 BossAI 系统。
          </p>
          <div className="new-acid-actions">
            <Link className="new-acid-primary" href="/user/register">
              创建用户工作台
            </Link>
            <Link className="new-acid-secondary" href="/boos">
              进入控制台
            </Link>
          </div>
        </div>

        <div className="new-acid-router" data-new-motion="card" aria-label="BossAI 路由演示">
          <div className="new-acid-router-top">
            <span>Live mesh</span>
            <strong>route: healthy</strong>
          </div>
          <div className="new-acid-router-core">
            <div>
              <span>API</span>
              <strong>/v1</strong>
            </div>
            <div>
              <span>Cost</span>
              <strong>ledger</strong>
            </div>
            <div>
              <span>Output</span>
              <strong>workspace</strong>
            </div>
          </div>
          <div className="new-acid-route-list">
            {routeRows.map(([type, model, state]) => (
              <div key={type} data-new-motion="card">
                <span>{type}</span>
                <strong>{model}</strong>
                <em>{state}</em>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="gateway" className="new-acid-signal-grid" data-new-motion="section">
        {signalCards.map(([label, value, body]) => (
          <article key={label} data-new-motion="card">
            <div>
              <span>{label}</span>
              <strong>{value}</strong>
            </div>
            <p>{body}</p>
          </article>
        ))}
      </section>

      <section id="workflow" className="new-acid-band" data-new-motion="section">
        <div>
          <span>Workflow Field</span>
          <h2>把 Comfy API、模型路由和用户余额放进同一条生产链路</h2>
        </div>
        <div className="new-acid-stack">
          {stackItems.map((item) => (
            <span key={item}>{item}</span>
          ))}
        </div>
      </section>

      <section id="studio" className="new-acid-proof" data-new-motion="section">
        <div className="new-acid-proof-copy">
          <span>Creation Loop</span>
          <h2>从调用到产出，每一步都有日志、成本和归档位置</h2>
          <p>
            这不是另一个单点工具。BossAI 把 API 聚合、用户自助工作台和创作生产平台接在同一套后台里，让团队能真正运营多模型多模态能力。
          </p>
        </div>
        <div className="new-acid-proof-steps">
          {proofItems.map(([step, title, body]) => (
            <article key={step} data-new-motion="card">
              <span>{step}</span>
              <strong>{title}</strong>
              <p>{body}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="new-acid-final" data-new-motion="section">
        <h2>同一个 BoosAPI 内核，另一种官网表达。</h2>
        <div className="new-acid-actions">
          <Link className="new-acid-primary" href="/">
            返回当前官网
          </Link>
          <Link className="new-acid-secondary" href="/user/login">
            用户登录
          </Link>
        </div>
      </section>
    </main>
  );
}