// Stannox shared small components

const Logo = ({ size = 22 }) => (
  <span className="logo" style={{ fontSize: size }}>
    <span className="mark" style={{ width: size * 1.18, height: size * 1.18 }}></span>
    STANNOX
  </span>
);

const Photo = ({ tag, caption, aspect, dark, src, alt, children, style }) => (
  <div className={"ph" + (dark ? " ph--dark" : "")} style={{ aspectRatio: aspect, ...style }}>
    {src && <img src={src} alt={alt || ""} loading="lazy"/>}
    {tag && <span className="ph__tag">{tag}</span>}
    {children}
    {caption && <span className="ph__caption">{caption}</span>}
  </div>
);

const MarketplaceIcon = ({ mp }) => {
  // Original abstract glyphs — not real marketplace logos
  const glyphs = {
    shopee: <svg viewBox="0 0 16 16" width="14" height="14"><rect x="3" y="5" width="10" height="9" fill="currentColor"/><path d="M6 5 V3 A2 2 0 0 1 10 3 V5" stroke="currentColor" strokeWidth="1.4" fill="none"/></svg>,
    lazada: <svg viewBox="0 0 16 16" width="14" height="14"><path d="M3 13 L8 3 L13 13 Z" fill="currentColor"/></svg>,
    tiktok: <svg viewBox="0 0 16 16" width="14" height="14"><circle cx="8" cy="8" r="5" fill="currentColor"/><circle cx="8" cy="8" r="2" fill="var(--ink)"/></svg>,
  };
  return glyphs[mp] || null;
};

const MarketplaceLabel = {
  shopee: "SHOPEE",
  lazada: "LAZADA",
  tiktok: "TIKTOK SHOP",
};

const IconSearch = () => (
  <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6">
    <circle cx="9" cy="9" r="6"/><path d="m14 14 4 4"/>
  </svg>
);

const IconChevron = ({ open }) => (
  <svg viewBox="0 0 12 12" width="10" height="10" fill="none" stroke="currentColor" strokeWidth="1.6"
       style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform .15s" }}>
    <path d="M3 5 L6 8 L9 5"/>
  </svg>
);

const IconArrow = () => (
  <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8">
    <path d="M4 10 H16 M11 5 L16 10 L11 15"/>
  </svg>
);

const IconLine = () => (
  <svg viewBox="0 0 20 20" width="14" height="14" fill="currentColor"><rect x="2" y="3" width="16" height="12" rx="2"/><circle cx="10" cy="9" r="3" fill="var(--ink)"/></svg>
);

Object.assign(window, { Logo, Photo, MarketplaceIcon, MarketplaceLabel, IconSearch, IconChevron, IconArrow, IconLine });