/* Inline SVG icons */

const Sparkles = (p) => (
  <svg width={p.size || 16} height={p.size || 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3z" />
    <path d="M19 14l.8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8L19 14z" />
    <path d="M5 14l.6 1.7L7 16l-1.4.4L5 18l-.6-1.6L3 16l1.4-.3L5 14z" />
  </svg>
);

const ArrowRight = (p) => (
  <svg width={p.size || 16} height={p.size || 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <path d="M5 12h14M13 6l6 6-6 6" />
  </svg>
);

const Check = (p) => (
  <svg width={p.size || 16} height={p.size || 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <path d="M4 12.5l5 5 11-11" />
  </svg>
);

const Download = (p) => (
  <svg width={p.size || 16} height={p.size || 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <path d="M21 15v3a3 3 0 01-3 3H6a3 3 0 01-3-3v-3M7 10l5 5 5-5M12 15V3" />
  </svg>
);

const CopyIcon = (p) => (
  <svg width={p.size || 16} height={p.size || 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <rect x="9" y="9" width="11" height="11" rx="2" />
    <path d="M5 15V5a2 2 0 012-2h10" />
  </svg>
);

const Refresh = (p) => (
  <svg width={p.size || 16} height={p.size || 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <path d="M21 12a9 9 0 11-3-6.7L21 8" />
    <path d="M21 3v5h-5" />
  </svg>
);

const Close = (p) => (
  <svg width={p.size || 14} height={p.size || 14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <path d="M6 6l12 12M18 6l-12 12" />
  </svg>
);

const ImageIcon = (p) => (
  <svg width={p.size || 24} height={p.size || 24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <rect x="3" y="3" width="18" height="18" rx="3" />
    <circle cx="9" cy="9" r="2" />
    <path d="M21 15l-4-4-8 8" />
  </svg>
);

const Lightning = (p) => (
  <svg width={p.size || 16} height={p.size || 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <path d="M13 2L3 14h8l-1 8 10-12h-8l1-8z" />
  </svg>
);

const Shield = (p) => (
  <svg width={p.size || 16} height={p.size || 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <path d="M12 2l8 4v6c0 5-3.5 9.5-8 10-4.5-.5-8-5-8-10V6l8-4z" />
  </svg>
);

const Type = (p) => (
  <svg width={p.size || 16} height={p.size || 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <path d="M4 6V4h16v2M9 20h6M12 4v16" />
  </svg>
);

const Layout = (p) => (
  <svg width={p.size || 16} height={p.size || 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <rect x="3" y="3" width="18" height="18" rx="2" />
    <path d="M3 9h18M9 21V9" />
  </svg>
);

const Wand = (p) => (
  <svg width={p.size || 16} height={p.size || 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <path d="M15 4V2M15 16v-2M8 9h2M20 9h2M17.8 11.8l1.4 1.4M17.8 6.2l1.4-1.4" />
    <path d="M14 7l-9 9-3 5 5-3 9-9-2-2z" />
  </svg>
);

const Globe = (p) => (
  <svg width={p.size || 16} height={p.size || 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <circle cx="12" cy="12" r="9" />
    <path d="M3 12h18M12 3a13 13 0 010 18M12 3a13 13 0 000 18" />
  </svg>
);

const Upload = (p) => (
  <svg width={p.size || 24} height={p.size || 24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}>
    <path d="M21 15v3a3 3 0 01-3 3H6a3 3 0 01-3-3v-3M17 8l-5-5-5 5M12 3v12" />
  </svg>
);

/* Platform brand-tinted square icons (simplified marks) */
const PlatformIcon = ({ id, size = 16 }) => {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor" };
  switch (id) {
    case "instagram":
      return (
        <svg {...common}>
          <path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.06 1.95.24 2.4.4.6.24 1.04.52 1.5.97s.74.9.97 1.5c.16.46.34 1.24.4 2.4.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.06 1.16-.24 1.94-.4 2.4-.23.6-.52 1.04-.97 1.5s-.9.74-1.5.97c-.45.16-1.23.34-2.4.4-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.06-1.95-.24-2.4-.4a4 4 0 01-1.5-.97 4 4 0 01-.97-1.5c-.16-.46-.34-1.24-.4-2.4C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.06-1.16.24-1.94.4-2.4.23-.6.52-1.04.97-1.5s.9-.74 1.5-.97c.45-.16 1.23-.34 2.4-.4C8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.34 4.14.63a6 6 0 00-2.18 1.42A6 6 0 00.55 4.23C.26 4.99.05 5.87 0 7.14-.06 8.42-.07 8.83-.07 12.09c0 3.27.01 3.68.07 4.96.06 1.27.27 2.15.56 2.92.3.79.7 1.46 1.42 2.18a6 6 0 002.18 1.42c.77.3 1.65.5 2.92.56 1.28.06 1.69.07 4.96.07s3.68-.01 4.96-.07c1.27-.06 2.15-.27 2.92-.56a6 6 0 002.18-1.42 6 6 0 001.42-2.18c.3-.77.5-1.65.56-2.92.06-1.28.07-1.69.07-4.96 0-3.26-.01-3.67-.07-4.95-.06-1.27-.27-2.15-.56-2.92a6 6 0 00-1.42-2.18A6 6 0 0019.79.63c-.77-.29-1.65-.5-2.92-.56C15.59.01 15.18 0 12 0zm0 5.84a6.16 6.16 0 100 12.32 6.16 6.16 0 000-12.32zm0 10.16a4 4 0 110-8 4 4 0 010 8zm6.4-10.4a1.44 1.44 0 100-2.88 1.44 1.44 0 000 2.88z" />
        </svg>
      );
    case "x":
      return (
        <svg {...common}>
          <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.231zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z" />
        </svg>
      );
    case "facebook":
      return (
        <svg {...common}>
          <path d="M24 12.07C24 5.41 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.52c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z" />
        </svg>
      );
    case "line":
      return (
        <svg {...common}>
          <path d="M24 10.3c0-5.4-5.4-9.8-12-9.8S0 4.9 0 10.3c0 4.8 4.3 8.9 10 9.6.4.1.9.3 1.1.6.1.3.1.7.1 1l-.2 1.1c0 .3-.3 1.3 1.1.7s7.5-4.4 10.2-7.5c1.9-2.1 2.7-4.2 2.7-5.5zM7.7 13.4H5.4c-.3 0-.6-.3-.6-.6V8.2c0-.3.3-.6.6-.6.4 0 .6.3.6.6v3.9h1.6c.4 0 .6.3.6.6 0 .4-.2.7-.5.7zm2.4-.6c0 .3-.3.6-.6.6-.4 0-.6-.3-.6-.6V8.2c0-.3.3-.6.6-.6.4 0 .6.3.6.6v4.6zm5.7 0c0 .3-.2.6-.5.6-.1 0-.3 0-.4-.1l-2.4-3.2v2.7c0 .3-.3.6-.6.6-.4 0-.6-.3-.6-.6V8.2c0-.3.2-.5.5-.6h.4l2.4 3.2V8.2c0-.3.3-.6.6-.6.4 0 .6.3.6.6v4.6zm3.9-2.9c.4 0 .6.3.6.6 0 .4-.3.6-.6.6h-1.6V12h1.6c.4 0 .6.3.6.6 0 .4-.3.6-.6.6h-2.2c-.3 0-.6-.3-.6-.6V8.2c0-.3.3-.6.6-.6h2.2c.4 0 .6.3.6.6 0 .4-.3.6-.6.6h-1.6v1h1.6z" />
        </svg>
      );
    case "tiktok":
      return (
        <svg {...common}>
          <path d="M19.6 6.32a5.96 5.96 0 01-3.47-1.11 5.96 5.96 0 01-2.44-3.96L13.65.5h-3.3v13.42a3.34 3.34 0 11-2.27-3.16V7.32a6.86 6.86 0 00-1.07-.08A6.7 6.7 0 0010 20.7a6.74 6.74 0 006.79-6.74V7.42a9.13 9.13 0 005.32 1.69V5.83c-.9 0-1.78-.27-2.51-.51z" />
        </svg>
      );
    case "youtube":
      return (
        <svg {...common}>
          <path d="M23.5 6.2a3 3 0 00-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 00.5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 002.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 002.1-2.1c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.6V8.4l6.3 3.6-6.3 3.6z" />
        </svg>
      );
    case "google":
      return (
        <svg {...common}>
          <path d="M22.5 12.27c0-.79-.07-1.55-.2-2.27H12v4.5h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.31z" fill="#4285f4" />
          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.67-2.26 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0012 23z" fill="#34a853" />
          <path d="M5.84 14.1A6.6 6.6 0 015.5 12c0-.73.13-1.44.34-2.1V7.06H2.18A11 11 0 001 12c0 1.78.43 3.46 1.18 4.94l3.66-2.84z" fill="#fbbc04" />
          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z" fill="#ea4335" />
        </svg>
      );
    default:
      return <svg {...common} />;
  }
};

/* Solid-fill platform tile colors */
const PLATFORM_COLORS = {
  instagram: "linear-gradient(135deg, #f9ce34, #ee2a7b 50%, #6228d7)",
  x: "linear-gradient(135deg, #000, #1a1a1a)",
  facebook: "linear-gradient(135deg, #1877f2, #0c63d4)",
  line: "linear-gradient(135deg, #06c755, #04a045)",
  tiktok: "linear-gradient(135deg, #ff0050, #00f2ea)",
  youtube: "linear-gradient(135deg, #ff0000, #c30000)",
  google: "linear-gradient(135deg, #4285f4, #34a853)",
};

Object.assign(window, {
  Sparkles, ArrowRight, Check, Download, CopyIcon, Refresh, Close,
  ImageIcon, Lightning, Shield, Type, Layout, Wand, Globe, Upload,
  PlatformIcon, PLATFORM_COLORS,
});
