// Dossier v2 — Hero schematic
// MBSE artifact flow: Mission Need → Requirements → System Model (SysML) →
// Architecture Views + V&V Evidence → Navy Engineering & Certification Package.
// Canvas extended to 320×440 to give text and connectors breathing room.

const HeroSchematic = () => (
  <svg viewBox="0 0 320 460" preserveAspectRatio="xMidYMid meet">
    <defs>
      <marker id="dv2arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M0,0 L10,5 L0,10 z" fill="var(--signal)" />
      </marker>
      <pattern id="dv2dot" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
        <circle cx="1" cy="1" r="0.5" fill="var(--line-strong)" />
      </pattern>
    </defs>

    {/* background dot grid */}
    <rect x="0" y="0" width="320" height="460" fill="url(#dv2dot)" opacity="0.5" />

    {/* boundary frame */}
    <rect x="6" y="6" width="308" height="448" fill="none" stroke="var(--line-strong)" strokeWidth="1" strokeDasharray="3 3" />
    <text x="14" y="20" fontSize="8" fill="var(--dim)" letterSpacing="1.5" fontFamily="JetBrains Mono, monospace">MBSE ARTIFACT FLOW</text>
    <text x="306" y="20" fontSize="8" fill="var(--signal)" letterSpacing="1.5" textAnchor="end" fontFamily="JetBrains Mono, monospace">SYSML</text>

    {/* 1 · Mission need (input) — y 36→80 */}
    <g className="fade-anim">
      <rect x="16" y="36" width="288" height="44" fill="var(--paper-2)" stroke="var(--line-strong)" />
      <text x="26" y="54" fontSize="8" fill="var(--dim)" letterSpacing="2" fontFamily="JetBrains Mono, monospace">«INPUT»</text>
      <text x="26" y="70" fontSize="10.5" fill="var(--ink)" fontFamily="Space Grotesk, sans-serif" fontWeight="500">Mission Need · Stakeholder Concerns</text>
    </g>

    {/* 2 · Requirements — y 100→144 */}
    <g className="fade-anim f2">
      <rect x="16" y="100" width="288" height="44" fill="var(--paper)" stroke="var(--line-strong)" />
      <text x="26" y="118" fontSize="8" fill="var(--signal)" letterSpacing="2" fontFamily="JetBrains Mono, monospace">«REQUIREMENTS»</text>
      <text x="26" y="134" fontSize="10.5" fill="var(--ink)" fontFamily="Space Grotesk, sans-serif" fontWeight="500">Capture · Allocate · Trace</text>
    </g>

    {/* 3 · System Model — central block — y 164→260 */}
    <g className="fade-anim f2">
      <rect x="16" y="164" width="288" height="96" fill="var(--bg)" stroke="var(--signal)" strokeWidth="1.2" />
      <text x="26" y="182" fontSize="8" fill="var(--signal)" letterSpacing="2" fontFamily="JetBrains Mono, monospace">«SYSTEM MODEL — SYSML»</text>
      <text x="26" y="204" fontSize="12.5" fill="var(--ink)" fontFamily="Space Grotesk, sans-serif" fontWeight="500">Architecture · Behavior · Structure</text>
      <line x1="26" y1="216" x2="294" y2="216" stroke="var(--line)" />
      <text x="26" y="232" fontSize="9" fill="var(--dim-2)" fontFamily="Space Grotesk, sans-serif">+ requirements traced to elements</text>
      <text x="26" y="246" fontSize="9" fill="var(--dim-2)" fontFamily="Space Grotesk, sans-serif">+ verification cases as model items</text>
      {/* ports */}
      <rect x="12" y="190" width="8" height="8" fill="var(--signal)" />
      <rect x="300" y="190" width="8" height="8" fill="var(--amber)" />
    </g>

    {/* 4 · Architecture Views (left) + V&V Evidence (right) — y 296→372 */}
    <g className="fade-anim f3">
      <rect x="16" y="296" width="140" height="76" fill="var(--paper)" stroke="var(--line-strong)" />
      <text x="26" y="314" fontSize="8" fill="var(--signal)" letterSpacing="2" fontFamily="JetBrains Mono, monospace">«ARCH VIEWS»</text>
      <text x="26" y="335" fontSize="11" fill="var(--ink)" fontFamily="Space Grotesk, sans-serif" fontWeight="500">Architecture</text>
      <text x="26" y="352" fontSize="9" fill="var(--dim-2)" fontFamily="Space Grotesk, sans-serif">operational · resources</text>
      <text x="26" y="365" fontSize="9" fill="var(--dim-2)" fontFamily="Space Grotesk, sans-serif">security views</text>

      <rect x="164" y="296" width="140" height="76" fill="var(--paper)" stroke="var(--line-strong)" />
      <text x="174" y="314" fontSize="8" fill="var(--amber)" letterSpacing="2" fontFamily="JetBrains Mono, monospace">«V&V EVIDENCE»</text>
      <text x="174" y="335" fontSize="11" fill="var(--ink)" fontFamily="Space Grotesk, sans-serif" fontWeight="500">Verification</text>
      <text x="174" y="352" fontSize="9" fill="var(--dim-2)" fontFamily="Space Grotesk, sans-serif">test results</text>
      <text x="174" y="365" fontSize="9" fill="var(--dim-2)" fontFamily="Space Grotesk, sans-serif">trace matrix · coverage</text>
    </g>

    {/* 5 · Certification package (output) — y 408→448 */}
    <g className="fade-anim f3">
      <rect x="16" y="408" width="288" height="40" fill="var(--paper-warm)" stroke="var(--amber)" strokeDasharray="3 2" />
      <text x="26" y="426" fontSize="8" fill="var(--amber)" letterSpacing="2" fontFamily="JetBrains Mono, monospace">«OUTPUT»</text>
      <text x="26" y="442" fontSize="10.5" fill="var(--ink)" fontFamily="Space Grotesk, sans-serif" fontWeight="500">Architecture &amp; Engineering Artifacts</text>
    </g>

    {/* connectors — top-down orthogonal routing with breathing room.
        Merge legs into the central trunk are drawn WITHOUT arrowheads;
        the trunk itself terminates into the OUTPUT block with a single arrow. */}
    <g fill="none" stroke="var(--signal)" strokeWidth="1" className="stroke-anim">
      {/* input → requirements */}
      <path d="M160 80 L160 100" markerEnd="url(#dv2arr)" />
      {/* requirements → system model */}
      <path d="M160 144 L160 164" markerEnd="url(#dv2arr)" />
      {/* system model → architecture views (split left) */}
      <path d="M160 260 L160 278 L86 278 L86 296" markerEnd="url(#dv2arr)" />
      {/* system model → v&v evidence (split right) */}
      <path d="M160 260 L160 278 L234 278 L234 296" markerEnd="url(#dv2arr)" />
      {/* architecture views → trunk (no arrow — feeds into trunk) */}
      <path d="M86 372 L86 392 L160 392" />
      {/* v&v evidence → trunk (no arrow — feeds into trunk) */}
      <path d="M234 372 L234 392 L160 392" />
      {/* trunk → certification (single terminating arrow) */}
      <path d="M160 392 L160 408" markerEnd="url(#dv2arr)" />
    </g>
  </svg>
);

window.HeroSchematic = HeroSchematic;
