// Shared components & icons for moja_run run

const Paw = ({ className = "" }) => (
  <svg className={className} viewBox="0 0 64 64" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="20" cy="22" rx="6" ry="8"/>
    <ellipse cx="44" cy="22" rx="6" ry="8"/>
    <ellipse cx="10" cy="36" rx="5" ry="7"/>
    <ellipse cx="54" cy="36" rx="5" ry="7"/>
    <path d="M32 30c-9 0-16 8-16 16 0 6 4 10 10 10 3 0 5-1 6-1s3 1 6 1c6 0 10-4 10-10 0-8-7-16-16-16z"/>
  </svg>
);

const Scissors = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="14" cy="20" r="6"/>
    <circle cx="14" cy="44" r="6"/>
    <path d="M20 24 L54 36"/>
    <path d="M20 40 L54 28"/>
    <circle cx="54" cy="32" r="2"/>
  </svg>
);

const DogFace = ({ size = 56, tongue = false }) => {
  // Scalloped cloud-like fluffy bichon face matching the moja_run run logo
  // 12 bumps around a circle, like a flower / cloud
  const cx = 50, cy = 50, R = 32, bumps = 13, br = 9;
  const path = [];
  for (let i = 0; i < bumps; i++) {
    const a = (i / bumps) * Math.PI * 2 - Math.PI / 2;
    const x = cx + Math.cos(a) * R;
    const y = cy + Math.sin(a) * R;
    if (i === 0) path.push(`M ${x.toFixed(2)} ${y.toFixed(2)}`);
    // arc each bump as a small circle bump
    const a2 = ((i + 1) / bumps) * Math.PI * 2 - Math.PI / 2;
    const nx = cx + Math.cos(a2) * R;
    const ny = cy + Math.sin(a2) * R;
    path.push(`A ${br} ${br} 0 0 1 ${nx.toFixed(2)} ${ny.toFixed(2)}`);
  }
  path.push('Z');
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <path d={path.join(' ')} fill="white" stroke="#231815" strokeWidth="2.6" strokeLinejoin="round"/>
      {/* eyes */}
      <circle cx="40" cy="48" r="3.4" fill="#231815"/>
      <circle cx="60" cy="48" r="3.4" fill="#231815"/>
      {/* nose */}
      <ellipse cx="50" cy="60" rx="3" ry="2.2" fill="#231815"/>
      {/* mouth / tongue */}
      {tongue ? (
        <path d="M50 62 Q47 67 47 70 Q50 71 53 70 Q53 67 50 62 Z" fill="#ef89a1" stroke="#231815" strokeWidth="1.4" strokeLinejoin="round"/>
      ) : (
        <path d="M46 64 Q50 67 54 64" stroke="#231815" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
      )}
    </svg>
  );
};

const Brand = ({ inverse = false }) => (
  <div className="brand">
    <div className="brand-logo">
      <img src="assets/logo-circle.png" alt="moja_run run" />
    </div>
    <div>
      <div className="brand-name">moja_run run</div>
      <div className="brand-sub">— private dog salon —</div>
    </div>
  </div>
);

const IconBath = () => (
  <svg width="40" height="40" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M6 22 L42 22 L40 36 Q38 40 34 40 L14 40 Q10 40 8 36 Z"/>
    <path d="M12 22 L12 12 Q12 8 16 8 L22 8"/>
    <circle cx="14" cy="16" r="3"/>
    <path d="M22 16 L26 18 M22 12 L26 14"/>
  </svg>
);
const IconScissor = () => <Scissors size={40}/>;
const IconSparkle = () => (
  <svg width="40" height="40" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M24 6 L26 20 L40 22 L26 24 L24 38 L22 24 L8 22 L22 20 Z"/>
    <path d="M38 32 L39 36 L43 37 L39 38 L38 42 L37 38 L33 37 L37 36 Z"/>
  </svg>
);
const IconTooth = () => (
  <svg width="40" height="40" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M24 8 C16 8, 12 14, 14 22 C15 28, 16 38, 19 40 C21 42, 22 36, 24 32 C26 36, 27 42, 29 40 C32 38, 33 28, 34 22 C36 14, 32 8, 24 8 Z"/>
  </svg>
);
const IconPaw = () => <Paw className="" />;
const IconHeart = () => (
  <svg width="40" height="40" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M24 40 C12 32, 6 24, 6 16 C6 10, 11 6, 16 6 C20 6, 24 9, 24 14 C24 9, 28 6, 32 6 C37 6, 42 10, 42 16 C42 24, 36 32, 24 40 Z"/>
  </svg>
);

Object.assign(window, {
  Paw, Scissors, DogFace, Brand,
  IconBath, IconScissor, IconSparkle, IconTooth, IconPaw, IconHeart,
});