/* global React */
// icons.jsx — Lucide-style outline icons. 1.5px stroke. currentColor.

const Ic = ({ size = 20, stroke = 1.5, children, style }) => (
  <svg
    width={size} height={size} viewBox="0 0 24 24"
    fill="none" stroke="currentColor" strokeWidth={stroke}
    strokeLinecap="round" strokeLinejoin="round"
    style={style}
  >{children}</svg>
);

const Chevron = ({ size = 20, dir = 'left', stroke = 1.75 }) => (
  <Ic size={size} stroke={stroke} style={{
    transform: dir === 'right' ? 'rotate(180deg)' : dir === 'down' ? 'rotate(-90deg)' : dir === 'up' ? 'rotate(90deg)' : 'none',
  }}>
    <path d="M15 18L9 12l6-6" />
  </Ic>
);

const Close   = ({ size = 20 }) => <Ic size={size}><path d="M18 6L6 18M6 6l12 12"/></Ic>;
const Refresh = ({ size = 14 }) => <Ic size={size}><path d="M3 12a9 9 0 0115-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 01-15 6.7L3 16"/><path d="M3 21v-5h5"/></Ic>;
const Plus    = ({ size = 20 }) => <Ic size={size}><path d="M12 5v14M5 12h14"/></Ic>;
const Check   = ({ size = 14 }) => <Ic size={size} stroke={2}><path d="M20 6L9 17l-5-5"/></Ic>;
const Search  = ({ size = 18 }) => <Ic size={size}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></Ic>;
const Dots    = ({ size = 18 }) => <Ic size={size} stroke={2}><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></Ic>;
const DragH   = ({ size = 16 }) => <Ic size={size} stroke={2}><circle cx="9" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="18" r="1"/></Ic>;
const Minus   = ({ size = 16 }) => <Ic size={size}><path d="M5 12h14"/></Ic>;

const Flag    = ({ size = 40 }) => <Ic size={size}><path d="M4 22V4"/><path d="M4 4h13l-2 4 2 4H4"/></Ic>;
const Football = ({ size = 40 }) => <Ic size={size}><path d="M3 21c0-9 9-18 18-18 0 9-9 18-18 18z"/><path d="M14 7l3 3"/><path d="M7 14l3 3"/><path d="M10 10l4 4"/></Ic>;
const Trophy  = ({ size = 40 }) => <Ic size={size}><path d="M8 21h8"/><path d="M12 17v4"/><path d="M7 4h10v6a5 5 0 11-10 0V4z"/><path d="M17 6h3a2 2 0 010 4h-3"/><path d="M7 6H4a2 2 0 000 4h3"/></Ic>;

// Sports-forward bottom-nav icons. Each takes `active` — when true,
// add an accent fill that gives a chunkier, scoreboard feel.

// Scoreboard / dashboard — quadrant blocks (Home)
const NavHome = ({ size = 22, active }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth={active ? 2 : 1.7} strokeLinecap="round" strokeLinejoin="round">
    <rect x="3"  y="3"  width="8" height="6"  rx="1.5" fill={active ? 'currentColor' : 'none'} fillOpacity={active ? 0.18 : 0} />
    <rect x="13" y="3"  width="8" height="10" rx="1.5" />
    <rect x="3"  y="11" width="8" height="10" rx="1.5" />
    <rect x="13" y="15" width="8" height="6"  rx="1.5" fill={active ? 'currentColor' : 'none'} fillOpacity={active ? 0.18 : 0} />
  </svg>
);

// Golf flag in cup (Pools — the marquee pool is PGA)
const NavPool = ({ size = 22, active }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth={active ? 2 : 1.7} strokeLinecap="round" strokeLinejoin="round">
    {/* flagpole */}
    <path d="M7 4v17" />
    {/* flag (filled when active) */}
    <path d="M7 4h10l-3 3.5L17 11H7" fill={active ? 'currentColor' : 'none'} />
    {/* ground / cup */}
    <ellipse cx="12" cy="21" rx="6" ry="1.4" />
  </svg>
);

// Trophy on a podium — Standings
const NavStandings = ({ size = 22, active }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth={active ? 2 : 1.7} strokeLinecap="round" strokeLinejoin="round">
    {/* podium blocks */}
    <rect x="3"  y="16" width="5" height="5" rx="0.8" fill={active ? 'currentColor' : 'none'} fillOpacity={active ? 0.22 : 0}/>
    <rect x="9.5" y="13" width="5" height="8" rx="0.8" fill={active ? 'currentColor' : 'none'} fillOpacity={active ? 0.35 : 0}/>
    <rect x="16" y="17" width="5" height="4" rx="0.8" fill={active ? 'currentColor' : 'none'} fillOpacity={active ? 0.22 : 0}/>
    {/* mini trophy on top */}
    <path d="M10 4h4v3.5a2 2 0 11-4 0V4z" fill={active ? 'currentColor' : 'none'}/>
    <path d="M10 10v1.5" />
    <path d="M14 5.5h1.2a1 1 0 010 2H14"/>
    <path d="M10 5.5H8.8a1 1 0 000 2H10"/>
  </svg>
);

