/* eslint-disable */
// Декоративные элементы «печатной платы»: тонкие линии + контактные площадки.
// Используются как фон Hero, разделители секций и узлы у заголовков.

const CircuitDivider = ({ height = 56, density = 12, accent = "var(--red)" }) => {
  const nodes = Array.from({ length: density }, (_, i) => i);
  return (
    <svg
      role="presentation"
      width="100%"
      height={height}
      viewBox={`0 0 1200 ${height}`}
      preserveAspectRatio="none"
      style={{ display: "block", color: "var(--line-strong)" }}
    >
      <line x1="0" y1={height / 2} x2="1200" y2={height / 2} stroke="currentColor" strokeWidth="1" />
      {nodes.map((i) => {
        const x = (1200 / (density - 1)) * i;
        const branch = i % 3 === 0;
        const branchUp = i % 2 === 0;
        return (
          <g key={i}>
            {branch && (
              <line
                x1={x}
                y1={height / 2}
                x2={x + (branchUp ? 24 : -24)}
                y2={branchUp ? 4 : height - 4}
                stroke="currentColor"
                strokeWidth="1"
              />
            )}
            <circle cx={x} cy={height / 2} r={i % 4 === 0 ? 4 : 2.5} fill={i % 4 === 0 ? accent : "currentColor"} />
            {i % 4 === 0 && <circle cx={x} cy={height / 2} r={1.5} fill="var(--bg)" />}
          </g>
        );
      })}
    </svg>
  );
};

// Фоновый паттерн печатной платы — тонкая сетка трасс и узлы.
const CircuitBackdrop = ({ opacity = 0.55 }) => (
  <svg
    aria-hidden="true"
    width="100%"
    height="100%"
    viewBox="0 0 1200 700"
    preserveAspectRatio="xMidYMid slice"
    style={{
      position: "absolute",
      inset: 0,
      width: "100%",
      height: "100%",
      pointerEvents: "none",
      opacity,
      color: "var(--line-strong)"
    }}
  >
    <defs>
      <pattern id="cb-grid" x="0" y="0" width="80" height="80" patternUnits="userSpaceOnUse">
        <path d="M0 80 L80 80 M80 0 L80 80" stroke="currentColor" strokeWidth="0.5" fill="none" opacity="0.5" />
      </pattern>
    </defs>
    <rect x="0" y="0" width="1200" height="700" fill="url(#cb-grid)" />
    {/* Trace lines */}
    <g stroke="currentColor" strokeWidth="1" fill="none">
      <path d="M-20 120 L 200 120 L 240 160 L 480 160 L 520 200 L 800 200" />
      <path d="M 1220 80 L 980 80 L 940 120 L 700 120 L 660 80 L 420 80" />
      <path d="M 60 -10 L 60 240 L 100 280 L 100 520" />
      <path d="M 960 720 L 960 480 L 1000 440 L 1000 240" />
      <path d="M 220 720 L 220 560 L 280 500 L 540 500 L 580 540 L 820 540 L 860 580 L 1220 580" />
      <path d="M 380 280 L 620 280 L 660 320 L 880 320" />
      <path d="M 140 380 L 320 380 L 360 420 L 760 420" />
    </g>
    {/* Pads */}
    <g>
      {[
        [200, 120], [240, 160], [480, 160], [520, 200], [800, 200],
        [980, 80], [940, 120], [700, 120], [660, 80], [420, 80],
        [60, 240], [100, 280], [100, 520],
        [960, 480], [1000, 440], [1000, 240],
        [220, 560], [280, 500], [540, 500], [580, 540], [820, 540], [860, 580],
        [620, 280], [660, 320], [880, 320],
        [320, 380], [360, 420], [760, 420]
      ].map(([cx, cy], i) => (
        <g key={i}>
          <circle cx={cx} cy={cy} r={i % 5 === 0 ? 5 : 3} fill={i % 5 === 0 ? "var(--red)" : "currentColor"} opacity={i % 5 === 0 ? 0.9 : 0.7} />
          {i % 5 === 0 && <circle cx={cx} cy={cy} r={2} fill="var(--bg)" />}
        </g>
      ))}
    </g>
  </svg>
);

