// Herbarium-style botanical illustrations for Sacred Roux
// First foods & aromatics of Cane River Creole gumbo culture:
// Okra, Filé (sassafras), Roux (wheat), Onion, Bell Pepper, Celery, Bay Laurel, Thyme
//
// All drawn in a dense engraving / herbarium style — single color (currentColor)
// so they inherit from context. 1px stroke with hatching for shading.

const BotanicalDefs = () => (
  <svg width="0" height="0" style={{ position: 'absolute' }} aria-hidden>
    <defs>
      <pattern id="sr-hatch" patternUnits="userSpaceOnUse" width="3" height="3" patternTransform="rotate(45)">
        <line x1="0" y1="0" x2="0" y2="3" stroke="currentColor" strokeWidth="0.4" />
      </pattern>
    </defs>
  </svg>
);

// OKRA — pod with ribbed texture, a leaf, and flower bud
function Okra({ size = 120, style }) {
  return (
    <svg viewBox="0 0 120 180" width={size} height={size * 1.5} style={style} fill="none" stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" strokeLinejoin="round">
      {/* main pod */}
      <path d="M62 22 C 60 28, 58 42, 56 62 C 54 90, 52 118, 50 142 C 49 154, 52 162, 58 166 C 64 170, 70 168, 72 160 C 76 140, 78 112, 78 84 C 78 60, 76 40, 72 26 C 70 20, 66 18, 62 22 Z" />
      {/* pod ridges */}
      <path d="M56 62 C 60 66, 68 66, 72 62" />
      <path d="M55 80 C 59 84, 69 84, 73 80" />
      <path d="M53 100 C 57 104, 71 104, 75 100" />
      <path d="M51 120 C 55 124, 73 124, 77 120" />
      <path d="M50 140 C 54 144, 72 144, 76 140" />
      {/* central seam */}
      <path d="M64 22 C 64 50, 62 90, 60 130 C 59 148, 60 160, 62 166" strokeWidth="0.5" />
      {/* calyx / stem cap */}
      <path d="M54 24 C 58 16, 72 14, 78 22 C 80 26, 76 28, 72 26" />
      <path d="M56 22 L 52 14 M 64 20 L 66 12 M 74 22 L 80 15" strokeWidth="0.6" />
      {/* stem up */}
      <path d="M66 14 C 64 10, 60 6, 54 4" />
      {/* leaf branching off */}
      <path d="M56 5 C 44 3, 30 10, 20 22 C 10 34, 6 52, 12 64 C 18 60, 30 48, 38 36 C 46 24, 54 14, 56 5 Z" />
      {/* leaf veins */}
      <path d="M56 5 C 42 18, 28 34, 14 58" strokeWidth="0.5" />
      <path d="M46 14 C 40 18, 32 22, 24 28 M 38 24 C 32 30, 26 36, 20 44 M 30 34 C 24 40, 18 48, 14 56" strokeWidth="0.4" />
      {/* hatching on leaf */}
      <path d="M22 26 L 18 30 M 26 30 L 22 34 M 30 34 L 26 38 M 20 40 L 16 44 M 24 44 L 20 48 M 28 48 L 24 52" strokeWidth="0.3" />
      {/* flower on other side */}
      <path d="M74 28 C 82 24, 94 24, 100 32 C 104 38, 102 46, 96 48 C 90 50, 82 46, 78 40" />
      <path d="M88 26 C 92 20, 100 18, 106 22 M 98 30 C 104 28, 110 32, 112 38" strokeWidth="0.5" />
      {/* tip point */}
      <path d="M50 142 L 48 170 L 52 168 L 54 164" />
    </svg>
  );
}

