/* global React */
/* Modern macOS-style icons.
   App icons: rounded squircle bgs with simple, original glyphs.
   Toolbar icons: SF-Symbols-style strokes (1.5px, rounded line caps).
   All ORIGINAL designs — no copied or branded artwork. */

const Squircle = ({ size = 40, gradient, children, radius = 9 }) => (
  <svg width={size} height={size} viewBox="0 0 40 40">
    <defs>
      <linearGradient id={gradient.id} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor={gradient.from}/>
        <stop offset="1" stopColor={gradient.to}/>
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="40" height="40" rx={radius} ry={radius} fill={`url(#${gradient.id})`}/>
    <g>{children}</g>
  </svg>
);

let __gid = 0;
const gid = () => `g${++__gid}`;

// === APP ICONS (large, used on desktop + dock) ============================

function FolderIcon({ size = 48 }) {
  // Translucent macOS-style folder
  return (
    <svg width={size} height={size} viewBox="0 0 48 48">
      <defs>
        <linearGradient id="fld-back" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#7cc1ff"/>
          <stop offset="1" stopColor="#3b8eff"/>
        </linearGradient>
        <linearGradient id="fld-front" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#a9d4ff"/>
          <stop offset="1" stopColor="#5aa3ff"/>
        </linearGradient>
      </defs>
      {/* back tab */}
      <path d="M5 13 q0-3 3-3 h11 l3 3 h21 q3 0 3 3 v23 q0 3-3 3 H8 q-3 0-3-3 z" fill="url(#fld-back)"/>
      {/* front flap */}
      <path d="M5 18 q0-3 3-3 h32 q3 0 3 3 v18 q0 3-3 3 H8 q-3 0-3-3 z" fill="url(#fld-front)" opacity="0.92"/>
    </svg>
  );
}

function DocIcon({ size = 48 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48">
      <defs>
        <linearGradient id="doc-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#ffffff"/>
          <stop offset="1" stopColor="#e9e9ec"/>
        </linearGradient>
      </defs>
      <path d="M11 6 h18 l8 8 v26 q0 4-4 4 H11 q-4 0-4-4 V10 q0-4 4-4 z"
            fill="url(#doc-bg)" stroke="rgba(0,0,0,0.10)" strokeWidth="0.5"/>
      <path d="M29 6 v8 h8" fill="rgba(0,0,0,0.04)" stroke="rgba(0,0,0,0.10)" strokeWidth="0.5"/>
      {/* lines */}
      <g stroke="#bcbcc2" strokeWidth="1.4" strokeLinecap="round">
        <line x1="14" y1="22" x2="34" y2="22"/>
        <line x1="14" y1="27" x2="34" y2="27"/>
        <line x1="14" y1="32" x2="28" y2="32"/>
      </g>
    </svg>
  );
}

function TrashIcon({ size = 48, full = false }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48">
      <defs>
        <linearGradient id="tr-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#f0f0f3"/>
          <stop offset="1" stopColor="#cfd0d6"/>
        </linearGradient>
      </defs>
      <rect x="4" y="4" width="40" height="40" rx="9" fill="url(#tr-bg)"/>
      <g transform="translate(6 5.25) scale(0.75)">
        {/* lid */}
        <rect x="11" y="14" width="26" height="3" rx="1.4" fill="#5a5a60"/>
        <rect x="20" y="11" width="8"  height="3.5" rx="1" fill="#5a5a60"/>
        {/* body */}
        <path d="M14 18 h20 l-1.5 18 q-0.3 3-3.3 3 H18.8 q-3 0-3.3-3 z"
              fill="#ffffff" stroke="#9a9aa0" strokeWidth="1.07"/>
        <g stroke="#9a9aa0" strokeWidth="1.6" strokeLinecap="round">
          <line x1="20" y1="22" x2="19.5" y2="35"/>
          <line x1="24" y1="22" x2="24"   y2="35"/>
          <line x1="28" y1="22" x2="28.5" y2="35"/>
        </g>
        {full && <rect x="14.5" y="18.5" width="19" height="4" fill="#a3aab6"/>}
      </g>
    </svg>
  );
}

