// Reusable technical schema SVG components
const SchemaArchitecture = () => (
  <svg className="schema-svg" viewBox="0 0 1200 280" fill="none">
    <defs>
      <marker id="arr1" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
        <path d="M0,0 L6,4 L0,8" stroke="#0e0e0e" fill="none" strokeWidth="1" />
      </marker>
      <marker id="arr-blue" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
        <path d="M0,0 L6,4 L0,8" stroke="#4a6cf7" fill="none" strokeWidth="1" />
      </marker>
    </defs>

    {/* Client layer */}
    <g>
      <rect x="40" y="110" width="120" height="60" stroke="#0e0e0e" fill="none" />
      <text x="100" y="138" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="11" fill="#0e0e0e">CLIENT</text>
      <text x="100" y="154" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#6b665e">web · mobile</text>
    </g>

    {/* API gateway */}
    <g>
      <rect x="240" y="110" width="140" height="60" stroke="#4a6cf7" fill="rgba(74,108,247,0.06)" />
      <text x="310" y="138" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="11" fill="#4a6cf7">API GATEWAY</text>
      <text x="310" y="154" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#6b665e">auth · rate-limit</text>
    </g>

    {/* Domain services */}
    <g>
      <rect x="460" y="40" width="180" height="60" stroke="#0e0e0e" fill="none" />
      <text x="550" y="68" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="11" fill="#0e0e0e">DOMAIN: USERS</text>
      <text x="550" y="84" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#6b665e">hexagonal · ddd</text>
    </g>
    <g>
      <rect x="460" y="180" width="180" height="60" stroke="#0e0e0e" fill="none" />
      <text x="550" y="208" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="11" fill="#0e0e0e">DOMAIN: PROJECTS</text>
      <text x="550" y="224" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#6b665e">domain events</text>
    </g>

    {/* Event bus */}
    <g>
      <rect x="700" y="110" width="140" height="60" stroke="#4a6cf7" fill="rgba(74,108,247,0.06)" strokeDasharray="4 3"/>
      <text x="770" y="138" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="11" fill="#4a6cf7">EVENT BUS</text>
      <text x="770" y="154" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#6b665e">async messaging</text>
    </g>

    {/* Datastores */}
    <g>
      <ellipse cx="970" cy="60" rx="45" ry="14" stroke="#0e0e0e" fill="none" />
      <line x1="925" y1="60" x2="925" y2="90" stroke="#0e0e0e" />
      <line x1="1015" y1="60" x2="1015" y2="90" stroke="#0e0e0e" />
      <ellipse cx="970" cy="90" rx="45" ry="14" stroke="#0e0e0e" fill="#f6f3ee" />
      <text x="970" y="94" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="#0e0e0e">MongoDB</text>
    </g>
    <g>
      <ellipse cx="970" cy="170" rx="45" ry="14" stroke="#0e0e0e" fill="none" />
      <line x1="925" y1="170" x2="925" y2="200" stroke="#0e0e0e" />
      <line x1="1015" y1="170" x2="1015" y2="200" stroke="#0e0e0e" />
      <ellipse cx="970" cy="200" rx="45" ry="14" stroke="#0e0e0e" fill="#f6f3ee" />
      <text x="970" y="204" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="#0e0e0e">Postgres</text>
    </g>
    <g>
      <rect x="1080" y="110" width="80" height="60" stroke="#0e0e0e" fill="none" strokeDasharray="3 2" />
      <text x="1120" y="138" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="#0e0e0e">CACHE</text>
      <text x="1120" y="154" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#6b665e">redis</text>
    </g>

    {/* Connections */}
    <line x1="160" y1="140" x2="240" y2="140" stroke="#0e0e0e" strokeWidth="1" markerEnd="url(#arr1)" />
    <path d="M380 130 Q 420 130 460 70" stroke="#0e0e0e" fill="none" markerEnd="url(#arr1)" />
    <path d="M380 150 Q 420 150 460 210" stroke="#0e0e0e" fill="none" markerEnd="url(#arr1)" />
    <path d="M640 70 Q 670 70 700 130" stroke="#4a6cf7" fill="none" strokeDasharray="3 3" markerEnd="url(#arr-blue)" />
    <path d="M640 210 Q 670 210 700 150" stroke="#4a6cf7" fill="none" strokeDasharray="3 3" markerEnd="url(#arr-blue)" />
    <line x1="840" y1="125" x2="920" y2="80" stroke="#0e0e0e" markerEnd="url(#arr1)" />
    <line x1="840" y1="155" x2="920" y2="190" stroke="#0e0e0e" markerEnd="url(#arr1)" />
    <line x1="840" y1="140" x2="1080" y2="140" stroke="#0e0e0e" strokeDasharray="2 3" markerEnd="url(#arr1)" />

    {/* Animated pulse */}
    <circle r="3" fill="#4a6cf7">
      <animateMotion dur="3s" repeatCount="indefinite" path="M160 140 L240 140 L380 140 Q420 140 460 70" />
    </circle>
    <circle r="3" fill="#4a6cf7">
      <animateMotion dur="3.6s" repeatCount="indefinite" begin="0.6s" path="M160 140 L240 140 L380 140 Q420 140 460 210 L640 210 Q670 210 700 150 L840 150 L920 190" />
    </circle>
  </svg>
);

