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

export function CopyFlowPipeline() {
  return (
    <section className="ac-persona-pipeline flex h-full flex-col" aria-label="拷貝忍者工作流入口">
      <div className="mb-4 flex-1 space-y-1 lg:min-h-[8.5rem]">
        <p className="display-en text-[10px] font-bold tracking-[0.16em] text-brand uppercase">
          拷貝忍者
        </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>
          ，建立拷貝任務產生研究地圖、勾選標籤海巡，再產出可編輯的內容矩陣或單篇深度仿寫。
        </p>
      </div>
      <Card className="flex min-h-[5.5rem] 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>
  )
}