// Lucide-style line icons + integration logos for Trevoga.
// All inline SVG, stroke-based. ~24×24 by default.

const Icon = ({ d, size = 20, strokeWidth = 1.6, ...rest }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={strokeWidth}
    strokeLinecap="round"
    strokeLinejoin="round"
    className="icon"
    {...rest}
  >
    {d}
  </svg>
);

const IconBell = (p) => <Icon {...p} d={<>
  <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
  <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
</>} />;

const IconBellRing = (p) => <Icon {...p} d={<>
  <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
  <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
  <path d="M4 2C2.8 3.7 2 5.7 2 8" />
  <path d="M22 8c0-2.3-.8-4.3-2-6" />
</>} />;

const IconAlert = (p) => <Icon {...p} d={<>
  <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
  <line x1="12" y1="9" x2="12" y2="13" />
  <line x1="12" y1="17" x2="12.01" y2="17" />
</>} />;

const IconPhone = (p) => <Icon {...p} d={<>
  <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" />
</>} />;

const IconMessageSquare = (p) => <Icon {...p} d={<>
  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
</>} />;

const IconMail = (p) => <Icon {...p} d={<>
  <rect x="2" y="4" width="20" height="16" rx="2" />
  <path d="m22 7-10 6L2 7" />
</>} />;

const IconCalendar = (p) => <Icon {...p} d={<>
  <rect x="3" y="4" width="18" height="18" rx="2" />
  <line x1="16" y1="2" x2="16" y2="6" />
  <line x1="8" y1="2" x2="8" y2="6" />
  <line x1="3" y1="10" x2="21" y2="10" />
</>} />;

const IconUsers = (p) => <Icon {...p} d={<>
  <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
  <circle cx="8.5" cy="7" r="4" />
  <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
  <path d="M16 3.13a4 4 0 0 1 0 7.75" />
</>} />;

const IconRotate = (p) => <Icon {...p} d={<>
  <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
  <path d="M21 3v5h-5" />
  <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
  <path d="M3 21v-5h5" />
</>} />;

const IconArrowUp = (p) => <Icon {...p} d={<>
  <line x1="12" y1="19" x2="12" y2="5" />
  <polyline points="5 12 12 5 19 12" />
</>} />;

const IconChevronRight = (p) => <Icon {...p} d={<>
  <polyline points="9 18 15 12 9 6" />
</>} />;

const IconArrowRight = (p) => <Icon {...p} d={<>
  <line x1="5" y1="12" x2="19" y2="12" />
  <polyline points="12 5 19 12 12 19" />
</>} />;

const IconWatch = (p) => <Icon {...p} d={<>
  <circle cx="12" cy="12" r="6" />
  <polyline points="12 10 12 12 13 13" />
  <path d="m16.13 7.66-.81-4.05a2 2 0 0 0-2-1.61h-2.68a2 2 0 0 0-2 1.61l-.78 4.05" />
  <path d="m7.88 16.36.8 4.05a2 2 0 0 0 2 1.61h2.72a2 2 0 0 0 2-1.61l.81-4.05" />
</>} />;

const IconVolumeX = (p) => <Icon {...p} d={<>
  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
  <line x1="22" y1="9" x2="16" y2="15" />
  <line x1="16" y1="9" x2="22" y2="15" />
</>} />;

const IconActivity = (p) => <Icon {...p} d={<>
  <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
</>} />;

const IconWebhook = (p) => <Icon {...p} d={<>
  <path d="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2" />
  <path d="m6 17 3.13-5.78c.53-.97.43-2.22-.26-3.07A4 4 0 0 1 17 6c.94.5 1.69 1.3 2.13 2.27" />
  <path d="m14 3.5 1.16 2.09c.66 1.13.69 2.5.07 3.66l-2.04 4c-.59 1.13-1.99 1.83-3.27 1.46-1.21-.34-2.16-1.27-2.46-2.45-.31-1.18-.16-2.43.42-3.5L9 6" />
</>} />;

const IconShield = (p) => <Icon {...p} d={<>
  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
</>} />;

const IconServer = (p) => <Icon {...p} d={<>
  <rect x="2" y="2" width="20" height="8" rx="2" />
  <rect x="2" y="14" width="20" height="8" rx="2" />
  <line x1="6" y1="6" x2="6.01" y2="6" />
  <line x1="6" y1="18" x2="6.01" y2="18" />
</>} />;

