/* drawing.jsx — CSS/SVG technical drawing of the bracket, with named
   annotation anchors the drafter fades on as the model "reads" the part.
   Anchors are %-positioned so they survive on user-dropped photos too. */

function BracketDrawing() {
  // viewBox 0..400 x 0..300
  return (
    <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" aria-label="Bracket drawing DWG-2024-0847">
      {/* sheet grid */}
      <defs>
        <pattern id="gr" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M20 0H0V20" fill="none" stroke="#F0EEEB" strokeWidth="1" />
        </pattern>
      </defs>
      <rect x="0" y="0" width="400" height="300" fill="#fff" />
      <rect x="0" y="0" width="400" height="300" fill="url(#gr)" />
      {/* title block */}
      <rect x="262" y="250" width="130" height="42" fill="#fff" stroke="#D9D6D1" strokeWidth="1" />
      <line x1="262" y1="264" x2="392" y2="264" stroke="#D9D6D1" strokeWidth="1" />
      <line x1="328" y1="250" x2="328" y2="292" stroke="#D9D6D1" strokeWidth="1" />
      <text x="268" y="261" fontFamily="'JetBrains Mono', monospace" fontSize="7" fill="#8D8D92">DWG-2024-0847</text>
      <text x="268" y="277" fontFamily="'JetBrains Mono', monospace" fontSize="6.5" fill="#1A1B25">REV C</text>
      <text x="334" y="277" fontFamily="'JetBrains Mono', monospace" fontSize="6.5" fill="#1A1B25">6061-T6</text>

      {/* bracket body — L-profile plate */}
      <g stroke="#1A1B25" strokeWidth="1.6" fill="#FBFAF9" strokeLinejoin="round">
        <path d="M70 70 H300 V150 H140 V230 H70 Z" />
      </g>
      {/* inner relief line */}
      <path d="M82 82 H288 V138 H128 V218 H82 Z" fill="none" stroke="#C9C5C0" strokeWidth="1" strokeDasharray="3 3" />

      {/* 4x mounting holes */}
      {[[105,105],[265,105],[105,195],[160,105]].slice(0,4).map((p, i) => (
        <g key={i}>
          <circle cx={p[0]} cy={p[1]} r="7.5" fill="#fff" stroke="#1A1B25" strokeWidth="1.4" />
          <line x1={p[0]-11} y1={p[1]} x2={p[0]+11} y2={p[1]} stroke="#A77ACD" strokeWidth="0.8" />
          <line x1={p[0]} y1={p[1]-11} x2={p[0]} y2={p[1]+11} stroke="#A77ACD" strokeWidth="0.8" />
        </g>
      ))}

      {/* knurled boss bottom-left */}
      <circle cx="105" cy="205" r="15" fill="#FBFAF9" stroke="#1A1B25" strokeWidth="1.4" />
      <g stroke="#9A8FA8" strokeWidth="0.7">
        {Array.from({length:12}).map((_,i)=>{
          const a = (i/12)*Math.PI*2;
          return <line key={i} x1={105+Math.cos(a)*9} y1={205+Math.sin(a)*9} x2={105+Math.cos(a)*15} y2={205+Math.sin(a)*15} />;
        })}
      </g>

      {/* dimension lines */}
      <g stroke="#8D8D92" strokeWidth="0.8" fill="#8D8D92" fontFamily="'JetBrains Mono', monospace" fontSize="8">
        {/* width 88 */}
        <line x1="70" y1="56" x2="300" y2="56" />
        <line x1="70" y1="52" x2="70" y2="74" />
        <line x1="300" y1="52" x2="300" y2="74" />
        <rect x="170" y="49" width="30" height="12" fill="#fff" />
        <text x="176" y="58">88.0</text>
        {/* height 60 */}
        <line x1="312" y1="70" x2="312" y2="150" />
        <line x1="296" y1="70" x2="316" y2="70" />
        <line x1="296" y1="150" x2="316" y2="150" />
        <rect x="316" y="104" width="26" height="12" fill="#fff" />
        <text x="319" y="113">60.0</text>
        {/* 45 centre */}
        <line x1="105" y1="240" x2="160" y2="240" stroke="#A77ACD" />
        <line x1="105" y1="232" x2="105" y2="248" stroke="#A77ACD" />
        <line x1="160" y1="232" x2="160" y2="248" stroke="#A77ACD" />
        <rect x="118" y="245" width="28" height="12" fill="#fff" />
        <text x="121" y="254" fill="#A77ACD">45.0?</text>
      </g>
    </svg>
  );
}

function GenericDrawing() {
  return (
    <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" aria-label="Part drawing">
      <defs>
        <pattern id="gr2" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M20 0H0V20" fill="none" stroke="#F0EEEB" strokeWidth="1" />
        </pattern>
      </defs>
      <rect x="0" y="0" width="400" height="300" fill="#fff" />
      <rect x="0" y="0" width="400" height="300" fill="url(#gr2)" />
      <rect x="90" y="80" width="220" height="140" rx="6" fill="#FBFAF9" stroke="#1A1B25" strokeWidth="1.6" />
      {[[130,120],[270,120],[130,180],[270,180],[200,100],[200,200]].map((p,i)=>(
        <circle key={i} cx={p[0]} cy={p[1]} r="6.5" fill="#fff" stroke="#1A1B25" strokeWidth="1.3" />
      ))}
      <rect x="180" y="135" width="40" height="30" fill="#fff" stroke="#C9C5C0" strokeWidth="1" strokeDasharray="3 3" />
      <g stroke="#8D8D92" strokeWidth="0.8" fill="#8D8D92" fontFamily="'JetBrains Mono', monospace" fontSize="8">
        <line x1="90" y1="66" x2="310" y2="66" />
        <rect x="186" y="59" width="28" height="12" fill="#fff" /><text x="190" y="68">120.0</text>
      </g>
    </svg>
  );
}

// Anchors for the bracket — %-coords so they overlay photos too.
window.BRACKET_ANCHORS = [
  { x: 46, y: 18, tag: '88 × 60 plate', side: 'down' },
  { x: 26, y: 35, tag: '4× Ø6.0 → M6', side: 'left' },
  { x: 26, y: 68, tag: 'knurled boss', side: 'left' },
  { x: 34, y: 84, tag: '45.0 — tol?', side: 'down', warn: true }
];
window.GENERIC_ANCHORS = [
  { x: 50, y: 22, tag: 'profiled outer', side: 'down' },
  { x: 30, y: 40, tag: 'tapped holes', side: 'left' },
  { x: 50, y: 50, tag: 'faced pocket', side: 'down' }
];

Object.assign(window, { BracketDrawing, GenericDrawing });