// FILÉ / SASSAFRAS — three-lobed mitten leaves on a branching stem
function File({ size = 120, style }) {
  return (
    <svg viewBox="0 0 140 180" width={size} height={size * 1.29} style={style} fill="none" stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" strokeLinejoin="round">
      {/* main stem */}
      <path d="M70 168 C 70 140, 68 110, 66 80 C 64 50, 62 24, 60 10" strokeWidth="1" />
      {/* branch left */}
      <path d="M66 80 C 54 78, 40 82, 30 90" />
      {/* branch right */}
      <path d="M64 50 C 74 46, 86 44, 96 48" />
      {/* three-lobed (mitten) leaf — bottom left, characteristic sassafras shape */}
      <path d="M30 90 C 18 88, 8 94, 4 104 C 0 114, 4 124, 12 128 C 14 128, 14 136, 10 142 C 16 142, 22 140, 26 134 C 30 140, 40 140, 46 134 C 50 126, 48 116, 42 112 C 46 108, 48 100, 44 94 C 40 88, 34 88, 30 90 Z" />
      {/* leaf veins */}
      <path d="M30 90 C 26 104, 22 120, 18 132" strokeWidth="0.5" />
      <path d="M24 100 L 12 104 M 22 110 L 8 116 M 20 120 L 10 130 M 30 100 L 40 104 M 28 112 L 42 118 M 26 124 L 40 130" strokeWidth="0.4" />
      {/* single-lobed oval leaf upper right */}
      <path d="M96 48 C 108 44, 122 48, 130 58 C 136 68, 132 78, 122 80 C 112 82, 102 78, 96 72 C 92 66, 90 58, 96 48 Z" />
      <path d="M96 48 C 108 60, 120 72, 128 78" strokeWidth="0.5" />
      <path d="M102 54 L 112 50 M 106 62 L 120 58 M 110 70 L 124 66 M 102 66 L 96 72" strokeWidth="0.4" />
      {/* two-lobed (mitten) mid-left leaf */}
      <path d="M40 120 C 28 124, 20 134, 22 144 C 24 154, 34 158, 42 154 C 46 158, 54 156, 56 150 C 58 142, 54 132, 46 128 C 44 124, 42 122, 40 120 Z" />
      <path d="M40 120 C 40 134, 38 146, 38 152" strokeWidth="0.5" />
      {/* small terminal leaf */}
      <path d="M60 12 C 54 4, 48 2, 44 8 C 42 14, 46 20, 52 20 C 58 20, 62 16, 60 12 Z" />
      {/* flower cluster */}
      <g transform="translate(58 8)">
        <circle cx="0" cy="0" r="2" />
        <circle cx="5" cy="-2" r="1.5" />
        <circle cx="-4" cy="-4" r="1.5" />
        <circle cx="2" cy="-6" r="1.4" />
      </g>
      {/* root system at base */}
      <path d="M70 168 C 66 172, 60 176, 52 178 M 70 168 C 74 172, 80 176, 88 178 M 70 170 L 72 180" strokeWidth="0.5" />
    </svg>
  );
}

// ROUX / WHEAT — a single stalk of wheat with bearded grains
function Wheat({ size = 100, style }) {
  return (
    <svg viewBox="0 0 100 200" width={size} height={size * 2} style={style} fill="none" stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" strokeLinejoin="round">
      {/* stalk */}
      <path d="M50 196 L 50 80" strokeWidth="1" />
      {/* leaf blades */}
      <path d="M50 160 C 40 158, 30 162, 24 170 C 32 166, 42 166, 50 168" />
      <path d="M50 130 C 62 126, 74 130, 82 138 C 72 134, 60 134, 50 138" />
      {/* grain head — spikelets arranged in herringbone */}
      {[...Array(8)].map((_, i) => {
        const y = 78 - i * 9;
        return (
          <g key={i}>
            {/* left spikelet */}
            <path d={`M 50 ${y} C 42 ${y - 2}, 36 ${y - 6}, 34 ${y - 12} C 40 ${y - 10}, 46 ${y - 8}, 50 ${y - 4}`} />
            {/* right spikelet */}
            <path d={`M 50 ${y} C 58 ${y - 2}, 64 ${y - 6}, 66 ${y - 12} C 60 ${y - 10}, 54 ${y - 8}, 50 ${y - 4}`} />
            {/* awn / beard — left */}
            <path d={`M 36 ${y - 10} L 22 ${y - 20}`} strokeWidth="0.4" />
            <path d={`M 40 ${y - 8} L 30 ${y - 22}`} strokeWidth="0.4" />
            {/* awn / beard — right */}
            <path d={`M 64 ${y - 10} L 78 ${y - 20}`} strokeWidth="0.4" />
            <path d={`M 60 ${y - 8} L 70 ${y - 22}`} strokeWidth="0.4" />
            {/* hatching inside spikelet */}
            <path d={`M 42 ${y - 4} L 40 ${y - 8} M 46 ${y - 4} L 44 ${y - 8} M 54 ${y - 4} L 56 ${y - 8} M 58 ${y - 4} L 60 ${y - 8}`} strokeWidth="0.3" />
          </g>
        );
      })}
      {/* tip grain */}
      <path d="M50 8 L 50 0 M 46 10 L 40 2 M 54 10 L 60 2" strokeWidth="0.5" />
    </svg>
  );
}