// Логотип-знак: «мозг-плата» с двумя полушариями, контактными площадками и трассировками.
const BrainMark = ({ size = 36 }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden="true" style={{ display: "block" }}>
    <g stroke="var(--red)" strokeWidth="2.6" fill="none" strokeLinecap="round" strokeLinejoin="round">
      {/* Левое полушарие — органичный контур */}
      <path d="M 31 8 C 25 6 19 9 17 14 C 12 14 8 18 9 24 C 5 27 5 33 10 36 C 8 42 12 47 18 46 C 19 52 25 56 31 56" />
      {/* Правое полушарие */}
      <path d="M 33 8 C 39 6 45 9 47 14 C 52 14 56 18 55 24 C 59 27 59 33 54 36 C 56 42 52 47 46 46 C 45 52 39 56 33 56" />
      {/* Внутренние трассировки слева */}
      <path d="M 17 14 L 22 19 L 22 26" />
      <path d="M 9 24 L 15 24 L 19 28" />
      <path d="M 18 46 L 24 42 L 24 36 L 28 36" />
      <path d="M 12 36 L 16 36" />
      {/* Внутренние трассировки справа */}
      <path d="M 47 14 L 42 19 L 42 26" />
      <path d="M 55 24 L 49 24 L 45 28" />
      <path d="M 46 46 L 40 42 L 40 36 L 36 36" />
      <path d="M 52 36 L 48 36" />
      {/* Центральный разделитель полушарий */}
      <path d="M 31 9 L 31 18" />
      <path d="M 33 9 L 33 18" />
      <path d="M 32 30 L 32 50" />
      <path d="M 31 56 L 31 60" />
      <path d="M 33 56 L 33 60" />
    </g>
    <g fill="var(--red)">
      {/* Контактные площадки */}
      <circle cx="31" cy="8" r="2" />
      <circle cx="33" cy="8" r="2" />
      <circle cx="9" cy="24" r="2" />
      <circle cx="55" cy="24" r="2" />
      <circle cx="22" cy="26" r="1.8" />
      <circle cx="42" cy="26" r="1.8" />
      <circle cx="28" cy="36" r="1.8" />
      <circle cx="36" cy="36" r="1.8" />
      <circle cx="32" cy="30" r="2.2" />
      <circle cx="31" cy="60" r="1.8" />
      <circle cx="33" cy="60" r="1.8" />
      <circle cx="19" cy="28" r="1.6" />
      <circle cx="45" cy="28" r="1.6" />
    </g>
  </svg>
);

// Угловой decoration — для углов карточек.
const CornerTrace = ({ corner = "tl", size = 28 }) => {
  const styles = {
    tl: { top: 8, left: 8, transform: "" },
    tr: { top: 8, right: 8, transform: "scaleX(-1)" },
    bl: { bottom: 8, left: 8, transform: "scaleY(-1)" },
    br: { bottom: 8, right: 8, transform: "scale(-1,-1)" }
  };
  return (
    <svg width={size} height={size} viewBox="0 0 28 28"
      style={{ position: "absolute", color: "var(--line-strong)", ...styles[corner] }}
      aria-hidden="true">
      <path d="M 0 14 L 8 14 L 14 8 L 14 0" stroke="currentColor" fill="none" strokeWidth="1" />
      <circle cx="14" cy="14" r="2" fill="var(--red)" />
    </svg>
  );
};

// Узел рядом с заголовком секции
const SectionNode = ({ label }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
    <span className="node" />
    <span className="t-eyebrow" style={{ color: "var(--red)" }}>{label}</span>
    <span style={{ flex: 1, height: 1, background: "var(--line)" }} />
  </div>
);

