/* the turn - icon set. 2px-stroke geometric glyphs in the Lucide idiom
   (production should use the real Lucide CDN set - see ICONOGRAPHY). */
function Icon({ name, size = 22, color = 'currentColor', strokeWidth = 2 }) {
  const P = { fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    // verdict / home - a tide crest with the turn marked
    today: <g {...P}><path d="M3 17c3 0 4-10 9-10s6 10 9 10" /><circle cx="12" cy="7" r="1.6" fill={color} stroke="none" /></g>,
    // map - compass-less coast: a location pin over a curve
    map: <g {...P}><path d="M4 19c4 0 5-7 8-7s4 7 8 7" /><circle cx="12" cy="6.5" r="2.4" /><path d="M12 9v3" /></g>,
    // look-ahead - stacked windows
    lookahead: <g {...P}><line x1="4" y1="7" x2="20" y2="7" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="17" x2="14" y2="17" /></g>,
    plus: <g {...P}><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></g>,
    blank: <g {...P}><circle cx="12" cy="12" r="8" /><line x1="6.5" y1="17.5" x2="17.5" y2="6.5" /></g>,
    back: <g {...P}><path d="M15 18l-6-6 6-6" /></g>,
    close: <g {...P}><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></g>,
    crosshair: <g {...P}><circle cx="12" cy="12" r="7" /><line x1="12" y1="2" x2="12" y2="5" /><line x1="12" y1="19" x2="12" y2="22" /><line x1="2" y1="12" x2="5" y2="12" /><line x1="19" y1="12" x2="22" y2="12" /></g>,
    wind: <g {...P}><path d="M3 8h11a3 3 0 1 0-3-3" /><path d="M3 12h15a3 3 0 1 1-3 3" /><path d="M3 16h8" /></g>,
    chevron: <g {...P}><path d="M9 6l6 6-6 6" /></g>,
    minus: <g {...P}><line x1="5" y1="12" x2="19" y2="12" /></g>,
    clock: <g {...P}><circle cx="12" cy="12" r="8" /><path d="M12 8v4l3 2" /></g>,
    pin: <g {...P}><path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z" /><circle cx="12" cy="10" r="2.4" /></g>,
    sun: <g {...P}><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19" /></g>,
    moon: <g {...P}><path d="M20 14.5A8 8 0 1 1 9.5 4 6.2 6.2 0 0 0 20 14.5Z" /></g>,
    fish: <g {...P}><path d="M3 12c2.4-3.4 6-5.2 9.4-5.2 3.4 0 6 1.9 7.6 5.2-1.6 3.3-4.2 5.2-7.6 5.2C9 17.2 5.4 15.4 3 12Z" /><path d="M20 12l2.5-2.4v4.8L20 12" /><path d="M8 11.2h.01" /></g>,
    droplet: <g {...P}><path d="M12 3s6 6.4 6 10a6 6 0 1 1-12 0c0-3.6 6-10 6-10Z" /></g>,
    hook: <g {...P}><path d="M15 4h2.5a0 0 0 0 1 0 0V13a4.5 4.5 0 1 1-9 0v-1" /><path d="M6.5 9.5l2 2.5 2-2.5" /></g>,
    ruler: <g {...P}><rect x="3" y="8" width="18" height="8" rx="1.5" /><path d="M7 8v3M11 8v4M15 8v3M19 8v4" /></g>,
    pencil: <g {...P}><path d="M4 20l1-4L16 5l3 3L8 19l-4 1Z" /><path d="M14 7l3 3" /></g>,

    // per-species fish silhouettes (head left, tail right) - distinct by body depth + tail
    kob: <g {...P}><path d="M2.5,12 C4.5,10.5 8,9.5 12,9.5 C15.5,9.5 18,11 19.5,12 C18,13 15.5,14.5 12,14.5 C8,14.5 4.5,13.5 2.5,12 Z" /><path d="M19.5,12 L22.6,9.4 L21,12 L22.6,14.6 Z" /><path d="M6,10.6 C5.3,11.4 5.3,12.6 6,13.4" /><circle cx="4.7" cy="11.7" r="0.7" fill={color} stroke="none" /></g>,
    garrick: <g {...P}><path d="M2,12 C5,11 9,10.4 12.6,10.4 C15.6,10.4 18,11.3 19,12 C18,12.7 15.6,13.6 12.6,13.6 C9,13.6 5,13 2,12 Z" /><path d="M19,12 L23,8.9 L21.2,12 L23,15.1 Z" /><circle cx="4.4" cy="11.8" r="0.6" fill={color} stroke="none" /></g>,
    grunter: <g {...P}><path d="M3,12 C4.8,8.8 8,7.4 12,7.4 C15.3,7.4 18,9.6 19,12 C18,14.4 15.3,16.6 12,16.6 C8,16.6 4.8,15.2 3,12 Z" /><path d="M8,7.9 L9,6.4 L10,7.6 L11,6.3 L12,7.5" /><path d="M19,12 L21.9,10 L21,12 L21.9,14 Z" /><circle cx="6.1" cy="11" r="0.7" fill={color} stroke="none" /></g>,
    galjoen: <g {...P}><path d="M4.5,12 C4.5,7.8 7.8,5.8 11.5,5.8 C15,5.8 17.8,8.4 18.3,12 C17.8,15.6 15,18.2 11.5,18.2 C7.8,18.2 4.5,16.2 4.5,12 Z" /><path d="M18.3,12 L20.9,10.5 L20.1,12 L20.9,13.5 Z" /><circle cx="7.3" cy="10.7" r="0.7" fill={color} stroke="none" /></g>,
    other: <g {...P}><path d="M3,12 C5,9.6 9,8.6 12.5,8.6 C16,8.6 18.5,10.5 20,12 C18.5,13.5 16,15.4 12.5,15.4 C9,15.4 5,14.4 3,12 Z" /><path d="M20,12 L23,9.5 L21.5,12 L23,14.5 Z" /><circle cx="5.3" cy="11.4" r="0.7" fill={color} stroke="none" /></g>,
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">{paths[name]}</svg>;
}
function fishName(s) { return ['kob','garrick','grunter','galjoen'].includes(s) ? s : 'other'; }

function Mark({ size = 30 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" fill="none" aria-hidden="true">
      <rect width="120" height="120" rx="28" fill="#0C3B32" />
      <rect x="0.5" y="0.5" width="119" height="119" rx="27.5" stroke="#1E5A4C" />
      <path d="M18 86 C 30 86, 36 40, 60 40 C 84 40, 90 86, 102 86" stroke="#A9C5BC" strokeWidth="6" strokeLinecap="round" fill="none" />
      <line x1="18" y1="86" x2="102" y2="86" stroke="#1E5A4C" strokeWidth="3" strokeLinecap="round" />
      <line x1="60" y1="40" x2="60" y2="86" stroke="#1E5A4C" strokeWidth="2" strokeDasharray="3 4" />
      <circle cx="60" cy="40" r="8" fill="#A3E635" />
      <circle cx="60" cy="40" r="8" stroke="#0C3B32" strokeWidth="2" fill="none" />
    </svg>
  );
}

function MarkBare({ width = 50 }) {
  return (
    <svg width={width} height={width * 0.34} viewBox="0 0 72 38" fill="none" aria-hidden="true">
      <path d="M6 30 C 16 30, 21 8, 36 8 C 51 8, 56 30, 66 30" stroke="#A9C5BC" strokeWidth="4.5" strokeLinecap="round" fill="none" />
      <line x1="6" y1="30" x2="66" y2="30" stroke="#1E5A4C" strokeWidth="2.5" strokeLinecap="round" />
      <circle cx="36" cy="8" r="5.5" fill="#A3E635" />
    </svg>
  );
}