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)]">
            扫描成功后，系统会自动将长辈的设备连接到您的账号。之后就能随时查看长辈的留言和使用动态。
          </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>
  );
}