/* Lucide-style line icons + brand mark */
const Icon = ({ name, size = 18, color = "currentColor", strokeWidth = 1.75, style = {} }) => {
  const paths = {
    arrowRight: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    arrowUpRight: <><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></>,
    check: <polyline points="4 12 9 17 20 6"/>,
    phone: <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.72 12.84 12.84 0 0 0 .7 2.81 2 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-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>,
    mail: <><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="22 6 12 13 2 6"/></>,
    mapPin: <><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"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    instagram: <><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></>,
    whatsapp: <path d="M20.52 3.48A11.83 11.83 0 0 0 12 .03 11.97 11.97 0 0 0 0 12c0 2.11.55 4.17 1.6 6L0 24l6.18-1.62A11.97 11.97 0 0 0 12 24a11.97 11.97 0 0 0 12-12 11.83 11.83 0 0 0-3.48-8.52zM12 21.82a9.83 9.83 0 0 1-5.03-1.38l-.36-.22-3.67.96.98-3.58-.24-.37A9.84 9.84 0 1 1 21.84 12 9.86 9.86 0 0 1 12 21.82zm5.4-7.36c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-1.77-.88-2.94-1.58-4.11-3.58-.31-.54.31-.5.89-1.66.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51-.17 0-.37-.02-.57-.02-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.87 1.22 3.07.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.62.71.23 1.35.2 1.86.12.57-.09 1.76-.72 2-1.42.25-.7.25-1.3.17-1.42-.07-.13-.27-.2-.57-.35z"/>,
    menu: <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>,
    close: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    paw: <><circle cx="11" cy="5" r="2"/><circle cx="5" cy="9" r="1.8"/><circle cx="17" cy="9" r="1.8"/><circle cx="6.5" cy="15.5" r="1.6"/><circle cx="15.5" cy="15.5" r="1.6"/><path d="M7 18c0-2.5 2-4 4-4s4 1.5 4 4-2 3-4 3-4-.5-4-3z"/></>,
    tooth: <path d="M9 2c-3 0-3 3-3 3v3c0 3 1 6.5 2 12 .3 1 1.7 1 2-.5l.5-5c.1-.5 1.9-.5 2 0l.5 5c.3 1.5 1.7 1.5 2 .5 1-5.5 2-9 2-12V5c0-3 0-3-3-3-2 0-3 1-3 1s-1-1-3-1z"/>,
    syringe: <><line x1="18" y1="2" x2="22" y2="6"/><path d="M21 7L8 20l-4 1 1-4 13-13"/><line x1="7" y1="14" x2="10" y2="17"/></>,
    anesthesia: <><path d="M7 7c0-2 2-3 5-3s5 1 5 3v6c0 3-2 5-5 5s-5-2-5-5V7z"/><path d="M7 10L3 8"/><path d="M17 10l4-2"/><line x1="9" y1="12" x2="15" y2="12"/></>,
    extraction: <><path d="M8 13l-4 8"/><path d="M16 13l4 8"/><path d="M8 13c0-3 1-6 4-6s4 3 4 6"/><line x1="10" y1="9" x2="14" y2="9"/></>,
    xray: <><rect x="3" y="4" width="18" height="16" rx="1"/><line x1="7" y1="8" x2="17" y2="8"/><line x1="7" y1="12" x2="13" y2="12"/><line x1="7" y1="16" x2="11" y2="16"/></>,
    scalpel: <><path d="M17 3l4 4-12 12H5v-4L17 3z"/><line x1="13" y1="7" x2="17" y2="11"/></>,
    bone: <path d="M17 4a3 3 0 0 0-3 3v.5L9.5 12 5 7.5V7a3 3 0 1 0-3 3h.5L7 14.5l-4.5 4.5H2a3 3 0 1 0 3 3v-.5L9.5 17l4.5 4.5v.5a3 3 0 1 0 3-3h-.5L12 14.5 16.5 10h.5a3 3 0 1 0 0-6z"/>,
    shield: <path d="M12 2l8 4v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6l8-4z"/>,
    book: <><path d="M4 4h12a4 4 0 0 1 4 4v12"/><path d="M4 4v16h12a4 4 0 0 0 4-4"/><line x1="8" y1="9" x2="14" y2="9"/></>,
    chevronDown: <polyline points="6 9 12 15 18 9"/>,
    chevronRight: <polyline points="9 6 15 12 9 18"/>,
    plus: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    quote: <path d="M7 10c0-3 2-5 5-5v2a3 3 0 0 0-3 3h3v6H4v-6h3zm10 0c0-3 2-5 5-5v2a3 3 0 0 0-3 3h3v6h-5v-6h0z"/>,
    zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
  };

  const isFilled = ["whatsapp", "bone", "shield", "tooth", "paw", "quote", "zap"].includes(name);

  return (
    <svg width={size} height={size} viewBox="0 0 24 24"
         fill={isFilled ? color : "none"}
         stroke={isFilled ? "none" : color}
         strokeWidth={strokeWidth}
         strokeLinecap="round" strokeLinejoin="round"
         style={{ flexShrink: 0, display: "inline-block", verticalAlign: "middle", ...style }}>
      {paths[name] || null}
    </svg>
  );
};

/* Brand mark — dental shape with dog+cat silhouette (cropped from logo) */
const BrandMark = ({ size = 36 }) => (
  <img src={window.A("assets/logo-mark.png")} alt="VDM Petdent"
       style={{
         width: size,
         height: size * (470/600),  // preserve native aspect 600x470
         objectFit: "contain",
         display: "block",
       }} />
);

/* Full logo — mark + wordmark stacked (cropped, white bg trimmed) */
const FullLogo = ({ width = 160, onDark = false }) => (
  <img src={window.A(onDark ? "assets/logo-full-white.png" : "assets/logo-full.png")} alt="Veteriner Diş Merkezi Petdent"
       style={{
         width: width,
         height: "auto",
         display: "block",
         filter: "none",
       }} />
);

/* Typographic wordmark — matches the logo's didone character */
const Wordmark = ({ scale = 1, color = "var(--pd-charcoal)", accent = "var(--pd-orange)" }) => (
  <span style={{
    fontFamily: "var(--pd-font-display)",
    fontSize: 17 * scale,
    letterSpacing: "0.02em",
    color: color,
    lineHeight: 1,
    whiteSpace: "nowrap",
  }}>
    VETERİNER <span style={{ color: accent }}>DİŞ</span> MERKEZİ
  </span>
);

/* Composite logo for header — actual mark image + typographic wordmark */
const Logo = ({ onDark = false }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
    <BrandMark size={42} />
    <span style={{ display: "flex", flexDirection: "column", gap: 3, lineHeight: 1 }}>
      <Wordmark
        scale={1}
        color={onDark ? "#fff" : "var(--pd-charcoal)"}
        accent="var(--pd-orange)"
      />
      <span style={{
        fontSize: 9, letterSpacing: "0.22em", textTransform: "uppercase",
        color: onDark ? "rgba(255,255,255,0.55)" : "var(--pd-charcoal-3)",
        fontWeight: 600,
      }}>
        Petdent İstanbul
      </span>
    </span>
  </span>
);

window.Icon = Icon;
window.BrandMark = BrandMark;
window.FullLogo = FullLogo;
window.Wordmark = Wordmark;
window.Logo = Logo;