// ─── VerbatimStamp.jsx ────────────────────────────────────────
// Gold notary-style stamp. Three flavors: 'verbatim', 'doctrine',
// 'strength'. Stack 2–3 of them with different rotations + delays
// for the "stamping" moment that lands after a citation completes.
//
// All animation lives in styles.css (.le-stamp-*) — SMIL inside an
// SVG asset wouldn't survive the pipeline, so we use real CSS
// keyframes on the host DOM.

function VerbatimStamp({
  kind = 'verbatim',
  caseName,
  value,
  delay = 0,
  rotation = -4,
  size = 140,
}) {
  const id = React.useId();

  const config = {
    verbatim: {
      ring: 'מילה במילה · 0% הזיות · מילה במילה · 0% הזיות · ',
      glyph: '✓',
      caption: caseName || 'ע״א · בעמ׳',
    },
    doctrine: {
      ring: 'דוקטרינה · ניתוב · דוקטרינה · ניתוב · דוקטרינה · ',
      glyph: value || '§',
      caption: caseName || 'תכלית · פרשנות',
    },
    strength: {
      ring: 'חוזק טיעון · ביטחון · חוזק טיעון · ביטחון · ',
      glyph: value || '87',
      caption: caseName || '/100 · גבוה',
    },
  };
  const c = config[kind] || config.verbatim;

  return (
    <div
      className="le-stamp"
      style={{
        width: size, height: size,
        animationDelay: `${delay}ms`,
        '--le-stamp-rotation': `${rotation}deg`,
      }}
    >
      <svg viewBox="0 0 100 100" width="100%" height="100%" aria-hidden="true">
        <defs>
          <path id={id} d="M 50 50 m -38 0 a 38 38 0 1 1 76 0 a 38 38 0 1 1 -76 0"/>
        </defs>
        {/* outer ring */}
        <circle cx="50" cy="50" r="46" fill="none" stroke="currentColor" strokeWidth="2"/>
        <circle cx="50" cy="50" r="42" fill="none" stroke="currentColor" strokeWidth="0.6"/>
        <circle cx="50" cy="50" r="30" fill="none" stroke="currentColor" strokeWidth="0.6"/>
        {/* circling text */}
        <text fontFamily="'Heebo', 'JetBrains Mono', sans-serif"
              fontSize="5.8" fill="currentColor" letterSpacing="1" fontWeight="600"
              direction="rtl">
          <textPath href={`#${id}`} startOffset="0">{c.ring}</textPath>
        </text>
      </svg>
      <div className="le-stamp-inner">
        <div className="le-stamp-kind">{({verbatim:'מילה במילה',doctrine:'דוקטרינה',strength:'חוזק טיעון'})[kind] || kind}</div>
        <div className={`le-stamp-glyph ${kind === 'verbatim' ? 'tick' : ''}`}>{c.glyph}</div>
        <div className="le-stamp-caption">{c.caption}</div>
      </div>
    </div>
  );
}

// Three-stamp set, laid out as if just stamped onto the page.
function VerbatimStampSet({ caseName, doctrine, strength }) {
  return (
    <div className="le-stamp-set">
      <VerbatimStamp kind="strength" value={strength} rotation={-8} delay={120} size={130}/>
      <VerbatimStamp kind="doctrine" value={doctrine} rotation={6} delay={360} size={130}/>
      <VerbatimStamp kind="verbatim" caseName={caseName} rotation={-3} delay={620} size={140}/>
    </div>
  );
}

Object.assign(window, { VerbatimStamp, VerbatimStampSet });