const SchemaAudit = () => (
  <svg className="schema-svg" viewBox="0 0 1200 220" fill="none">
    <defs>
      <marker id="arr2" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
        <path d="M0,0 L6,4 L0,8" stroke="#0e0e0e" fill="none" strokeWidth="1" />
      </marker>
    </defs>
    {[
      { x: 60, label: "QUERY", sub: "find({...})" },
      { x: 280, label: "INDEX", sub: "compound" },
      { x: 500, label: "SHARD", sub: "replica" },
      { x: 720, label: "AGGREGATE", sub: "$lookup" },
      { x: 940, label: "RESULT", sub: "12ms ↓" },
    ].map((b, i) => (
      <g key={i}>
        <rect x={b.x} y={80} width={140} height={60} stroke={i === 4 ? "#4a6cf7" : "#0e0e0e"} fill={i === 4 ? "rgba(74,108,247,0.06)" : "none"} />
        <text x={b.x + 70} y={108} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="11" fill={i === 4 ? "#4a6cf7" : "#0e0e0e"}>{b.label}</text>
        <text x={b.x + 70} y={124} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#6b665e">{b.sub}</text>
      </g>
    ))}
    {[200, 420, 640, 860].map((x, i) => (
      <line key={i} x1={x} y1={110} x2={x + 80} y2={110} stroke="#0e0e0e" markerEnd="url(#arr2)" />
    ))}
    <text x={130} y={62} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#6b665e" letterSpacing="2">ENTRY</text>
    <text x={1010} y={62} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#4a6cf7" letterSpacing="2">OPTIMIZED</text>
    <text x={130} y={170} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="#6b665e">~2400ms</text>
    <text x={1010} y={170} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="#0e0e0e">~12ms</text>
    <line x1="60" y1="190" x2="1080" y2="190" stroke="#4a6cf7" strokeDasharray="2 4" opacity="0.6" />
  </svg>
);

const SchemaMentor = () => (
  <svg className="schema-svg" viewBox="0 0 1200 220" fill="none">
    {/* Knowledge nodes */}
    <g fill="none" stroke="#0e0e0e">
      <circle cx="600" cy="110" r="40" stroke="#4a6cf7" strokeWidth="1.5" fill="rgba(74,108,247,0.06)" />
    </g>
    <text x="600" y="108" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="11" fill="#4a6cf7">MENTOR</text>
    <text x="600" y="122" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#6b665e">10y · NodeJS</text>

    {[
      { x: 200, y: 50, label: "JUNIOR" },
      { x: 200, y: 170, label: "JUNIOR" },
      { x: 1000, y: 50, label: "TEAM" },
      { x: 1000, y: 170, label: "TEAM" },
      { x: 100, y: 110, label: "DEV" },
      { x: 1100, y: 110, label: "LEAD" },
    ].map((n, i) => (
      <g key={i}>
        <circle cx={n.x} cy={n.y} r="22" stroke="#0e0e0e" fill="#f6f3ee" />
        <text x={n.x} y={n.y + 3} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#0e0e0e">{n.label}</text>
        <line x1={n.x} y1={n.y} x2="600" y2="110" stroke="#0e0e0e" strokeDasharray="2 4" opacity="0.4" />
      </g>
    ))}

    {/* Knowledge ring */}
    <g fontFamily="JetBrains Mono" fontSize="9" fill="#6b665e">
      <text x="600" y="40" textAnchor="middle">code review</text>
      <text x="600" y="195" textAnchor="middle">pair programming</text>
      <text x="380" y="115" textAnchor="middle">workshops</text>
      <text x="820" y="115" textAnchor="middle">architecture</text>
    </g>
  </svg>
);

Object.assign(window, { SchemaArchitecture, SchemaAudit, SchemaMentor });