/* Lucide-style stroke icons, sized 1em */
const Icon = ({ children, size = 18, stroke = 1.6, ...rest }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={stroke}
    strokeLinecap="round"
    strokeLinejoin="round"
    {...rest}
  >
    {children}
  </svg>
);

const IconArrowRight = (p) => <Icon {...p}><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></Icon>;
const IconArrowUpRight = (p) => <Icon {...p}><path d="M7 17 17 7"/><path d="M8 7h9v9"/></Icon>;
const IconPlus = (p) => <Icon {...p}><path d="M12 5v14"/><path d="M5 12h14"/></Icon>;
const IconCheck = (p) => <Icon {...p}><path d="M20 6 9 17l-5-5"/></Icon>;
const IconChevronDown = (p) => <Icon {...p}><path d="m6 9 6 6 6-6"/></Icon>;
const IconSearch = (p) => <Icon {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></Icon>;
const IconBell = (p) => <Icon {...p}><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"/></Icon>;
const IconHome = (p) => <Icon {...p}><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/></Icon>;
const IconLayers = (p) => <Icon {...p}><path d="m12 2 10 5-10 5L2 7l10-5Z"/><path d="m2 17 10 5 10-5"/><path d="m2 12 10 5 10-5"/></Icon>;
const IconCpu = (p) => <Icon {...p}><rect x="5" y="5" width="14" height="14" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 2v3"/><path d="M15 2v3"/><path d="M9 19v3"/><path d="M15 19v3"/><path d="M2 9h3"/><path d="M2 15h3"/><path d="M19 9h3"/><path d="M19 15h3"/></Icon>;
const IconChart = (p) => <Icon {...p}><path d="M3 3v18h18"/><path d="m7 14 4-4 3 3 6-7"/></Icon>;
const IconGrid = (p) => <Icon {...p}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></Icon>;
const IconShield = (p) => <Icon {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/></Icon>;
const IconBolt = (p) => <Icon {...p}><path d="m13 2-9 12h7l-1 8 9-12h-7l1-8Z"/></Icon>;
const IconNetwork = (p) => <Icon {...p}><circle cx="12" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="19" r="2"/><path d="m7 18 4-11M17 18l-4-11"/></Icon>;
const IconBox = (p) => <Icon {...p}><path d="m21 8-9-5-9 5v8l9 5 9-5V8Z"/><path d="m3 8 9 5 9-5"/><path d="M12 13v9"/></Icon>;
const IconCloud = (p) => <Icon {...p}><path d="M7 18a4 4 0 0 1-.9-7.9 5 5 0 0 1 9.8-1A4.5 4.5 0 0 1 17 18H7Z"/></Icon>;
const IconDatabase = (p) => <Icon {...p}><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5"/><path d="M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></Icon>;
const IconSparkle = (p) => <Icon {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6"/></Icon>;
const IconSettings = (p) => <Icon {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></Icon>;
const IconUsers = (p) => <Icon {...p}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9"/><path d="M16 3.1a4 4 0 0 1 0 7.8"/></Icon>;
const IconCode = (p) => <Icon {...p}><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/></Icon>;
const IconBrain = (p) => <Icon {...p}><path d="M12 5a3 3 0 1 0-5.9-.7A3 3 0 0 0 3 7a3 3 0 0 0 1.5 2.6A3 3 0 0 0 3 12a3 3 0 0 0 3 3 3 3 0 0 0 3 3 3 3 0 0 0 3 3V5Z"/><path d="M12 5a3 3 0 1 1 5.9-.7A3 3 0 0 1 21 7a3 3 0 0 1-1.5 2.6A3 3 0 0 1 21 12a3 3 0 0 1-3 3 3 3 0 0 1-3 3 3 3 0 0 1-3 3V5Z"/></Icon>;
const IconChip = (p) => <Icon {...p}><rect x="6" y="6" width="12" height="12" rx="1.5"/><path d="M9 9h6v6H9z"/><path d="M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2"/></Icon>;
const IconFlask = (p) => <Icon {...p}><path d="M9 3h6M10 3v6L4 19a2 2 0 0 0 1.7 3h12.6A2 2 0 0 0 20 19l-6-10V3"/></Icon>;
const IconRocket = (p) => <Icon {...p}><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.8-.9.7-2.3-.1-3.1a2.2 2.2 0 0 0-2.9.1Z"/><path d="M12 15 9 12c.5-1.7 1.5-3.4 3-5a13 13 0 0 1 9-3c0 3-1 5.6-3 9-1.6 1.6-3.3 2.5-5 3Z"/><path d="M9 12H4l3.2-4c.5-.6 1.2-1 2-1h3.3"/><path d="M12 15v5l4-3.2c.6-.5 1-1.2 1-2v-3.3"/></Icon>;
const IconPlay = (p) => <Icon {...p}><polygon points="6 4 20 12 6 20 6 4"/></Icon>;
const IconMore = (p) => <Icon {...p}><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></Icon>;
const IconClose = (p) => <Icon {...p}><path d="M18 6 6 18"/><path d="m6 6 12 12"/></Icon>;
const IconMenu = (p) => <Icon {...p}><path d="M4 7h16M4 12h16M4 17h16"/></Icon>;
const IconExternal = (p) => <Icon {...p}><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></Icon>;

/* Social icons */
const IconX = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231L18.244 2.25Zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644Z"/></svg>
);
const IconLinkedIn = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.881 3.87 6 2.5 6S0 4.881 0 3.5 1.119 1 2.5 1s2.48 1.119 2.48 2.5zM.22 8h4.56v14H.22V8zm7.65 0h4.37v1.92h.06c.61-1.15 2.1-2.36 4.32-2.36 4.62 0 5.48 3.04 5.48 7v8.44h-4.56v-7.49c0-1.79-.03-4.09-2.49-4.09-2.49 0-2.87 1.95-2.87 3.96V22H7.87V8z"/></svg>
);
const IconGitHub = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.55v-2.1c-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.27-1.68-1.27-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.75 1.18 1.75 1.18 1.02 1.75 2.69 1.25 3.35.95.1-.74.4-1.25.72-1.53-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.04 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.8 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.58.24 2.75.12 3.04.73.81 1.18 1.84 1.18 3.1 0 4.43-2.7 5.4-5.27 5.69.41.36.78 1.05.78 2.12v3.15c0 .3.21.66.8.55A11.5 11.5 0 0 0 12 .5Z"/></svg>
);
const IconYouTube = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.12C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.58A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.12C4.5 20.5 12 20.5 12 20.5s7.5 0 9.4-.58a3 3 0 0 0 2.1-2.12C24 15.9 24 12 24 12s0-3.9-.5-5.8ZM9.6 15.6V8.4l6.3 3.6-6.3 3.6Z"/></svg>
);

