/* global React */
/* ============================================================
   MYTHOS ANIM — self-drawing engraved SVG glyphs + dividers.
   Every drawable carries pathLength="1" and class "md"; the
   draw-on-reveal animation lives in styles-mythos.css and is
   gated on [data-reveal].is-revealed + prefers-reduced-motion.
   ============================================================ */

(function () {
  const P = (d, i, extra) => (
    <path d={d} pathLength="1" className={'md' + (extra ? ' ' + extra : '')} style={{ '--i': i }} key={d.slice(0, 18) + i} />
  );
  const C = (cx, cy, r, i, extra) => (
    <circle cx={cx} cy={cy} r={r} pathLength="1" className={'md' + (extra ? ' ' + extra : '')} style={{ '--i': i }} key={'c' + cx + cy + r} />
  );

  const GLYPHS = {
    /* three strata waves + probe line */
    soil: () => [
      P('M6 13 Q14 9 24 13 T42 13', 0),
      P('M6 24 Q14 20 24 24 T42 24', 1),
      P('M6 35 Q14 31 24 35 T42 35', 2),
      P('M24 6 V42', 3, 'lumen'),
    ],
    /* trunk + branch arcs + canopy crown */
    canopy: () => [
      P('M24 43 V20', 0),
      P('M24 32 Q17 28 13 21', 1),
      P('M24 27 Q31 23 35 15', 2),
      P('M11 18 Q24 3 37 13', 3, 'lumen'),
    ],
    /* fruit + stem + leaf */
    fruit: () => [
      C(24, 29, 12, 0),
      P('M24 17 Q25 11 30 8', 1),
      P('M24 14 Q18 9 12 12 Q15 19 24 14 Z', 2, 'lumen'),
    ],
    /* baseline + yield bars */
    yield: () => [
      P('M7 41 H41', 0),
      P('M12 41 V30', 1),
      P('M19 41 V22', 2),
      P('M26 41 V33', 3),
      P('M33 41 V14', 4, 'lumen'),
    ],
    /* zoned block map + rate dots */
    prescription: () => [
      P('M9 9 H39 V39 H9 Z', 0),
      P('M9 22 Q19 16 26 23 T39 25', 1, 'lumen'),
      C(17, 32, 1.6, 2),
      C(27, 33, 1.6, 3),
      C(31, 15, 1.6, 4),
    ],
    /* axes + growth curve + dashed projection */
    forecast: () => [
      P('M9 39 H41', 0),
      P('M9 39 V9', 1),
      P('M9 35 C17 33 24 26 31 19', 2, 'lumen'),
      <path d="M31 19 C35 15 38 13 42 10" className="dash lumen" key="dash" />,
    ],
    /* caliper beam + jaws + fruit */
    caliper: () => [
      P('M10 8 H38', 0),
      P('M14 8 V40', 1),
      P('M32 8 V26', 2),
      C(23, 33, 6, 3, 'lumen'),
    ],
    /* scout pin + pulse ring */
    pin: () => [
      P('M24 7 a10 10 0 0 1 10 10 c0 8 -10 21 -10 21 s-10 -13 -10 -21 a10 10 0 0 1 10 -10 Z', 0),
      C(24, 17, 3.2, 1, 'lumen'),
    ],
    /* season wheel + spokes */
    wheel: () => [
      C(24, 24, 16, 0),
      P('M24 8 V14', 1), P('M37.8 16 L32.6 19', 1), P('M37.8 32 L32.6 29', 2),
      P('M24 40 V34', 2), P('M10.2 32 L15.4 29', 3), P('M10.2 16 L15.4 19', 3),
      C(24, 24, 3, 4, 'lumen'),
    ],
  };

  window.MythGlyph = function MythGlyph({ kind, size = 44 }) {
    const make = GLYPHS[kind] || GLYPHS.soil;
    return (
      <svg className="myth-draw myth-glyph" width={size} height={size} viewBox="0 0 48 48" aria-hidden="true" focusable="false">
        {make()}
      </svg>
    );
  };

  /* Engraved divider — lines draw outward from a central diamond */
  window.MythDivider = function MythDivider() {
    return (
      <svg className="myth-draw myth-divider" width="240" height="20" viewBox="0 0 240 20" aria-hidden="true" focusable="false">
        <path d="M120 4 L127 10 L120 16 L113 10 Z" pathLength="1" className="md lumen" style={{ '--i': 0 }} />
        <path d="M104 10 H18" pathLength="1" className="md" style={{ '--i': 1 }} />
        <path d="M136 10 H222" pathLength="1" className="md" style={{ '--i': 1 }} />
        <circle cx="10" cy="10" r="1.8" pathLength="1" className="md" style={{ '--i': 2 }} />
        <circle cx="230" cy="10" r="1.8" pathLength="1" className="md" style={{ '--i': 2 }} />
      </svg>
    );
  };
})();