// Molara — line-icon set. 1.6 stroke, rounded caps, 20px viewBox.
const Icon = ({ d, size = 18, stroke = 1.6, fill = 'none', style, ...p }) => (
  <svg width={size} height={size} viewBox="0 0 20 20" fill={fill} stroke="currentColor"
    strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style} {...p}>
    {typeof d === 'string' ? <path d={d} /> : d}
  </svg>
);

const I = {
  tooth: (p) => <Icon {...p} d="M10 2.5c-2.5 0-4 1-4.5 1s-1.5-.3-2 0c-.8.5-1 1.5-.5 3.3.4 1.3.4 1.9.6 3.2.2 1.5.4 3 1 4.8.4 1.2 1 2 1.7 2 .7 0 1-.7 1.3-1.6.3-1 .5-2 1.4-2s1.1 1 1.4 2c.3.9.6 1.6 1.3 1.6.7 0 1.3-.8 1.7-2 .6-1.8.8-3.3 1-4.8.2-1.3.2-1.9.6-3.2.5-1.8.3-2.8-.5-3.3-.5-.3-1.5 0-2 0S12.5 2.5 10 2.5Z"/>,
  search: (p) => <Icon {...p} d="M9 15.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13Zm4.8-1.8L17.5 17.5"/>,
  calendar: (p) => <Icon {...p} d="M3 6.5h14M3 6.5v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-10M3 6.5V5a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v1.5M7 2.5v3M13 2.5v3"/>,
  clock: (p) => <Icon {...p} d="M10 5.5v4.5l3 2M17.5 10a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z"/>,
  video: (p) => <Icon {...p} d="M2.5 6.5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1v-7ZM12.5 8.5l5-2.5v8l-5-2.5"/>,
  mic: (p) => <Icon {...p} d="M10 2.5a2.5 2.5 0 0 0-2.5 2.5v5a2.5 2.5 0 0 0 5 0V5A2.5 2.5 0 0 0 10 2.5ZM4.5 10a5.5 5.5 0 0 0 11 0M10 15.5v2"/>,
  micOff: (p) => <Icon {...p} d="M3 3l14 14M7.5 5V5a2.5 2.5 0 0 1 5 0v5m-.3 2.2a2.5 2.5 0 0 1-4.7-1.2V8M4.5 10a5.5 5.5 0 0 0 8.4 4.7M15.5 10v0a5.5 5.5 0 0 1-1 3.2M10 15.5v2"/>,
  phoneDown: (p) => <Icon {...p} d="M3.5 8.5c3-2.5 10-2.5 13 0 .5.4.8 1 .8 1.7v1.3a1 1 0 0 1-1 1l-2.7-.3a1 1 0 0 1-.9-1l-.1-1.3c-2-1-4.4-1-6.4 0l-.1 1.3a1 1 0 0 1-.9 1l-2.7.3a1 1 0 0 1-1-1V10.2c0-.6.3-1.3.8-1.7Z"/>,
  chat: (p) => <Icon {...p} d="M3 5.5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-4 3.5v-3.5H5a2 2 0 0 1-2-2v-6Z"/>,
  chevronR: (p) => <Icon {...p} d="M7.5 4.5l5 5.5-5 5.5"/>,
  chevronL: (p) => <Icon {...p} d="M12.5 4.5l-5 5.5 5 5.5"/>,
  chevronD: (p) => <Icon {...p} d="M4.5 7.5l5.5 5 5.5-5"/>,
  check: (p) => <Icon {...p} d="M4 10.5L8 14.5l8-9"/>,
  plus: (p) => <Icon {...p} d="M10 4v12M4 10h12"/>,
  close: (p) => <Icon {...p} d="M5 5l10 10M15 5L5 15"/>,
  pin: (p) => <Icon {...p} d="M10 2.5c-3 0-5.5 2.3-5.5 5.3 0 3.8 5.5 9.7 5.5 9.7s5.5-5.9 5.5-9.7c0-3-2.5-5.3-5.5-5.3Zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z"/>,
  star: (p) => <Icon {...p} d="M10 2.5l2.4 4.9 5.4.8-3.9 3.8.9 5.4L10 14.9l-4.8 2.5.9-5.4L2.2 8.2l5.4-.8L10 2.5Z"/>,
  shield: (p) => <Icon {...p} d="M10 2.5l7 2.5v5.3c0 3.8-3 6.7-7 7.2-4-.5-7-3.4-7-7.2V5l7-2.5ZM7 10l2.3 2.3L13 8.5"/>,
  sparkle: (p) => <Icon {...p} d="M10 3v3M10 14v3M3 10h3M14 10h3M5.5 5.5l2 2M12.5 12.5l2 2M5.5 14.5l2-2M12.5 7.5l2-2"/>,
  pill: (p) => <Icon {...p} d="M4 10a4 4 0 0 1 4-4h4a4 4 0 0 1 0 8H8a4 4 0 0 1-4-4ZM10 6v8"/>,
  arrowR: (p) => <Icon {...p} d="M4 10h12M11 5l5 5-5 5"/>,
  arrowUp: (p) => <Icon {...p} d="M10 16V4M5 9l5-5 5 5"/>,
  filter: (p) => <Icon {...p} d="M3 5h14M6 10h8M8 15h4"/>,
  map: (p) => <Icon {...p} d="M2.5 5.5L7 4v12L2.5 17.5v-12ZM7 4l6 1.5M7 16l6 1.5M13 5.5L17.5 4v12L13 17.5v-12Z"/>,
  screenShare: (p) => <Icon {...p} d="M2.5 5.5a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1v-8ZM7 17.5h6M10 14.5v3M10 11V6M7.5 8.5L10 6l2.5 2.5"/>,
  dots: (p) => <Icon {...p} d={<><circle cx="5" cy="10" r="1.2" fill="currentColor"/><circle cx="10" cy="10" r="1.2" fill="currentColor"/><circle cx="15" cy="10" r="1.2" fill="currentColor"/></>}/>,
  send: (p) => <Icon {...p} d="M3 10L17 3.5l-4 14-3-6-7-1.5Z"/>,
  eye: (p) => <Icon {...p} d={<><path d="M2 10s3-5.5 8-5.5S18 10 18 10s-3 5.5-8 5.5S2 10 2 10Z"/><circle cx="10" cy="10" r="2.3"/></>}/>,
  eyeOff: (p) => <Icon {...p} d={<><path d="M4.5 5.5C3 7 2 10 2 10s3 5.5 8 5.5c1.4 0 2.6-.4 3.7-1M17.5 14.5c.9-1.4 1.5-2.7 1.5-2.7l0-1.8s-3-5.5-8-5.5c-1 0-1.9.2-2.7.5M3 3l14 14"/><path d="M8.3 8.3a2.4 2.4 0 0 0 3.4 3.4"/></>}/>,
  bell: (p) => <Icon {...p} d="M5 13.5h10l-1-1.5V8a4 4 0 0 0-8 0v4l-1 1.5ZM8 15.5a2 2 0 0 0 4 0"/>,
  user: (p) => <Icon {...p} d="M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.5 17c.7-3 3.4-5 6.5-5s5.8 2 6.5 5"/>,
  doc: (p) => <Icon {...p} d="M5 3h7l3 3v11H5V3ZM12 3v3h3M7 10h6M7 13h6M7 7h2"/>,
  heart: (p) => <Icon {...p} d="M10 16.5s-6-3.5-6-8a3.5 3.5 0 0 1 6-2.4A3.5 3.5 0 0 1 16 8.5c0 4.5-6 8-6 8Z"/>,
  pulse: (p) => <Icon {...p} d="M2 10h4l2-5 4 10 2-5h4"/>,
  brain: (p) => <Icon {...p} d="M7.5 4.5a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0-1.5 2.3c0 1 .5 1.7 1.5 2.2 0 1.2.5 2 1.5 2.5v1.5a2 2 0 0 0 2 2h2v-13a2.5 2.5 0 0 0-3 0Zm5 0a2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1 1.5 2.3c0 1-.5 1.7-1.5 2.2 0 1.2-.5 2-1.5 2.5v1.5a2 2 0 0 1-2 2h-2"/>,
  bone: (p) => <Icon {...p} d="M5 5.5a2 2 0 0 1 3.5-1.3l3 3a2 2 0 0 1 2.7 2.7l-3 3a2 2 0 0 1-1.3 3.5 2 2 0 0 1-2-2 2 2 0 0 1-2.7-2.7l3-3a2 2 0 0 1-2.7-2.7A2 2 0 0 1 5 5.5Z"/>,
  ear: (p) => <Icon {...p} d="M6 14a3 3 0 0 0 3 3c2 0 3-1.5 3-3.5s2-2 2-4.5a4 4 0 0 0-8 0v5Z"/>,
  leaf: (p) => <Icon {...p} d="M3 17c0-7 5-12 14-12 0 9-5 14-12 14a2 2 0 0 1-2-2ZM3 17l8-8"/>,
  stethoscope: (p) => <Icon {...p} d="M5 3v5a3 3 0 0 0 6 0V3M8 11v3a3 3 0 0 0 3 3 3 3 0 0 0 3-3v-2M14 9.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/>,
  baby: (p) => <Icon {...p} d="M10 4.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM4.5 12a5.5 5.5 0 0 1 11 0M7.5 7.5h.01M12.5 7.5h.01M8.5 11.5c.5.5 1 .5 1.5.5s1 0 1.5-.5"/>,
  female: (p) => <Icon {...p} d="M10 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM10 11v6M7 15h6"/>,
  upload: (p) => <Icon {...p} d="M10 14V4M5 9l5-5 5 5M3 16h14"/>,
  card: (p) => <Icon {...p} d="M2.5 6a1.5 1.5 0 0 1 1.5-1.5h12a1.5 1.5 0 0 1 1.5 1.5v8a1.5 1.5 0 0 1-1.5 1.5h-12a1.5 1.5 0 0 1-1.5-1.5V6Zm0 3h15M5 13h3"/>,
  lock: (p) => <Icon {...p} d="M5.5 9V7a4.5 4.5 0 0 1 9 0v2M4.5 9h11a1 1 0 0 1 1 1v6.5a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1Z"/>,
  download: (p) => <Icon {...p} d="M10 4v10M5 9l5 5 5-5M3 17h14"/>,
  settings: (p) => <Icon {...p} d="M10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM10 2v2M10 16v2M2 10h2M16 10h2M4.5 4.5l1.5 1.5M14 14l1.5 1.5M4.5 15.5l1.5-1.5M14 6l1.5-1.5"/>,
  refresh: (p) => <Icon {...p} d="M3 10a7 7 0 0 1 12-5l2 2M17 4v3h-3M17 10a7 7 0 0 1-12 5l-2-2M3 16v-3h3"/>,
  globe: (p) => <Icon {...p} d="M10 17.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15Zm0 0c-2 0-4-3-4-7.5S8 2.5 10 2.5s4 3 4 7.5-2 7.5-4 7.5ZM2.5 10h15"/>,
  rupee: (p) => <Icon {...p} d="M5 4h10M5 8h10M5 4c4 0 5 4 0 4M5 8l7 8"/>,
  power: (p) => <Icon {...p} d="M10 3v7M6 5.5a6 6 0 1 0 8 0"/>,
};