// Jersey (Profile) — sports-forward stand-in for the avatar tab
const NavProfile = ({ size = 22, active }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth={active ? 2 : 1.7} strokeLinecap="round" strokeLinejoin="round">
    <path d="M9 3l-5 3 1.5 4L8 9v11a1 1 0 001 1h6a1 1 0 001-1V9l2.5 1L20 6l-5-3-1.5 1.5a2.2 2.2 0 01-3 0L9 3z"
      fill={active ? 'currentColor' : 'none'} fillOpacity={active ? 0.18 : 0}/>
    {active && <path d="M12 13v3" strokeWidth={2}/>}
  </svg>
);

// keep legacy names alive in case anything still imports them
const Home    = NavHome;
const Trophy2 = NavPool;
const ListIc  = NavStandings;
const Person  = NavProfile;

const Lock    = ({ size = 14 }) => <Ic size={size}><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 118 0v4"/></Ic>;
const Bolt    = ({ size = 12 }) => <Ic size={size} stroke={2}><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/></Ic>;
const Google  = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 18 18">
    <path d="M17.64 9.205c0-.639-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 01-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" fill="#a3a3a3"/>
    <path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 009 18z" fill="#a3a3a3"/>
    <path d="M3.964 10.71A5.41 5.41 0 013.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 000 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill="#a3a3a3"/>
    <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 00.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z" fill="#a3a3a3"/>
  </svg>
);

const Apple   = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 18 18" fill="currentColor">
    <path d="M14.6 9.6c0-2.5 2-3.7 2.1-3.8-1.2-1.7-3-2-3.6-2-1.5-.2-3 .9-3.7.9-.8 0-2-.9-3.3-.9-1.7 0-3.3 1-4.2 2.5C.1 9.5 1.4 14 3.2 16.5c.9 1.2 2 2.6 3.4 2.6 1.4-.1 1.9-.9 3.5-.9 1.7 0 2.1.9 3.5.9 1.5 0 2.4-1.3 3.3-2.5 1-1.4 1.5-2.8 1.5-2.9-.1 0-2.9-1.1-2.9-4.3zM12.1 2.2c.7-.9 1.2-2 1.1-3.2-1 0-2.3.7-3 1.5-.7.8-1.3 1.9-1.1 3.1 1.1.1 2.3-.5 3-1.4z"/>
  </svg>
);

const Passkey = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth={1.7} strokeLinecap="round" strokeLinejoin="round">
    <circle cx="9" cy="8" r="4"/>
    <path d="M9 12v9"/>
    <path d="M14 17h7"/>
    <path d="M17 14v6"/>
  </svg>
);

const Scissors = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth={1.7} strokeLinecap="round" strokeLinejoin="round">
    <circle cx="6" cy="6" r="3"/>
    <circle cx="6" cy="18" r="3"/>
    <line x1="20" y1="4" x2="8.12" y2="15.88"/>
    <line x1="14.47" y1="14.48" x2="20" y2="20"/>
    <line x1="8.12" y1="8.12" x2="12" y2="12"/>
  </svg>
);

const Gear    = ({ size = 20 }) => <Ic size={size} stroke={1.7}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33h0a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82v0a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></Ic>;

const Sparkline = ({ data = [11, 18, 4, 22, 9, 15, 6, 12], width = 120, height = 36, color = '#1f8a5b' }) => {
  const max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const stepX = width / (data.length - 1);
  const pts = data.map((v, i) => `${i * stepX},${height - ((v - min) / range) * (height - 4) - 2}`).join(' ');
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      {data.map((v, i) => (
        <circle key={i} cx={i * stepX} cy={height - ((v - min) / range) * (height - 4) - 2} r="1.5" fill={color}/>
      ))}
    </svg>
  );
};

Object.assign(window, {
  Chevron, Close, Refresh, Plus, Check, Search, Dots, DragH, Minus,
  Flag, Football, Trophy, Home, Trophy2, ListIc, Person,
  NavHome, NavPool, NavStandings, NavProfile,
  Lock, Bolt, Google, Apple, Passkey, Scissors, Gear, Sparkline,
});
