import type { Locale } from "@/lib/locales";

export type FAQVariant = "brand" | "pureestate" | "buildpro" | "societypro";

type FAQAssistantVisualProps = {
  locale: Locale;
  variant: FAQVariant;
};

const visualCopy = {
  en: {
    aria: "FAQ support video",
  },
  hi: {
    aria: "FAQ support video",
  },
  gu: {
    aria: "FAQ support video",
  },
} satisfies Record<Locale, { aria: string }>;

const themes = {
  brand: {
    accent: "#6268DD",
    glow: "#EEF0FF",
  },
  pureestate: {
    accent: "#3678DC",
    glow: "#EAF3FF",
  },
  buildpro: {
    accent: "#2563EB",
    glow: "#ECFEFF",
  },
  societypro: {
    accent: "#278D61",
    glow: "#E8F8EF",
  },
} satisfies Record<FAQVariant, Record<string, string>>;

export default function FAQAssistantVisual({ locale, variant }: FAQAssistantVisualProps) {
  const theme = themes[variant];
  const copy = visualCopy[locale];

  return (
    <figure
      aria-label={copy.aria}
      className="group relative mx-auto aspect-[4/5] w-full max-w-[310px] overflow-hidden rounded-[28px] border border-white/80 bg-white shadow-[0_24px_70px_rgba(31,48,94,0.12)] transition duration-500 hover:-translate-y-1 hover:shadow-[0_30px_80px_rgba(31,48,94,0.18)] sm:max-w-[340px] lg:max-w-[360px]"
      role="img"
    >
      <div
        className="absolute inset-0 opacity-80"
        style={{
          background: `radial-gradient(circle at 50% 18%, ${theme.glow}, transparent 48%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)`,
        }}
      />
      <video
        aria-hidden="true"
        autoPlay
        className="relative h-full w-full scale-[1.01] object-cover transition duration-700 group-hover:scale-[1.04]"
        loop
        muted
        playsInline
        preload="metadata"
      >
        <source src="/video/faq_video.mp4" type="video/mp4" />
      </video>
      <div
        className="pointer-events-none absolute inset-0 rounded-[28px] ring-1 ring-inset"
        style={{ boxShadow: `inset 0 0 0 1px ${theme.accent}1F`, color: theme.accent }}
      />
    </figure>
  );
}