function HardDriveIcon({ size = 48 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48">
      <defs>
        <linearGradient id="hd-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#dcdce2"/>
          <stop offset="1" stopColor="#a8a8b0"/>
        </linearGradient>
      </defs>
      <rect x="6"  y="14" width="36" height="22" rx="4" fill="url(#hd-bg)" stroke="rgba(0,0,0,0.18)" strokeWidth="0.5"/>
      <rect x="9"  y="17" width="30" height="13" rx="2" fill="#3a3a40"/>
      <circle cx="36" cy="32.5" r="1.4" fill="#28c840"/>
      <circle cx="11" cy="32.5" r="1.0" fill="#5a5a60"/>
    </svg>
  );
}

function BrowserIcon({ size = 48 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48">
      <defs>
        <radialGradient id="br-bg" cx="0.3" cy="0.3" r="0.95">
          <stop offset="0" stopColor="#62c8ff"/>
          <stop offset="0.55" stopColor="#1f86ff"/>
          <stop offset="1" stopColor="#0746cf"/>
        </radialGradient>
      </defs>
      <circle cx="24" cy="24" r="20" fill="url(#br-bg)"/>
      <circle cx="24" cy="24" r="20" fill="none" stroke="rgba(255,255,255,0.30)" strokeWidth="0.8"/>
      {/* compass needle */}
      <path d="M24 12 L28 24 L24 36 L20 24 Z" fill="#ffffff"/>
      <path d="M24 12 L28 24 L24 24 Z" fill="rgba(255,255,255,0.55)"/>
    </svg>
  );
}

function ContactsIcon({ size = 48 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48">
      <defs>
        <linearGradient id="ct-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#ffd24a"/>
          <stop offset="1" stopColor="#d97706"/>
        </linearGradient>
      </defs>
      <rect x="4" y="4" width="40" height="40" rx="9" fill="url(#ct-bg)"/>
      <rect x="9" y="10" width="30" height="28" rx="4" fill="#fffaf0"/>
      <rect x="6" y="14" width="2" height="3" fill="#7a4a08"/>
      <rect x="6" y="22" width="2" height="3" fill="#7a4a08"/>
      <rect x="6" y="30" width="2" height="3" fill="#7a4a08"/>
      <g transform="translate(0 -2)">
        <circle cx="24" cy="22" r="5" fill="#d97706"/>
        <path d="M16 35 q0-6 8-6 t8 6" fill="#d97706"/>
      </g>
    </svg>
  );
}

function NotesIcon({ size = 48 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48">
      <defs>
        <linearGradient id="nt-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#fff09a"/>
          <stop offset="1" stopColor="#f5c52b"/>
        </linearGradient>
      </defs>
      <rect x="4" y="4" width="40" height="40" rx="9" fill="url(#nt-bg)"/>
      <rect x="4" y="4" width="40" height="6" fill="#fff8c8" opacity="0.9"/>
      <g stroke="#a07a16" strokeWidth="1.6" strokeLinecap="round" opacity="0.55">
        <line x1="13" y1="20" x2="35" y2="20"/>
        <line x1="13" y1="26" x2="35" y2="26"/>
        <line x1="13" y1="32" x2="28" y2="32"/>
      </g>
    </svg>
  );
}

function AboutIcon({ size = 48 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48">
      <defs>
        <linearGradient id="ab-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#a78bfa"/>
          <stop offset="1" stopColor="#5b21b6"/>
        </linearGradient>
      </defs>
      <rect x="4" y="4" width="40" height="40" rx="9" fill="url(#ab-bg)"/>
      <text x="24" y="32" textAnchor="middle"
            fontFamily="-apple-system, system-ui, sans-serif"
            fontSize="22" fontWeight="700" fill="#ffffff"
            letterSpacing="-0.02em">tm</text>
    </svg>
  );
}

