// Lucide-style icons, inline SVG. 2px stroke, currentColor.
const Icon = ({ path, size = 20, stroke = 2, fill = "none", children, ...rest }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill={fill}
    stroke="currentColor"
    strokeWidth={stroke}
    strokeLinecap="round"
    strokeLinejoin="round"
    {...rest}
  >
    {children}
  </svg>
);

const IconArrowRight = (p) => (
  <Icon {...p}>
    <path d="M5 12h14" />
    <path d="m12 5 7 7-7 7" />
  </Icon>
);

const IconArrowUpRight = (p) => (
  <Icon {...p}>
    <path d="M7 17 17 7" />
    <path d="M7 7h10v10" />
  </Icon>
);

const IconMail = (p) => (
  <Icon {...p}>
    <rect width="20" height="16" x="2" y="4" rx="2" />
    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
  </Icon>
);

const IconGlobe = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="10" />
    <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
    <path d="M2 12h20" />
  </Icon>
);

const IconYoutube = (p) => (
  <Icon {...p}>
    <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
    <path d="m10 15 5-3-5-3z" fill="currentColor" />
  </Icon>
);

const IconInstagram = (p) => (
  <Icon {...p}>
    <rect width="20" height="20" x="2" y="2" rx="5" ry="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" x2="17.51" y1="6.5" y2="6.5" />
  </Icon>
);

const IconLinkedin = (p) => (
  <Icon {...p}>
    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z" />
    <rect width="4" height="12" x="2" y="9" />
    <circle cx="4" cy="4" r="2" />
  </Icon>
);

const IconThreads = (p) => (
  // simple at-ish glyph for Threads
  <Icon {...p}>
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c2.76 0 5.26-1.12 7.07-2.93" />
    <path d="M8 14c.5 2 2.2 3 4 3 2.5 0 4-1.5 4-3.5 0-2-1.5-3-3.5-3.5-2-.5-3.5-1-3.5-3 0-1.8 1.5-3 3.5-3 1.8 0 3 1 3.5 2.5" />
  </Icon>
);

const IconBriefcase = (p) => (
  <Icon {...p}>
    <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
    <rect width="20" height="14" x="2" y="6" rx="2" />
  </Icon>
);

const IconHammer = (p) => (
  <Icon {...p}>
    <path d="m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9" />
    <path d="m18 15 4-4" />
    <path d="m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5" />
  </Icon>
);

const IconSparkles = (p) => (
  <Icon {...p}>
    <path d="M9.94 14.33 8 20l-1.94-5.67L1 12l5.06-1.94L8 4l1.94 6.06L15 12z" />
    <path d="M18 5 17 2l-1 3-3 1 3 1 1 3 1-3 3-1z" />
    <path d="M19 15l-.5-1.5L17 13l1.5-.5L19 11l.5 1.5 1.5.5-1.5.5z" />
  </Icon>
);

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

const IconAward = (p) => (
  <Icon {...p}>
    <path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" />
    <circle cx="12" cy="8" r="6" />
  </Icon>
);

const IconPresentation = (p) => (
  <Icon {...p}>
    <path d="M2 3h20" />
    <path d="M21 3v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3" />
    <path d="m7 21 5-5 5 5" />
    <path d="M12 15v6" />
  </Icon>
);

const IconPlay = (p) => (
  <Icon {...p}>
    <polygon points="6 3 20 12 6 21 6 3" fill="currentColor" stroke="none"/>
  </Icon>
);

const IconCompass = (p) => (
  <Icon {...p}>
    <path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" />
    <circle cx="12" cy="12" r="10" />
  </Icon>
);

const IconBox = (p) => (
  <Icon {...p}>
    <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
    <path d="m3.3 7 8.7 5 8.7-5" />
    <path d="M12 22V12" />
  </Icon>
);

const IconFileText = (p) => (
  <Icon {...p}>
    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z" />
    <polyline points="14 2 14 8 20 8" />
    <line x1="16" x2="8" y1="13" y2="13" />
    <line x1="16" x2="8" y1="17" y2="17" />
    <line x1="10" x2="8" y1="9" y2="9" />
  </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.87" />
    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
  </Icon>
);