// ONION — bulb with papery skin and green tops
function Onion({ size = 100, style }) {
  return (
    <svg viewBox="0 0 100 160" width={size} height={size * 1.6} style={style} fill="none" stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" strokeLinejoin="round">
      {/* bulb outer */}
      <path d="M22 96 C 18 110, 20 130, 34 146 C 48 156, 64 156, 74 146 C 86 132, 84 112, 78 96 C 72 86, 58 82, 50 82 C 42 82, 28 86, 22 96 Z" />
      {/* papery skin strokes */}
      <path d="M26 100 C 28 120, 36 138, 50 146" strokeWidth="0.5" />
      <path d="M34 94 C 34 116, 42 138, 54 148" strokeWidth="0.4" />
      <path d="M44 88 C 44 114, 46 138, 52 150" strokeWidth="0.4" />
      <path d="M58 88 C 58 114, 56 138, 52 150" strokeWidth="0.4" />
      <path d="M68 94 C 68 116, 62 138, 54 148" strokeWidth="0.4" />
      <path d="M74 100 C 72 120, 66 138, 56 146" strokeWidth="0.4" />
      {/* root tuft at bottom */}
      <path d="M38 152 L 34 158 M 42 154 L 40 160 M 46 155 L 46 160 M 52 155 L 54 160 M 58 154 L 60 160 M 62 152 L 66 158" strokeWidth="0.5" />
      {/* neck of bulb */}
      <path d="M42 84 C 44 78, 48 74, 50 72" />
      <path d="M58 84 C 56 78, 52 74, 50 72" />
      {/* green tops — tall hollow leaves */}
      <path d="M50 72 C 46 60, 42 44, 40 24 C 40 14, 44 6, 50 4 C 56 6, 60 14, 60 24 C 58 44, 54 60, 50 72" />
      <path d="M42 62 C 36 52, 30 36, 28 20 C 28 10, 32 2, 38 2" />
      <path d="M58 62 C 64 52, 70 36, 72 20 C 72 10, 68 2, 62 2" />
      {/* leaf tips */}
      <path d="M50 4 L 50 -2 M 38 2 L 36 -4 M 62 2 L 64 -4" strokeWidth="0.5" />
      {/* internal leaf lines */}
      <path d="M50 72 L 50 8 M 42 62 L 34 8 M 58 62 L 66 8" strokeWidth="0.3" />
    </svg>
  );
}

