import { Link } from 'react-router-dom'
import { Button, Card } from './ui'

export function CopyFlowPipeline() {
  return (
    <section className="ac-persona-pipeline" aria-label="拷貝忍者工作流入口">
      <div className="mb-4 space-y-1">
        <p className="display-en text-[10px] font-bold tracking-[0.16em] text-brand uppercase">
          流程 A · 拷貝忍者
        </p>
        <h2 className="text-lg font-black text-ink">對標帳號 → 爆款海巡 → 仿寫草稿</h2>
        <p className="max-w-2xl text-sm leading-relaxed text-ink-secondary">
          在人設庫完成
          <Link to="/personas" className="mx-1 font-semibold text-brand hover:underline">
            8D 對標分析
          </Link>
          ，再從拷貝忍者海巡爆款、產出仿寫貼文（爆款海巡 Phase 2 上線中）。
        </p>
      </div>
      <Card className="flex flex-wrap items-center justify-between gap-4 p-5">
        <div>
          <p className="font-bold text-ink">拷貝忍者</p>
          <p className="mt-1 text-sm text-ink-secondary">仿寫草稿庫與爆款海巡入口</p>
        </div>
        <Link to="/matrix">
          <Button>進入拷貝忍者</Button>
        </Link>
      </Card>
    </section>
  )
}