const IconGitBranch = (p) => <Icon {...p} d={<>
  <line x1="6" y1="3" x2="6" y2="15" />
  <circle cx="18" cy="6" r="3" />
  <circle cx="6" cy="18" r="3" />
  <path d="M18 9a9 9 0 0 1-9 9" />
</>} />;

const IconCheck = (p) => <Icon {...p} d={<>
  <polyline points="20 6 9 17 4 12" />
</>} />;

const IconX = (p) => <Icon {...p} d={<>
  <line x1="18" y1="6" x2="6" y2="18" />
  <line x1="6" y1="6" x2="18" y2="18" />
</>} />;

const IconMinus = (p) => <Icon {...p} d={<>
  <line x1="5" y1="12" x2="19" y2="12" />
</>} />;

const IconBook = (p) => <Icon {...p} d={<>
  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
</>} />;

const IconGithub = (p) => <Icon {...p} d={<>
  <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
</>} />;

const IconExternalLink = (p) => <Icon {...p} d={<>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
  <polyline points="15 3 21 3 21 9" />
  <line x1="10" y1="14" x2="21" y2="3" />
</>} />;

const IconTerminal = (p) => <Icon {...p} d={<>
  <polyline points="4 17 10 11 4 5" />
  <line x1="12" y1="19" x2="20" y2="19" />
</>} />;

const IconSliders = (p) => <Icon {...p} d={<>
  <line x1="4" y1="21" x2="4" y2="14" />
  <line x1="4" y1="10" x2="4" y2="3" />
  <line x1="12" y1="21" x2="12" y2="12" />
  <line x1="12" y1="8" x2="12" y2="3" />
  <line x1="20" y1="21" x2="20" y2="16" />
  <line x1="20" y1="12" x2="20" y2="3" />
  <line x1="1" y1="14" x2="7" y2="14" />
  <line x1="9" y1="8" x2="15" y2="8" />
  <line x1="17" y1="16" x2="23" y2="16" />
</>} />;

const IconBolt = (p) => <Icon {...p} d={<>
  <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
</>} />;

// Brand mark — Trevoga
// A bold red triangular alert glyph + monospace "trevoga" in nav.
const TrevogaMark = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="icon">
    <path d="M12 3 L22 20 L2 20 Z" fill="#dc3545" stroke="#dc3545" strokeWidth="1" strokeLinejoin="round" />
    <rect x="11.1" y="9" width="1.8" height="6" rx="0.9" fill="#0a0a0e" />
    <circle cx="12" cy="17.4" r="1" fill="#0a0a0e" />
  </svg>
);

// ─── Integration logos (recreated, simplified) ───────────────────────

const LogoPrometheus = () => (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M20 4c-3.5 4-3.5 8 0 12s3.5-8 0-12z" fill="#E6522C"/>
    <path d="M8 22c0-6 5-10 12-10s12 4 12 10v2H8v-2z" fill="#E6522C"/>
    <rect x="11" y="26" width="18" height="2" fill="#E6522C"/>
    <rect x="13.5" y="30" width="13" height="4" rx="1" fill="#E6522C"/>
  </svg>
);

const LogoGrafana = () => (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M20 6c-7.7 0-14 6.3-14 14 0 7.7 6.3 14 14 14 7.7 0 14-6.3 14-14h-4a10 10 0 1 1-3.5-7.6L29 9.5A14 14 0 0 0 20 6z" fill="#F46800"/>
    <circle cx="20" cy="20" r="4" fill="#F46800"/>
    <path d="M30 8 33 5l3 6-6 1z" fill="#FFB000"/>
  </svg>
);

const LogoZabbix = () => (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="6" y="6" width="28" height="28" rx="2" fill="#D40000"/>
    <path d="M11 12h18v3l-13 11h13v2H11v-3l13-11H11z" fill="#fff"/>
  </svg>
);

const LogoAlertmanager = () => (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M20 4 4 32h32L20 4z" fill="#E6522C"/>
    <rect x="18.5" y="14" width="3" height="9" rx="1.5" fill="#fff"/>
    <circle cx="20" cy="27" r="1.7" fill="#fff"/>
  </svg>
);

const LogoTelegram = () => (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="20" cy="20" r="14" fill="#26A5E4"/>
    <path d="m13 20.5 14-5.5c.6-.2 1.1.2 1 .8L26 28c-.1.6-.7.8-1.2.5l-4-3-2 2c-.3.3-.6.4-.9.1L16.5 24l-4-1c-.7-.2-.7-1.1 0-1.4l13-5-9.7 6.6L13 20.5z" fill="#fff"/>
  </svg>
);

