import type { CSSProperties } from "react";

type Variant = "plain" | "fade" | "dots" | "diagonal" | "radial" | "brand" | "sideRight" | "sideLeft";

type SectionBackdropProps = {
  /** Kept for compatibility — the backdrop no longer draws glows. */
  glow?: "left" | "right";
  /** Shorthand for variant="fade". */
  tinted?: boolean;
  /**
   * plain    — white
   * fade     — light blue band that fades in/out of white
   * dots     — white with a faint dot grid that fades at the edges
   * diagonal — soft white → light blue → white diagonal sweep
   * radial   — white with a soft light-blue spotlight in the centre
   * sideRight / sideLeft — small, faint brand-blue wash on one side only (about 30% wide, 70% tall, softened on every edge); the rest stays white
   * brand    — richer brand-blue sweep (accent-100 → accent-200 tones) with a soft highlight, for one standout section
   */
  variant?: Variant;
};

const BLUE = "#E3F3FD";
const edgeFade = "linear-gradient(to bottom, transparent, black 18%, black 82%, transparent)";

/** Small, faint wash hugging one edge: ~30% wide, ~60% tall, softened on every side so it never reads as a shape. */
const sideLayer = (dir: "left" | "right"): CSSProperties => {
  const mask = `radial-gradient(ellipse 90% 80% at ${dir === "right" ? "100%" : "0%"} 50%, black 0%, transparent 72%)`;
  return {
    background: "linear-gradient(to " + (dir === "right" ? "left" : "right") + ", var(--color-accent-100) 0%, var(--color-accent-50) 70%, transparent 100%)",
    maskImage: mask,
    WebkitMaskImage: mask,
    [dir]: 0,
    width: "30%",
    opacity: 0.6,
  };
};

const layers: Record<Exclude<Variant, "plain">, CSSProperties> = {
  sideRight: sideLayer("right"),
  sideLeft: sideLayer("left"),
  brand: {
    background:
      "radial-gradient(ellipse 55% 70% at 78% 40%, rgba(255,255,255,0.75), transparent 70%), linear-gradient(135deg, var(--color-accent-50) 0%, var(--color-accent-100) 45%, var(--color-accent-200) 100%)",
    maskImage: edgeFade,
    WebkitMaskImage: edgeFade,
  },
  fade: { background: `linear-gradient(to bottom, transparent 0%, ${BLUE} 22%, ${BLUE} 78%, transparent 100%)` },
  dots: {
    backgroundImage: "radial-gradient(rgba(0,148,238,0.22) 1.2px, transparent 1.2px)",
    backgroundSize: "26px 26px",
    maskImage: edgeFade,
    WebkitMaskImage: edgeFade,
  },
  diagonal: {
    background: `linear-gradient(135deg, transparent 0%, ${BLUE} 45%, ${BLUE} 55%, transparent 100%)`,
    maskImage: edgeFade,
    WebkitMaskImage: edgeFade,
  },
  radial: { background: `radial-gradient(ellipse 65% 60% at 50% 50%, ${BLUE} 0%, transparent 72%)` },
};

/** Section background: white base plus one restrained layer, so neighbouring sections look different but always meet white. */
export default function SectionBackdrop({ tinted = false, variant }: SectionBackdropProps) {
  const v: Variant = variant ?? (tinted ? "fade" : "plain");
  return (
    <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 bg-white">
      {v !== "plain" && <div className={`absolute ${v === "sideRight" || v === "sideLeft" ? "inset-y-[15%]" : "inset-0"}`} style={layers[v]} />}
    </div>
  );
}