"use client";

import { QueueItem } from "@/components/motion/QueueItem";

/**
 * Phase 1 of the Shared Decorative Motif System (Solution B+D from the
 * scroll-transition audit — see the audit notes for the full rationale).
 * Small illustrated brand accents, reused at multiple section seams so the
 * eye recognizes a consistent "family" of shapes bridging one section into
 * the next instead of experiencing a hard content cut.
 *
 * Add new assets here (already copied to `public/brand/`) as the system
 * grows in a later phase — everything else (sizing/opacity/motion rules)
 * stays the same, callers only pass a new `motif` key.
 */
const MOTIF_ASSET = {
  flower1: "/brand/signaturee-flower-1.svg",
  flower2: "/brand/signaturee-flower-2.svg",
  aboutFlower: "/brand/signaturee-about-flower.svg",
  tree: "/brand/signaturee-icon-tree.svg",
  hands: "/brand/signaturee-icon-hands.svg",
  ticket: "/brand/signaturee-icon-ticket.svg",
} as const;

export type SignatureMotifName = keyof typeof MOTIF_ASSET;

export interface SignatureSectionMotifProps {
  /** Which brand accent to render. */
  motif: SignatureMotifName;
  /**
   * Positioning classes — every placement is bespoke to its section/seam
   * (which corner, how far it pokes across the boundary), so the caller
   * owns this rather than the component guessing a "side". Combine with a
   * negative offset (e.g. `-top-10 right-8`) to cross a section boundary.
   */
  className?: string;
  /**
   * Size rules (keep consistent for future reuse): roughly 64-96px on
   * mobile, 96-144px on sm+ for a normal accent — small enough to read as
   * decoration, never competing with section content. Default covers the
   * common case; pass a smaller size for a secondary/background accent.
   */
  size?: string;
  /**
   * Opacity rules: 0.75-0.9 when sitting on a photo or saturated color
   * background (so it reads as an accent, not a sticker fighting the
   * content), 1 when sitting on the cream card (reads as fully "printed").
   */
  opacity?: number;
  /** Extra rotation utility class, e.g. "rotate-12" / "-rotate-6". */
  rotate?: string;
  /** Entrance direction for the QueueItem reveal (default "up"). */
  direction?: "up" | "down" | "left" | "right";
}

/**
 * Renders one motif, wrapped in `QueueItem` so it always enters via the
 * page's existing scroll-reveal queue (`QueueSection`/`QueueItem`) and
 * automatically degrades to a static-but-still-visible render under
 * `prefers-reduced-motion` (see `useReducedMotionSafe`) — the motif itself
 * is never motion-dependent content.
 *
 * Must be rendered somewhere inside a `QueueSection` ancestor (variant
 * propagation is how `QueueItem` animates at all — see its own doc
 * comment); every call site below already lives inside one.
 */
export function SignatureSectionMotif({
  motif,
  className = "",
  size = "h-16 w-16 sm:h-24 sm:w-24",
  opacity = 0.85,
  rotate = "",
  direction = "up",
}: SignatureSectionMotifProps) {
  return (
    <QueueItem
      as="div"
      direction={direction}
      className={`pointer-events-none absolute z-10 select-none ${size} ${rotate} ${className}`.trim()}
    >
      {/* eslint-disable-next-line @next/next/no-img-element -- static brand asset, purely decorative */}
      <img
        src={MOTIF_ASSET[motif]}
        alt=""
        aria-hidden="true"
        className="h-full w-full object-contain"
        style={{ opacity }}
      />
    </QueueItem>
  );
}