// Botanical illustrations — herbarium-style line art.
// All use currentColor stroke, no fills (or minimal sepia fills).
// Drawn at varied viewBoxes to suit each composition.

// A trailing seaweed / algae frond — multiple slim leaves on a vertical stem
const BotanicalAlgae = ({ size = 100 }) => (
  <svg viewBox="0 0 100 240" width={size} height={size * 2.4} fill="none"
    stroke="currentColor" strokeWidth="0.7" strokeLinecap="round" strokeLinejoin="round"
    style={{ display: 'block' }}>
    {/* main stem */}
    <path d="M50 8 C 48 50, 54 100, 50 150 C 46 200, 52 232, 50 236" />
    {/* fronds left + right alternating */}
    {[20, 40, 60, 80, 100, 120, 140, 160, 180, 200].map((y, i) => {
      const left = i % 2 === 0;
      const dx = left ? -1 : 1;
      const tipX = 50 + dx * (24 + Math.sin(i) * 5);
      const tipY = y - 10 - i;
      const ctrl1X = 50 + dx * 8;
      const ctrl1Y = y - 4;
      return (
        <g key={y}>
          <path d={`M${50} ${y} Q ${ctrl1X} ${ctrl1Y - 4}, ${tipX} ${tipY}`} />
          {/* tiny veins */}
          {[0.3, 0.55, 0.8].map((t, j) => {
            const mx = 50 + (tipX - 50) * t;
            const my = y + (tipY - y) * t;
            const vx = mx + dx * 3;
            const vy = my - 2;
            return <path key={j} d={`M${mx} ${my} L ${vx} ${vy}`} strokeWidth="0.4" />;
          })}
        </g>
      );
    })}
  </svg>
);

// Herbarium leaf branch — simple olive/laurel style
const BotanicalBranch = ({ size = 200 }) => (
  <svg viewBox="0 0 300 110" width={size} height={size * 0.37} fill="none"
    stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" strokeLinejoin="round"
    style={{ display: 'block' }}>
    {/* stem */}
    <path d="M14 80 C 80 78, 160 60, 286 30" strokeWidth="1" />
    {/* leaves alternating */}
    {[
      { x: 50, y: 76, a: -25, len: 20 },
      { x: 75, y: 70, a: 30, len: 22 },
      { x: 110, y: 64, a: -22, len: 26 },
      { x: 140, y: 56, a: 28, len: 26 },
      { x: 175, y: 48, a: -20, len: 28 },
      { x: 210, y: 42, a: 26, len: 26 },
      { x: 245, y: 35, a: -18, len: 24 },
    ].map((l, i) => {
      const rad = (l.a * Math.PI) / 180;
      const tx = l.x + Math.cos(rad) * l.len;
      const ty = l.y + Math.sin(rad) * l.len;
      const w = 6;
      const px = -Math.sin(rad) * w;
      const py = Math.cos(rad) * w;
      // ellipse-ish leaf
      const cx = (l.x + tx) / 2;
      const cy = (l.y + ty) / 2;
      return (
        <g key={i}>
          <path d={`M${l.x} ${l.y} Q ${cx + px} ${cy + py}, ${tx} ${ty} Q ${cx - px} ${cy - py}, ${l.x} ${l.y} Z`} strokeWidth="0.7" />
          <path d={`M${l.x} ${l.y} L ${tx} ${ty}`} strokeWidth="0.4" />
        </g>
      );
    })}
    {/* seed/berry at end */}
    <circle cx="290" cy="28" r="2.5" />
  </svg>
);

// Simple fish silhouette — herbarium aquatic style
const BotanicalFish = ({ size = 200 }) => (
  <svg viewBox="0 0 240 110" width={size} height={size * 0.46} fill="none"
    stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" strokeLinejoin="round"
    style={{ display: 'block' }}>
    {/* body */}
    <path d="M30 55 C 50 28, 130 28, 180 55 C 130 82, 50 82, 30 55 Z" />
    {/* tail */}
    <path d="M180 55 L 220 35 L 210 55 L 220 75 Z" />
    {/* head separator */}
    <path d="M58 36 Q 56 55, 58 74" strokeWidth="0.5" />
    {/* eye */}
    <circle cx="48" cy="50" r="2" />
    <circle cx="48" cy="50" r="0.7" fill="currentColor" stroke="none" />
    {/* gill */}
    <path d="M64 42 Q 67 55, 64 68" strokeWidth="0.5" />
    {/* top fin */}
    <path d="M100 30 Q 120 12, 140 30" strokeWidth="0.7" />
    <path d="M105 30 L 108 22 M 115 28 L 117 18 M 125 28 L 127 18 M 135 30 L 132 22" strokeWidth="0.4" />
    {/* bottom fin */}
    <path d="M110 80 Q 122 92, 138 80" strokeWidth="0.6" />
    {/* scales suggested with subtle curves */}
    {[80, 95, 110, 125, 140, 155, 170].map((x) => (
      <path key={x} d={`M${x} 45 Q ${x + 4} 55, ${x} 65`} strokeWidth="0.3" />
    ))}
    {/* label hint */}
    <g fontFamily="JetBrains Mono, monospace" fontSize="6" fill="currentColor" stroke="none" letterSpacing="0.5" opacity="0.55">
      <text x="14" y="100">SP. MARINUS</text>
      <text x="180" y="100">FIG. 04</text>
    </g>
  </svg>
);

