/* global React */
// ProTradeJournal — icon set (clean 1.7px stroke line icons)
const Ic = ({ d, size = 24, fill, vb = 24, sw = 1.7, children, style }) => (
  <svg width={size} height={size} viewBox={`0 0 ${vb} ${vb}`} fill={fill || 'none'}
       stroke={fill ? 'none' : 'currentColor'} strokeWidth={sw}
       strokeLinecap="round" strokeLinejoin="round" style={style}>
    {children || <path d={d} />}
  </svg>
);

const Logo = ({ size = 34 }) => (
  <svg width={size} height={size} viewBox="0 0 36 36" fill="none">
    <rect x="1.5" y="1.5" width="33" height="33" rx="9" fill="#2563eb"/>
    <rect x="1.5" y="1.5" width="33" height="33" rx="9" fill="url(#lg)" fillOpacity="0.25"/>
    <path d="M8 23.5 L14 17 L19 21 L27.5 11.5" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
    <circle cx="27.5" cy="11.5" r="2.6" fill="#6ee7b7"/>
    <path d="M9 26.5 H27" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeOpacity="0.45"/>
    <defs><linearGradient id="lg" x1="0" y1="0" x2="36" y2="36"><stop stopColor="#fff" stopOpacity="0.6"/><stop offset="1" stopColor="#fff" stopOpacity="0"/></linearGradient></defs>
  </svg>
);

const IconJournal = (p) => <Ic {...p}><path d="M5 4.5A1.5 1.5 0 0 1 6.5 3H18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H6.5A1.5 1.5 0 0 1 5 19.5z"/><path d="M5 17.5A1.5 1.5 0 0 1 6.5 16H19"/><path d="M9 8h6M9 11.5h4"/></Ic>;
const IconChart = (p) => <Ic {...p}><path d="M4 20V10M9.5 20V5M15 20v-7M20.5 20V8"/></Ic>;
const IconBrain = (p) => <Ic {...p}><path d="M9 5a3 3 0 0 0-3 3 3 3 0 0 0-1 5.8A2.8 2.8 0 0 0 8 19a2.5 2.5 0 0 0 4-2V6a2 2 0 0 0-2-2 1 1 0 0 0-1 1Z"/><path d="M15 5a3 3 0 0 1 3 3 3 3 0 0 1 1 5.8A2.8 2.8 0 0 1 16 19a2.5 2.5 0 0 1-4-2"/></Ic>;
const IconTag = (p) => <Ic {...p}><path d="M3.5 12.5 11 5h6a2 2 0 0 1 2 2v6l-7.5 7.5a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8Z"/><circle cx="15.5" cy="8.5" r="1.3" fill="currentColor" stroke="none"/></Ic>;
const IconCalendar = (p) => <Ic {...p}><rect x="4" y="5" width="16" height="16" rx="2.5"/><path d="M4 9.5h16M8 3.5v3M16 3.5v3"/><rect x="7" y="12.5" width="3" height="3" rx=".6" fill="currentColor" stroke="none"/></Ic>;
const IconShield = (p) => <Ic {...p}><path d="M12 3.5 5 6v5.5c0 4.4 3 7.5 7 9 4-1.5 7-4.6 7-9V6Z"/><path d="m9 12 2 2 4-4"/></Ic>;
const IconImport = (p) => <Ic {...p}><path d="M12 3.5v10m0 0 3.5-3.5M12 13.5 8.5 10"/><path d="M5 16v2.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V16"/></Ic>;
const IconBolt = (p) => <Ic {...p}><path d="M13 3 5 13h6l-1 8 8-10h-6Z"/></Ic>;
const IconMail = (p) => <Ic {...p}><rect x="3.5" y="5.5" width="17" height="13" rx="2.5"/><path d="m4 7 8 6 8-6"/></Ic>;
const IconLock = (p) => <Ic {...p}><rect x="5" y="10.5" width="14" height="9.5" rx="2.2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/></Ic>;
const IconUser = (p) => <Ic {...p}><circle cx="12" cy="8" r="3.4"/><path d="M5.5 20a6.5 6.5 0 0 1 13 0"/></Ic>;
const IconEye = (p) => <Ic {...p}><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z"/><circle cx="12" cy="12" r="2.6"/></Ic>;
const IconEyeOff = (p) => <Ic {...p}><path d="M4 4l16 16"/><path d="M9.5 9.6A2.6 2.6 0 0 0 12 14.5c.5 0 1-.15 1.4-.4"/><path d="M6.5 6.7C4.2 8.1 2.5 12 2.5 12s3.5 6.5 9.5 6.5c1.5 0 2.8-.4 4-1M16.5 16.4c2.3-1.4 5-4.4 5-4.4S18 5.5 12 5.5c-.6 0-1.2.06-1.7.17"/></Ic>;
const IconArrow = (p) => <Ic {...p}><path d="M5 12h14m0 0-5.5-5.5M19 12l-5.5 5.5"/></Ic>;
const IconCheck = (p) => <Ic {...p}><path d="m5 12.5 4.5 4.5L19 7"/></Ic>;
const IconClose = (p) => <Ic {...p}><path d="M6 6l12 12M18 6 6 18"/></Ic>;
const IconPlay = (p) => <Ic {...p}><circle cx="12" cy="12" r="9"/><path d="M10 8.5 16 12l-6 3.5z" fill="currentColor" stroke="none"/></Ic>;
const IconStar = (p) => <Ic {...p} fill="currentColor"><path d="m12 3 2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9 6.8 19.2l1-5.8L3.5 9.2l5.9-.9z"/></Ic>;

const GoogleG = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24">
    <path fill="#4285F4" d="M22.5 12.2c0-.7-.06-1.4-.18-2.06H12v3.9h5.9a5.05 5.05 0 0 1-2.19 3.31v2.75h3.54c2.07-1.91 3.25-4.72 3.25-7.9z"/>
    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.54-2.75c-.98.66-2.24 1.05-3.74 1.05-2.87 0-5.3-1.94-6.17-4.55H2.18v2.84A11 11 0 0 0 12 23z"/>
    <path fill="#FBBC05" d="M5.83 14.09a6.6 6.6 0 0 1 0-4.18V7.07H2.18a11 11 0 0 0 0 9.86l3.65-2.84z"/>
    <path fill="#EA4335" d="M12 4.75c1.62 0 3.07.56 4.21 1.65l3.14-3.14C17.45 1.46 14.96.5 12 .5A11 11 0 0 0 2.18 7.07l3.65 2.84C6.7 7.3 9.13 4.75 12 4.75z"/>
  </svg>
);

Object.assign(window, {
  Ic, Logo, GoogleG,
  IconJournal, IconChart, IconBrain, IconTag, IconCalendar, IconShield,
  IconImport, IconBolt, IconMail, IconLock, IconUser, IconEye, IconEyeOff,
  IconArrow, IconCheck, IconClose, IconPlay, IconStar,
});