function WorkIcon({ size = 48 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48">
      <defs>
        <linearGradient id="wk-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#a4a8b8"/>
          <stop offset="1" stopColor="#5a5e72"/>
        </linearGradient>
      </defs>
      <rect x="4" y="4" width="40" height="40" rx="9" fill="url(#wk-bg)"/>
      <rect x="13" y="18" width="22" height="16" rx="2" fill="#fff" opacity="0.95"/>
      <rect x="19" y="14" width="10" height="4" rx="1" fill="#fff" opacity="0.85"/>
      <rect x="13" y="24" width="22" height="1.2" fill="#a4a8b8"/>
    </svg>
  );
}

function GearIcon({ size = 48 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48">
      <defs>
        <linearGradient id="gr-bg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#a8b1c4"/>
          <stop offset="1" stopColor="#3f475a"/>
        </linearGradient>
      </defs>
      <rect x="4" y="4" width="40" height="40" rx="9" fill="url(#gr-bg)"/>
      <g fill="#ffffff" transform="translate(24,24)">
        {[0,45,90,135,180,225,270,315].map((deg, i) => (
          <rect key={i} x="-2" y="-12" width="4" height="6" rx="1" transform={`rotate(${deg})`}/>
        ))}
      </g>
      <circle cx="24" cy="24" r="7" fill="#3f475a"/>
      <circle cx="24" cy="24" r="3" fill="#fff"/>
    </svg>
  );
}

// === SIDEBAR / TOOLBAR / TINY ICONS (1.5px stroke) =========================
const stroke = "currentColor";

function StarIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinejoin="round">
      <path d="M8 2 l1.8 4 4.2 0.5 -3.2 2.9 0.9 4.3 -3.7-2.2 -3.7 2.2 0.9-4.3 -3.2-2.9 4.2-0.5 z"/>
    </svg>
  );
}
function ClockIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinecap="round">
      <circle cx="8" cy="8" r="6"/>
      <path d="M8 5 v3.2 l2.2 1.6"/>
    </svg>
  );
}
function HouseIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinejoin="round">
      <path d="M2 7.5 L8 2 L14 7.5 V13 q0 1-1 1 H3 q-1 0-1-1 z"/>
    </svg>
  );
}
function FolderTinyIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.3" strokeLinejoin="round">
      <path d="M2 5 q0-1 1-1 h3.5 l1.2 1.2 H13 q1 0 1 1 v6 q0 1-1 1 H3 q-1 0-1-1 z"/>
    </svg>
  );
}
function HardDriveTinyIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.3">
      <rect x="2" y="5" width="12" height="6" rx="1.4"/>
      <circle cx="11" cy="8" r="0.7" fill={stroke}/>
    </svg>
  );
}
function GlobeIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.3">
      <circle cx="8" cy="8" r="6"/>
      <ellipse cx="8" cy="8" rx="3" ry="6"/>
      <line x1="2" y1="8" x2="14" y2="8"/>
    </svg>
  );
}
function TagIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.3" strokeLinejoin="round">
      <path d="M3 8.5 V3 q0-1 1-1 h5.5 L14 6.5 L8.5 12 z"/>
      <circle cx="6" cy="5.5" r="0.9" fill={stroke} stroke="none"/>
    </svg>
  );
}
function PersonIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.3" strokeLinecap="round">
      <circle cx="8" cy="6" r="2.6"/>
      <path d="M3 13.5 q0-3.5 5-3.5 t5 3.5"/>
    </svg>
  );
}
function DocTinyIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.3" strokeLinejoin="round">
      <path d="M4 2 h6 l3 3 v8 q0 1-1 1 H4 q-1 0-1-1 V3 q0-1 1-1 z"/>
      <path d="M10 2 v3 h3"/>
    </svg>
  );
}
function ChevronLeftIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="10 4 6 8 10 12"/>
    </svg>
  );
}
function ChevronRightIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="6 4 10 8 6 12"/>
    </svg>
  );
}
function GridIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.3">
      <rect x="2" y="2" width="5" height="5" rx="1"/>
      <rect x="9" y="2" width="5" height="5" rx="1"/>
      <rect x="2" y="9" width="5" height="5" rx="1"/>
      <rect x="9" y="9" width="5" height="5" rx="1"/>
    </svg>
  );
}
function ListIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinecap="round">
      <line x1="3" y1="4" x2="13" y2="4"/>
      <line x1="3" y1="8" x2="13" y2="8"/>
      <line x1="3" y1="12" x2="13" y2="12"/>
    </svg>
  );
}
function SearchIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.5" strokeLinecap="round">
      <circle cx="7" cy="7" r="4.5"/>
      <line x1="10.4" y1="10.4" x2="14" y2="14"/>
    </svg>
  );
}
function ShareIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M8 2 v9"/>
      <polyline points="5 5 8 2 11 5"/>
      <path d="M3 9 V13 q0 1 1 1 H12 q1 0 1-1 V9"/>
    </svg>
  );
}
function ControlCenterIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke={stroke} strokeWidth="1.4" strokeLinecap="round">
      <line x1="3" y1="3" x2="11" y2="3"/>
      <line x1="3" y1="7" x2="11" y2="7"/>
      <line x1="3" y1="11" x2="11" y2="11"/>
      <circle cx="5" cy="3" r="0.9" fill={stroke} stroke="none"/>
      <circle cx="9" cy="7" r="0.9" fill={stroke} stroke="none"/>
      <circle cx="6" cy="11" r="0.9" fill={stroke} stroke="none"/>
    </svg>
  );
}
function WifiIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke={stroke} strokeWidth="1.3" strokeLinecap="round">
      <path d="M2 6 q5-4 10 0"/>
      <path d="M4 8.5 q3-2.5 6 0"/>
      <circle cx="7" cy="11.2" r="0.9" fill={stroke} stroke="none"/>
    </svg>
  );
}
function BatteryIcon({ size = 22 }) {
  return (
    <svg width={size} height={size * 0.5} viewBox="0 0 22 11" fill="none" stroke={stroke} strokeWidth="1">
      <rect x="0.5" y="1" width="18" height="9" rx="2"/>
      <rect x="2" y="2.5" width="13" height="6" rx="1" fill={stroke}/>
      <rect x="19.5" y="3.5" width="2" height="4" rx="0.5" fill={stroke}/>
    </svg>
  );
}
function PlusIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke={stroke} strokeWidth="1.5" strokeLinecap="round">
      <line x1="7" y1="3" x2="7" y2="11"/>
      <line x1="3" y1="7" x2="11" y2="7"/>
    </svg>
  );
}
function CommandIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke={stroke} strokeWidth="1.3">
      <path d="M5 3 a2 2 0 1 0 -2 2 H11 a2 2 0 1 0 -2 -2 V11 a2 2 0 1 0 2 -2 H3 a2 2 0 1 0 2 2 z"/>
    </svg>
  );
}

// Brand mark for menu bar — a simple bold "tm" monogram (NOT Apple's mark)
function BrandMark() {
  return <span className="brand-mark">⌘</span>;
}

Object.assign(window, {
  FolderIcon, DocIcon, TrashIcon, HardDriveIcon, BrowserIcon,
  ContactsIcon, NotesIcon, AboutIcon, WorkIcon, GearIcon,
  StarIcon, ClockIcon, HouseIcon, FolderTinyIcon, HardDriveTinyIcon,
  GlobeIcon, TagIcon, PersonIcon, DocTinyIcon,
  ChevronLeftIcon, ChevronRightIcon, GridIcon, ListIcon, SearchIcon,
  ShareIcon, ControlCenterIcon, WifiIcon, BatteryIcon,
  PlusIcon, CommandIcon, BrandMark,
});
