/* global React */
// Islamic geometric patterns + ornament SVGs

const PATTERN_EIGHT_STAR = `data:image/svg+xml;utf8,${encodeURIComponent(`
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'>
  <g fill='none' stroke='%23c9a961' stroke-width='1' opacity='0.5'>
    <path d='M90 20 L110 50 L140 50 L125 80 L140 110 L110 110 L90 140 L70 110 L40 110 L55 80 L40 50 L70 50 Z'/>
    <path d='M90 40 L100 60 L120 60 L110 80 L120 100 L100 100 L90 120 L80 100 L60 100 L70 80 L60 60 L80 60 Z'/>
    <circle cx='90' cy='80' r='8'/>
  </g>
</svg>`)}`;

function Pattern8Star({ className = "", opacity = 1 }) {
  return (
    <svg className={className} viewBox="0 0 180 180" style={{ opacity }} aria-hidden="true">
      <defs>
        <pattern id="p8" width="90" height="90" patternUnits="userSpaceOnUse">
          <g fill="none" stroke="currentColor" strokeWidth="1">
            <path d="M45 5 L55 25 L75 25 L62.5 40 L75 55 L55 55 L45 75 L35 55 L15 55 L27.5 40 L15 25 L35 25 Z"/>
            <circle cx="45" cy="40" r="4"/>
          </g>
        </pattern>
      </defs>
      <rect width="180" height="180" fill="url(#p8)"/>
    </svg>
  );
}

function Arabesque({ className = "" }) {
  return (
    <svg className={className} viewBox="0 0 600 120" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.2">
      <path d="M0 60 Q 60 20, 120 60 T 240 60 T 360 60 T 480 60 T 600 60"/>
      <path d="M0 60 Q 60 100, 120 60 T 240 60 T 360 60 T 480 60 T 600 60"/>
      <g>
        {[60, 180, 300, 420, 540].map((cx) => (
          <g key={cx}>
            <circle cx={cx} cy={60} r="6" fill="currentColor" opacity=".5"/>
            <circle cx={cx} cy={60} r="14" strokeDasharray="2 2"/>
          </g>
        ))}
      </g>
    </svg>
  );
}

function MihrabArch({ className = "" }) {
  return (
    <svg className={className} viewBox="0 0 1200 600" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1">
      <path d="M200 600 L200 280 Q 200 100, 600 100 Q 1000 100, 1000 280 L1000 600" strokeOpacity=".7"/>
      <path d="M240 600 L240 290 Q 240 140, 600 140 Q 960 140, 960 290 L960 600" strokeOpacity=".4"/>
      <path d="M280 600 L280 300 Q 280 180, 600 180 Q 920 180, 920 300 L920 600" strokeOpacity=".25"/>
      <g opacity=".35">
        <path d="M600 100 L600 50" strokeWidth=".6"/>
        <circle cx="600" cy="45" r="8" fill="currentColor"/>
      </g>
    </svg>
  );
}

function OrnamentDivider({ className = "", width = 300 }) {
  return (
    <svg className={className} viewBox="0 0 300 40" width={width} aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1">
      <line x1="0" y1="20" x2="110" y2="20" opacity=".5"/>
      <line x1="190" y1="20" x2="300" y2="20" opacity=".5"/>
      <g transform="translate(150 20)">
        <path d="M -30 0 Q -20 -10, 0 -10 Q 20 -10, 30 0 Q 20 10, 0 10 Q -20 10, -30 0 Z"/>
        <circle r="4" fill="currentColor"/>
        <circle r="12" strokeDasharray="2 2" opacity=".5"/>
      </g>
    </svg>
  );
}

function AyahNumberBadge({ n }) {
  return (
    <svg viewBox="0 0 40 40" width="28" height="28" aria-hidden="true">
      <g fill="none" stroke="#a88639" strokeWidth="1">
        <path d="M20 3 L25 12 L35 12 L28 20 L35 28 L25 28 L20 37 L15 28 L5 28 L12 20 L5 12 L15 12 Z" fill="#faf2e1"/>
      </g>
      <text x="20" y="24" textAnchor="middle" fontSize="11" fontFamily="Cairo, Arial" fontWeight="700" fill="#0b3d22">{toArabicNum(n)}</text>
    </svg>
  );
}

function toArabicNum(n) {
  const ar = ["٠","١","٢","٣","٤","٥","٦","٧","٨","٩"];
  return String(n).split("").map(d => ar[+d] ?? d).join("");
}

Object.assign(window, {
  Pattern8Star, Arabesque, MihrabArch, OrnamentDivider, AyahNumberBadge, toArabicNum, PATTERN_EIGHT_STAR,
});