"use client";

import Image from "next/image";
import Link from "next/link";

export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen flex bg-[#FAFAF7]">
      {/* Left brand panel — hidden on mobile */}
      <div className="hidden lg:flex lg:w-[480px] xl:w-[540px] relative flex-col justify-between bg-[#2D3436] p-10 overflow-hidden">
        {/* Decorative blurs */}
        <div className="absolute top-0 right-0 w-80 h-80 rounded-full bg-[#6B8F71]/15 blur-[100px] pointer-events-none" />
        <div className="absolute bottom-0 left-0 w-64 h-64 rounded-full bg-[#C4856A]/10 blur-[80px] pointer-events-none" />

        {/* Subtle honeycomb pattern */}
        <div
          className="absolute inset-0 opacity-[0.08]"
          style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='103.92'%3E%3Cpolygon points='30,0 60,17.32 60,51.96 30,69.28 0,51.96 0,17.32' fill='none' stroke='%23C4856A' stroke-width='0.8'/%3E%3Cpolygon points='60,51.96 90,69.28 90,103.92 60,121.24 30,103.92 30,69.28' fill='none' stroke='%23C4856A' stroke-width='0.8'/%3E%3C/svg%3E")`,
            backgroundSize: "60px 103.92px",
          }}
        />

        <div className="relative">
          <Link href="/" className="flex items-center gap-2.5">
            <Image
              src="/logo.png"
              alt="honeyDue"
              width={36}
              height={36}
              className="rounded-lg"
            />
            <span className="font-heading text-xl font-bold text-white">
              honeyDue
            </span>
          </Link>
        </div>

        <div className="relative">
          <h2 className="font-heading text-3xl font-bold text-white leading-snug mb-4">
            Home maintenance,<br />
            <span className="text-[#8FB896]">simplified.</span>
          </h2>
          <p className="text-[#9A9E97] leading-relaxed max-w-sm">
            Track tasks, organize contractors, and store important
            documents — all in one place built for homeowners.
          </p>
        </div>

        <p className="relative text-xs text-[#8A8F87]">
          &copy; {new Date().getFullYear()} honeyDue
        </p>
      </div>

      {/* Right form area */}
      <div className="flex-1 flex items-center justify-center p-6 sm:p-8">
        <div className="w-full max-w-md">
          {children}
        </div>
      </div>
    </div>
  );
}