import type { ReactNode } from "react";

import { Logo } from "@/components/layout/logo";

/**
 * Two-column presentation for `/login` and `/register`.
 *
 * The left panel is a purely decorative cinematic gradient — it holds no
 * interactive elements, so it is hidden from assistive technology and from the
 * mobile layout where the form takes the full width.
 */
export function AuthShell({
  eyebrow,
  title,
  description,
  children,
  asideLink,
}: {
  eyebrow: string;
  title: string;
  description: string;
  children: ReactNode;
  asideLink: ReactNode;
}) {
  return (
    <main className="relative isolate min-h-[100svh] overflow-hidden">
      {/* Ambient backdrop */}
      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
        <div className="absolute inset-0 bg-surface" />
        <div className="absolute -top-40 -left-32 h-[520px] w-[520px] rounded-full bg-brand-600/20 blur-[130px]" />
        <div className="absolute -right-40 top-1/4 h-[460px] w-[460px] rounded-full bg-sky-600/12 blur-[130px]" />
        <div className="absolute inset-0 bg-linear-to-b from-transparent via-transparent to-surface" />
      </div>

      <div className="mx-auto grid w-full max-w-6xl gap-12 px-5 py-14 sm:px-8 lg:grid-cols-[1fr_minmax(0,26rem)] lg:items-center lg:gap-20 lg:py-20">
        {/* Marketing panel */}
        <section className="hidden lg:block">
          <Logo className="mb-10" />
          <p className="text-[13px] font-semibold tracking-[0.18em] text-brand-400 uppercase">
            {eyebrow}
          </p>
          <h1 className="mt-3 text-5xl leading-[1.05] font-bold tracking-[-0.03em] text-balance text-ink">
            {title}
          </h1>
          <p className="mt-5 max-w-md text-base leading-relaxed text-ink-muted">{description}</p>

          <ul className="mt-10 space-y-3.5 text-sm text-ink-soft">
            {[
              "Unlimited watchlist and favourites",
              "Continue watching on every device",
              "Progress saved automatically",
            ].map((item) => (
              <li key={item} className="flex items-center gap-3">
                <span
                  aria-hidden
                  className="grid size-5 shrink-0 place-items-center rounded-full bg-brand-500/15 ring-1 ring-brand-500/30"
                >
                  <svg viewBox="0 0 12 12" className="size-2.5 fill-none stroke-brand-300 stroke-[1.8]">
                    <path d="M2.5 6.2 4.8 8.5 9.5 3.8" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
                {item}
              </li>
            ))}
          </ul>
        </section>

        {/* Form card */}
        <section className="w-full">
          <div className="mb-8 lg:hidden">
            <Logo className="mb-8" />
            <h1 className="text-3xl font-bold tracking-[-0.02em] text-balance text-ink">{title}</h1>
            <p className="mt-2 text-sm leading-relaxed text-ink-muted">{description}</p>
          </div>

          <div className="rounded-2xl border border-line bg-surface-2/70 p-6 shadow-[0_24px_70px_-30px_rgba(0,0,0,0.9)] backdrop-blur-xl sm:p-8">
            {children}
          </div>

          <p className="mt-6 text-center text-[13px] text-ink-muted">{asideLink}</p>
        </section>
      </div>
    </main>
  );
}