// Глобальный «фон» печатной платы. Фиксируется во вьюпорте, идёт за всем контентом,
// плюс пульсирующие красные узлы и пара трасс с движущимся пунктиром («живой» сигнал).
const CircuitField = () => {
  // Координаты пульсаций в системе viewBox 1200x800.
  const pulses = [
    [80, 90, 0],   [320, 60, 2.1], [560, 140, 0.8], [820, 70, 1.6],
    [1080, 110, 2.6], [200, 240, 1.2], [460, 300, 0.4], [720, 260, 2.0],
    [980, 320, 1.4], [1140, 240, 0.6], [120, 440, 1.8], [380, 480, 0.2],
    [640, 420, 2.4], [880, 500, 1.0], [1100, 460, 2.2],
    [60, 660, 1.6], [300, 700, 0.8], [560, 640, 2.6], [820, 700, 0.4],
    [1060, 660, 1.2]
  ];

  return (
    <div className="circuit-field" aria-hidden="true">
      <svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice" className="cf-svg">
        <defs>
          <pattern id="cf-tile" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
            <g stroke="currentColor" strokeWidth="1" fill="none" className="cf-tile-trace">
              <path d="M -4 60 L 78 60 L 100 82 L 204 82" />
              <path d="M 60 -4 L 60 38 L 80 58" />
              <path d="M 160 84 L 160 142 L 182 164 L 204 164" />
              <path d="M -4 164 L 58 164 L 82 140 L 82 84" />
              <path d="M 140 -4 L 140 28 L 162 50 L 162 82" />
              <path d="M 22 200 L 22 178 L 40 160" />
              <path d="M 200 200 L 200 184 L 184 168" />
            </g>
            <g fill="currentColor" className="cf-tile-pad">
              <circle cx="60" cy="38" r="1.4" />
              <circle cx="80" cy="60" r="1.4" />
              <circle cx="100" cy="82" r="1.4" />
              <circle cx="160" cy="82" r="1.4" />
              <circle cx="160" cy="142" r="1.4" />
              <circle cx="82" cy="140" r="1.4" />
              <circle cx="58" cy="164" r="1.4" />
              <circle cx="140" cy="28" r="1.4" />
              <circle cx="162" cy="50" r="1.4" />
            </g>
          </pattern>
        </defs>

        {/* Базовый слой: тиханая трассировка по всей плоскости */}
        <rect className="cf-base" x="-40" y="-40" width="1280" height="880" fill="url(#cf-tile)" />

        {/* Длинные трассы поверх тайла — задают "магистрали" печатной платы */}
        <g className="cf-mains" stroke="currentColor" strokeWidth="1.2" fill="none">
          <path d="M -20 160 L 240 160 L 280 200 L 720 200 L 760 160 L 1220 160" />
          <path d="M -20 540 L 320 540 L 360 500 L 700 500 L 740 540 L 1220 540" />
          <path d="M 180 -20 L 180 80 L 220 120 L 220 360 L 260 400 L 260 820" />
          <path d="M 940 -20 L 940 240 L 900 280 L 900 580 L 940 620 L 940 820" />
        </g>

        {/* Подвижные сегменты: бегущая «строчка» тока по двум магистралям */}
        <g className="cf-flows" stroke="var(--red)" strokeWidth="1.6" fill="none" strokeLinecap="round">
          <path className="cf-flow cf-flow-a" d="M -20 160 L 240 160 L 280 200 L 720 200 L 760 160 L 1220 160" />
          <path className="cf-flow cf-flow-b" d="M 1220 540 L 740 540 L 700 500 L 360 500 L 320 540 L -20 540" />
          <path className="cf-flow cf-flow-c" d="M 180 -20 L 180 80 L 220 120 L 220 360 L 260 400 L 260 820" />
        </g>

        {/* Пульсирующие красные узлы */}
        <g className="cf-pulses">
          {pulses.map(([x, y, d], i) => (
            <g key={i} transform={`translate(${x} ${y})`} className="cf-pulse" style={{ "--cf-d": `${d}s` }}>
              <circle className="cf-pulse-ring" r="2.6" fill="none" stroke="var(--red)" strokeWidth="1" />
              <circle className="cf-pulse-core" r="2.4" fill="var(--red)" />
            </g>
          ))}
        </g>
      </svg>
    </div>
  );
};

Object.assign(window, { CircuitDivider, CircuitBackdrop, BrainMark, CornerTrace, SectionNode, CircuitField });