import Link from "next/link";
import { ArrowRight } from "@/components/icons";

export const dynamic = "force-dynamic";

export default function HomePage() {
  return (
    <main className="relative isolate flex min-h-[calc(100vh-82px)] items-center overflow-hidden">
      <div className="surface-grid pointer-events-none absolute inset-0 -z-10 opacity-50" />
      <div className="absolute left-1/2 top-1/2 -z-10 h-[28rem] w-[28rem] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue/10 blur-3xl" />
      <section className="container-shell w-full py-24 sm:py-32">
        <div className="mx-auto max-w-3xl text-center">
          <div className="mx-auto inline-flex items-center gap-2 rounded-full border border-cyan/25 bg-cyan/5 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.2em] text-cyan">
            <span className="h-1.5 w-1.5 rounded-full bg-cyan shadow-[0_0_12px_rgba(0,209,230,0.9)]" />
            Coming soon
          </div>
          <h1 className="display-heading mt-8 text-balance">连接技术与日常。</h1>
          <p className="body-copy mx-auto mt-7 max-w-xl text-lg">考町科技官网正在准备中。我们专注于蓝牙周边、音频与智能设备，稍后带来更多产品与技术信息。</p>
          <div className="mt-10 flex flex-wrap justify-center gap-4">
            <Link className="button-primary" href="mailto:tech@kaotings.com">联系我们 <ArrowRight /></Link>
            <Link className="button-secondary" href="/about">了解考町科技</Link>
          </div>
        </div>
        <div className="mx-auto mt-24 grid max-w-4xl border-y border-line sm:grid-cols-3">
          {[
            ["01", "Bluetooth", "稳定连接"],
            ["02", "Audio", "更好的声音体验"],
            ["03", "AI Lab", "持续探索"],
          ].map(([number, title, copy]) => (
            <div className="border-line px-1 py-6 sm:border-r sm:px-7 sm:first:pl-0 sm:last:border-r-0" key={title}>
              <p className="text-xs font-semibold tracking-[0.2em] text-subtle">{number}</p>
              <p className="mt-3 font-semibold text-copy">{title}</p>
              <p className="mt-1 text-sm text-muted">{copy}</p>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}