/* global React */
// decor.jsx — folk-art motifs: papel picado garland, marigold cluster, chip icons.

const ACCENTS = ['var(--marigold)', 'var(--rosa)', 'var(--teal)', 'var(--amber)', 'var(--morado)', 'var(--chile)'];

/* ---- Papel picado garland: a row of cut-paper flags on a string ---- */
function PapelPicado({ panels = 14, seed = 0 }) {
  const W = 120, H = 150;
  const flags = Array.from({ length: panels }, (_, i) => {
    const color = ACCENTS[(i + seed) % ACCENTS.length];
    const holes = [];
    for (let r = 0; r < 3; r++) {
      for (let c = 0; c < 3; c++) {
        const cx = 30 + c * 30, cy = 34 + r * 30;
        const isDiamond = (r + c) % 2 === 0;
        holes.push(
          isDiamond
            ? <rect key={`${r}-${c}`} x={cx - 8} y={cy - 8} width="16" height="16"
              transform={`rotate(45 ${cx} ${cy})`} fill="var(--bg)" />
            : <circle key={`${r}-${c}`} cx={cx} cy={cy} r="9" fill="var(--bg)" />
        );
      }
    }
    return (
      <g key={i} transform={`translate(${i * W},0)`}>
        <path d={`M4,6 H${W - 4} V112
                  q-10,14 -20,0 q-10,-14 -20,0 q-10,14 -20,0
                  q-10,-14 -20,0 q-10,14 -20,0 q-10,-14 -20,0 Z`}
          fill={color} opacity="0.92" />
        {holes}
      </g>
    );
  });
  return (
    <div className="garland" aria-hidden="true">
      <svg viewBox={`0 0 ${panels * W} ${H}`} preserveAspectRatio="none">
        <line x1="0" y1="6" x2={panels * W} y2="6" stroke="var(--line)" strokeWidth="3" />
        {flags}
      </svg>
    </div>
  );
}

/* ---- Marigold (cempasúchil): concentric ruffled rings of petals ---- */
function Marigold({ size = 90, color = 'var(--marigold)', core = 'var(--amber)' }) {
  const rings = [
    { r: 42, n: 16, pr: 9, op: .55 },
    { r: 32, n: 14, pr: 8, op: .8 },
    { r: 22, n: 12, pr: 7, op: 1 },
  ];
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden="true">
      {rings.map((ring, ri) =>
        Array.from({ length: ring.n }).map((_, i) => {
          const a = (i / ring.n) * Math.PI * 2;
          const cx = 50 + Math.cos(a) * ring.r;
          const cy = 50 + Math.sin(a) * ring.r;
          return <circle key={`${ri}-${i}`} cx={cx} cy={cy} r={ring.pr}
            fill={color} opacity={ring.op} />;
        })
      )}
      <circle cx="50" cy="50" r="14" fill={core} />
      <circle cx="50" cy="50" r="14" fill="none" stroke="var(--chile)" strokeWidth="1.5" opacity=".4" />
    </svg>
  );
}

/* corner flora cluster from a few marigolds */
function CornerFlora({ pos }) {
  return (
    <div className={`corner-flora ${pos}`} aria-hidden="true">
      <div style={{ position: 'absolute', top: 6, left: 6 }}><Marigold size={70} color="var(--marigold)" /></div>
      <div style={{ position: 'absolute', top: 46, left: 54 }}><Marigold size={52} color="var(--rosa)" core="var(--amber)" /></div>
      <div style={{ position: 'absolute', top: 64, left: 8 }}><Marigold size={44} color="var(--amber)" core="var(--chile)" /></div>
    </div>
  );
}

/* ---- Line icons for the chip system ---- */
const ICONS = {
  cal: <g><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 9h18M8 3v4M16 3v4" /></g>,
  mic: <g><rect x="9" y="3" width="6" height="11" rx="3" /><path d="M5 11a7 7 0 0 0 14 0M12 18v3M8 21h8" /></g>,
  clock: <g><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3.5 2.5" /></g>,
  mail: <g><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></g>,
  palette: <g><path d="M12 3a9 9 0 1 0 0 18c1.2 0 2-.9 2-2 0-1.3-1-1.7-1-3 0-.9.7-1.5 1.7-1.5H17a4 4 0 0 0 4-4c0-4-4-7.5-9-7.5Z" /></g>,
  box: <g><path d="M21 8l-9-5-9 5 9 5 9-5ZM3 8v8l9 5 9-5V8M12 13v8" /></g>,
  pin: <g><path d="M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11Z" /><circle cx="12" cy="10" r="2.5" /></g>,
  skull: <g><path d="M5 11a7 7 0 0 1 14 0c0 2.3-1 3.8-2 4.6V18a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 7 18v-2.4C6 14.8 5 13.3 5 11Z" /><circle cx="9.5" cy="11" r="1.6" /><circle cx="14.5" cy="11" r="1.6" /></g>,
  hand: <g><path d="M18 11V6a1.5 1.5 0 0 0-3 0M15 6V4a1.5 1.5 0 0 0-3 0v2M12 6V5a1.5 1.5 0 0 0-3 0v7M9 12V8a1.5 1.5 0 0 0-3 0v6a7 7 0 0 0 7 7h1a6 6 0 0 0 6-6v-1" /></g>,
  doc: <g><path d="M6 2h8l4 4v16H6zM14 2v4h4" /><path d="M9 13h6M9 17h6" /></g>,
};

function ChipIcon({ name }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      {ICONS[name] || ICONS.skull}
    </svg>
  );
}

function Chip({ tone = 'c1', icon = 'skull' }) {
  return <span className={`chip ${tone}`}><ChipIcon name={icon} /></span>;
}

Object.assign(window, { PapelPicado, Marigold, CornerFlora, Chip, ChipIcon, ICONS });