/** Reusable sacred-geometry SVG motifs — decorative only (aria-hidden at call sites). */

type MotifProps = {
  className?: string;
  stroke?: string;
  opacity?: number;
};

const DEFAULT_STROKE = '#c9a227';

export function FlowerOfLifeWatermark({ className = '', stroke = DEFAULT_STROKE, opacity = 0.55 }: MotifProps) {
  const cx = 50;
  const cy = 50;
  const R = 32;
  const petalAngles = [0, 60, 120, 180, 240, 300];
  const petals = petalAngles.map((deg) => {
    const rad = (deg * Math.PI) / 180;
    return { x: cx + R * Math.cos(rad), y: cy + R * Math.sin(rad) };
  });
  const starR = R * 1.15;
  const starPts = Array.from({ length: 5 }, (_, i) => {
    const rad = ((i * 72 - 90) * Math.PI) / 180;
    return { x: cx + starR * Math.cos(rad), y: cy + starR * Math.sin(rad) };
  });
  const starPath = starPts.map((p, i) => (i === 0 ? `M${p.x},${p.y}` : `L${p.x},${p.y}`)).join(' ') + ' Z';
  const triR = R * 0.7;
  const triUp = [0, 120, 240]
    .map((d) => {
      const rad = ((d - 90) * Math.PI) / 180;
      return `${cx + triR * Math.cos(rad)},${cy + triR * Math.sin(rad)}`;
    })
    .join(' ');
  const triDown = [60, 180, 300]
    .map((d) => {
      const rad = ((d - 90) * Math.PI) / 180;
      return `${cx + triR * Math.cos(rad)},${cy + triR * Math.sin(rad)}`;
    })
    .join(' ');

  return (
    <svg className={className} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g opacity={opacity}>
        <circle cx={cx} cy={cy} r={R * 1.35} fill="none" stroke={stroke} strokeWidth="0.18" strokeDasharray="1.2 1.8" />
        <circle cx={cx} cy={cy} r={R} fill="none" stroke={stroke} strokeWidth="0.22" />
        <circle cx={cx} cy={cy} r={R * 0.5} fill="none" stroke={stroke} strokeWidth="0.18" strokeDasharray="0.6 1.2" />
        {petals.map((p, i) => (
          <circle key={i} cx={p.x} cy={p.y} r={R} fill="none" stroke={stroke} strokeWidth="0.16" opacity="0.7" />
        ))}
        <path d={starPath} fill="none" stroke="#ff8c00" strokeWidth="0.2" strokeLinejoin="round" opacity="0.6" />
        <polygon points={triUp} fill="none" stroke={stroke} strokeWidth="0.2" opacity="0.8" />
        <polygon points={triDown} fill="none" stroke={stroke} strokeWidth="0.2" opacity="0.8" />
        <circle cx={cx} cy={cy} r="0.6" fill={stroke} opacity="0.9" />
        {starPts.map((p, i) => (
          <line key={i} x1={cx} y1={cy} x2={p.x} y2={p.y} stroke={stroke} strokeWidth="0.1" opacity="0.35" />
        ))}
      </g>
    </svg>
  );
}

export function SeedOfLife({ className = '', stroke = DEFAULT_STROKE, opacity = 0.5 }: MotifProps) {
  const cx = 50;
  const cy = 50;
  const r = 14;
  const centers = [{ x: cx, y: cy }];
  for (let i = 0; i < 6; i++) {
    const a = (i * 60 * Math.PI) / 180;
    centers.push({ x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) });
  }
  return (
    <svg className={className} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g opacity={opacity}>
        <circle cx={cx} cy={cy} r={r * 2.2} fill="none" stroke={stroke} strokeWidth="0.2" strokeDasharray="0.8 1.4" />
        {centers.map((c, i) => (
          <circle key={i} cx={c.x} cy={c.y} r={r} fill="none" stroke={stroke} strokeWidth="0.18" />
        ))}
      </g>
    </svg>
  );
}

