import { Link } from 'react-router-dom'
import { Download } from 'lucide-react'
import { SITE } from '@/content/site'
import { TerminalDemo } from '@/components/terminal-demo'
import { Reveal } from '@/components/reveal'

export function Hero() {
  return (
    <section className="px-6 pt-21 text-center lg:px-10">
      <Reveal>
        <span className="mb-6.5 inline-flex items-center gap-2 rounded-full border border-hairline-strong px-3.5 py-1 font-mono text-xs tracking-[0.08em] text-accent-ink">
          <span className="size-[7px] rounded-full bg-accent" />
          {SITE.version} 已发布 · macOS / Windows
        </span>
      </Reveal>

      <Reveal delay={80}>
        <h1 className="mx-auto max-w-[17em] text-balance text-4xl font-[650] leading-[1.18] tracking-[-0.028em] md:text-[52px] lg:text-[58px]">
          事件驱动的
          <br />
          <span className="text-brand-gradient">AI Agent 工作台</span>
          <span className="text-ink-3">。</span>
        </h1>
      </Reveal>

      <Reveal delay={160}>
        <p className="mx-auto mt-5.5 max-w-[37em] text-[17px] text-ink-2">
          在画布上编排智能体，让多 Agent
          团队替你研究、检索、写出真正的 Word
          报告。桌面开箱即用，也可一条命令私有化部署。
        </p>
      </Reveal>

      <Reveal delay={240}>
        <div className="mt-9 flex flex-wrap justify-center gap-3">
          <Link
            to="/download"
            className="inline-flex items-center gap-2 rounded-lg bg-accent px-6 py-2.5 text-[14.5px] font-medium text-ground transition-opacity hover:opacity-90"
          >
            下载桌面版 <Download className="size-4" />
          </Link>
          <a
            href={SITE.repo}
            target="_blank"
            rel="noreferrer"
            className="inline-flex items-center rounded-lg border border-hairline-strong px-6 py-2.5 font-mono text-[14px] transition-colors hover:border-accent"
          >
            $ make demo
          </a>
        </div>
      </Reveal>

      <Reveal delay={320}>
        <TerminalDemo />
      </Reveal>
    </section>
  )
}