/* motif.jsx — Madhubani / block-print inspired SVG motifs + icons → window */

// A horizontal dot-work + lotus divider, drawn in the Madhubani spirit:
// twin running lines of dots with a small radiating bloom at centre.
function DotworkDivider() {
  const dots = [];
  for (let i = 0; i < 17; i++) dots.push(i);
  return (
    <div className="divider" aria-hidden="true">
      <svg viewBox="0 0 420 40" fill="none">
        {/* left + right running dot lines */}
        {dots.map((i) => (
          <circle key={"l" + i} cx={10 + i * 9.5} cy={20} r={i === 16 ? 0 : 1.7} fill="currentColor" opacity={0.5 + (i % 3) * 0.15} />
        ))}
        {dots.map((i) => (
          <circle key={"r" + i} cx={262 + i * 9.5} cy={20} r={i === 0 ? 0 : 1.7} fill="currentColor" opacity={0.5 + (i % 3) * 0.15} />
        ))}
        {/* centre bloom */}
        <g transform="translate(210 20)">
          {Array.from({ length: 12 }).map((_, i) => {
            const a = (i / 12) * Math.PI * 2;
            return <line key={i} x1={Math.cos(a) * 7} y1={Math.sin(a) * 7} x2={Math.cos(a) * 15} y2={Math.sin(a) * 15} stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />;
          })}
          <circle r="6" fill="none" stroke="currentColor" strokeWidth="1.4" />
          <circle r="2.2" fill="currentColor" />
          {Array.from({ length: 12 }).map((_, i) => {
            const a = (i / 12) * Math.PI * 2;
            return <circle key={"d" + i} cx={Math.cos(a) * 19} cy={Math.sin(a) * 19} r="1.5" fill="currentColor" />;
          })}
        </g>
      </svg>
    </div>
  );
}

// A quarter "fish + dot" block-print corner flourish (Madhubani staple).
function CornerMotif({ className, size = 220, style }) {
  return (
    <svg className={"corner-motif " + (className || "")} style={{ width: size, height: size, ...style }} viewBox="0 0 200 200" fill="none" aria-hidden="true">
      <g stroke="currentColor" strokeWidth="2" fill="none">
        <path d="M10 10 Q90 12 96 92 Q100 150 180 168" />
        <path d="M10 30 Q70 34 76 96" opacity="0.7" />
        {/* radiating sun at the joint */}
        <g transform="translate(96 92)">
          {Array.from({ length: 16 }).map((_, i) => {
            const a = (i / 16) * Math.PI * 2;
            return <line key={i} x1={Math.cos(a) * 12} y1={Math.sin(a) * 12} x2={Math.cos(a) * 22} y2={Math.sin(a) * 22} strokeWidth="1.6" />;
          })}
          <circle r="11" />
          <circle r="4" fill="currentColor" stroke="none" />
        </g>
      </g>
      {/* dot field */}
      {Array.from({ length: 5 }).map((_, r) =>
        Array.from({ length: 5 }).map((_, c) => (
          <circle key={r + "-" + c} cx={130 + c * 13} cy={20 + r * 13} r="2" fill="currentColor" opacity={0.55} />
        ))
      )}
    </svg>
  );
}

// service glyphs (line-style, used faint behind cards)
function ServiceGlyph({ kind }) {
  if (kind === "Facilitation")
    return (
      <svg className="glyph" viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="3">
        <circle cx="30" cy="38" r="13" /><circle cx="70" cy="38" r="13" /><path d="M18 80c0-14 10-22 22-22M82 80c0-14-10-22-22-22" strokeLinecap="round" />
      </svg>
    );
  if (kind === "Corporate Training")
    return (
      <svg className="glyph" viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="3">
        <path d="M50 18 92 38 50 58 8 38z" strokeLinejoin="round" /><path d="M26 47v22c0 6 11 12 24 12s24-6 24-12V47" /><path d="M92 38v20" strokeLinecap="round" />
      </svg>
    );
  return (
    <svg className="glyph" viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="3">
      <path d="M50 12l9 27h28l-23 17 9 27-23-17-23 17 9-27-23-17h28z" strokeLinejoin="round" />
    </svg>
  );
}

// small UI icons
function Icon({ name, className }) {
  const p = { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" };
  if (name === "arrow") return (<svg {...p}><path d="M5 12h14M13 6l6 6-6 6" /></svg>);
  if (name === "mail") return (<svg {...p}><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></svg>);
  if (name === "instagram") return (<svg {...p}><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" /></svg>);
  if (name === "linkedin") return (<svg {...p}><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M7 10v7M7 7v.01M11 17v-4a2 2 0 014 0v4M11 11v6" /></svg>);
  return null;
}

Object.assign(window, { DotworkDivider, CornerMotif, ServiceGlyph, Icon });