// BELL PEPPER — lobed pepper with stem
function BellPepper({ size = 100, style }) {
  return (
    <svg viewBox="0 0 100 120" width={size} height={size * 1.2} style={style} fill="none" stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" strokeLinejoin="round">
      {/* body */}
      <path d="M28 44 C 18 52, 14 70, 18 86 C 22 100, 32 110, 44 112 C 50 114, 60 112, 66 110 C 76 104, 84 92, 86 78 C 86 62, 82 50, 72 42 C 70 40, 68 42, 66 44 C 60 40, 50 40, 44 44 C 42 42, 38 40, 36 42 C 32 42, 30 42, 28 44 Z" />
      {/* lobes (vertical creases) */}
      <path d="M34 44 C 32 60, 30 80, 34 104" strokeWidth="0.5" />
      <path d="M50 44 C 48 62, 48 86, 52 110" strokeWidth="0.5" />
      <path d="M68 44 C 70 60, 72 82, 68 106" strokeWidth="0.5" />
      {/* base indentation */}
      <path d="M40 110 C 48 106, 56 106, 62 110" strokeWidth="0.5" />
      {/* stem cap — sepals */}
      <path d="M34 40 C 38 36, 44 34, 50 34 C 58 34, 64 36, 70 40" />
      <path d="M40 38 C 42 32, 46 28, 50 28 M 50 28 C 54 30, 58 34, 60 38" strokeWidth="0.5" />
      {/* stem */}
      <path d="M50 28 C 50 20, 52 12, 54 6" strokeWidth="1" />
      <path d="M54 6 L 52 2 M 54 6 L 58 4" strokeWidth="0.5" />
      {/* highlight hatching on body */}
      <path d="M24 60 L 22 64 M 26 66 L 24 70 M 28 72 L 26 76 M 76 60 L 78 64 M 78 68 L 80 72 M 80 76 L 82 80" strokeWidth="0.3" />
    </svg>
  );
}

// CELERY — stalk with compound leaves
function Celery({ size = 90, style }) {
  return (
    <svg viewBox="0 0 90 180" width={size} height={size * 2} style={style} fill="none" stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" strokeLinejoin="round">
      {/* three fused stalks */}
      <path d="M30 170 C 30 140, 32 100, 34 70" />
      <path d="M45 174 C 45 140, 45 100, 45 70" strokeWidth="1" />
      <path d="M60 170 C 60 140, 58 100, 56 70" />
      {/* stalk ridges (celery grooves) */}
      <path d="M38 170 C 38 142, 38 108, 38 76" strokeWidth="0.4" />
      <path d="M52 170 C 52 142, 52 108, 52 76" strokeWidth="0.4" />
      {/* base */}
      <path d="M26 172 C 32 176, 58 176, 64 172" />
      {/* leaf branches at top */}
      <path d="M34 70 C 26 62, 18 56, 14 46" />
      <path d="M45 70 L 45 40" strokeWidth="0.8" />
      <path d="M56 70 C 64 62, 72 56, 76 46" />
      {/* compound leaflets — left cluster */}
      <g transform="translate(14 46)">
        <path d="M0 0 C -6 -4, -10 -10, -10 -16 C -6 -14, -2 -10, 0 -4 Z" />
        <path d="M0 0 C 2 -8, 6 -14, 10 -18 C 8 -12, 4 -6, 0 -2 Z" />
        <path d="M-2 -2 C -10 -2, -14 -6, -16 -10 C -10 -10, -4 -8, 0 -4 Z" />
      </g>
      {/* compound leaflets — center cluster */}
      <g transform="translate(45 40)">
        <path d="M-8 -2 C -10 -10, -8 -18, -4 -22 C -2 -16, -2 -8, -4 -2 Z" />
        <path d="M0 -4 C 0 -14, 4 -22, 8 -24 C 6 -16, 4 -8, 2 -2 Z" />
        <path d="M6 -2 C 12 -8, 14 -16, 12 -22 C 8 -16, 4 -10, 4 -4 Z" />
      </g>
      {/* compound leaflets — right cluster */}
      <g transform="translate(76 46)">
        <path d="M0 0 C 6 -4, 10 -10, 10 -16 C 6 -14, 2 -10, 0 -4 Z" />
        <path d="M0 0 C -2 -8, -6 -14, -10 -18 C -8 -12, -4 -6, 0 -2 Z" />
        <path d="M2 -2 C 10 -2, 14 -6, 16 -10 C 10 -10, 4 -8, 0 -4 Z" />
      </g>
      {/* leaflet veins (hatching) */}
      <path d="M6 36 L 2 30 M 10 32 L 7 26 M 38 22 L 36 16 M 42 20 L 42 14 M 84 36 L 88 30 M 80 32 L 83 26" strokeWidth="0.3" />
    </svg>
  );
}