const IconBadgeCheck = (p) => (
  <Icon {...p}>
    <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" />
    <path d="m9 12 2 2 4-4" />
  </Icon>
);

const IconSettings = (p) => (
  <Icon {...p}>
    <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2" />
    <circle cx="12" cy="12" r="3" />
  </Icon>
);

// Domain-preview thumbnail — 72x56 tile with brand hue + slug
const SiteThumb = ({ label, slug, bg = "#1F2A44", fg = "#FFFFFF", accent }) => (
  <svg viewBox="0 0 120 94" xmlns="http://www.w3.org/2000/svg" role="img" aria-label={label}>
    <rect width="120" height="94" fill={bg} />
    {/* top chrome bar */}
    <rect x="0" y="0" width="120" height="14" fill="rgba(255,255,255,0.08)" />
    <circle cx="7" cy="7" r="2" fill="rgba(255,255,255,0.35)" />
    <circle cx="14" cy="7" r="2" fill="rgba(255,255,255,0.25)" />
    <circle cx="21" cy="7" r="2" fill="rgba(255,255,255,0.18)" />
    {/* accent block */}
    {accent ? <rect x="10" y="24" width="28" height="28" rx="4" fill={accent} opacity="0.9" /> : null}
    {/* content lines */}
    <rect x={accent ? 44 : 10} y="28" width="60" height="4" rx="1.5" fill={fg} opacity="0.9" />
    <rect x={accent ? 44 : 10} y="36" width="40" height="3" rx="1.2" fill={fg} opacity="0.55" />
    <rect x={accent ? 44 : 10} y="42" width="52" height="3" rx="1.2" fill={fg} opacity="0.35" />
    <rect x="10" y="62" width="100" height="22" rx="3" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.14)" strokeWidth="0.5" />
    <text x="60" y="77" textAnchor="middle" fontFamily="ui-monospace, SF Mono, Menlo, monospace" fontSize="7.5" fill={fg} opacity="0.75" letterSpacing="0.5">{slug}</text>
  </svg>
);

// YouTube channel thumb placeholder
const YoutubeThumb = () => (
  <svg viewBox="0 0 120 94" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="YouTube channel preview">
    <rect width="120" height="94" fill="#0F0F0F" />
    <rect x="0" y="0" width="120" height="68" fill="#1A1A1A" />
    {/* play button */}
    <circle cx="60" cy="34" r="14" fill="#FF0033" />
    <polygon points="56,27 56,41 68,34" fill="#fff" />
    {/* title lines */}
    <rect x="8" y="74" width="78" height="4" rx="1.5" fill="#fff" opacity="0.9" />
    <rect x="8" y="82" width="50" height="3" rx="1.2" fill="#fff" opacity="0.5" />
  </svg>
);

// Official site thumb (itconnect.dev)
const OfficialSiteThumb = () => (
  <svg viewBox="0 0 120 94" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="itconnect.dev preview">
    <rect width="120" height="94" fill="#F2EDE4" />
    <rect x="0" y="0" width="120" height="12" fill="#1F2A44" />
    <rect x="4" y="4" width="16" height="4" rx="1" fill="#FFE066" />
    <text x="60" y="38" textAnchor="middle" fontFamily="Georgia, serif" fontSize="13" fill="#1F2A44" fontWeight="700">ITCONNECT</text>
    <rect x="24" y="46" width="72" height="3" rx="1" fill="#1F2A44" opacity="0.4" />
    <rect x="36" y="54" width="48" height="3" rx="1" fill="#1F2A44" opacity="0.25" />
    <rect x="44" y="68" width="32" height="14" rx="3" fill="#3E5E92" />
  </svg>
);

Object.assign(window, {
  Icon, IconArrowRight, IconArrowUpRight, IconMail, IconGlobe,
  IconYoutube, IconInstagram, IconLinkedin, IconThreads,
  IconBriefcase, IconHammer, IconSparkles, IconBook, IconAward,
  IconPresentation, IconPlay, IconCompass, IconBox, IconFileText,
  IconUsers, IconBadgeCheck, IconSettings,
  SiteThumb, YoutubeThumb, OfficialSiteThumb,
});
