// Dipoli logo — line-art D with propeller mark, pulled from the auth atmosphere.
// Size controls width; height scales proportionally.
function DipoliMark({ size = 32, gradientId = 'dipoliMark', animated = false, style }) {
  return (
    <svg viewBox="0 0 329.92 352.58" fill="none" width={size} height={size * (352.58 / 329.92)} style={style}>
      <defs>
        <linearGradient id={gradientId} x1="0" y1="0" x2="329.92" y2="352.58" gradientUnits="userSpaceOnUse">
          <stop offset="0"   stopColor="#7C5CFC" />
          <stop offset="0.5" stopColor="#5188F8" />
          <stop offset="1"   stopColor="#38C8F6" />
        </linearGradient>
      </defs>
      <path
        d="M145.07,352.58H0V0H145.07q78.06,0,131.46,50.87,53.4,50.39,53.39,125.41T276.53,301.71Q223.12,352.59,145.07,352.58Z"
        stroke={`url(#${gradientId})`} strokeWidth="6" strokeLinejoin="round"
      />
      <path
        d="M231,191.18a41,41,0,0,0,0-29.77,316,316,0,0,0,66.45-87,180.46,180.46,0,0,0-20.21-22.9,287.57,287.57,0,0,1-64.19,88,42.34,42.34,0,0,0-50,3.72,312.35,312.35,0,0,0-62.63-24.6,206.61,206.61,0,0,0,107.23-109,187,187,0,0,0-27.93-6.81C152,64.54,90,107.66,18,107.66a179.19,179.19,0,0,1-18-.91v29.83c6-.37,12-.62,18-.62a284.17,284.17,0,0,1,130.25,31.47,42.72,42.72,0,0,0,0,17.73A284.14,284.14,0,0,1,18,216.63C12,216.63,6,216.38,0,216v29.84a179.19,179.19,0,0,1,18-.91C90,244.93,152,288,179.78,349.77a186.5,186.5,0,0,0,27.91-6.84,206.74,206.74,0,0,0-107.29-109A312.41,312.41,0,0,0,163,209.31,42.32,42.32,0,0,0,213,213a287.46,287.46,0,0,1,64.18,88,179.28,179.28,0,0,0,20.23-22.9A316.22,316.22,0,0,0,231,191.18Z"
        stroke={`url(#${gradientId})`} strokeWidth="4" strokeLinejoin="round" strokeLinecap="round"
        style={animated ? { transformOrigin: '190px 176px', animation: 'dipoli-spin 40s linear infinite' } : undefined}
      />
      <circle cx="190" cy="176" r="9" fill="#5188F8" />
      <circle cx="190" cy="176" r="14" stroke="#7C5CFC" strokeWidth="3" opacity="0.6" />
    </svg>
  );
}

function DipoliLogoLockup({ size = 30 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <DipoliMark size={size} gradientId={`lockup${size}`} />
      <span style={{ fontWeight: 600, fontSize: size * 0.62, letterSpacing: '-0.01em', color: 'var(--fg)' }}>Dipoli</span>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Shared small icons (stroke-based)
const _Ico = (d, { size = 16, stroke = 1.6 } = {}) => function I(p) {
  return (
    <svg width={p.size || size} height={p.size || size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, ...(p.style || {}) }}>{d}</svg>
  );
};
const IconArrowRight = _Ico(<><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></>);
const IconCheck = _Ico(<path d="M4 12l5 5L20 6" />);
const IconShield = _Ico(<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />);
const IconBolt = _Ico(<path d="M13 2 3 14h7l-1 8 10-12h-7z" />);
const IconChevR = _Ico(<path d="m9 6 6 6-6 6" />);
const IconGlobe = _Ico(<><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18" /></>);
const IconCpu = _Ico(<><rect x="5" y="5" width="14" height="14" rx="2" /><rect x="9" y="9" width="6" height="6" /><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3" /></>);
const IconLayers = _Ico(<><path d="m12 2 10 6-10 6L2 8l10-6Z" /><path d="m2 14 10 6 10-6" /><path d="m2 11 10 6 10-6" /></>);
const IconClock = _Ico(<><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>);
const IconLock = _Ico(<><rect x="5" y="11" width="14" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></>);
const IconNetwork = _Ico(<><circle cx="12" cy="5" r="2.5" /><circle cx="5" cy="19" r="2.5" /><circle cx="19" cy="19" r="2.5" /><path d="M12 7.5v3M8 14l-1.5 3M16 14l1.5 3M7.5 19h9" /></>);
const IconTarget = _Ico(<><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.5" /></>);
const IconEye = _Ico(<><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z" /><circle cx="12" cy="12" r="3" /></>);
const IconGitBranch = _Ico(<><path d="M6 3v12" /><circle cx="6" cy="18" r="2.5" /><circle cx="6" cy="6" r="2.5" /><circle cx="18" cy="8" r="2.5" /><path d="M18 10.5V14a4 4 0 0 1-4 4H8.5" /></>);

Object.assign(window, {
  DipoliMark, DipoliLogoLockup,
  IconArrowRight, IconCheck, IconShield, IconBolt, IconChevR, IconGlobe,
  IconCpu, IconLayers, IconClock, IconLock, IconNetwork, IconTarget, IconEye, IconGitBranch,
});
