"use client";

import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";
import { cn } from "@/lib/utils";
import { HeroArt } from "@/components/home/illustrations";
import { PARTNER_BENEFITS } from "@/components/home/lib/content";

/** A focused trio of benefits for the auth panel (full list lives on the landing page). */
const PANEL_BENEFIT_KEYS = ["moreBookings", "dashboard", "analytics"] as const;
const PANEL_BENEFITS = PANEL_BENEFIT_KEYS.map((key) =>
  PARTNER_BENEFITS.find((benefit) => benefit.key === key)!,
);

/**
 * Marketing / value-proposition panel shown beside the registration form —
 * a compact band on mobile, a fixed full-height column on desktop. Reuses the
 * landing page's partner copy, gradient treatment, and hero illustration so the
 * two surfaces feel like one product. The illustration + benefits are desktop
 * only, keeping the mobile band short.
 */
export function RegisterMarketingPanel({ className }: { className?: string }) {
  const { t } = useTranslation();

  return (
    <aside
      className={cn(
        "relative overflow-hidden bg-gradient-to-br from-primary-blue to-primary-sky-blue text-white",
        className,
      )}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute -top-20 -end-20 size-64 rounded-full bg-white/10 blur-2xl"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute -bottom-24 -start-16 size-72 rounded-full bg-white/10 blur-3xl"
      />

      {/* Content is top→bottom flow, not centered: the header and benefits are
          fixed-size (shrink-0) and the illustration is the flexible element
          (`min-h-0 flex-1`) — on the fixed-height desktop card it absorbs spare
          space and shrinks when height is tight, so nothing clips at any height
          (the panel itself never scrolls). */}
      <div className="relative flex h-full flex-col gap-5 p-6 sm:p-8 lg:gap-6 lg:p-8 xl:p-10">
        <div className="flex shrink-0 flex-col gap-2 sm:gap-3">
          <Typography
            as="p"
            variant="caption"
            color="inherit"
            className="font-semibold text-white/80"
          >
            {t("home.partner.eyebrow")}
          </Typography>
          <Typography
            as="h2"
            variant="h1"
            color="inherit"
            className="text-[24px] leading-tight font-bold sm:text-[28px] lg:text-[26px] xl:text-[30px]"
          >
            {t("home.partner.title")}
          </Typography>
          <Typography variant="body" color="inherit" className="text-white/90">
            {t("home.partner.description")}
          </Typography>
        </div>

        {/* Hero illustration — desktop only, on a soft light card so the
            brand-blue artwork reads against the gradient. Scales with height. */}
        <div className="hidden min-h-0 flex-1 items-center justify-center lg:flex">
          <div className="flex h-full max-h-[240px] items-center justify-center rounded-[24px] bg-white/95 p-4 shadow-lg shadow-black/10">
            <HeroArt className="h-full w-auto max-w-full" />
          </div>
        </div>

        <ul className="hidden shrink-0 flex-col gap-3 lg:flex">
          {PANEL_BENEFITS.map(({ key, icon: Icon }) => (
            <li key={key} className="flex items-start gap-3">
              <span className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-[12px] bg-white/15">
                <Icon className="size-[18px]" />
              </span>
              <div className="flex flex-col gap-0.5">
                <Typography as="h3" variant="h3" color="inherit">
                  {t(`home.partner.benefits.${key}.title`)}
                </Typography>
                <Typography
                  variant="caption"
                  color="inherit"
                  className="text-white/80"
                >
                  {t(`home.partner.benefits.${key}.description`)}
                </Typography>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </aside>
  );
}