const MOLARA_TAGLINE = 'Dentistry, elevated.';

const BrandMark = ({ size = 32, light = false, style }) => (
  <span
    aria-hidden="true"
    style={{
      width: size,
      height: size,
      flex: `0 0 ${size}px`,
      borderRadius: Math.max(7, Math.round(size * 0.24)),
      display: 'inline-block',
      overflow: 'hidden',
      backgroundColor: '#fff',
      backgroundImage: 'url(images.jpg)',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '236% auto',
      backgroundPosition: '50% 8%',
      border: light ? '1px solid rgba(255,255,255,.42)' : '1px solid rgba(20,42,68,.08)',
      boxShadow: light
        ? '0 0 26px rgba(95,211,255,.22)'
        : '0 1px 2px rgba(14,20,40,.06)',
      ...style,
    }}
  />
);

const Logo = ({ size = 22, tagline = false, variant = 'light', mark = true, style }) => {
  const dark = variant === 'dark';
  const markSize = Math.max(26, Math.round(size * 1.28));
  return (
    <div style={{
      display: 'inline-flex',
      alignItems: tagline ? 'flex-start' : 'center',
      gap: tagline ? 12 : 8,
      fontFamily: 'var(--display)',
      color: dark ? '#f4fdff' : 'var(--ink)',
      ...style,
    }}>
      {mark && <BrandMark size={tagline ? Math.round(size * 1.18) : markSize} light={dark}/>}
      <span style={{ display: 'grid', gap: tagline ? 7 : 0, lineHeight: 1 }}>
        <span style={{
          fontSize: size,
          fontWeight: 700,
          letterSpacing: 0,
          textTransform: 'lowercase',
        }}>molara</span>
        {tagline && (
          <span style={{
            fontFamily: 'var(--mono)',
            fontSize: Math.max(10, Math.round(size * 0.17)),
            letterSpacing: '0.16em',
            textTransform: 'uppercase',
            color: dark ? 'rgba(234,252,255,.68)' : 'var(--ink-3)',
            whiteSpace: 'nowrap',
          }}>{MOLARA_TAGLINE}</span>
        )}
      </span>
    </div>
  );
};

Object.assign(window, { I, Icon, BrandMark, Logo, MOLARA_TAGLINE });