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

export function PlacementFlowPipeline() {
  return (
    <section className="ac-persona-pipeline flex h-full flex-col" aria-label="找 TA 工作流入口">
      <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">
          找 TA
        </p>
        <h2 className="text-lg font-black text-ink">① 研究 → ② 找 TA</h2>
        <p className="max-w-2xl text-sm leading-relaxed text-ink-secondary">
          在找 TA 主題新增任務並產生研究地圖；人設只在「找 TA 留言」時選用語氣。
        </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">找 TA</p>
          <p className="mt-1 text-sm text-ink-secondary">主題列表、研究地圖與獲客留言</p>
        </div>
        <Link to="/placement/topics">
          <Button>進入找 TA</Button>
        </Link>
      </Card>
    </section>
  )
}