export function MetatronCube({ className = '', stroke = DEFAULT_STROKE, opacity = 0.45 }: MotifProps) {
  const cx = 50;
  const cy = 50;
  const r = 28;
  const pts: { x: number; y: number }[] = [];
  for (let i = 0; i < 6; i++) {
    const a = ((i * 60 - 90) * Math.PI) / 180;
    pts.push({ x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) });
  }
  const inner = r * 0.55;
  const innerPts: { x: number; y: number }[] = [];
  for (let i = 0; i < 6; i++) {
    const a = ((i * 60 - 90) * Math.PI) / 180;
    innerPts.push({ x: cx + inner * Math.cos(a), y: cy + inner * Math.sin(a) });
  }
  const lines: [number, number][] = [];
  for (let i = 0; i < pts.length; i++) {
    for (let j = i + 1; j < pts.length; j++) lines.push([i, j]);
  }
  for (let i = 0; i < innerPts.length; i++) {
    for (let j = i + 1; j < innerPts.length; j++) lines.push([i + 6, j + 6]);
  }
  pts.forEach((_, i) => lines.push([i, i + 6]));

  return (
    <svg className={className} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g opacity={opacity} stroke={stroke} strokeWidth="0.14" fill="none">
        <circle cx={cx} cy={cy} r={r * 1.05} strokeWidth="0.16" />
        <circle cx={cx} cy={cy} r={inner} strokeDasharray="0.5 1" />
        {lines.map(([a, b], i) => {
          const p1 = a < 6 ? pts[a] : innerPts[a - 6];
          const p2 = b < 6 ? pts[b] : innerPts[b - 6];
          return <line key={i} x1={p1.x} y1={p1.y} x2={p2.x} y2={p2.y} opacity="0.5" />;
        })}
        {[...pts, ...innerPts].map((p, i) => (
          <circle key={`d${i}`} cx={p.x} cy={p.y} r="0.5" fill={stroke} stroke="none" />
        ))}
      </g>
    </svg>
  );
}

export function VesicaPiscis({ className = '', stroke = DEFAULT_STROKE, opacity = 0.5 }: MotifProps) {
  const cx = 50;
  const cy = 50;
  const r = 22;
  return (
    <svg className={className} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g opacity={opacity} fill="none" stroke={stroke}>
        <circle cx={cx - r * 0.5} cy={cy} r={r} strokeWidth="0.2" />
        <circle cx={cx + r * 0.5} cy={cy} r={r} strokeWidth="0.2" />
        <path
          d={`M ${cx} ${cy - r * 0.87} A ${r * 0.5} ${r * 0.87} 0 0 1 ${cx} ${cy + r * 0.87} A ${r * 0.5} ${r * 0.87} 0 0 1 ${cx} ${cy - r * 0.87}`}
          stroke="#00f5ff"
          strokeWidth="0.16"
          opacity="0.6"
        />
        <line x1={cx} y1={cy - r} x2={cx} y2={cy + r} strokeWidth="0.12" opacity="0.35" />
      </g>
    </svg>
  );
}

export function HexLattice({ className = '', stroke = DEFAULT_STROKE, opacity = 0.35 }: MotifProps) {
  const hex = (cx: number, cy: number, s: number) => {
    const pts = Array.from({ length: 6 }, (_, i) => {
      const a = ((60 * i - 30) * Math.PI) / 180;
      return `${cx + s * Math.cos(a)},${cy + s * Math.sin(a)}`;
    }).join(' ');
    return <polygon key={`${cx}-${cy}`} points={pts} />;
  };
  return (
    <svg className={className} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g opacity={opacity} fill="none" stroke={stroke} strokeWidth="0.12">
        {hex(50, 50, 18)}
        {hex(50, 32, 10)}
        {hex(50, 68, 10)}
        {hex(34, 41, 10)}
        {hex(66, 41, 10)}
        {hex(34, 59, 10)}
        {hex(66, 59, 10)}
      </g>
    </svg>
  );
}

export function GoldenSpiral({ className = '', stroke = DEFAULT_STROKE, opacity = 0.4 }: MotifProps) {
  const cx = 18;
  const cy = 82;
  return (
    <svg className={className} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g opacity={opacity} fill="none" stroke={stroke} strokeWidth="0.18">
        <rect x="18" y="18" width="64" height="64" strokeDasharray="1 2" opacity="0.35" />
        <path
          d="M 18 82 A 64 64 0 0 1 82 18 A 40 40 0 0 1 58 42 A 24 24 0 0 1 42 58 A 14 14 0 0 1 50 50"
          stroke="#ffb020"
        />
        <circle cx={cx} cy={cy} r="1" fill={stroke} />
      </g>
    </svg>
  );
}