// BAY LEAF — elongated pointed oval leaf on a sprig
function Bay({ size = 100, style }) {
  return (
    <svg viewBox="0 0 100 160" width={size} height={size * 1.6} style={style} fill="none" stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" strokeLinejoin="round">
      {/* stem */}
      <path d="M50 156 L 50 20" strokeWidth="1" />
      {/* leaves — alternating pattern */}
      {[
        { y: 30, side: 1, size: 1 },
        { y: 50, side: -1, size: 0.9 },
        { y: 72, side: 1, size: 1.1 },
        { y: 94, side: -1, size: 1 },
        { y: 116, side: 1, size: 0.9 },
        { y: 138, side: -1, size: 0.85 },
      ].map((l, i) => {
        const w = 30 * l.size;
        const h = 48 * l.size;
        const x0 = 50;
        const y0 = l.y;
        const tx = x0 + l.side * w;
        const ty = y0 - h * 0.2;
        return (
          <g key={i}>
            <path d={`M ${x0} ${y0} C ${x0 + l.side * w * 0.3} ${y0 - h * 0.1}, ${x0 + l.side * w * 0.9} ${y0 - h * 0.5}, ${tx} ${ty} C ${x0 + l.side * w * 0.7} ${y0 - h * 0.1}, ${x0 + l.side * w * 0.3} ${y0 + h * 0.1}, ${x0} ${y0} Z`} />
            {/* central vein */}
            <path d={`M ${x0} ${y0} L ${tx - l.side * 3} ${ty + 2}`} strokeWidth="0.4" />
            {/* side veins */}
            <path d={`M ${x0 + l.side * w * 0.3} ${y0 - h * 0.1} L ${x0 + l.side * w * 0.5} ${y0 - h * 0.3}`} strokeWidth="0.3" />
            <path d={`M ${x0 + l.side * w * 0.5} ${y0 - h * 0.2} L ${x0 + l.side * w * 0.7} ${y0 - h * 0.4}`} strokeWidth="0.3" />
          </g>
        );
      })}
      {/* tip */}
      <path d="M50 20 L 50 12 M 48 16 L 44 10 M 52 16 L 56 10" strokeWidth="0.5" />
      {/* small berry cluster */}
      <circle cx="48" cy="158" r="1.5" />
      <circle cx="52" cy="159" r="1.5" />
    </svg>
  );
}

// THYME — branching sprig with tiny paired leaves
function Thyme({ size = 90, style }) {
  return (
    <svg viewBox="0 0 100 180" width={size} height={size * 2} style={style} fill="none" stroke="currentColor" strokeWidth="0.7" strokeLinecap="round" strokeLinejoin="round">
      {/* main stem */}
      <path d="M50 176 C 50 140, 48 100, 44 60 C 42 40, 40 24, 38 10" strokeWidth="0.9" />
      {/* side branches */}
      <path d="M48 150 C 58 148, 66 144, 72 136" />
      <path d="M46 120 C 36 118, 28 114, 22 106" />
      <path d="M45 90 C 55 86, 62 80, 66 72" />
      <path d="M43 60 C 33 56, 27 48, 24 38" />
      <path d="M41 36 C 50 32, 56 26, 58 18" />
      {/* tiny paired leaves along every branch */}
      {[
        [50, 170, 0], [48, 160, 0], [48, 152, 0], [47, 144, 0],
        [46, 136, 0], [46, 128, 0], [45, 120, 0], [44, 112, 0],
        [43, 104, 0], [43, 96, 0], [42, 88, 0], [42, 80, 0],
        [41, 72, 0], [41, 64, 0], [40, 56, 0], [40, 48, 0],
        [39, 40, 0], [39, 32, 0], [38, 24, 0], [38, 16, 0],
      ].map(([x, y], i) => (
        <g key={i}>
          <ellipse cx={x - 3} cy={y} rx="2.5" ry="1.5" transform={`rotate(-20 ${x - 3} ${y})`} />
          <ellipse cx={x + 3} cy={y} rx="2.5" ry="1.5" transform={`rotate(20 ${x + 3} ${y})`} />
        </g>
      ))}
      {/* leaves on side branches */}
      {[[58, 147], [64, 143], [70, 138], [38, 117], [30, 112], [24, 108], [55, 88], [60, 82], [64, 75], [37, 56], [30, 50], [26, 42], [46, 34], [52, 28], [56, 22]].map(([x, y], i) => (
        <ellipse key={i} cx={x} cy={y} rx="2.5" ry="1.5" />
      ))}
      {/* tiny flower at top */}
      <g transform="translate(38 10)">
        <circle cx="0" cy="0" r="1.4" />
        <circle cx="3" cy="-2" r="1.2" />
        <circle cx="-3" cy="-2" r="1.2" />
        <circle cx="0" cy="-4" r="1" />
      </g>
    </svg>
  );
}