// Seed pod / capsule
const BotanicalSeed = ({ size = 80 }) => (
  <svg viewBox="0 0 80 140" width={size} height={size * 1.75} fill="none"
    stroke="currentColor" strokeWidth="0.7" strokeLinecap="round" strokeLinejoin="round"
    style={{ display: 'block' }}>
    {/* stem */}
    <path d="M40 0 L 40 50" strokeWidth="0.6" />
    {/* pod */}
    <path d="M40 50 C 12 56, 12 110, 40 130 C 68 110, 68 56, 40 50 Z" />
    {/* center seam */}
    <path d="M40 50 L 40 130" strokeWidth="0.5" />
    {/* seeds inside */}
    {[60, 76, 92, 108].map((y) => (
      <ellipse key={y} cx="40" cy={y} rx="6" ry="3" strokeWidth="0.4" />
    ))}
    {/* tiny sepals at top */}
    <path d="M34 50 L 30 44 M 46 50 L 50 44 M 40 50 L 40 42" strokeWidth="0.5" />
  </svg>
);

// Coral fan — multi-pronged
const BotanicalCoral = ({ size = 140 }) => (
  <svg viewBox="0 0 140 140" width={size} height={size} fill="none"
    stroke="currentColor" strokeWidth="0.7" strokeLinecap="round" strokeLinejoin="round"
    style={{ display: 'block' }}>
    {/* base */}
    <path d="M55 130 Q 70 128, 85 130" strokeWidth="1" />
    <path d="M70 128 L 70 105" />
    {/* main branches */}
    {[
      { ang: -90, len: 60 },
      { ang: -110, len: 50 },
      { ang: -70, len: 50 },
      { ang: -130, len: 38 },
      { ang: -50, len: 38 },
      { ang: -150, len: 28 },
      { ang: -30, len: 28 },
    ].map((b, i) => {
      const rad = (b.ang * Math.PI) / 180;
      const x = 70 + Math.cos(rad) * b.len;
      const y = 105 + Math.sin(rad) * b.len;
      // sub-prongs
      return (
        <g key={i}>
          <path d={`M70 105 Q ${(70 + x) / 2 + Math.sin(rad) * 4} ${(105 + y) / 2 - Math.cos(rad) * 4}, ${x} ${y}`} />
          {[0.5, 0.75].map((t, j) => {
            const mx = 70 + (x - 70) * t;
            const my = 105 + (y - 105) * t;
            const sx = mx + Math.cos(rad + 0.6) * 8;
            const sy = my + Math.sin(rad + 0.6) * 8;
            const sx2 = mx + Math.cos(rad - 0.6) * 8;
            const sy2 = my + Math.sin(rad - 0.6) * 8;
            return (
              <g key={j}>
                <path d={`M${mx} ${my} L ${sx} ${sy}`} strokeWidth="0.5" />
                <path d={`M${mx} ${my} L ${sx2} ${sy2}`} strokeWidth="0.5" />
              </g>
            );
          })}
          <circle cx={x} cy={y} r="1" fill="currentColor" stroke="none" />
        </g>
      );
    })}
  </svg>
);

// Topographic curves — for backgrounds / texture
const BotanicalTopo = ({ size = 200 }) => (
  <svg viewBox="0 0 200 120" width={size} height={size * 0.6} fill="none"
    stroke="currentColor" strokeWidth="0.5" strokeLinecap="round" strokeLinejoin="round"
    style={{ display: 'block' }}>
    {[0, 8, 18, 30, 44, 60, 78].map((off) => (
      <path key={off}
        d={`M0 ${100 - off} C 30 ${94 - off}, 70 ${108 - off}, 100 ${96 - off} C 130 ${88 - off}, 170 ${100 - off}, 200 ${92 - off}`}
        opacity={1 - off / 90} />
    ))}
  </svg>
);

// Botanical decorative divider — small leaf with parentheses
const BotanicalDivider = ({ size = 60 }) => (
  <svg viewBox="0 0 120 30" width={size * 2} height={size * 0.5} fill="none"
    stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" strokeLinejoin="round"
    style={{ display: 'block' }}>
    <path d="M40 15 Q 30 6, 20 15 Q 30 24, 40 15 Z" />
    <path d="M40 15 L 80 15" strokeWidth="0.6" />
    <path d="M80 15 Q 90 6, 100 15 Q 90 24, 80 15 Z" />
    <circle cx="60" cy="15" r="1.6" fill="currentColor" stroke="none" />
  </svg>
);

Object.assign(window, {
  BotanicalAlgae,
  BotanicalBranch,
  BotanicalFish,
  BotanicalSeed,
  BotanicalCoral,
  BotanicalTopo,
  BotanicalDivider,
});