export function TorusRings({ className = '', stroke = DEFAULT_STROKE, opacity = 0.42 }: MotifProps) {
  const cx = 50;
  const cy = 50;
  return (
    <svg className={className} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g opacity={opacity} fill="none" stroke={stroke}>
        {[34, 26, 18, 10].map((r, i) => (
          <ellipse
            key={r}
            cx={cx}
            cy={cy}
            rx={r}
            ry={r * (0.55 + i * 0.08)}
            strokeWidth="0.16"
            transform={`rotate(${i * 12} ${cx} ${cy})`}
          />
        ))}
        <circle cx={cx} cy={cy} r="2" fill={stroke} opacity="0.8" />
      </g>
    </svg>
  );
}

/** Whimsical “key to knowledge” — geometric bow + shaft */
export function KnowledgeKey({ className = '', stroke = DEFAULT_STROKE, opacity = 0.55 }: MotifProps) {
  return (
    <svg className={className} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g opacity={opacity} fill="none" stroke={stroke} strokeLinecap="round" strokeLinejoin="round">
        <circle cx="38" cy="38" r="16" strokeWidth="0.35" />
        <circle cx="38" cy="38" r="8" stroke="#00f5ff" strokeWidth="0.25" />
        <polygon
          points="38,22 46,30 38,38 30,30"
          strokeWidth="0.2"
          fill="rgba(201,162,39,0.08)"
        />
        <line x1="50" y1="50" x2="88" y2="88" strokeWidth="0.35" />
        <rect x="72" y="72" width="8" height="8" strokeWidth="0.22" transform="rotate(45 76 76)" />
        <rect x="80" y="64" width="6" height="6" strokeWidth="0.2" transform="rotate(45 83 67)" />
        <path d="M 62 62 L 68 56 M 70 70 L 76 64" strokeWidth="0.18" opacity="0.7" />
      </g>
    </svg>
  );
}

export function SriYantraLite({ className = '', stroke = DEFAULT_STROKE, opacity = 0.4 }: MotifProps) {
  const cx = 50;
  const cy = 52;
  const tri = (r: number, flip: boolean) => {
    const pts = [0, 120, 240].map((d) => {
      const rad = ((d - 90) * Math.PI) / 180;
      const y = (flip ? -1 : 1) * r * Math.sin(rad);
      return `${cx + r * Math.cos(rad)},${cy + y}`;
    });
    return pts.join(' ');
  };
  return (
    <svg className={className} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g opacity={opacity} fill="none" stroke={stroke} strokeWidth="0.16">
        <circle cx={cx} cy={cy} r="38" strokeDasharray="1.5 2" />
        <polygon points={tri(32, false)} />
        <polygon points={tri(24, true)} stroke="#ff2da6" opacity="0.65" />
        <polygon points={tri(16, false)} stroke="#00f5ff" opacity="0.55" />
        <circle cx={cx} cy={cy} r="1.2" fill={stroke} />
      </g>
    </svg>
  );
}

export type MotifName =
  | 'flower'
  | 'seed'
  | 'metatron'
  | 'vesica'
  | 'hex'
  | 'spiral'
  | 'torus'
  | 'key'
  | 'yantra';

export function SacredMotif({
  name,
  className = '',
  stroke,
  opacity,
}: MotifProps & { name: MotifName }) {
  const props = { className, stroke, opacity };
  switch (name) {
    case 'seed':
      return <SeedOfLife {...props} />;
    case 'metatron':
      return <MetatronCube {...props} />;
    case 'vesica':
      return <VesicaPiscis {...props} />;
    case 'hex':
      return <HexLattice {...props} />;
    case 'spiral':
      return <GoldenSpiral {...props} />;
    case 'torus':
      return <TorusRings {...props} />;
    case 'key':
      return <KnowledgeKey {...props} />;
    case 'yantra':
      return <SriYantraLite {...props} />;
    case 'flower':
    default:
      return <FlowerOfLifeWatermark {...props} />;
  }
}