// Labeled herbarium plate — botanical inside a circle with latin name
function HerbariumPlate({ botanical, common, latin, note, size = 220, color }) {
  const B = botanical;
  return (
    <div style={{
      display: 'inline-flex', flexDirection: 'column', alignItems: 'center',
      color: color || 'currentColor', width: size,
    }}>
      <div style={{
        width: size, height: size, borderRadius: '50%',
        border: `1px solid currentColor`, position: 'relative',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        overflow: 'hidden',
      }}>
        <div style={{ opacity: 0.85, transform: 'translateY(-2%)' }}>
          <B size={size * 0.55} />
        </div>
        {/* inner concentric rule */}
        <div style={{
          position: 'absolute', inset: 8, borderRadius: '50%',
          border: '0.5px solid currentColor', opacity: 0.35, pointerEvents: 'none',
        }} />
      </div>
      <div style={{ marginTop: 18, textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--d2-display)', fontSize: 22, fontStyle: 'italic', lineHeight: 1 }}>
          {common}
        </div>
        <div style={{ fontFamily: 'var(--d2-serif)', fontSize: 11, fontStyle: 'italic', opacity: 0.7, marginTop: 4 }}>
          {latin}
        </div>
        {note && (
          <div style={{
            fontFamily: 'var(--d2-mono)', fontSize: 9, letterSpacing: '0.24em',
            textTransform: 'uppercase', opacity: 0.55, marginTop: 10,
          }}>{note}</div>
        )}
      </div>
    </div>
  );
}

// The eight botanicals as a registry with latin names and cultural notes
const SR_BOTANICALS = [
  { key: 'okra',   Component: Okra,       common: 'Okra',         latin: 'Abelmoschus esculentus', note: 'West African · brought in the diaspora' },
  { key: 'file',   Component: File,       common: 'Filé',         latin: 'Sassafras albidum',      note: 'Choctaw medicine · ground leaf' },
  { key: 'wheat',  Component: Wheat,      common: 'Roux',         latin: 'Triticum aestivum',      note: 'French · flour & fat, slow-darkened' },
  { key: 'onion',  Component: Onion,      common: 'Onion',        latin: 'Allium cepa',            note: 'Holy Trinity · the base' },
  { key: 'pepper', Component: BellPepper, common: 'Bell Pepper',  latin: 'Capsicum annuum',        note: 'Holy Trinity · the brightness' },
  { key: 'celery', Component: Celery,     common: 'Celery',       latin: 'Apium graveolens',       note: 'Holy Trinity · the structure' },
  { key: 'bay',    Component: Bay,        common: 'Bay Laurel',   latin: 'Laurus nobilis',         note: 'Mediterranean · quiet depth' },
  { key: 'thyme',  Component: Thyme,      common: 'Thyme',        latin: 'Thymus vulgaris',        note: 'the aromatic thread' },
];

Object.assign(window, { Okra, File, Wheat, Onion, BellPepper, Celery, Bay, Thyme, HerbariumPlate, BotanicalDefs, SR_BOTANICALS });