const LogoExolve = () => (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="4" y="4" width="32" height="32" rx="3" fill="#E30611"/>
    <text x="20" y="26" textAnchor="middle" fontFamily="ui-sans-serif, system-ui, -apple-system" fontSize="11" fontWeight="700" fill="#fff" letterSpacing="0">МТС</text>
  </svg>
);

const LogoWebhook = () => (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="20" cy="20" r="14" stroke="#a8a8b3" strokeWidth="1.6" fill="none"/>
    <path d="M14 20a6 6 0 1 1 12 0" stroke="#dc3545" strokeWidth="2" fill="none" strokeLinecap="round"/>
    <circle cx="14" cy="20" r="2.4" fill="#dc3545"/>
    <circle cx="26" cy="20" r="2.4" fill="#dc3545"/>
    <circle cx="20" cy="14" r="2.4" fill="#dc3545"/>
  </svg>
);

const LogoSlack = () => (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="11" y="20" width="9" height="3" rx="1.5" fill="#36C5F0"/>
    <rect x="20" y="11" width="3" height="9" rx="1.5" fill="#2EB67D"/>
    <rect x="20" y="23" width="9" height="3" rx="1.5" fill="#ECB22E"/>
    <rect x="17" y="20" width="3" height="9" rx="1.5" fill="#E01E5A"/>
  </svg>
);

const LogoOpsgenie = () => (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M20 6 8 14l4 18 8-4 8 4 4-18z" fill="#172B4D"/>
    <path d="m20 11-7 5 2 11 5-3 5 3 2-11z" fill="#2684FF"/>
  </svg>
);

const LogoIos = () => (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M27.4 21.6c-.1-3.6 2.9-5.3 3-5.4-1.6-2.4-4.2-2.7-5.1-2.7-2.1-.2-4.2 1.3-5.3 1.3-1.1 0-2.8-1.3-4.6-1.2-2.4 0-4.6 1.4-5.8 3.5-2.5 4.3-.6 10.7 1.8 14.2 1.2 1.7 2.6 3.6 4.4 3.5 1.8-.1 2.4-1.1 4.6-1.1 2.1 0 2.7 1.1 4.6 1.1 1.9 0 3.1-1.7 4.3-3.4 1.4-2 1.9-3.9 2-4-.1 0-3.8-1.5-3.9-5.8zM23.7 11c1-1.2 1.6-2.8 1.5-4.5-1.4.1-3.1 1-4.1 2.1-.9 1-1.7 2.7-1.5 4.3 1.5.1 3.1-.8 4.1-1.9z" fill="currentColor"/>
  </svg>
);

const LogoAndroid = () => (
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M11 17h18v11a2 2 0 0 1-2 2h-2v4h-3v-4h-4v4h-3v-4h-2a2 2 0 0 1-2-2V17z" fill="#3DDC84"/>
    <rect x="6" y="17" width="3" height="9" rx="1.5" fill="#3DDC84"/>
    <rect x="31" y="17" width="3" height="9" rx="1.5" fill="#3DDC84"/>
    <path d="M11 16c0-4 4-7 9-7s9 3 9 7H11z" fill="#3DDC84"/>
    <circle cx="15" cy="13" r=".9" fill="#0a0a0e"/>
    <circle cx="25" cy="13" r=".9" fill="#0a0a0e"/>
    <line x1="14" y1="7" x2="15.5" y2="9.5" stroke="#3DDC84" strokeWidth="1.4" strokeLinecap="round"/>
    <line x1="26" y1="7" x2="24.5" y2="9.5" stroke="#3DDC84" strokeWidth="1.4" strokeLinecap="round"/>
  </svg>
);

Object.assign(window, {
  Icon, IconBell, IconBellRing, IconAlert, IconPhone, IconMessageSquare,
  IconMail, IconCalendar, IconUsers, IconRotate, IconArrowUp, IconChevronRight,
  IconArrowRight, IconWatch, IconVolumeX, IconActivity, IconWebhook,
  IconShield, IconServer, IconGitBranch, IconCheck, IconX, IconMinus,
  IconBook, IconGithub, IconExternalLink, IconTerminal, IconSliders, IconBolt,
  TrevogaMark,
  LogoPrometheus, LogoGrafana, LogoZabbix, LogoAlertmanager, LogoTelegram,
  LogoExolve, LogoWebhook, LogoSlack, LogoOpsgenie, LogoIos, LogoAndroid,
});
