import Link from "next/link";

import { ScanClient } from "@/components/scan-client";

export default function ScanPage() {
  return (
    <main className="mx-auto min-h-screen max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
      <section className="grid gap-6 lg:grid-cols-[0.82fr_1.18fr]">
        <div className="rounded-[36px] border border-white/70 bg-white/78 p-6 shadow-[0_30px_70px_rgba(115,76,42,0.14)] backdrop-blur">
          <p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
            扫码绑定
          </p>
          <h1 className="mt-4 font-[family-name:var(--font-display)] text-4xl leading-[1.15] text-[var(--ink)]">
            对准老人手机里的家人连接二维码
          </h1>
          <p className="mt-4 text-base leading-8 text-[var(--muted)]">
            扫描成功后，系统会自动把老人的本机 UUID 绑定到当前家属账号。之后，您就能看见老人的留言、最近对话和使用记录。
          </p>

          <div className="mt-6 space-y-3 rounded-[28px] bg-[var(--paper-soft)] p-5 text-sm leading-7 text-[var(--muted)]">
            <p>1. 让老人打开安卓端的家人连接页。</p>
            <p>2. 把镜头对准屏幕上的二维码，停稳一两秒。</p>
            <p>3. 绑定成功后会自动跳回控制台。</p>
          </div>

          <div className="mt-6 flex flex-wrap gap-3">
            <Link
              href="/devices"
              className="inline-flex h-12 items-center justify-center rounded-full border border-[var(--line)] bg-white px-5 text-sm font-semibold text-[var(--ink)] transition hover:bg-[var(--paper-soft)]"
            >
              回到设备页
            </Link>
          </div>
        </div>

        <ScanClient />
      </section>
    </main>
  );
}