// Icon system — minimal, geometric, technical (Linear/Vercel/Raycast vibe)
// All icons are stroke-based, 1.5 width, rounded line caps.

const Icon = ({ children, size = 18, className = '', style = {} }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.5"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    style={style}
    aria-hidden="true"
  >
    {children}
  </svg>
);

const IconArrowRight = (p) => <Icon {...p}><path d="M5 12h14M13 6l6 6-6 6" /></Icon>;
const IconArrowUpRight = (p) => <Icon {...p}><path d="M7 17L17 7M8 7h9v9" /></Icon>;
const IconCheck = (p) => <Icon {...p}><path d="M4 12l5 5L20 6" /></Icon>;
const IconChevron = (p) => <Icon {...p}><path d="M9 6l6 6-6 6" /></Icon>;
const IconClose = (p) => <Icon {...p}><path d="M6 6l12 12M18 6L6 18" /></Icon>;
const IconMenu = (p) => <Icon {...p}><path d="M4 7h16M4 12h16M4 17h16" /></Icon>;

// Service icons — abstract, geometric
const IconWeb = (p) => (
  <Icon {...p}>
    <rect x="3" y="4" width="18" height="14" rx="2" />
    <path d="M3 9h18M7 14h4" />
  </Icon>
);
const IconAI = (p) => (
  <Icon {...p}>
    <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" />
    <circle cx="12" cy="12" r="3.5" />
  </Icon>
);
const IconCode = (p) => (
  <Icon {...p}>
    <path d="M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16" />
  </Icon>
);
const IconSystems = (p) => (
  <Icon {...p}>
    <rect x="3" y="3" width="7" height="7" rx="1.5" />
    <rect x="14" y="3" width="7" height="7" rx="1.5" />
    <rect x="3" y="14" width="7" height="7" rx="1.5" />
    <rect x="14" y="14" width="7" height="7" rx="1.5" />
    <path d="M10 6.5h4M10 17.5h4M6.5 10v4M17.5 10v4" />
  </Icon>
);

// Process icons
const IconCompass = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="9" />
    <path d="M15.5 8.5l-2 5-5 2 2-5z" />
  </Icon>
);
const IconBlueprint = (p) => (
  <Icon {...p}>
    <path d="M4 4h12l4 4v12H4z" />
    <path d="M4 10h16M10 4v16M16 4v4h4" />
  </Icon>
);
const IconBuild = (p) => (
  <Icon {...p}>
    <path d="M12 2l9 5v10l-9 5-9-5V7z" />
    <path d="M3 7l9 5 9-5M12 12v10" />
  </Icon>
);
const IconLaunch = (p) => (
  <Icon {...p}>
    <path d="M5 19l4-1 9-9-3-3-9 9-1 4z" />
    <path d="M14 6l3 3M5 19h14" />
  </Icon>
);

// Misc
const IconSpark = (p) => (
  <Icon {...p}>
    <path d="M12 3v6M12 15v6M3 12h6M15 12h6" />
    <path d="M5.6 5.6l3.4 3.4M14.9 14.9l3.5 3.5M5.6 18.4l3.4-3.4M14.9 9l3.5-3.4" opacity="0.5" />
  </Icon>
);
const IconBolt = (p) => <Icon {...p}><path d="M13 2L4 14h7l-1 8 9-12h-7z" /></Icon>;
const IconShield = (p) => <Icon {...p}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z" /><path d="M9 12l2 2 4-4" /></Icon>;
const IconLayers = (p) => <Icon {...p}><path d="M12 3l9 5-9 5-9-5z" /><path d="M3 13l9 5 9-5M3 17l9 5 9-5" /></Icon>;
const IconActivity = (p) => <Icon {...p}><path d="M3 12h4l3-8 4 16 3-8h4" /></Icon>;
const IconClock = (p) => <Icon {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></Icon>;
const IconUsers = (p) => <Icon {...p}><circle cx="9" cy="8" r="3.5" /><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6" /><path d="M16 4a3.5 3.5 0 010 7M21 20c0-2.5-1.5-4.7-4-5.6" /></Icon>;
const IconNode = (p) => <Icon {...p}><circle cx="12" cy="12" r="3" /><circle cx="5" cy="5" r="2" /><circle cx="19" cy="5" r="2" /><circle cx="5" cy="19" r="2" /><circle cx="19" cy="19" r="2" /><path d="M7 6.5l3 3M14 9.5l3-3M7 17.5l3-3M14 14.5l3 3" /></Icon>;
const IconDatabase = (p) => <Icon {...p}><ellipse cx="12" cy="5" rx="8" ry="3" /><path d="M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3" /></Icon>;
const IconWorkflow = (p) => <Icon {...p}><rect x="3" y="3" width="6" height="6" rx="1" /><rect x="15" y="15" width="6" height="6" rx="1" /><rect x="15" y="3" width="6" height="6" rx="1" /><path d="M9 6h6M18 9v6M15 18H9a3 3 0 01-3-3V9" /></Icon>;
const IconMessage = (p) => <Icon {...p}><path d="M21 12a8 8 0 01-11.5 7.2L3 21l1.8-6.5A8 8 0 1121 12z" /></Icon>;
const IconCalendar = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 10h18M8 3v4M16 3v4" /></Icon>;
const IconMail = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></Icon>;
const IconLinkedin = (p) => <Icon {...p}><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 014 0v4M12 17v-7" /></Icon>;
const IconGithub = (p) => <Icon {...p}><path d="M9 19c-4 1.3-4-2-6-2.5M15 22v-3.5a3 3 0 00-.7-2.2c2.6-.3 5.4-1.3 5.4-6a4.6 4.6 0 00-1.3-3.2 4.3 4.3 0 00-.1-3.2s-1-.3-3.4 1.3a11.7 11.7 0 00-6 0c-2.4-1.6-3.4-1.3-3.4-1.3a4.3 4.3 0 00-.1 3.2 4.6 4.6 0 00-1.3 3.2c0 4.6 2.8 5.7 5.4 6a3 3 0 00-.7 2.1V22" /></Icon>;
const IconTwitter = (p) => <Icon {...p}><path d="M22 4.6c-.7.4-1.5.7-2.4.8a4 4 0 001.8-2.2c-.8.5-1.7.8-2.6 1A4.1 4.1 0 0012 8a11.7 11.7 0 01-8.5-4.3 4.1 4.1 0 001.3 5.5c-.7 0-1.3-.2-1.9-.5v.1a4.1 4.1 0 003.3 4 4.2 4.2 0 01-1.9.1A4.1 4.1 0 008 15.7 8.2 8.2 0 012 17.5a11.6 11.6 0 006.3 1.8c7.5 0 11.7-6.3 11.7-11.7v-.5c.8-.6 1.5-1.3 2-2.1z" /></Icon>;

Object.assign(window, {
  Icon,
  IconArrowRight, IconArrowUpRight, IconCheck, IconChevron, IconClose, IconMenu,
  IconWeb, IconAI, IconCode, IconSystems,
  IconCompass, IconBlueprint, IconBuild, IconLaunch,
  IconSpark, IconBolt, IconShield, IconLayers, IconActivity, IconClock, IconUsers,
  IconNode, IconDatabase, IconWorkflow, IconMessage, IconCalendar, IconMail,
  IconLinkedin, IconGithub, IconTwitter,
});