const GLYPHS = [
  // 0: Semilla
  <g stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round">
    <ellipse cx="50" cy="56" rx="22" ry="28"/>
    <path d="M50 28C46 16 46 8 50 2c4 6 4 14 0 26"/>
    <path d="M50 56C32 48 18 32 20 16"/>
    <path d="M50 56C68 48 82 32 80 16"/>
  </g>,
  // 1: LED panel
  <g stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round">
    <rect x="16" y="26" width="68" height="40" rx="2"/>
    <circle cx="32" cy="46" r="5"/><circle cx="50" cy="46" r="5"/><circle cx="68" cy="46" r="5"/>
    <path d="M30 18v8M50 14v12M70 18v8"/>
    <path d="M16 66l-6 12M84 66l6 12"/>
  </g>,
  // 2: Bolsa sustrato
  <g stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round">
    <path d="M22 22h56l-6 62H28z"/>
    <path d="M22 22h56"/>
    <path d="M42 22V12h16v10"/>
    <path d="M34 48c5 6 27 6 32 0M34 62c5 6 27 6 32 0"/>
  </g>,
  // 3: Carpa indoor
  <g stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round">
    <rect x="14" y="18" width="72" height="66" rx="1"/>
    <path d="M14 18l8-8h56l8 8"/>
    <path d="M50 18v66"/>
    <path d="M28 52h10M62 52h10"/>
    <path d="M14 84v8M86 84v8"/>
  </g>,
  // 4: Frasco nutrientes
  <g stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round">
    <path d="M38 18h24v10l10 12v46H28V40l10-12z"/>
    <path d="M38 28h24"/>
    <rect x="40" y="10" width="20" height="8" rx="2"/>
    <path d="M36 52c5 6 23 6 28 0M36 64c5 6 23 6 28 0"/>
  </g>,
  // 5: Dark room
  <g stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round">
    <rect x="14" y="26" width="72" height="62" rx="1"/>
    <path d="M14 26L50 8l36 18"/>
    <circle cx="50" cy="54" r="16"/>
    <circle cx="50" cy="54" r="6"/>
    <path d="M32 88v8M68 88v8"/>
  </g>,
  // 6: Planta
  <g stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round">
    <path d="M50 88V46"/>
    <path d="M50 66C34 58 20 42 26 26c12 10 24 20 24 20"/>
    <path d="M50 66C66 58 80 42 74 26C62 36 50 46 50 46"/>
    <path d="M50 52C38 42 28 28 30 14c10 8 20 22 20 32"/>
    <path d="M50 52C62 42 72 28 70 14C60 22 50 36 50 46"/>
  </g>,
  // 7: Grinder
  <g stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round">
    <path d="M50 10L86 30v40L50 90 14 70V30z"/>
    <path d="M50 10v80M86 30L14 70M86 70L14 30"/>
    <circle cx="50" cy="50" r="16"/>
    <circle cx="50" cy="50" r="4"/>
  </g>,
];

function ProductGlyph({ id }) {
  const idx = ((id - 1) % GLYPHS.length + GLYPHS.length) % GLYPHS.length;
  return (
    <svg viewBox="0 0 100 100" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", color: "rgba(57,255,20,0.55)" }}>
      {GLYPHS[idx]}
    </svg>
  );
}

function Logo({ big }) {
  const h = big ? 72 : 44;
  return (
    <a href="#">
      <img src="common-articles/Logo Grow Satindica 1.png" height={h} alt="Grow Satindica" style={{ display: 'block' }} />
    </a>
  );
}

function Placeholder({ label = "Product Shot" }) {
  return (
    <div className="ph">
      <div className="ph__label">▣ {label}</div>
    </div>
  );
}

Object.assign(window, { ProductGlyph, Logo, Placeholder });
