import { ArrowLeft, Gamepad2 } from "lucide-react"
import Link from "next/link"

export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex min-h-screen bg-background">
      {/* Left: Brand Panel */}
      <div className="hidden w-1/2 flex-col justify-between bg-card p-12 lg:flex">
        <Link href="/" className="flex items-center gap-2">
          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary">
            <Gamepad2 className="h-4 w-4 text-primary-foreground" />
          </div>
          <span className="text-xl font-bold tracking-tight">聚玩</span>
        </Link>

        <div className="max-w-md">
          <h1 className="text-4xl font-bold leading-tight">
            发现你的
            <br />
            <span className="text-gradient-brand">专属游戏搭档</span>
          </h1>
          <p className="mt-4 text-base leading-relaxed text-muted-foreground">
            聚玩连接玩家与专业打手，提供安全、透明、高效的游戏陪玩服务。无论你是寻找搭档还是展示技能，这里都是你的舞台。
          </p>
        </div>

        <div className="text-xs text-muted-foreground">&copy; 2025 聚玩. All rights reserved.</div>
      </div>

      {/* Right: Auth Form */}
      <div className="flex w-full flex-col items-center justify-center px-6 py-12 lg:w-1/2 lg:px-16">
        {/* Mobile header */}
        <div className="mb-8 flex w-full max-w-sm items-center justify-between lg:hidden">
          <Link
            href="/"
            className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground"
          >
            <ArrowLeft className="h-4 w-4" />
            返回首页
          </Link>
          <div className="flex items-center gap-2">
            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary">
              <Gamepad2 className="h-3.5 w-3.5 text-primary-foreground" />
            </div>
            <span className="text-lg font-bold">聚玩</span>
          </div>
        </div>

        <div className="w-full max-w-sm">{children}</div>
      </div>
    </div>
  )
}