interface HeroGeometricProps {
  className?: string
}

export default function HeroGeometric({ className }: HeroGeometricProps) {
  // Arc center — pushed further right and scaled down
  const cx = 760
  const cy = 400
  const R = 180 // Main radius — compact, not dominating

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 1000 800"
      preserveAspectRatio="xMidYMid slice"
      aria-hidden="true"
      className={className}
      style={{
        position: 'absolute',
        inset: 0,
        width: '100%',
        height: '100%',
        pointerEvents: 'none',
      }}
    >
      {/* ━━━ BACKGROUND: Faint structural grid ━━━ */}
      <g data-layer="background" opacity="0.85">
        {/* Horizontal datum lines */}
        <line x1="0" y1="200" x2="1000" y2="200" stroke="#1C2B3A" strokeOpacity="0.09" strokeWidth="0.5" strokeDasharray="8 24" />
        <line x1="0" y1="420" x2="1000" y2="420" stroke="#1C2B3A" strokeOpacity="0.07" strokeWidth="0.5" strokeDasharray="6 20" />
        <line x1="0" y1="640" x2="1000" y2="640" stroke="#1C2B3A" strokeOpacity="0.09" strokeWidth="0.5" strokeDasharray="8 24" />

        {/* Vertical datum lines */}
        <line x1="500" y1="0" x2="500" y2="800" stroke="#1C2B3A" strokeOpacity="0.07" strokeWidth="0.5" strokeDasharray="6 20" />
        <line x1="680" y1="0" x2="680" y2="800" stroke="#1C2B3A" strokeOpacity="0.07" strokeWidth="0.5" strokeDasharray="4 18" />
      </g>

      {/* ━━━ MIDGROUND: The main arc composition ━━━ */}
      <g data-layer="midground">
        {/* ── Main circle — the dominant visual element ── */}
        <circle
          cx={cx} cy={cy} r={R}
          fill="none"
          stroke="#5BA4D9"
          strokeOpacity="0.2"
          strokeWidth="1"
        />

        {/* Inner concentric ring */}
        <circle
          cx={cx} cy={cy} r={R * 0.65}
          fill="none"
          stroke="#5BA4D9"
          strokeOpacity="0.12"
          strokeWidth="0.75"
          strokeDasharray="4 12"
        />

        {/* Outer concentric ring — larger, fainter */}
        <circle
          cx={cx} cy={cy} r={R * 1.35}
          fill="none"
          stroke="#1C2B3A"
          strokeOpacity="0.08"
          strokeWidth="0.5"
          strokeDasharray="3 16"
        />

        {/* ── Radius lines from center — architectural annotation ── */}
        {/* Vertical radius */}
        <line
          x1={cx} y1={cy} x2={cx} y2={cy - R}
          stroke="#5BA4D9" strokeOpacity="0.18" strokeWidth="0.75"
        />
        {/* Top tick mark */}
        <line
          x1={cx - 8} y1={cy - R} x2={cx + 8} y2={cy - R}
          stroke="#5BA4D9" strokeOpacity="0.25" strokeWidth="0.75"
        />

        {/* Diagonal radius — 45deg upper-right */}
        <line
          x1={cx} y1={cy}
          x2={cx + R * 0.707} y2={cy - R * 0.707}
          stroke="#1C2B3A" strokeOpacity="0.13" strokeWidth="0.5"
          strokeDasharray="4 8"
        />

        {/* Horizontal radius — right */}
        <line
          x1={cx} y1={cy} x2={cx + R} y2={cy}
          stroke="#5BA4D9" strokeOpacity="0.14" strokeWidth="0.5"
        />
        {/* Right tick */}
        <line
          x1={cx + R} y1={cy - 8} x2={cx + R} y2={cy + 8}
          stroke="#5BA4D9" strokeOpacity="0.22" strokeWidth="0.75"
        />

        {/* ── Center crosshair ── */}
        <line x1={cx - 12} y1={cy} x2={cx + 12} y2={cy} stroke="#5BA4D9" strokeOpacity="0.3" strokeWidth="0.75" />
        <line x1={cx} y1={cy - 12} x2={cx} y2={cy + 12} stroke="#5BA4D9" strokeOpacity="0.3" strokeWidth="0.75" />
        <circle cx={cx} cy={cy} r="2.5" fill="#5BA4D9" fillOpacity="0.25" />

        {/* ── Angle arc at center — 90deg sweep ── */}
        <path
          d={`M ${cx} ${cy - 30} A 30 30 0 0 1 ${cx + 30} ${cy}`}
          fill="none"
          stroke="#5BA4D9"
          strokeOpacity="0.2"
          strokeWidth="0.75"
        />

        {/* ── Dimension annotation — horizontal, above circle ── */}
        <line
          x1={cx - R} y1={cy - R - 30}
          x2={cx + R} y2={cy - R - 30}
          stroke="#1C2B3A" strokeOpacity="0.15" strokeWidth="0.5"
        />
        {/* End ticks */}
        <line x1={cx - R} y1={cy - R - 38} x2={cx - R} y2={cy - R - 22} stroke="#1C2B3A" strokeOpacity="0.18" strokeWidth="0.75" />
        <line x1={cx + R} y1={cy - R - 38} x2={cx + R} y2={cy - R - 22} stroke="#1C2B3A" strokeOpacity="0.18" strokeWidth="0.75" />
        {/* Label stub */}
        <rect x={cx - 18} y={cy - R - 37} width="36" height="7" rx="1" fill="#5BA4D9" fillOpacity="0.07" />

        {/* ── Vertical dimension — right side ── */}
        <line
          x1={cx + R + 30} y1={cy - R}
          x2={cx + R + 30} y2={cy + R}
          stroke="#1C2B3A" strokeOpacity="0.13" strokeWidth="0.5"
          strokeDasharray="2 8"
        />
        <line x1={cx + R + 22} y1={cy - R} x2={cx + R + 38} y2={cy - R} stroke="#1C2B3A" strokeOpacity="0.16" strokeWidth="0.75" />
        <line x1={cx + R + 22} y1={cy + R} x2={cx + R + 38} y2={cy + R} stroke="#1C2B3A" strokeOpacity="0.16" strokeWidth="0.75" />

        {/* Subtle fill — atmospheric glow behind main circle */}
        <circle cx={cx} cy={cy} r={R * 0.8} fill="#5BA4D9" fillOpacity="0.035" />
      </g>

      {/* ━━━ FOREGROUND: Crisp detail elements ━━━ */}
      <g data-layer="foreground">
        {/* ── Corner brackets — architectural framing ── */}
        {/* Top-right */}
        <path d="M 940 40 L 970 40 L 970 70" fill="none" stroke="#1C2B3A" strokeOpacity="0.25" strokeWidth="1" />
        {/* Bottom-right */}
        <path d="M 940 760 L 970 760 L 970 730" fill="none" stroke="#1C2B3A" strokeOpacity="0.18" strokeWidth="0.75" />
        {/* Top inner */}
        <path d="M 560 80 L 590 80" fill="none" stroke="#1C2B3A" strokeOpacity="0.14" strokeWidth="0.75" />
        <path d="M 560 80 L 560 110" fill="none" stroke="#1C2B3A" strokeOpacity="0.14" strokeWidth="0.75" />

        {/* ── Tick marks around the main circle — spaced at 30deg intervals ── */}
        {[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map((deg) => {
          const rad = (deg * Math.PI) / 180
          const x = cx + R * Math.cos(rad)
          const y = cy + R * Math.sin(rad)
          const nx = Math.cos(rad)
          const ny = Math.sin(rad)
          return (
            <line
              key={`tick-${deg}`}
              x1={x - nx * 6} y1={y - ny * 6}
              x2={x + nx * 6} y2={y + ny * 6}
              stroke="#5BA4D9"
              strokeOpacity="0.2"
              strokeWidth="0.75"
            />
          )
        })}

        {/* ── Small precision arc — upper right ── */}
        <path
          d={`M ${cx + 60} ${cy - R + 40} A 50 50 0 0 1 ${cx + 110} ${cy - R + 40}`}
          fill="none"
          stroke="#5BA4D9"
          strokeOpacity="0.25"
          strokeWidth="0.75"
        />

        {/* ── Dot grid cluster — lower right quadrant ── */}
        {[0, 1, 2, 3, 4, 5].map((col) =>
          [0, 1, 2, 3, 4].map((row) => (
            <circle
              key={`dot-${col}-${row}`}
              cx={780 + col * 28}
              cy={560 + row * 28}
              r="1"
              fill="#1C2B3A"
              fillOpacity="0.13"
            />
          ))
        )}

        {/* ── Scattered accent dots ── */}
        <circle cx={cx + 140} cy={cy - 80} r="2" fill="#5BA4D9" fillOpacity="0.2" />
        <circle cx={cx - 120} cy={cy + 100} r="1.5" fill="#5BA4D9" fillOpacity="0.15" />
        <circle cx={cx + 200} cy={cy + 150} r="1.5" fill="#1C2B3A" fillOpacity="0.13" />

        {/* ── Sparse left-side balance elements ── */}
        <line x1="60" y1="350" x2="180" y2="350" stroke="#1C2B3A" strokeOpacity="0.07" strokeWidth="0.5" strokeDasharray="4 16" />
        <line x1="100" y1="500" x2="100" y2="530" stroke="#1C2B3A" strokeOpacity="0.09" strokeWidth="0.5" />
        <line x1="88" y1="515" x2="112" y2="515" stroke="#1C2B3A" strokeOpacity="0.09" strokeWidth="0.5" />
      </g>
    </svg>
  )
}