/* Mimino M1 — VTOL hybrid quadplane, plan-view technical drawing.
   Reference: Quantum-Systems Trinity F90+ (twin-boom, 4 lift motors, rear pusher, V-tail).
   Pen-and-ink draws on mount; rear pusher propeller spins continuously. */

const Schematic = () => {
  const [drawn, setDrawn] = React.useState(false);
  React.useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const t = setTimeout(() => setDrawn(true), reduce ? 0 : 80);
    return () => clearTimeout(t);
  }, []);

  const ink = "var(--color-ink)";
  const faint = "var(--color-ink-3)";

  const draw = (delay, dur = 0.9, sw = 1.05) => ({
    pathLength: "1",
    fill: "none",
    stroke: ink,
    strokeWidth: sw,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    style: {
      strokeDasharray: 1,
      strokeDashoffset: drawn ? 0 : 1,
      transition: `stroke-dashoffset ${dur}s cubic-bezier(0.22,0.61,0.36,1) ${delay}s`,
    }
  });

  const fade = (delay, dur = 0.6) => ({
    style: { opacity: drawn ? 1 : 0, transition: `opacity ${dur}s ease-out ${delay}s` }
  });

  /* ──────────────────────────────────────────────────────
     viewBox 1200×620.  Centerline y=310.
     Trinity-F90+-like layout:
       • Wide wingspan (≈ x:120→x:1080)
       • Compact central fuselage (x:480→x:740)
       • Twin booms parallel through wings (y:200, y:420)
       • 4 lift motors at boom ends (fore + aft)
       • Rear pusher prop on fuselage tail
       • Inverted-V tail at boom rear ends
     ────────────────────────────────────────────────────── */

  return (
    <svg viewBox="0 0 1200 620" width="100%" role="img" aria-labelledby="schT schD"
         style={{ display: "block", overflow: "visible" }}>
      <title id="schT">Mimino M1 — VTOL hybrid unmanned aerial system, plan view</title>
      <desc  id="schD">Top-down technical drawing modelled on the Trinity F90+ class. Compact central fuselage, twin parallel booms carrying four vertical-lift motors, rear-mounted pusher propeller, and inverted-V tail surfaces.</desc>

      {/* Centerline + symmetry axis */}
      <line x1="80" x2="1130" y1="310" y2="310"
            stroke={faint} strokeWidth="0.5" strokeDasharray="3 6"
            {...fade(0.05, 0.5)} />
      <line x1="610" x2="610" y1="100" y2="540"
            stroke={faint} strokeWidth="0.5" strokeDasharray="3 6"
            {...fade(0.05, 0.5)} />

      {/* ── Wing — wide, mid-mounted, slight taper, slight sweep ── */}
      <path d="M 480 290
               C 380 286 240 282 130 280
               C 122 280 118 286 122 294
               L 130 308
               L 130 312
               L 122 326
               C 118 334 122 340 130 340
               C 240 338 380 334 480 330
               L 480 290 Z"
            {...draw(0.30, 1.2)} />
      <path d="M 740 290
               C 840 286 980 282 1090 280
               C 1098 280 1102 286 1098 294
               L 1090 308
               L 1090 312
               L 1098 326
               C 1102 334 1098 340 1090 340
               C 980 338 840 334 740 330
               L 740 290 Z"
            {...draw(0.30, 1.2)} />

      {/* Wing rib lines */}
      {[
        [160, 0.95], [200, 1.0], [260, 1.05], [320, 1.10], [400, 1.15],
        [820, 1.10], [880, 1.05], [940, 1.0], [980, 0.95], [1020, 0.92]
      ].map(([x, t], i) => (
        <line key={"rib-" + i} x1={x} x2={x} y1="290" y2="330"
              {...draw(t, 0.3, 0.4)} />
      ))}

      {/* Aileron split (outer trailing edge, both sides) */}
      <line x1="160" y1="332" x2="320" y2="335" {...draw(1.30, 0.4)} strokeWidth="0.7" />
      <line x1="900" y1="335" x2="1060" y2="332" {...draw(1.30, 0.4)} strokeWidth="0.7" />
      <line x1="320" y1="335" x2="320" y2="328" {...draw(1.40, 0.2)} strokeWidth="0.6" />
      <line x1="900" y1="335" x2="900" y2="328" {...draw(1.40, 0.2)} strokeWidth="0.6" />

      {/* Flap split (inner trailing edge) */}
      <line x1="345" y1="335" x2="478" y2="332" {...draw(1.35, 0.4)} strokeWidth="0.6" />
      <line x1="742" y1="332" x2="875" y2="335" {...draw(1.35, 0.4)} strokeWidth="0.6" />

      {/* ── Central fuselage (compact, fat) ── */}
      <path d="M 478 274
               C 478 266 488 258 504 256
               L 700 256
               C 718 256 730 264 734 274
               L 740 290
               L 745 310
               L 740 330
               L 734 346
               C 730 356 718 364 700 364
               L 504 364
               C 488 362 478 354 478 346
               L 472 330
               C 470 320 470 300 472 290 Z"
            {...draw(0.55, 1.2)} />

      {/* Nose payload bay (front of fuselage) */}
      <rect x="498" y="278" width="60" height="64" rx="3" {...draw(1.00, 0.6)} strokeWidth="0.7" />

      {/* GNSS dome / antenna mast (top of fuselage, mid) */}
      <ellipse cx="610" cy="310" rx="14" ry="9" {...draw(1.05, 0.5)} strokeWidth="0.7" />
      <line x1="596" y1="310" x2="624" y2="310" {...draw(1.10, 0.3)} strokeWidth="0.5" />

      {/* Equipment bay seam */}
      <line x1="640" y1="262" x2="640" y2="358" {...draw(1.15, 0.4)} strokeWidth="0.5" />
      <line x1="570" y1="262" x2="570" y2="358" {...draw(1.15, 0.4)} strokeWidth="0.5" />

      {/* Underside gimbal pod */}
      <ellipse cx="528" cy="350" rx="14" ry="6" {...draw(1.20, 0.5)} strokeWidth="0.7" />

      {/* "MIMINO · M1" stencil */}
      <text x="610" y="335" textAnchor="middle"
            fontFamily="var(--font-mono)" fontSize="7" letterSpacing="0.20em"
            fill={faint} {...fade(2.0)}>MIMINO · M1</text>

      {/* ── Rear pusher propeller (after fuselage tail) ── */}
      {/* tail cone */}
      <path d="M 734 274 L 770 290 L 778 308 L 778 312 L 770 330 L 734 346"
            {...draw(0.75, 0.5)} />
      {/* prop hub + spinning blades */}
      <g style={{ transformOrigin: "788px 310px" }} className={drawn ? "mr-prop-spin" : ""}>
        <ellipse cx="788" cy="310" rx="3.5" ry="42"
                 {...draw(1.55, 0.4, 0.8)} />
        <ellipse cx="788" cy="310" rx="3.5" ry="42"
                 transform="rotate(60 788 310)"
                 {...draw(1.62, 0.4, 0.8)} />
        <ellipse cx="788" cy="310" rx="3.5" ry="42"
                 transform="rotate(120 788 310)"
                 {...draw(1.69, 0.4, 0.8)} />
        <circle cx="788" cy="310" r="4" fill={ink} stroke="none" {...fade(2.0)} />
      </g>

      {/* ── Twin booms (parallel rails, run fore+aft of wing) ── */}
      {[
        { y: 200, name: "boomU" },
        { y: 420, name: "boomD" },
      ].map(({ y }, i) => (
        <React.Fragment key={"boom-" + i}>
          {/* Boom body — long thin tube */}
          <path d={`M 200 ${y - 5} L 200 ${y + 5} L 1020 ${y + 5} L 1020 ${y - 5} Z`}
                {...draw(0.65 + i * 0.04, 1.0)} strokeWidth="0.9" />
          <line x1="200" y1={y} x2="1020" y2={y}
                stroke={faint} strokeWidth="0.4" strokeDasharray="2 4"
                {...fade(1.4, 0.4)} />
          {/* Boom-to-wing junction (where boom passes through wing) */}
          <rect x="420" y={y - 8} width="240" height="16"
                {...draw(0.95 + i * 0.04, 0.5)} strokeWidth="0.5" />
        </React.Fragment>
      ))}

      {/* ── 4 lift rotors (boom corners) ── */}
      {[
        { cx: 200, cy: 200, side: "FL" },
        { cx: 200, cy: 420, side: "RL" },
        { cx: 1020, cy: 200, side: "FR" },
        { cx: 1020, cy: 420, side: "RR" },
      ].map((p, i) => (
        <g key={"rotor-" + i}>
          {/* Motor housing */}
          <rect x={p.cx - 9} y={p.cy - 16} width="18" height="32"
                {...draw(1.10 + i * 0.05, 0.4)} strokeWidth="0.8" />
          {/* Rotor disc */}
          <circle cx={p.cx} cy={p.cy} r="58" {...draw(1.18 + i * 0.05, 0.8)} strokeWidth="0.9" />
          <circle cx={p.cx} cy={p.cy} r="4" fill={ink} stroke="none" {...fade(1.7)} />
          {/* Two angled blades */}
          <ellipse cx={p.cx} cy={p.cy} rx="56" ry="3.5"
                   transform={`rotate(${20 + i * 23} ${p.cx} ${p.cy})`}
                   {...draw(1.45 + i * 0.05, 0.5, 0.7)} />
          <ellipse cx={p.cx} cy={p.cy} rx="56" ry="3.5"
                   transform={`rotate(${20 + i * 23 + 90} ${p.cx} ${p.cy})`}
                   {...draw(1.55 + i * 0.05, 0.5, 0.7)} />
        </g>
      ))}

      {/* ── Inverted-V tail surfaces (at rear ends of booms, angled inward) ── */}
      {/* Top boom tail surface — V slants down toward centerline */}
      <path d="M 985 195 L 1055 175 L 1062 178 L 1062 222 L 1055 225 L 985 205 Z"
            {...draw(1.20, 0.6)} strokeWidth="0.8" />
      {/* Bottom boom tail surface */}
      <path d="M 985 425 L 1055 445 L 1062 442 L 1062 398 L 1055 395 L 985 415 Z"
            {...draw(1.25, 0.6)} strokeWidth="0.8" />
      {/* Ruddervator hinge lines */}
      <line x1="1055" y1="178" x2="1055" y2="222" {...draw(1.45, 0.3)} strokeWidth="0.5" />
      <line x1="1055" y1="442" x2="1055" y2="398" {...draw(1.45, 0.3)} strokeWidth="0.5" />

      {/* ── Annotations ── */}
      <g {...fade(2.1)} fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.10em" fill="var(--color-ink-2)">
        {/* Wingspan dim — top */}
        <line x1="124" y1="92" x2="1096" y2="92" stroke={faint} strokeWidth="0.5" />
        <line x1="124" y1="88" x2="124" y2="96" stroke={faint} strokeWidth="0.5" />
        <line x1="1096" y1="88" x2="1096" y2="96" stroke={faint} strokeWidth="0.5" />
        <text x="610" y="86" textAnchor="middle">SPAN · 2.40 M</text>

        {/* Length dim — bottom */}
        <line x1="498" y1="582" x2="800" y2="582" stroke={faint} strokeWidth="0.5" />
        <line x1="498" y1="578" x2="498" y2="586" stroke={faint} strokeWidth="0.5" />
        <line x1="800" y1="578" x2="800" y2="586" stroke={faint} strokeWidth="0.5" />
        <text x="649" y="576" textAnchor="middle">L · 1.20 M</text>

        {/* Boom length dim — sub */}
        <line x1="200" y1="138" x2="1020" y2="138" stroke={faint} strokeWidth="0.5" />
        <line x1="200" y1="134" x2="200" y2="142" stroke={faint} strokeWidth="0.5" />
        <line x1="1020" y1="134" x2="1020" y2="142" stroke={faint} strokeWidth="0.5" />
        <text x="610" y="132" textAnchor="middle">BOOM · 2.05 M</text>

        {/* Lift motor callouts */}
        <line x1="200" y1="262" x2="200" y2="282" stroke={faint} strokeWidth="0.5" />
        <line x1="200" y1="282" x2="120" y2="282" stroke={faint} strokeWidth="0.5" />
        <text x="116" y="285" textAnchor="end">LIFT · 18×6.5</text>

        {/* Pusher prop callout */}
        <line x1="788" y1="358" x2="788" y2="392" stroke={faint} strokeWidth="0.5" />
        <line x1="788" y1="392" x2="876" y2="392" stroke={faint} strokeWidth="0.5" />
        <text x="880" y="395">PUSHER · 18×11</text>

        {/* GNSS callout */}
        <line x1="610" y1="298" x2="610" y2="266" stroke={faint} strokeWidth="0.5" />
        <line x1="610" y1="266" x2="554" y2="246" stroke={faint} strokeWidth="0.5" />
        <text x="550" y="244" textAnchor="end">GNSS / RTK</text>

        {/* Gimbal callout */}
        <line x1="528" y1="356" x2="528" y2="392" stroke={faint} strokeWidth="0.5" />
        <line x1="528" y1="392" x2="440" y2="392" stroke={faint} strokeWidth="0.5" />
        <text x="436" y="395" textAnchor="end">EO/IR · 360°</text>

        {/* Aileron callout */}
        <line x1="240" y1="346" x2="240" y2="378" stroke={faint} strokeWidth="0.5" />
        <line x1="240" y1="378" x2="186" y2="378" stroke={faint} strokeWidth="0.5" />
        <text x="182" y="381" textAnchor="end">AILERON</text>

        {/* Flap callout */}
        <line x1="406" y1="346" x2="406" y2="378" stroke={faint} strokeWidth="0.5" />
        <line x1="406" y1="378" x2="468" y2="378" stroke={faint} strokeWidth="0.5" />
        <text x="472" y="381">FLAP</text>

        {/* V-tail callout */}
        <line x1="1058" y1="200" x2="1108" y2="186" stroke={faint} strokeWidth="0.5" />
        <text x="1112" y="189">V-TAIL</text>

        {/* Boom callout */}
        <line x1="610" y1="425" x2="610" y2="476" stroke={faint} strokeWidth="0.5" />
        <line x1="610" y1="476" x2="690" y2="476" stroke={faint} strokeWidth="0.5" />
        <text x="694" y="479">CARBON BOOM</text>

        {/* Plate identifier */}
        <text x="1140" y="608" textAnchor="end" fill={faint}>MM-1 · REV. 03 · PLAN VIEW · 1:20</text>
        <text x="60" y="608" fill={faint}>MIMINO ROBOTICS · TBILISI</text>
      </g>

      <style>{`
        @keyframes mr-prop-rot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .mr-prop-spin { animation: mr-prop-rot 4.5s linear infinite 2.4s; transform-box: fill-box; transform-origin: center; }
        @media (prefers-reduced-motion: reduce) { .mr-prop-spin { animation: none; } }
      `}</style>
    </svg>
  );
};

window.Schematic = Schematic;