export function ReactorSchematic() {
  const feedBoxes = [
    { y: 34, label: "Compressor" },
    { y: 88, label: "Heat exchanger" },
    { y: 142, label: "Adsorption dryer" },
    { y: 196, label: "Rotameter" },
  ];

  return (
    <svg
      viewBox="0 0 760 500"
      role="img"
      aria-labelledby="reactor-title reactor-desc"
      className="h-auto w-full"
    >
      <title id="reactor-title">
        Circulating annular fluidized-bed photoreactor and analytical train
      </title>
      <desc id="reactor-desc">
        Conditioned air from a compressor, heat exchanger, adsorption dryer and rotameter is
        humidified and contaminated through separate water and VOC bubbler branches before entering
        an annular UVC photoreactor. Solids leave the reactor with the gas, are separated in a
        cyclone, returned to a 200 gram reservoir and fed back by a screw conveyor. Inlet and outlet
        samples are drawn by a low-flow peristaltic pump, selected by a valve relay and quantified
        by GC-PID/TID, while humidity, temperature, pressure and reactor pressure drop are recorded
        by the data-acquisition system.
      </desc>
      <defs>
        <linearGradient id="reactorTube" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="oklch(0.4 0.06 195)" stopOpacity="0.35" />
          <stop offset="1" stopColor="oklch(0.4 0.06 250)" stopOpacity="0.25" />
        </linearGradient>
        <linearGradient id="reactorUv" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="oklch(0.82 0.14 80)" />
          <stop offset="1" stopColor="oklch(0.78 0.11 210)" />
        </linearGradient>
        <marker
          id="reactorGasArrow"
          viewBox="0 0 10 10"
          refX="8"
          refY="5"
          markerWidth="6"
          markerHeight="6"
          orient="auto"
        >
          <path d="M0 0 L10 5 L0 10 Z" fill="oklch(0.74 0.12 188)" />
        </marker>
        <marker
          id="reactorSolidArrow"
          viewBox="0 0 10 10"
          refX="8"
          refY="5"
          markerWidth="6"
          markerHeight="6"
          orient="auto"
        >
          <path d="M0 0 L10 5 L0 10 Z" fill="oklch(0.74 0.16 158)" />
        </marker>
        <marker
          id="reactorExhaustArrow"
          viewBox="0 0 10 10"
          refX="8"
          refY="5"
          markerWidth="6"
          markerHeight="6"
          orient="auto"
        >
          <path d="M0 0 L10 5 L0 10 Z" fill="oklch(0.65 0.16 35)" />
        </marker>
      </defs>

      {/* Conditioned-air train */}
      {feedBoxes.map((b, i) => (
        <g key={b.label}>
          <rect
            x="18"
            y={b.y}
            width="132"
            height="34"
            rx="6"
            fill="oklch(0.24 0.028 252)"
            stroke="oklch(0.4 0.03 252)"
          />
          <text x="84" y={b.y + 22} fill="oklch(0.9 0.02 250)" fontSize="11" textAnchor="middle">
            {b.label}
          </text>
          {i < feedBoxes.length - 1 && (
            <path
              d={`M84 ${b.y + 34} V${feedBoxes[i + 1].y}`}
              stroke="oklch(0.74 0.12 188)"
              strokeWidth="1.6"
              markerEnd="url(#reactorGasArrow)"
              fill="none"
            />
          )}
        </g>
      ))}

      {/* Main gas line and two conditioning branches */}
      <path
        d="M84 230 V252 H414"
        stroke="oklch(0.74 0.12 188)"
        strokeWidth="1.7"
        markerEnd="url(#reactorGasArrow)"
        fill="none"
      />
      <text x="174" y="244" fill="oklch(0.74 0.12 188)" fontSize="10">
        Q = 23.8 L min⁻¹
      </text>
      <circle cx="188" cy="252" r="3" fill="oklch(0.74 0.12 188)" />
      <circle cx="330" cy="252" r="3" fill="oklch(0.74 0.12 188)" />

      <g>
        <path
          d="M188 252 V278 H178"
          stroke="oklch(0.74 0.12 188)"
          strokeWidth="1.4"
          markerEnd="url(#reactorGasArrow)"
          fill="none"
        />
        <rect
          x="126"
          y="282"
          width="104"
          height="54"
          rx="8"
          fill="oklch(0.24 0.028 252)"
          stroke="oklch(0.4 0.03 252)"
        />
        <path
          d="M140 322 Q178 294 216 322"
          stroke="oklch(0.78 0.11 210)"
          strokeWidth="1.2"
          fill="none"
          opacity="0.7"
        />
        <text x="178" y="303" fill="oklch(0.9 0.02 250)" fontSize="10.5" textAnchor="middle">
          H₂O bubbler
        </text>
        <text x="178" y="320" fill="oklch(0.74 0.12 188)" fontSize="9.5" textAnchor="middle">
          45–55% RH
        </text>
        <path
          d="M230 309 H254 V252"
          stroke="oklch(0.74 0.12 188)"
          strokeWidth="1.4"
          markerEnd="url(#reactorGasArrow)"
          fill="none"
        />
      </g>

      <g>
        <path
          d="M330 252 V278 H320"
          stroke="oklch(0.74 0.12 188)"
          strokeWidth="1.4"
          markerEnd="url(#reactorGasArrow)"
          fill="none"
        />
        <rect
          x="268"
          y="282"
          width="104"
          height="54"
          rx="8"
          fill="oklch(0.24 0.028 252)"
          stroke="oklch(0.4 0.03 252)"
        />
        <path
          d="M282 322 Q320 294 358 322"
          stroke="oklch(0.82 0.14 80)"
          strokeWidth="1.2"
          fill="none"
          opacity="0.75"
        />
        <text x="320" y="303" fill="oklch(0.9 0.02 250)" fontSize="10.5" textAnchor="middle">
          VOC bubbler
        </text>
        <text x="320" y="320" fill="oklch(0.82 0.14 80)" fontSize="9.5" textAnchor="middle">
          5 °C · metered branch
        </text>
        <path
          d="M372 309 H396 V252"
          stroke="oklch(0.74 0.12 188)"
          strokeWidth="1.4"
          markerEnd="url(#reactorGasArrow)"
          fill="none"
        />
      </g>
      <text x="367" y="241" fill="oklch(0.72 0.02 250)" fontSize="9.5">
        RH / T / P
      </text>

      {/* Annular photoreactor */}
      <g transform="translate(414 58)">
        <rect
          x="0"
          y="0"
          width="92"
          height="268"
          rx="9"
          fill="url(#reactorTube)"
          stroke="oklch(0.6 0.04 200)"
        />
        <rect
          x="34"
          y="12"
          width="24"
          height="244"
          rx="5"
          fill="oklch(0.22 0.03 252)"
          stroke="oklch(0.5 0.03 252)"
        />
        <rect x="39" y="18" width="14" height="232" rx="3" fill="url(#reactorUv)" opacity="0.92" />
        {Array.from({ length: 24 }).map((_, i) => (
          <circle
            key={i}
            cx={12 + (i % 4) * 18 + (i % 2 ? 4 : 0)}
            cy={28 + i * 9.2}
            r="1.55"
            fill="oklch(0.78 0.11 210)"
            opacity="0.72"
          />
        ))}
        <text x="46" y="286" fill="oklch(0.86 0.02 250)" fontSize="9.5" textAnchor="middle">
          50 mm ID · 30 mm quartz · 850 mm
        </text>
        <text x="46" y="301" fill="oklch(0.74 0.12 188)" fontSize="9.5" textAnchor="middle">
          75 W UVC · 254 nm · ≈1 L
        </text>
      </g>
      <text x="458" y="48" fill="oklch(0.9 0.02 250)" fontSize="11" textAnchor="middle">
        Annular RFLF
      </text>
      <path
        d="M409 252 H414"
        stroke="oklch(0.74 0.12 188)"
        strokeWidth="1.7"
        markerEnd="url(#reactorGasArrow)"
      />
      <path
        d="M506 84 H548"
        stroke="oklch(0.74 0.12 188)"
        strokeWidth="1.7"
        markerEnd="url(#reactorGasArrow)"
      />

      {/* Pressure-drop measurement */}
      <path
        d="M506 118 H523 V258 H506"
        stroke="oklch(0.78 0.11 210)"
        strokeWidth="1.2"
        strokeDasharray="4 3"
        fill="none"
      />
      <rect
        x="514"
        y="177"
        width="42"
        height="28"
        rx="6"
        fill="oklch(0.24 0.028 252)"
        stroke="oklch(0.4 0.03 252)"
      />
      <text x="535" y="195" fill="oklch(0.78 0.11 210)" fontSize="10" textAnchor="middle">
        ΔP
      </text>

      {/* Cyclone, reservoir, solids recirculation and exhaust */}
      <g transform="translate(548 62)">
        <path
          d="M0 0 H82 L62 102 L20 102 Z"
          fill="oklch(0.24 0.028 252)"
          stroke="oklch(0.4 0.03 252)"
        />
        <rect
          x="31"
          y="102"
          width="20"
          height="48"
          fill="oklch(0.24 0.028 252)"
          stroke="oklch(0.4 0.03 252)"
        />
        <text x="41" y="25" fill="oklch(0.9 0.02 250)" fontSize="11" textAnchor="middle">
          Cyclone
        </text>
      </g>
      <path
        d="M630 70 H696"
        stroke="oklch(0.65 0.16 35)"
        strokeWidth="1.6"
        markerEnd="url(#reactorExhaustArrow)"
        fill="none"
      />
      <text x="696" y="59" fill="oklch(0.85 0.05 40)" fontSize="10" textAnchor="end">
        Exhaust hood
      </text>

      <rect
        x="620"
        y="246"
        width="112"
        height="62"
        rx="7"
        fill="oklch(0.24 0.028 252)"
        stroke="oklch(0.4 0.03 252)"
      />
      <text x="676" y="273" fill="oklch(0.9 0.02 250)" fontSize="10.5" textAnchor="middle">
        Solids reservoir
      </text>
      <text x="676" y="290" fill="oklch(0.74 0.16 158)" fontSize="10" textAnchor="middle">
        ≈200 g inventory
      </text>
      <path
        d="M589 212 V232 H676 V246"
        stroke="oklch(0.74 0.16 158)"
        strokeWidth="1.6"
        markerEnd="url(#reactorSolidArrow)"
        fill="none"
      />
      <path
        d="M620 278 H574 V326 H490"
        stroke="oklch(0.74 0.16 158)"
        strokeWidth="1.6"
        markerEnd="url(#reactorSolidArrow)"
        fill="none"
      />
      <text x="548" y="344" fill="oklch(0.74 0.16 158)" fontSize="9.5" textAnchor="middle">
        Screw feeder · Gs = 0.8 kg m⁻² s⁻¹
      </text>
      <text x="458" y="344" fill="oklch(0.82 0.14 80)" fontSize="9.5" textAnchor="middle">
        ≈3 g irradiated
      </text>

      {/* Inlet/outlet sampling and data acquisition */}
      <circle cx="402" cy="252" r="4" fill="oklch(0.78 0.11 210)" />
      <text x="390" y="270" fill="oklch(0.72 0.02 250)" fontSize="9" textAnchor="end">
        inlet tap
      </text>
      <circle cx="524" cy="84" r="4" fill="oklch(0.78 0.11 210)" />
      <text x="527" y="75" fill="oklch(0.72 0.02 250)" fontSize="9">
        outlet tap
      </text>
      <path d="M402 256 V376 H122" stroke="oklch(0.78 0.11 210)" strokeWidth="1.15" fill="none" />
      <path
        d="M524 88 V364 H122 V376"
        stroke="oklch(0.78 0.11 210)"
        strokeWidth="1.15"
        fill="none"
      />

      <g transform="translate(18 372)">
        <rect
          x="0"
          y="0"
          width="714"
          height="106"
          rx="9"
          fill="oklch(0.2 0.028 252 / 0.6)"
          stroke="oklch(0.35 0.03 252)"
        />
        <text x="14" y="21" fill="oklch(0.85 0.02 250)" fontSize="10.5">
          Analytical branch · inlet / outlet · ≈100 mL min⁻¹
        </text>
        {["Peristaltic pump", "MSU-8V4S-RS48 valve relay", "GC-PID / TID", "Data acquisition"].map(
          (label, i) => (
            <g key={label} transform={`translate(${18 + i * 170} 42)`}>
              <rect
                width="154"
                height="36"
                rx="6"
                fill="oklch(0.24 0.028 252)"
                stroke="oklch(0.4 0.03 252)"
              />
              <text x="77" y="23" fill="oklch(0.9 0.02 250)" fontSize="10.5" textAnchor="middle">
                {label}
              </text>
              {i < 3 && (
                <path
                  d="M154 18 H170"
                  stroke="oklch(0.74 0.12 188)"
                  strokeWidth="1.5"
                  markerEnd="url(#reactorGasArrow)"
                />
              )}
            </g>
          ),
        )}
        <text x="696" y="95" fill="oklch(0.72 0.02 250)" fontSize="9.5" textAnchor="end">
          Q · C₀ · C · RH · ΔP
        </text>
      </g>
    </svg>
  );
}

