/* Shared brand mark + icons */

function BrandMark({ size = 44, dark = false }) {
  // Use the actual brand logo (icon part) — yellow/black SR mark.
  return (
    <img
      src="photos/logo-icon.png"
      alt="Sr. Banheiro"
      width={size * 1.3}
      height={size}
      style={{ width: 'auto', height: size, display: 'block' }}
    />
  );
}

function Brand({ size = 44, withName = true, dark = false }) {
  return (
    <a href="#/" className={`brand ${dark ? 'brand-dark' : ''}`}>
      <img
        src="photos/logo-srbanheiro.png"
        alt="Sr. Banheiro — Banheiros Químicos"
        className="brand-logo"
        style={{ width: '144px', height: '46px', display: 'block' }}
      />
    </a>
  );
}

/* Icons (Lucide-ish minimal line set, drawn fresh) */
function Icon({ name, size = 20, color = "currentColor", strokeWidth = 1.8 }) {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case 'arrow-right': return <svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'arrow-up-right': return <svg {...props}><path d="M7 17L17 7M8 7h9v9"/></svg>;
    case 'check': return <svg {...props}><path d="M4 12l5 5L20 6"/></svg>;
    case 'check-circle': return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-6"/></svg>;
    case 'phone': return <svg {...props}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>;
    case 'mail': return <svg {...props}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 6L2 7"/></svg>;
    case 'map': return <svg {...props}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>;
    case 'whatsapp': return <svg {...props}><path d="M3 21l1.65-3.8a9 9 0 1 1 3.4 3.4L3 21z"/><path d="M9 10c0 3 2 5 5 5l1.5-1.5-2-1-1 .8c-.8-.5-1.5-1.2-2-2l.8-1-1-2L9 10z"/></svg>;
    case 'instagram': return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>;
    case 'facebook': return <svg {...props}><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>;
    case 'handshake': return <svg {...props}><path d="M11 17l2 2a1 1 0 0 0 1.4 0L20 13.4M18 14l1.5 1.5a1 1 0 0 0 1.4 0l.6-.6a1 1 0 0 0 0-1.4L13 5.4 9 6 6 9l3 3"/><path d="M13.5 12.5L11 15M7 14l-3.5 3.5a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0L10 17"/></svg>;
    case 'chart': return <svg {...props}><path d="M3 17l6-6 4 4 7-9"/><path d="M14 6h6v6"/></svg>;
    case 'briefcase': return <svg {...props}><rect x="2" y="7" width="20" height="13" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2M2 13h20"/></svg>;
    case 'shield': return <svg {...props}><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z"/><path d="M9 12l2 2 4-4"/></svg>;
    case 'leaf': return <svg {...props}><path d="M11 20A7 7 0 0 1 4 13V5h7a7 7 0 0 1 7 7v0a7 7 0 0 1-7 7z"/><path d="M11 5v15"/></svg>;
    case 'truck': return <svg {...props}><rect x="1" y="6" width="14" height="11" rx="1"/><path d="M15 8h4l3 4v5h-3M5 17a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM18 17a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>;
    case 'sparkles': return <svg {...props}><path d="M12 3l1.8 4.5L18 9l-4.2 1.5L12 15l-1.8-4.5L6 9l4.2-1.5L12 3zM19 14l1 2.5L22 17.5l-2 .5-1 2.5-1-2.5-2-.5 2-1 1-2.5zM5 14l.6 1.5L7 16l-1.4.5L5 18l-.6-1.5L3 16l1.4-.5L5 14z"/></svg>;
    case 'crown': return <svg {...props}><path d="M3 18h18l-2-11-5 4-3-6-3 6-5-4-2 11z"/><path d="M3 22h18"/></svg>;
    case 'lightbulb': return <svg {...props}><path d="M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.6V17h8v-2.4A7 7 0 0 0 12 2z"/></svg>;
    case 'fan': return <svg {...props}><circle cx="12" cy="12" r="2"/><path d="M12 4c-2 2-2 5 0 6-2-1-5-1-6 2 1-2 4-2 6 0-2 2-2 5 0 6 0-2 3-3 6-2-2-1-2-4 0-6-2 2-5 2-6 0z"/></svg>;
    case 'flower': return <svg {...props}><circle cx="12" cy="12" r="3"/><path d="M12 2a4 4 0 0 0 0 8 4 4 0 0 0 0-8zM12 14a4 4 0 0 0 0 8 4 4 0 0 0 0-8zM2 12a4 4 0 0 0 8 0 4 4 0 0 0-8 0zM14 12a4 4 0 0 0 8 0 4 4 0 0 0-8 0z"/></svg>;
    case 'broom': return <svg {...props}><path d="M3 21l8-8M14 4l6 6-7 7-6-6 7-7zM10 14l4 4"/></svg>;
    case 'mirror': return <svg {...props}><rect x="6" y="2" width="12" height="16" rx="6"/><path d="M9 22h6M12 18v4"/></svg>;
    case 'users': return <svg {...props}><circle cx="9" cy="9" r="3"/><path d="M2 20c0-3 3-5 7-5s7 2 7 5"/><circle cx="17" cy="7" r="2.5"/><path d="M22 18c0-2-2-3.5-5-3.5"/></svg>;
    case 'cube': return <svg {...props}><path d="M3 7l9-5 9 5v10l-9 5-9-5V7z"/><path d="M3 7l9 5 9-5M12 12v10"/></svg>;
    case 'droplet': return <svg {...props}><path d="M12 2l6 9a6 6 0 1 1-12 0l6-9z"/></svg>;
    case 'shower': return <svg {...props}><path d="M5 22V8a5 5 0 0 1 10 0M19 12c-1 0-2-1-2-2"/><circle cx="9" cy="14" r=".5" fill="currentColor"/><circle cx="11" cy="17" r=".5" fill="currentColor"/><circle cx="13" cy="14" r=".5" fill="currentColor"/><circle cx="11" cy="20" r=".5" fill="currentColor"/></svg>;
    case 'accessibility': return <svg {...props}><circle cx="12" cy="4" r="2"/><path d="M12 7v6h-3l-2 7M12 13h3l3 7M7 14h10"/></svg>;
    case 'fence': return <svg {...props}><path d="M3 22V10l3-3v15M9 22V7l3-3v18M15 22V10l3-3v15M21 22V10l-3-3M3 12h18M3 16h18"/></svg>;
    case 'home-roof': return <svg {...props}><path d="M3 11l9-7 9 7v10H3V11z"/><rect x="9" y="13" width="6" height="8"/></svg>;
    case 'menu': return <svg {...props}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case 'close': return <svg {...props}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case 'plus': return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    default: return null;
  }
}

window.Brand = Brand;
window.BrandMark = BrandMark;
window.Icon = Icon;