/* Booster Block brand mark — isometric blockchain cube with .X accent */
const Brandmark = ({ size = 28 }) => {
  // Unique id per instance so multiple marks on the page don't share gradients
  const uid = React.useId();
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
      <defs>
        <linearGradient id={`bb-top-${uid}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#a5f3fc"/>
          <stop offset="1" stopColor="#22d3ee"/>
        </linearGradient>
        <linearGradient id={`bb-left-${uid}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#0e7a73"/>
          <stop offset="1" stopColor="#062a2a"/>
        </linearGradient>
        <linearGradient id={`bb-right-${uid}`} x1="1" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#1aa4a0"/>
          <stop offset="1" stopColor="#083936"/>
        </linearGradient>
        <linearGradient id={`bb-edge-${uid}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#a5f3fc" stopOpacity="0.9"/>
          <stop offset="1" stopColor="#22d3ee" stopOpacity="0.5"/>
        </linearGradient>
      </defs>

      {/* Isometric cube faces */}
      {/* Top face */}
      <path d="M20 4 L33 11 L20 18 L7 11 Z" fill={`url(#bb-top-${uid})`} opacity="0.95"/>
      {/* Left face */}
      <path d="M7 11 L20 18 L20 34 L7 27 Z" fill={`url(#bb-left-${uid})`}/>
      {/* Right face */}
      <path d="M33 11 L20 18 L20 34 L33 27 Z" fill={`url(#bb-right-${uid})`}/>

      {/* Cube edge highlights */}
      <path d="M20 4 L33 11 L20 18 L7 11 Z" stroke={`url(#bb-edge-${uid})`} strokeWidth="0.6" fill="none" opacity="0.9"/>
      <path d="M7 11 L20 18 L20 34" stroke="#5eead4" strokeWidth="0.6" fill="none" opacity="0.7"/>
      <path d="M33 11 L20 18" stroke="#5eead4" strokeWidth="0.6" fill="none" opacity="0.5"/>

      {/* Inner X mark, centered on top face */}
      <g transform="translate(20 11)">
        <path d="M-3.2 -1.6 L3.2 1.6 M3.2 -1.6 L-3.2 1.6"
          stroke="#04141a" strokeWidth="1.6" strokeLinecap="round" opacity="0.9"/>
        <path d="M-3.2 -1.6 L3.2 1.6 M3.2 -1.6 L-3.2 1.6"
          stroke="#e8fdff" strokeWidth="0.9" strokeLinecap="round"/>
      </g>

      {/* +.X accent node (top-right satellite) */}
      <g transform="translate(34 6)">
        <circle r="3.2" fill="#04141a" stroke="#22d3ee" strokeWidth="0.9"/>
        <path d="M-1.4 0 L1.4 0 M0 -1.4 L0 1.4" stroke="#22d3ee" strokeWidth="0.9" strokeLinecap="round"/>
        <circle r="3.2" fill="none" stroke="#22d3ee" strokeWidth="0.5" opacity="0.4" transform="scale(1.6)"/>
      </g>
    </svg>
  );
};

Object.assign(window, {
  Icon, IconArrowRight, IconArrowUpRight, IconPlus, IconCheck, IconChevronDown,
  IconSearch, IconBell, IconHome, IconLayers, IconCpu, IconChart, IconGrid,
  IconShield, IconBolt, IconNetwork, IconBox, IconCloud, IconDatabase,
  IconSparkle, IconSettings, IconUsers, IconCode, IconBrain, IconChip,
  IconFlask, IconRocket, IconPlay, IconMore, IconClose, IconMenu, IconExternal,
  IconX, IconLinkedIn, IconGitHub, IconYouTube, Brandmark
});
