/* Botanical primitives — simple SVG shapes composed.
   No realistic illustration; only ellipses, lines, circles, basic paths.
   Hand to <Botanical kind="..." size={120} /> */

const Botanical = ({ kind = "sprig", size = 120, stroke = 1.4, className = "", style = {}, ...rest }) => {
  const props = { stroke: "currentColor", strokeWidth: stroke, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };
  const svgProps = {
    width: size,
    height: size,
    viewBox: "0 0 100 100",
    className: "botanical " + className,
    style,
    "aria-hidden": "true",
    ...rest,
  };

  if (kind === "sprig") {
    // A vertical stem with alternating leaves
    return (
      <svg {...svgProps}>
        <line x1="50" y1="10" x2="50" y2="92" {...props} />
        {[20, 35, 50, 65, 80].map((y, i) => {
          const left = i % 2 === 0;
          return (
            <ellipse
              key={i}
              cx={left ? 36 : 64}
              cy={y}
              rx="14"
              ry="5"
              transform={`rotate(${left ? -28 : 28} ${left ? 36 : 64} ${y})`}
              {...props}
            />
          );
        })}
      </svg>
    );
  }

  if (kind === "fern") {
    // taller, denser
    return (
      <svg {...svgProps} viewBox="0 0 100 140">
        <line x1="50" y1="6" x2="50" y2="134" {...props} />
        {Array.from({ length: 9 }).map((_, i) => {
          const y = 16 + i * 14;
          const len = 24 - i * 1.4;
          const left = i % 2 === 0;
          return (
            <ellipse
              key={i}
              cx={left ? 50 - len * 0.5 : 50 + len * 0.5}
              cy={y}
              rx={len * 0.55}
              ry="4"
              transform={`rotate(${left ? -34 : 34} ${left ? 50 - len * 0.5 : 50 + len * 0.5} ${y})`}
              {...props}
            />
          );
        })}
      </svg>
    );
  }

  if (kind === "leaf") {
    return (
      <svg {...svgProps}>
        <ellipse cx="50" cy="50" rx="34" ry="14" transform="rotate(-30 50 50)" {...props} />
        <line x1="22" y1="68" x2="78" y2="32" {...props} />
      </svg>
    );
  }

  if (kind === "seedhead") {
    // a dandelion-like sun
    return (
      <svg {...svgProps}>
        <circle cx="50" cy="50" r="6" {...props} />
        {Array.from({ length: 16 }).map((_, i) => {
          const a = (i / 16) * Math.PI * 2;
          const x1 = 50 + Math.cos(a) * 12;
          const y1 = 50 + Math.sin(a) * 12;
          const x2 = 50 + Math.cos(a) * 30;
          const y2 = 50 + Math.sin(a) * 30;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} {...props} />;
        })}
        {Array.from({ length: 16 }).map((_, i) => {
          const a = (i / 16) * Math.PI * 2;
          const x = 50 + Math.cos(a) * 34;
          const y = 50 + Math.sin(a) * 34;
          return <circle key={i} cx={x} cy={y} r="1.2" fill="currentColor" stroke="none" />;
        })}
      </svg>
    );
  }

  if (kind === "sun") {
    return (
      <svg {...svgProps}>
        <circle cx="50" cy="50" r="18" {...props} />
        {Array.from({ length: 12 }).map((_, i) => {
          const a = (i / 12) * Math.PI * 2;
          const x1 = 50 + Math.cos(a) * 24;
          const y1 = 50 + Math.sin(a) * 24;
          const x2 = 50 + Math.cos(a) * 36;
          const y2 = 50 + Math.sin(a) * 36;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} {...props} />;
        })}
      </svg>
    );
  }

  if (kind === "flower") {
    // 6 petals + center
    return (
      <svg {...svgProps}>
        {Array.from({ length: 6 }).map((_, i) => {
          const a = (i / 6) * Math.PI * 2;
          const cx = 50 + Math.cos(a) * 16;
          const cy = 50 + Math.sin(a) * 16;
          const deg = (a * 180) / Math.PI + 90;
          return (
            <ellipse key={i} cx={cx} cy={cy} rx="6" ry="14" transform={`rotate(${deg} ${cx} ${cy})`} {...props} />
          );
        })}
        <circle cx="50" cy="50" r="6" {...props} />
        <circle cx="50" cy="50" r="2" fill="currentColor" stroke="none" />
      </svg>
    );
  }

  if (kind === "wave") {
    // hand-drawn-looking wave/horizon
    return (
      <svg {...svgProps} viewBox="0 0 200 40">
        <path
          d="M2 20 Q 20 6, 38 20 T 74 20 T 110 20 T 146 20 T 182 20 T 218 20"
          {...props}
        />
      </svg>
    );
  }

  if (kind === "asterisk") {
    return (
      <svg {...svgProps}>
        {Array.from({ length: 6 }).map((_, i) => {
          const a = (i / 6) * Math.PI * 2;
          const x = 50 + Math.cos(a) * 30;
          const y = 50 + Math.sin(a) * 30;
          return <line key={i} x1="50" y1="50" x2={x} y2={y} {...props} />;
        })}
      </svg>
    );
  }

  if (kind === "berries") {
    return (
      <svg {...svgProps}>
        <line x1="50" y1="10" x2="50" y2="92" {...props} />
        <ellipse cx="34" cy="32" rx="12" ry="5" transform="rotate(-30 34 32)" {...props} />
        <ellipse cx="66" cy="48" rx="12" ry="5" transform="rotate(30 66 48)" {...props} />
        <circle cx="36" cy="70" r="4" {...props} />
        <circle cx="48" cy="78" r="4" {...props} />
        <circle cx="60" cy="72" r="4" {...props} />
        <circle cx="52" cy="62" r="3" {...props} />
      </svg>
    );
  }

  // dot grid as fallback
  return (
    <svg {...svgProps}>
      {Array.from({ length: 5 }).map((_, r) =>
        Array.from({ length: 5 }).map((_, c) => (
          <circle key={r + "-" + c} cx={20 + c * 15} cy={20 + r * 15} r="1.4" fill="currentColor" stroke="none" />
        ))
      )}
    </svg>
  );
};

window.Botanical = Botanical;