export function SamplingCycleDiagram() {
  const seq: Array<"E" | "S"> = ["E", "E", "S", "S", "S", "S"];
  return (
    <div
      className="glass-panel rounded-2xl p-6"
      role="img"
      aria-label="Sampling cycle: two inlet samples followed by four outlet samples, repeated for three stable cycles"
    >
      <div className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
        Analytical cycle
      </div>
      <div className="mt-4 flex flex-wrap gap-2">
        {seq.map((s, i) => (
          <div
            key={i}
            className={`grid h-12 w-12 place-items-center rounded-md text-sm font-semibold ${
              s === "E"
                ? "bg-[color:var(--teal)]/15 text-[color:var(--teal)] border border-[color:var(--teal)]/30"
                : "bg-[color:var(--cyan)]/15 text-[color:var(--cyan)] border border-[color:var(--cyan)]/30"
            }`}
          >
            {s}
          </div>
        ))}
      </div>
      <div className="mt-3 flex gap-4 text-[11px] text-muted-foreground">
        <span>E · inlet sample</span>
        <span>S · outlet sample</span>
      </div>
      <div className="mt-4 text-sm text-foreground">
        Three stable cycles required before closing a run.
      </div>
    </div>
  );
}

export function PhotocatalysisMechanism() {
  return (
    <svg
      viewBox="0 0 520 380"
      role="img"
      aria-labelledby="mech-title mech-desc"
      className="h-auto w-full"
    >
      <title id="mech-title">
        TiO2 photocatalysis charge-generation and surface-reaction diagram
      </title>
      <desc id="mech-desc">
        A UVC photon with energy above the TiO2 band gap promotes an electron from the valence band
        to the conduction band. The electron and the positive hole separate and migrate to the
        particle surface, where acceptors such as oxygen are reduced and adsorbed VOCs or
        water-derived species are oxidized.
      </desc>
      <defs>
        <radialGradient id="mechParticle" cx="45%" cy="35%" r="70%">
          <stop offset="0" stopColor="oklch(0.34 0.05 210)" stopOpacity="0.72" />
          <stop offset="1" stopColor="oklch(0.24 0.035 252)" stopOpacity="0.9" />
        </radialGradient>
        <marker
          id="mechAmberArrow"
          viewBox="0 0 10 10"
          refX="8"
          refY="5"
          markerWidth="6"
          markerHeight="6"
          orient="auto"
        >
          <path d="M0 0 L10 5 L0 10 Z" fill="oklch(0.82 0.14 80)" />
        </marker>
        <marker
          id="mechTealArrow"
          viewBox="0 0 10 10"
          refX="8"
          refY="5"
          markerWidth="6"
          markerHeight="6"
          orient="auto"
        >
          <path d="M0 0 L10 5 L0 10 Z" fill="oklch(0.74 0.12 188)" />
        </marker>
        <marker
          id="mechRustArrow"
          viewBox="0 0 10 10"
          refX="8"
          refY="5"
          markerWidth="6"
          markerHeight="6"
          orient="auto"
        >
          <path d="M0 0 L10 5 L0 10 Z" fill="oklch(0.65 0.16 35)" />
        </marker>
      </defs>

      {/* Surface reactions */}
      <text
        x="260"
        y="20"
        fontSize="11"
        fontWeight="600"
        fill="oklch(0.74 0.16 158)"
        textAnchor="middle"
      >
        REDUCTION · surface reaction (iii)
      </text>
      <text x="260" y="38" fontSize="10.5" fill="oklch(0.74 0.12 188)" textAnchor="middle">
        acceptor (O₂) + e⁻ → reduced species (O₂•⁻)
      </text>
      <text
        x="260"
        y="342"
        fontSize="11"
        fontWeight="600"
        fill="oklch(0.78 0.11 210)"
        textAnchor="middle"
      >
        OXIDATION · surface reaction (iii)
      </text>
      <text x="260" y="360" fontSize="10.5" fill="oklch(0.72 0.02 250)" textAnchor="middle">
        adsorbed VOC / H₂O + h⁺ → oxidized intermediates / •OH
      </text>

      {/* Particle and energy axis */}
      <circle cx="260" cy="188" r="118" fill="url(#mechParticle)" stroke="oklch(0.5 0.04 210)" />
      <path
        d="M92 284 V92"
        stroke="oklch(0.72 0.02 250)"
        strokeWidth="1.25"
        markerEnd="url(#mechTealArrow)"
      />
      <text
        x="76"
        y="191"
        fontSize="10.5"
        fill="oklch(0.72 0.02 250)"
        textAnchor="middle"
        transform="rotate(-90 76 191)"
      >
        Energy level
      </text>

      {/* Electronic bands */}
      <rect x="163" y="124" width="194" height="24" rx="4" fill="oklch(0.35 0.06 210 / 0.62)" />
      <text x="260" y="140" fontSize="11" fill="oklch(0.92 0.02 250)" textAnchor="middle">
        Conduction band · BC / LUMO
      </text>
      <rect x="163" y="226" width="194" height="24" rx="4" fill="oklch(0.35 0.06 250 / 0.62)" />
      <text x="260" y="242" fontSize="11" fill="oklch(0.92 0.02 250)" textAnchor="middle">
        Valence band · BV / HOMO
      </text>

      {/* Photon absorption and charge generation */}
      <path
        d="M111 270 Q121 244 131 270 T151 270 T171 270"
        stroke="oklch(0.82 0.14 80)"
        strokeWidth="1.8"
        fill="none"
      />
      <path
        d="M170 270 L194 246"
        stroke="oklch(0.82 0.14 80)"
        strokeWidth="1.4"
        markerEnd="url(#mechAmberArrow)"
      />
      <text x="107" y="292" fontSize="10.5" fill="oklch(0.82 0.14 80)">
        hν · UVC 254 nm · (i)
      </text>
      <path
        d="M228 226 V151"
        stroke="oklch(0.82 0.14 80)"
        strokeWidth="1.6"
        markerEnd="url(#mechAmberArrow)"
      />
      <text x="242" y="190" fontSize="10" fill="oklch(0.82 0.14 80)">
        Eg ≈ 3.2 eV
      </text>

      {/* Charges */}
      <circle cx="228" cy="136" r="11" fill="oklch(0.74 0.12 188)" />
      <text x="228" y="140" fontSize="12" fill="oklch(0.16 0.03 250)" textAnchor="middle">
        e⁻
      </text>
      <circle cx="228" cy="238" r="11" fill="oklch(0.65 0.16 35)" />
      <text x="228" y="242" fontSize="12" fill="oklch(0.98 0 0)" textAnchor="middle">
        h⁺
      </text>

      {/* Charge migration to reactive surface sites */}
      <path
        d="M239 130 C274 106 300 91 330 82"
        stroke="oklch(0.74 0.12 188)"
        strokeWidth="1.5"
        markerEnd="url(#mechTealArrow)"
        fill="none"
      />
      <path
        d="M239 246 C278 270 302 282 330 292"
        stroke="oklch(0.65 0.16 35)"
        strokeWidth="1.5"
        markerEnd="url(#mechRustArrow)"
        fill="none"
      />
      <text x="306" y="112" fontSize="9.5" fill="oklch(0.74 0.12 188)">
        charge migration (ii)
      </text>
      <text x="306" y="272" fontSize="9.5" fill="oklch(0.85 0.05 40)">
        charge migration (ii)
      </text>

      {/* Surface donor/acceptor labels */}
      <path
        d="M330 82 H390"
        stroke="oklch(0.74 0.12 188)"
        strokeWidth="1.2"
        markerEnd="url(#mechTealArrow)"
      />
      <text x="397" y="78" fontSize="10" fill="oklch(0.74 0.16 158)">
        acceptor
      </text>
      <path
        d="M330 292 H390"
        stroke="oklch(0.65 0.16 35)"
        strokeWidth="1.2"
        markerEnd="url(#mechRustArrow)"
      />
      <text x="397" y="289" fontSize="10" fill="oklch(0.78 0.11 210)">
        donor / VOC
      </text>

      <text x="260" y="373" fontSize="8.8" fill="oklch(0.62 0.02 250)" textAnchor="middle">
        The experiments quantify parent-VOC disappearance; complete mineralisation was not
        demonstrated.
      </text>
    </svg>
  );
}

export function CatalystSynthesisFlow({ steps }: { steps: string[] }) {
  return (
    <div className="space-y-2">
      {steps.map((s, i) => (
        <div
          key={i}
          className="flex items-start gap-3 rounded-lg border border-border/60 bg-background/30 p-3"
        >
          <span className="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-[color:var(--teal)]/15 text-[11px] font-semibold text-[color:var(--teal)]">
            {String(i + 1).padStart(2, "0")}
          </span>
          <span className="text-sm text-foreground">{s}</span>
        </div>
      ))}
    </div>
  );
}
