import { Link } from 'react-router-dom'
import { PLACEMENT_FLOW } from '../lib/placementFlow'

type Props = {
  highlight?: 'research' | 'outreach'
}

export function PlacementFlowPipeline({ highlight }: Props) {
  return (
    <section className="ac-persona-pipeline" aria-label="找 TA 工作流入口">
      <div className="mb-4 space-y-1">
        <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">
          在
          <Link to="/placement/topics" className="mx-1 font-semibold text-brand hover:underline">
            找 TA 主題
          </Link>
          新增任務並產生研究地圖；人設只在「找 TA 留言」時選用語氣。
        </p>
      </div>
      <div className="grid gap-3 md:grid-cols-2">
        {PLACEMENT_FLOW.map((step) => {
          const isHighlight = highlight === step.key
          return (
            <Link
              key={step.key}
              to={step.path}
              className={`ac-persona-pipeline__card ${isHighlight ? 'ac-persona-pipeline__card--highlight' : ''}`}
            >
              <span className="ac-persona-pipeline__step">{step.step}</span>
              <span className="ac-persona-pipeline__title">{step.label}</span>
              <span className="ac-persona-pipeline__desc">{step.desc}</span>
              <span className="ac-persona-pipeline__cta">進入 →</span>
            </Link>
          )
        })}
      </div>
    </section>
  )
}
