export function GeometryDemo() {
  const w = 400;
  const h = 300;
  const cx = w / 2;
  const cy = h / 2;

  // Angled lines from center at 15, 30, 45, 60, 75 degrees
  const angles = [15, 30, 45, 60, 75];
  const lineLen = 120;

  return (
    <section>
      <h2 class="text-xl font-bold text-secondary font-display hh-divider-glow">
        Geometry & Anti-Aliasing
      </h2>

      <svg
        width={w}
        height={h}
        viewBox={`0 0 ${w} ${h}`}
        class="bg-surface border border-border"
        shape-rendering="geometricPrecision"
      >
        {/* Diagonal line corner-to-corner (most visible AA test) */}
        <line
          x1="0" y1="0" x2={w} y2={h}
          stroke="var(--hh-color-secondary)" stroke-width="1"
        />

        {/* Bezier curve */}
        <path
          d={`M 20 ${h - 40} Q ${cx} 20 ${w - 20} ${h - 40}`}
          fill="none" stroke="var(--hh-color-secondary)" stroke-width="1"
        />

        {/* Circle with thin stroke */}
        <circle
          cx={cx} cy={cy} r="60"
          fill="none" stroke="var(--hh-color-secondary)" stroke-width="1"
        />

        {/* Small circle cluster (precision rendering test) */}
        {[0, 1, 2, 3, 4].map((i) => (
          <circle
            cx={50 + i * 18} cy="30"
            r={4 + i}
            fill="none" stroke="var(--hh-color-secondary)" stroke-width="1"
          />
        ))}

        {/* Angled lines at 15, 30, 45, 60, 75 degrees */}
        {angles.map((deg) => {
          const rad = (deg * Math.PI) / 180;
          const x2 = cx + lineLen * Math.cos(rad);
          const y2 = cy - lineLen * Math.sin(rad);
          return (
            <line
              x1={cx} y1={cy} x2={x2} y2={y2}
              stroke="var(--hh-color-secondary)" stroke-width="1" stroke-opacity="0.6"
            />
          );
        })}

        {/* Labels */}
        <text x="10" y={h - 10} fill="var(--hh-color-text-dim)" font-size="10" style={{ "font-family": "var(--hh-font-mono)" }}>
          diagonal / bezier / circle / cluster / angled lines
        </text>
      </svg>
    </section>
  );
}