"use client";

import Image from "next/image";
import { TEXT } from "@/branding";
import { IMAGES } from "@/branding/images";
import { useRouter } from "next/navigation";

export function AuthBrandPanel() {
  const router = useRouter();

  return (
    <div
      className="hidden lg:flex flex-col justify-between p-10 relative overflow-hidden"
      style={{
        background:
          "linear-gradient(145deg, #10002b 0%, #240046 40%, #1a1a2e 100%)",
        minHeight: "100dvh",
      }}
    >
      {/* Ambient orbs */}
      <div
        className="absolute top-0 right-0 w-96 h-96 rounded-full pointer-events-none"
        style={{
          background:
            "radial-gradient(circle, rgba(var(--accent-rgb),0.18) 0%, transparent 70%)",
          transform: "translate(30%, -30%)",
        }}
      />
      <div
        className="absolute bottom-0 left-0 w-80 h-80 rounded-full pointer-events-none"
        style={{
          background:
            "radial-gradient(circle, rgba(60,9,108,0.5) 0%, transparent 70%)",
          transform: "translate(-30%, 30%)",
        }}
      />

      {/* Logo */}
      <div
        className="relative z-10 flex items-center gap-3"
        onClick={() => router.push("/")}
      >
        <Image
          src={IMAGES.appIcon}
          alt={TEXT.app.name}
          width={36}
          height={36}
          className="rounded-xl shrink-0"
          priority
        />
        <span className="text-[#ffffff] font-bold text-xl tracking-tight">
          {TEXT.app.name}
        </span>
      </div>

      {/* Floating card grid — content preview */}
      <div className="relative z-10 flex-1 flex items-center justify-center py-12">
        <div className="grid grid-cols-2 gap-3 w-full max-w-xs">
          {PREVIEW_CARDS.map((card, i) => (
            <div
              key={i}
              className="rounded-2xl overflow-hidden relative"
              style={{
                aspectRatio: i === 0 ? "1/1.3" : "1/1",
                background: card.color,
                transform: i % 3 === 1 ? "translateY(12px)" : "none",
                boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
              }}
            >
              <div
                className="absolute inset-0 flex flex-col justify-end p-3"
                style={{
                  background:
                    "linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 60%, transparent 100%)",
                }}
              >
                <div className="flex items-center gap-1.5 mb-1">
                  <div
                    className="w-4 h-4 rounded-full"
                    style={{ background: "rgba(255,255,255,0.2)" }}
                  />
                  <div
                    className="h-1.5 rounded-full"
                    style={{
                      width: "50px",
                      background: "rgba(255,255,255,0.25)",
                    }}
                  />
                </div>
                <div
                  className="h-1.5 rounded-full w-3/4"
                  style={{ background: "rgba(255,255,255,0.5)" }}
                />
              </div>
              {card.badge && (
                <span
                  className="absolute top-2 right-2 text-[#ffffff] text-[9px] font-bold px-1.5 py-0.5 rounded-full"
                  style={{ background: "var(--accent)" }}
                >
                  {card.badge}
                </span>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Tagline */}
      <div className="relative z-10">
        <h2 className="text-3xl font-black text-[#ffffff] leading-tight tracking-tight mb-3">
          Watch. Listen.
          <br />
          <span style={{ color: "var(--accent)" }}>Discover.</span>
        </h2>
        <p
          className="text-sm leading-relaxed"
          style={{ color: "rgba(255,255,255,0.5)" }}
        >
          Stream thousands of videos, music, reels and more — all in one place.
        </p>
      </div>
    </div>
  );
}

const PREVIEW_CARDS = [
  { color: "linear-gradient(135deg, #0f3460, #240046)", badge: "HD" },
  { color: "linear-gradient(135deg, #1a0533, var(--accent))" },
  { color: "linear-gradient(135deg, #16213e, #0f3460)", badge: "4K" },
  { color: "linear-gradient(135deg, #240046, #1a1a2e)" },
];