// Reusable primitives + sensual glyphs (no nooses, no knives)

const { useEffect, useRef, useState } = React;

function Reveal({ children, delay = 0, as = 'div', className = '', ...rest }) {
  // Simple passthrough — animations on every scroll were causing intermittent
  // invisibility bugs and adding visual noise. Content is always shown.
  const Tag = as;
  return (
    <Tag className={`reveal is-visible ${className}`} {...rest}>
      {children}
    </Tag>
  );
}

// — Sensual glyphs —

// Dagger through a rose
function DaggerRose({ size = 24, color = 'currentColor' }) {
  return (
    <svg viewBox="0 0 64 64" width={size} height={size} aria-hidden="true">
      <g fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        {/* rose */}
        <circle cx="32" cy="38" r="9" />
        <path d="M28 36 Q 32 32, 36 36 Q 32 40, 28 36 Z" />
        <path d="M26 42 Q 22 46, 26 50 M 38 42 Q 42 46, 38 50" />
        {/* dagger */}
        <line x1="32" y1="8" x2="32" y2="30" />
        <path d="M27 14 L 32 8 L 37 14" />
        <line x1="28" y1="46" x2="36" y2="46" />
        <line x1="32" y1="46" x2="32" y2="56" />
      </g>
    </svg>
  );
}

// Ribbon-bow
function RibbonBow({ size = 24, color = 'currentColor' }) {
  return (
    <svg viewBox="0 0 64 64" width={size} height={size} aria-hidden="true">
      <g fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <path d="M32 32 C 24 22, 14 24, 14 32 C 14 40, 24 42, 32 32 Z" />
        <path d="M32 32 C 40 22, 50 24, 50 32 C 50 40, 40 42, 32 32 Z" />
        <circle cx="32" cy="32" r="3" />
        <path d="M30 35 L 26 50 M 34 35 L 38 50" />
        <path d="M24 49 L 28 47 L 26 51 Z M 40 49 L 36 47 L 38 51 Z" />
      </g>
    </svg>
  );
}

// Lipstick kiss (a simple stylized mouth)
function KissMark({ size = 24, color = 'currentColor' }) {
  return (
    <svg viewBox="0 0 64 64" width={size} height={size} aria-hidden="true">
      <g fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M14 30 C 22 22, 30 28, 32 30 C 34 28, 42 22, 50 30 C 48 38, 38 46, 32 42 C 26 46, 16 38, 14 30 Z" />
        <line x1="32" y1="30" x2="32" y2="42" />
      </g>
    </svg>
  );
}

// Heart with a serpent
function SerpentHeart({ size = 24, color = 'currentColor' }) {
  return (
    <svg viewBox="0 0 64 64" width={size} height={size} aria-hidden="true">
      <g fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M32 52 C 14 40, 12 24, 22 18 C 28 14, 32 20, 32 22 C 32 20, 36 14, 42 18 C 52 24, 50 40, 32 52 Z" />
        <path d="M22 28 Q 18 32, 22 36 Q 28 36, 32 32 Q 38 28, 42 32 Q 46 36, 42 40" />
        <circle cx="22" cy="28" r="1.6" fill={color} />
      </g>
    </svg>
  );
}

// Apple with bite
function AppleBite({ size = 24, color = 'currentColor' }) {
  return (
    <svg viewBox="0 0 64 64" width={size} height={size} aria-hidden="true">
      <g fill="none" stroke={color} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <path d="M32 18 Q 18 18, 18 36 Q 18 54, 32 54 Q 46 54, 46 36 Q 46 18, 32 18 Z" />
        <path d="M32 18 C 30 12, 36 8, 40 10" />
        <path d="M38 22 C 42 22, 44 28, 40 30 C 36 32, 36 26, 38 22 Z" fill={color} stroke="none" />
        <path d="M30 16 Q 33 14, 35 10" />
      </g>
    </svg>
  );
}

// Calligraphic ornament (florish/swash)
function Florish({ width = 200, color = 'currentColor' }) {
  return (
    <svg viewBox="0 0 200 40" width={width} height={40} aria-hidden="true">
      <path
        d="M2 20 Q 30 4, 60 20 Q 80 32, 100 20 Q 120 8, 140 20 Q 170 36, 198 20"
        fill="none" stroke={color} strokeWidth="1.2" strokeLinecap="round"
      />
      <circle cx="100" cy="20" r="2" fill={color} />
    </svg>
  );
}

// Snake (sensual, for series ornament)
function SnakeRose({ size = 24, color = 'currentColor' }) {
  return (
    <svg viewBox="0 0 64 64" width={size} height={size} aria-hidden="true">
      <g fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M10 50 Q 16 30, 32 38 Q 48 46, 54 28 Q 52 16, 38 18 Q 26 22, 32 38" />
        <circle cx="10" cy="50" r="2" fill={color} />
        <path d="M38 18 L 36 14 M 38 18 L 42 14" />
        <path d="M28 30 Q 32 28, 36 30 Q 32 34, 28 30 Z" />
      </g>
    </svg>
  );
}

function scrollToId(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const top = el.getBoundingClientRect().top + window.scrollY - 70;
  window.scrollTo({ top, behavior: 'smooth' });
}

Object.assign(window, {
  Reveal, scrollToId,
  DaggerRose, RibbonBow, KissMark, SerpentHeart, AppleBite, Florish, SnakeRose });