/* global React */
// Inline icon components — minimal, consistent stroke style

const Icon = ({ size = 22, children, color = "currentColor", style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={style}>{children}</svg>
);

const IconMic = (p) => <Icon {...p}><rect x="9" y="2" width="6" height="11" rx="3"/><path d="M5 10v1a7 7 0 0 0 14 0v-1"/><line x1="12" y1="18" x2="12" y2="22"/></Icon>;
const IconMicSolid = ({ size = 55, color = "white" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <rect x="9" y="2" width="6" height="12" rx="3"/>
    <path fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" d="M5 11v1a7 7 0 0 0 14 0v-1M12 19v3"/>
  </svg>
);
const IconChat = (p) => <Icon {...p}><path d="M21 12a8 8 0 0 1-8 8H7l-4 3V12a8 8 0 1 1 18 0Z"/></Icon>;
const IconHome = (p) => <Icon {...p}><path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2v-9Z"/></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 IconClock = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></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.3 1.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 IconArrowRight = (p) => <Icon {...p}><path d="M5 12h14M13 5l7 7-7 7"/></Icon>;
const IconArrowLeft = (p) => <Icon {...p}><path d="M19 12H5M12 5l-7 7 7 7"/></Icon>;
const IconCheck = (p) => <Icon {...p}><path d="M5 13l4 4L19 7"/></Icon>;
const IconX = (p) => <Icon {...p}><path d="M6 6l12 12M6 18L18 6"/></Icon>;
const IconKeyboard = (p) => <Icon {...p}><rect x="2" y="6" width="20" height="13" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M6 14h.01M18 14h.01M8 14h8"/></Icon>;
const IconStop = ({ size = 22, color = "currentColor" }) => <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><rect x="6" y="6" width="12" height="12" rx="2"/></svg>;
const IconPause = ({ size = 22, color = "currentColor" }) => <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><rect x="7" y="5" width="3.5" height="14" rx="1"/><rect x="13.5" y="5" width="3.5" height="14" rx="1"/></svg>;
const IconUser = (p) => <Icon {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></Icon>;
const IconBell = (p) => <Icon {...p}><path d="M6 8a6 6 0 1 1 12 0c0 7 3 7 3 9H3c0-2 3-2 3-9Z"/><path d="M10 21a2 2 0 0 0 4 0"/></Icon>;
const IconShield = (p) => <Icon {...p}><path d="M12 22s8-4 8-11V5l-8-3-8 3v6c0 7 8 11 8 11Z"/></Icon>;
const IconLink = (p) => <Icon {...p}><path d="M10 14a5 5 0 0 0 7.07 0l3-3a5 5 0 1 0-7.07-7.07L11 6"/><path d="M14 10a5 5 0 0 0-7.07 0l-3 3a5 5 0 1 0 7.07 7.07L13 18"/></Icon>;
const IconZap = (p) => <Icon {...p}><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8Z"/></Icon>;
const IconPhone = (p) => <Icon {...p}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7 12.8 12.8 0 0 0 .7 2.8 2 2 0 0 1-.5 2.1L8 9.7a16 16 0 0 0 6 6l1.1-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/></Icon>;
const IconWaveform = (p) => <Icon {...p}><path d="M2 12h2M6 7v10M10 4v16M14 8v8M18 11v2M22 12h-2"/></Icon>;
const IconChev = (p) => <Icon {...p}><path d="M9 18l6-6-6-6"/></Icon>;
const IconPlus = (p) => <Icon {...p}><path d="M12 5v14M5 12h14"/></Icon>;
const IconStar = (p) => <Icon {...p}><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7l3-7Z"/></Icon>;

// ── Loop logo ──────────────────────────────────────────────
// Mark = a ring (the "loop") wrapping a voice waveform.
let _lmId = 0;
const LoopMark = ({ size = 40, variant = "gradient" }) => {
  const idRef = React.useRef(null);
  if (idRef.current === null) idRef.current = "lm" + (++_lmId);
  const gid = idRef.current;
  const stroke = variant === "white" ? "#ffffff" : variant === "ink" ? "#0a0a0d" : `url(#${gid})`;
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" style={{ display: "block" }}>
      <defs>
        <linearGradient id={gid} x1="8" y1="8" x2="40" y2="40" gradientUnits="userSpaceOnUse">
          <stop stopColor="#46c8e0"/><stop offset="1" stopColor="#1aa7c4"/>
        </linearGradient>
      </defs>
      {/* the loop */}
      <circle cx="24" cy="24" r="16" stroke={stroke} strokeWidth="4.4"/>
      {/* voice waveform */}
      <g stroke={stroke} strokeWidth="3.2" strokeLinecap="round">
        <path d="M17.5 20.5v7"/>
        <path d="M24 15.5v17"/>
        <path d="M30.5 18.5v11"/>
      </g>
    </svg>
  );
};

// Tile + wordmark lockup
const LoopLogo = ({ wordSize = 22, tile = 36, dark = false, showWord = true }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
    <div style={{
      width: tile, height: tile, borderRadius: tile * 0.28, background: "var(--grad)",
      display: "grid", placeItems: "center", flexShrink: 0,
      boxShadow: "0 4px 14px rgba(var(--accent-rgb),0.4)",
    }}>
      <LoopMark size={tile * 0.6} variant="white"/>
    </div>
    {showWord && (
      <span style={{
        fontFamily: '"Bricolage Grotesque", sans-serif', fontWeight: 700, fontSize: wordSize,
        letterSpacing: "-0.03em", lineHeight: 1, color: dark ? "#fff" : "var(--ink)",
      }}>Loop</span>
    )}
  </div>
);

window.SparkyIcons = {
  Icon, IconMic, IconMicSolid, IconChat, IconHome, IconCalendar, IconClock, IconSettings,
  IconArrowRight, IconArrowLeft, IconCheck, IconX, IconKeyboard, IconStop, IconPause,
  IconUser, IconBell, IconShield, IconLink, IconZap, IconPhone, IconWaveform, IconChev, IconPlus, IconStar,
  LoopMark, LoopLogo,
};
