// components/landing/brand.tsx
// Official Teletón "La Hacemos Todos" campaign assets (Manual visual de campaña
// TLHT 2026): the logo lockup, the hand-drawn brush underline, and the
// decorative doodle iconography (corazón, estrella, nube, flor, ascento).
//
// Server-safe. Every DECORATIVE element is aria-hidden + pointer-events-none so
// it never reaches a screen reader and never intercepts a tap on the form. Logos
// use a plain <img> on purpose: they are local SVGs in public/, so the next/image
// optimizer adds nothing and would need dangerouslyAllowSVG.

import * as React from "react";

type LogoVariant = "light" | "white" | "onred";
// light = color logo for light/white backgrounds (Teletón negro + TODOS rojo)
// white = all-white logo for solid red backgrounds (fondo rojo lockup)
// onred = color logo with white secondary text (for dark photo backgrounds)

const LOGO_SRC: Record<LogoVariant, { plain: string; fecha: string }> = {
  light: { plain: "/brand/logo-light.svg", fecha: "/brand/logo-light-fecha.svg" },
  white: { plain: "/brand/logo-white.svg", fecha: "/brand/logo-white-fecha.svg" },
  onred: { plain: "/brand/logo-onred.svg", fecha: "/brand/logo-onred-fecha.svg" },
};

export interface BrandLogoProps {
  variant?: LogoVariant;
  /** Include the "11 y 12 de Septiembre" date lockup. */
  withDate?: boolean;
  className?: string;
  alt?: string;
}

export function BrandLogo({
  variant = "light",
  withDate = false,
  className = "",
  alt = "Teletón. La Hacemos Todos.",
}: BrandLogoProps) {
  const src = withDate ? LOGO_SRC[variant].fecha : LOGO_SRC[variant].plain;
  return (
    // eslint-disable-next-line @next/next/no-img-element -- local brand SVG, no optimizer needed
    <img src={src} alt={alt} className={className} draggable={false} />
  );
}

/** The hand-drawn brush underline (subrayado) that sits under campaign titles.
 *  Source SVG is red; `tone="white"` inverts it to white for red backgrounds. */
export function BrushUnderline({
  className = "",
  tone = "primary",
}: {
  className?: string;
  tone?: "primary" | "white";
}) {
  return (
    // eslint-disable-next-line @next/next/no-img-element -- decorative local SVG
    <img
      src="/brand/doodles/subrayado.svg"
      alt=""
      aria-hidden="true"
      draggable={false}
      className={[
        "pointer-events-none select-none",
        tone === "white" ? "brightness-0 invert" : "",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
    />
  );
}

export type DoodleName =
  | "corazon-01"
  | "corazon-02"
  | "estrella-01"
  | "estrella-02"
  | "nube-01"
  | "nube-02"
  | "flor-01"
  | "flor-02"
  | "ascento"
  | "exclamacion-01";

/** A single decorative campaign doodle. Position it via `className`
 *  (absolute + inset utilities). `white` inverts the red art for red surfaces. */
export function Doodle({
  name,
  className = "",
  white = false,
}: {
  name: DoodleName;
  className?: string;
  white?: boolean;
}) {
  return (
    // eslint-disable-next-line @next/next/no-img-element -- decorative local SVG
    <img
      src={`/brand/doodles/${name}.svg`}
      alt=""
      aria-hidden="true"
      loading="lazy"
      decoding="async"
      draggable={false}
      className={[
        "pointer-events-none select-none",
        white ? "brightness-0 invert" : "",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
    />
  );
}