/* blueyetutor — Dandelion logomark.
 *
 * Inspired by the Blueye brand logo: a stylized dandelion (pappus cluster)
 * with a thin stem, radiating spokes ending in tiny "tufted" tips, and
 * 2-3 detached seeds drifting to the upper right. Rendered as currentColor
 * stroke so it can be tinted (white on navy, navy on white, etc).
 */

function Dandelion({ size = 80, className }) {
  const cx = 50, cy = 42;
  // primary pappus: 14 main radial spokes
  const N = 14;
  const spokes = [];
  for (let i = 0; i < N; i++) {
    const a = (i / N) * Math.PI * 2 - Math.PI / 2;  // start pointing up
    const r1 = 4;
    const r2 = 22;
    const x1 = cx + Math.cos(a) * r1, y1 = cy + Math.sin(a) * r1;
    const x2 = cx + Math.cos(a) * r2, y2 = cy + Math.sin(a) * r2;
    // tiny tuft at the end — 3 short forks
    const tipForks = [];
    const tipLen = 3.6;
    for (const t of [-0.32, 0, 0.32]) {
      const fx = x2 + Math.cos(a + t) * tipLen;
      const fy = y2 + Math.sin(a + t) * tipLen;
      tipForks.push({ x1: x2, y1: y2, x2: fx, y2: fy });
    }
    spokes.push({ x1, y1, x2, y2, tipForks });
  }

  // detached seeds drifting to upper right
  const seeds = [
    { x: 78, y: 18, scale: 0.55, rot: -22 },
    { x: 88, y: 30, scale: 0.42, rot: 12 },
    { x: 72, y: 8,  scale: 0.35, rot: 4  },
  ];

  return (
    <svg
      className={"dandelion-mark " + (className || "")}
      style={{ width: size, height: size }}
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <g
        stroke="currentColor"
        strokeWidth="1.4"
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
      >
        {/* stem */}
        <line x1={cx} y1={cy + 4} x2={cx} y2="92" />
        {/* center seed */}
        <circle cx={cx} cy={cy} r="2.6" fill="currentColor" />
        {/* spokes + tufted tips */}
        {spokes.map((s, i) => (
          <g key={i}>
            <line x1={s.x1} y1={s.y1} x2={s.x2} y2={s.y2} />
            {s.tipForks.map((f, j) => (
              <line key={j} x1={f.x1} y1={f.y1} x2={f.x2} y2={f.y2} strokeWidth="1.1" />
            ))}
          </g>
        ))}
        {/* detached drifting seeds */}
        {seeds.map((s, i) => (
          <g key={i} transform={`translate(${s.x} ${s.y}) rotate(${s.rot}) scale(${s.scale})`}>
            <circle cx="0" cy="0" r="1.4" fill="currentColor" />
            {[0, 60, 120, 180, 240, 300].map(deg => {
              const a = deg * Math.PI / 180;
              return (
                <line key={deg}
                  x1={Math.cos(a) * 1.5} y1={Math.sin(a) * 1.5}
                  x2={Math.cos(a) * 6}   y2={Math.sin(a) * 6}
                  strokeWidth="1.2"
                />
              );
            })}
          </g>
        ))}
      </g>
    </svg>
  );
}

Object.assign(window, { Dandelion });