// Tiny shared UI primitives — wordmark, icons, eyebrow, button, rule.

const Wordmark = ({ small }) => (
  <a href="#top" className={`mm-wordmark ${small ? 'small' : ''}`} aria-label="Mamiya Jewellers home">
    <span className="mm-wm-display">MAMIYA</span>
    <span className="mm-wm-sub">JEWELLERS &middot; SINCE 1966</span>
  </a>
);

const Eyebrow = ({ children, n }) => (
  <div className="mm-eyebrow">
    {n && <span className="mm-eyebrow-n">{n}</span>}
    <span>{children}</span>
  </div>
);

const GoldRule = ({ style }) => <div className="mm-rule" style={style} />;

const Btn = ({ children, variant = 'primary', onClick, href, type, full, small }) => {
  const cls = `mm-btn mm-btn-${variant} ${full ? 'full' : ''} ${small ? 'small' : ''}`;
  if (href) return <a className={cls} href={href} onClick={onClick}>{children}</a>;
  return <button className={cls} onClick={onClick} type={type || 'button'}>{children}</button>;
};

// Inline SVG icon set — minimal, geometric only (per design rules)
const Icon = ({ name, size = 16 }) => {
  const s = { width: size, height: size, fill: 'none', stroke: 'currentColor', strokeWidth: 1.25, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'whatsapp':
      return (<svg {...s} viewBox="0 0 24 24"><path d="M12 3a9 9 0 0 0-7.8 13.5L3 21l4.7-1.2A9 9 0 1 0 12 3Z" /><path d="M8.5 8.7c.4-1 1-.9 1.4-.9.4 0 .7.4 1 1s.7 1.5.7 1.8c0 .4-.3.5-.6.8-.3.3-.5.4-.3.8.3.5.9 1.3 1.6 1.9.7.5 1.4.9 1.8 1 .4.2.6.1.8-.2.2-.3.7-.8.9-1.1.3-.3.5-.2.9 0l1.7.9c.3.2.4.4.4.6 0 .3-.5 1.4-1.5 1.7-.9.3-1.8.3-3.6-.3-1.7-.6-2.9-1.5-4-2.8-.9-1.1-1.6-2.3-1.7-3 0-.7.1-1.5.5-1.9Z" /></svg>);
    case 'phone':
      return (<svg {...s} viewBox="0 0 24 24"><path d="M4 5c0-1 .8-2 2-2h2l2 5-2 1.5a12 12 0 0 0 5.5 5.5L15 13l5 2v2a2 2 0 0 1-2 2A14 14 0 0 1 4 5Z" /></svg>);
    case 'pin':
      return (<svg {...s} viewBox="0 0 24 24"><path d="M12 21s-7-6.5-7-12a7 7 0 1 1 14 0c0 5.5-7 12-7 12Z" /><circle cx="12" cy="9" r="2.5" /></svg>);
    case 'arrow':
      return (<svg {...s} viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" /></svg>);
    case 'arrowL':
      return (<svg {...s} viewBox="0 0 24 24"><path d="M19 12H5M11 6l-6 6 6 6" /></svg>);
    case 'star':
      return (<svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M12 2l2.9 6.9 7.1.6-5.4 4.6 1.7 7L12 17.8 5.7 21l1.7-7L2 9.5l7.1-.6L12 2z" /></svg>);
    case 'check':
      return (<svg {...s} viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" /></svg>);
    case 'menu':
      return (<svg {...s} viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16" /></svg>);
    case 'x':
      return (<svg {...s} viewBox="0 0 24 24"><path d="M6 6l12 12M6 18L18 6" /></svg>);
    case 'diamond':
      return (<svg {...s} viewBox="0 0 24 24"><path d="M6 9l6-5 6 5-6 11Z" /><path d="M6 9h12M12 4l-2 5 2 11 2-11-2-5" /></svg>);
    case 'gem':
      return (<svg {...s} viewBox="0 0 24 24"><path d="M5 9l4-5h6l4 5-7 11Z" /><path d="M5 9h14" /></svg>);
    case 'ring':
      return (<svg {...s} viewBox="0 0 24 24"><circle cx="12" cy="15" r="6" /><path d="M9 8l3-4 3 4" /></svg>);
    default:
      return null;
  }
};

// Striped placeholder for any missing imagery
const StripePlaceholder = ({ label, ratio = '1 / 1' }) => (
  <div className="mm-stripe-ph" style={{ aspectRatio: ratio }}>
    <span>{label}</span>
  </div>
);

const formatAED = (n) => 'Dhs. ' + n.toLocaleString('en-US');

Object.assign(window, { Wordmark, Eyebrow, GoldRule, Btn, Icon, StripePlaceholder, formatAED });