// Animated SVG trailer used in hero + tier sections.
// Three distinct silhouettes — Solo (single axle, compact), Crew (tandem flagship),
// Command (long tandem-braked premium). Solar wings deploy on mount; energy pulses
// flow from the panels into a glowing battery bank inside the cargo body.

function SolarTrailer({ tier = 2, deployed = true }) {
  const t = tier === 1 ? 1 : tier === 3 ? 3 : 2;
  const tandem = t >= 2;

  // Per-tier proportions (in viewBox units, 0–720 wide, 0–432 tall)
  const cfg = {
    1: { bodyX: 220, bodyW: 260, panelW: 220, wheels: [330] },
    2: { bodyX: 190, bodyW: 360, panelW: 280, wheels: [275, 350] },
    3: { bodyX: 160, bodyW: 420, panelW: 320, wheels: [240, 310, 530] },
  }[t];

  const bodyY = 240;
  const bodyH = 76;
  const bodyR = 6;
  const panelHinge = 360; // y-axis hinge at top of body
  const panelL = { x1: cfg.bodyX, x2: cfg.bodyX - cfg.panelW };
  const panelR = { x1: cfg.bodyX + cfg.bodyW, x2: cfg.bodyX + cfg.bodyW + cfg.panelW };

  // unique ids per render so multiple instances don't collide
  const uid = React.useId ? React.useId() : `t${t}`;
  const ids = {
    cells: `cells-${uid}`,
    body: `body-${uid}`,
    glow: `glow-${uid}`,
    soc: `soc-${uid}`,
    sky: `sky-${uid}`,
  };

  const showLabel = `TIER 0${t}`;

  return (
    <svg
      viewBox="0 0 720 432"
      width="100%"
      height="100%"
      preserveAspectRatio="xMidYMid meet"
      aria-label={`Tier ${t} solar trailer — animated`}
      style={{ overflow: "visible" }}
    >
      <defs>
        {/* Photovoltaic cell pattern with slim busbars */}
        <pattern id={ids.cells} width="22" height="22" patternUnits="userSpaceOnUse">
          <rect width="22" height="22" fill="#0d1726" />
          <rect x="0.5" y="0.5" width="21" height="21" rx="1.5" fill="#142035" stroke="#2a3a5c" strokeWidth="0.5" />
          <line x1="11" y1="2" x2="11" y2="20" stroke="#2a3a5c" strokeWidth="0.4" />
          <line x1="2" y1="11" x2="20" y2="11" stroke="#2a3a5c" strokeWidth="0.4" />
          {/* corner cuts to suggest mono-c silicon cells */}
          <path d="M2 4 L4 2 M18 2 L20 4 M2 18 L4 20 M18 20 L20 18" stroke="#3b4a6e" strokeWidth="0.4" />
        </pattern>

        {/* Trailer body steel gradient */}
        <linearGradient id={ids.body} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#2c2c27" />
          <stop offset="0.5" stopColor="#1a1a17" />
          <stop offset="1" stopColor="#0c0c0a" />
        </linearGradient>

        {/* Sun glow over panels */}
        <radialGradient id={ids.sky} cx="55%" cy="0%" r="70%">
          <stop offset="0" stopColor="#f5b81e" stopOpacity="0.32" />
          <stop offset="0.55" stopColor="#f5b81e" stopOpacity="0.05" />
          <stop offset="1" stopColor="#f5b81e" stopOpacity="0" />
        </radialGradient>

        {/* Battery bank glow */}
        <linearGradient id={ids.glow} x1="0" x2="0" y1="1" y2="0">
          <stop offset="0" stopColor="#f5b81e" />
          <stop offset="1" stopColor="#ffd14a" />
        </linearGradient>

        <linearGradient id={ids.soc} x1="0" x2="1" y1="0" y2="0">
          <stop offset="0" stopColor="#f5b81e" />
          <stop offset="1" stopColor="#ffd96b" />
        </linearGradient>

        {/* soft drop shadow under trailer */}
        <radialGradient id={`shadow-${uid}`} cx="50%" cy="50%" r="50%">
          <stop offset="0" stopColor="#000" stopOpacity="0.55" />
          <stop offset="1" stopColor="#000" stopOpacity="0" />
        </radialGradient>
      </defs>

      {/* sky tint behind panels */}
      <rect x="0" y="40" width="720" height="280" fill={`url(#${ids.sky})`} opacity={deployed ? 1 : 0} style={{ transition: "opacity 1s ease 0.6s" }} />

      {/* horizon hairline */}
      <line x1="40" y1="346" x2="680" y2="346" stroke="#f5b81e" strokeWidth="0.6" strokeDasharray="2 6" opacity="0.35" />

      {/* ground shadow */}
      <ellipse cx={cfg.bodyX + cfg.bodyW / 2} cy="370" rx={cfg.bodyW / 2 + 30} ry="9" fill={`url(#shadow-${uid})`} />

      {/* === LEFT WING === */}
      <g
        style={{
          transformBox: "fill-box",
          transformOrigin: `${panelL.x1}px ${panelHinge}px`,
          transform: deployed ? "rotate(0deg)" : "rotate(-92deg)",
          transition: "transform 1.4s cubic-bezier(.2,.7,.2,1)",
        }}
      >
        <Wing x1={panelL.x2} x2={panelL.x1} y={144} cellsId={ids.cells} side="L" />
      </g>

      {/* === RIGHT WING === */}
      <g
        style={{
          transformBox: "fill-box",
          transformOrigin: `${panelR.x1}px ${panelHinge}px`,
          transform: deployed ? "rotate(0deg)" : "rotate(92deg)",
          transition: "transform 1.4s cubic-bezier(.2,.7,.2,1) 0.05s",
        }}
      >
        <Wing x1={panelR.x1} x2={panelR.x2} y={144} cellsId={ids.cells} side="R" />
      </g>

      {/* === ROOF PANEL (always-on, sits on body) === */}
      <g>
        <rect
          x={cfg.bodyX + 14}
          y={bodyY - 14}
          width={cfg.bodyW - 28}
          height="14"
          fill={`url(#${ids.cells})`}
          stroke="#2a3a5c"
          strokeWidth="0.8"
        />
        {/* roof edge highlight */}
        <line x1={cfg.bodyX + 14} y1={bodyY - 14} x2={cfg.bodyX + cfg.bodyW - 14} y2={bodyY - 14} stroke="#3a4a6c" strokeWidth="0.5" />
      </g>

      {/* === DRAWBAR === */}
      <g>
        <path
          d={`M${cfg.bodyX} ${bodyY + 28} L${cfg.bodyX - 60} ${bodyY + 38} L${cfg.bodyX - 70} ${bodyY + 44} L${cfg.bodyX - 70} ${bodyY + 50} L${cfg.bodyX - 60} ${bodyY + 50} L${cfg.bodyX} ${bodyY + 44} Z`}
          fill="#2a2a26"
          stroke="#3a3a35"
          strokeWidth="0.8"
        />
        {/* coupler */}
        <circle cx={cfg.bodyX - 70} cy={bodyY + 47} r="6" fill="#1a1a17" stroke="#4a4a42" strokeWidth="1" />
        <circle cx={cfg.bodyX - 70} cy={bodyY + 47} r="2.5" fill="#f5b81e" opacity="0.6" />
        {/* jockey wheel */}
        <line x1={cfg.bodyX - 36} y1={bodyY + 44} x2={cfg.bodyX - 36} y2={bodyY + 70} stroke="#4a4a42" strokeWidth="2" />
        <circle cx={cfg.bodyX - 36} cy={bodyY + 76} r="6" fill="#1a1a17" stroke="#4a4a42" strokeWidth="1" />
      </g>

      {/* === BODY === */}
      <g>
        {/* chassis rail beneath body */}
        <rect x={cfg.bodyX - 4} y={bodyY + bodyH - 4} width={cfg.bodyW + 8} height="6" fill="#191915" />

        {/* main body */}
        <rect
          x={cfg.bodyX}
          y={bodyY}
          width={cfg.bodyW}
          height={bodyH}
          rx={bodyR}
          fill={`url(#${ids.body})`}
          stroke="#3a3a35"
          strokeWidth="1"
        />
        {/* yellow racing stripes */}
        <rect x={cfg.bodyX + 3} y={bodyY + 8} width={cfg.bodyW - 6} height="2" fill="#f5b81e" opacity="0.85" />
        <rect x={cfg.bodyX + 3} y={bodyY + bodyH - 10} width={cfg.bodyW - 6} height="2" fill="#f5b81e" opacity="0.85" />

        {/* corner rivets */}
        {[0, 1].map((i) => (
          <g key={i}>
            <circle cx={cfg.bodyX + 8} cy={bodyY + 8 + i * (bodyH - 16)} r="1.2" fill="#5c5c52" />
            <circle cx={cfg.bodyX + cfg.bodyW - 8} cy={bodyY + 8 + i * (bodyH - 16)} r="1.2" fill="#5c5c52" />
          </g>
        ))}

        {/* === TELEMETRY DISPLAY (left) === */}
        <g transform={`translate(${cfg.bodyX + 14} ${bodyY + 16})`}>
          <rect width="74" height="44" rx="3" fill="#06080d" stroke="#1f2a44" strokeWidth="0.8" />
          {/* faux LCD bg */}
          <rect x="2" y="2" width="70" height="40" rx="2" fill="#08111e" />
          {/* live dot */}
          <circle cx="9" cy="10" r="2.2" fill="#f5b81e">
            <animate attributeName="opacity" values="1;0.25;1" dur="1.4s" repeatCount="indefinite" />
          </circle>
          <text x="16" y="13" fill="#f5b81e" fontFamily="JetBrains Mono, monospace" fontSize="6.5" letterSpacing="0.18em">
            LIVE · {showLabel}
          </text>
          {/* SoC label */}
          <text x="6" y="25" fill="#7e8aa1" fontFamily="JetBrains Mono, monospace" fontSize="5.5" letterSpacing="0.16em">
            SoC
          </text>
          {/* SoC bar */}
          <rect x="20" y="20.5" width="48" height="5" rx="1" fill="#0e1828" stroke="#1f2a44" strokeWidth="0.4" />
          <rect x="20.5" y="21" width="47" height="4" rx="0.6" fill={`url(#${ids.soc})`}>
            <animate attributeName="width" values="20;47;38;47" dur="6s" repeatCount="indefinite" />
          </rect>
          {/* mini sparkline */}
          <polyline
            points="6,38 14,34 22,36 30,30 38,32 46,28 54,30 62,26 70,28"
            fill="none"
            stroke="#f5b81e"
            strokeWidth="0.8"
            opacity="0.85"
          >
            <animate attributeName="opacity" values="0.4;0.95;0.4" dur="3s" repeatCount="indefinite" />
          </polyline>
        </g>

        {/* === BATTERY BANK (centre) === */}
        <g transform={`translate(${cfg.bodyX + cfg.bodyW / 2 - 50} ${bodyY + 16})`}>
          <rect width="100" height="44" rx="3" fill="#0a0a07" stroke="#3a3a35" strokeWidth="0.8" />
          {/* cell stacks */}
          {Array.from({ length: 5 }).map((_, i) => (
            <g key={i} transform={`translate(${6 + i * 18} 6)`}>
              <rect width="14" height="32" rx="1.5" fill="#101010" stroke="#2a2a26" strokeWidth="0.5" />
              {/* fill from bottom — animated */}
              <rect x="1" y="2" width="12" height="28" rx="1" fill={`url(#${ids.glow})`} opacity="0.15" />
              <rect x="1" width="12" rx="1" fill={`url(#${ids.glow})`}>
                <animate
                  attributeName="height"
                  values={`${10 + i * 2};${22 + i};${16 + i};${26}`}
                  dur="4.4s"
                  repeatCount="indefinite"
                  begin={`${i * 0.15}s`}
                />
                <animate
                  attributeName="y"
                  values={`${30 - (10 + i * 2)};${30 - (22 + i)};${30 - (16 + i)};${30 - 26}`}
                  dur="4.4s"
                  repeatCount="indefinite"
                  begin={`${i * 0.15}s`}
                />
              </rect>
              <rect x="4" y="-1" width="6" height="2" rx="0.4" fill="#2a2a26" />
            </g>
          ))}
        </g>

        {/* === OUTPUTS PANEL (right) === */}
        <g transform={`translate(${cfg.bodyX + cfg.bodyW - 88} ${bodyY + 16})`}>
          <rect width="74" height="44" rx="3" fill="#06080d" stroke="#1f2a44" strokeWidth="0.8" />
          {/* 3-phase round outlets */}
          {[14, 30, 46].map((cx, i) => (
            <g key={i}>
              <circle cx={cx} cy="14" r="5" fill="#0a0a08" stroke="#5c5c52" strokeWidth="0.7" />
              <circle cx={cx} cy="14" r="2.2" fill="none" stroke="#7e8aa1" strokeWidth="0.5" />
              <circle cx={cx - 1.4} cy="13.4" r="0.5" fill="#7e8aa1" />
              <circle cx={cx + 1.4} cy="13.4" r="0.5" fill="#7e8aa1" />
              <circle cx={cx} cy="15.5" r="0.5" fill="#7e8aa1" />
            </g>
          ))}
          {/* USB ports */}
          <rect x="58" y="10" width="11" height="3" rx="0.5" fill="#1f2a44" stroke="#5c5c52" strokeWidth="0.4" />
          <rect x="58" y="16" width="11" height="3" rx="0.5" fill="#1f2a44" stroke="#5c5c52" strokeWidth="0.4" />
          {/* RCD breaker */}
          <rect x="6" y="26" width="62" height="12" rx="1.5" fill="#0a0a08" stroke="#3a3a35" strokeWidth="0.5" />
          <rect x="9" y="29" width="14" height="6" rx="0.6" fill="#1a1a17" stroke="#3a3a35" strokeWidth="0.4" />
          <circle cx="60" cy="32" r="1.6" fill="#f5b81e">
            <animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite" />
          </circle>
        </g>

        {/* === CARGO BAY DOOR (Crew & Command) === */}
        {t >= 2 && (
          <g>
            <rect
              x={cfg.bodyX + cfg.bodyW - 36}
              y={bodyY + 14}
              width="22"
              height={bodyH - 28}
              fill="none"
              stroke="#5c5c52"
              strokeWidth="0.6"
              strokeDasharray="3 3"
              opacity="0.5"
            />
          </g>
        )}
      </g>

      {/* === WHEELS === */}
      <g>
        {cfg.wheels.map((wx) => (
          <g key={wx}>
            {/* wheel arch */}
            <path
              d={`M${wx - 26} ${bodyY + bodyH} A26 26 0 0 1 ${wx + 26} ${bodyY + bodyH}`}
              fill="none"
              stroke="#3a3a35"
              strokeWidth="1"
            />
            <circle cx={wx} cy={bodyY + bodyH + 22} r="22" fill="#0a0a08" stroke="#1a1a17" strokeWidth="1" />
            <circle cx={wx} cy={bodyY + bodyH + 22} r="14" fill="#15151a" stroke="#3a3a35" strokeWidth="0.8" />
            {/* hub spokes */}
            <g style={{ transformOrigin: `${wx}px ${bodyY + bodyH + 22}px`, animation: deployed ? "none" : "wheel-spin 1.6s linear infinite" }}>
              <line x1={wx - 11} y1={bodyY + bodyH + 22} x2={wx + 11} y2={bodyY + bodyH + 22} stroke="#3a3a35" strokeWidth="1" />
              <line x1={wx} y1={bodyY + bodyH + 11} x2={wx} y2={bodyY + bodyH + 33} stroke="#3a3a35" strokeWidth="1" />
              <line x1={wx - 8} y1={bodyY + bodyH + 14} x2={wx + 8} y2={bodyY + bodyH + 30} stroke="#2a2a26" strokeWidth="0.8" />
              <line x1={wx + 8} y1={bodyY + bodyH + 14} x2={wx - 8} y2={bodyY + bodyH + 30} stroke="#2a2a26" strokeWidth="0.8" />
            </g>
            <circle cx={wx} cy={bodyY + bodyH + 22} r="3" fill="#3a3a35" />
            <circle cx={wx} cy={bodyY + bodyH + 22} r="1.2" fill="#5c5c52" />
          </g>
        ))}
      </g>

      {/* === ENERGY PULSES from wing centres → battery bank === */}
      {deployed && (
        <g>
          {/* Left wing pulses */}
          {[0, 0.8, 1.6].map((delay, i) => (
            <circle key={`pl-${i}`} r="2.2" fill="#f5b81e" filter="url(#none)">
              <animateMotion
                dur="2.4s"
                begin={`${delay}s`}
                repeatCount="indefinite"
                path={`M${(panelL.x1 + panelL.x2) / 2} 200 Q${cfg.bodyX + cfg.bodyW / 4} ${bodyY + 10} ${cfg.bodyX + cfg.bodyW / 2 - 25} ${bodyY + 38}`}
              />
              <animate attributeName="opacity" values="0;1;1;0" dur="2.4s" begin={`${delay}s`} repeatCount="indefinite" />
            </circle>
          ))}
          {/* Right wing pulses */}
          {[0.4, 1.2, 2.0].map((delay, i) => (
            <circle key={`pr-${i}`} r="2.2" fill="#f5b81e">
              <animateMotion
                dur="2.4s"
                begin={`${delay}s`}
                repeatCount="indefinite"
                path={`M${(panelR.x1 + panelR.x2) / 2} 200 Q${cfg.bodyX + cfg.bodyW * 0.75} ${bodyY + 10} ${cfg.bodyX + cfg.bodyW / 2 + 25} ${bodyY + 38}`}
              />
              <animate attributeName="opacity" values="0;1;1;0" dur="2.4s" begin={`${delay}s`} repeatCount="indefinite" />
            </circle>
          ))}
        </g>
      )}

      {/* output pulses (battery → outputs panel) */}
      {deployed && (
        <g opacity="0.7">
          {[0, 1.2].map((delay, i) => (
            <circle key={`po-${i}`} r="1.6" fill="#ffd14a">
              <animateMotion
                dur="1.8s"
                begin={`${delay}s`}
                repeatCount="indefinite"
                path={`M${cfg.bodyX + cfg.bodyW / 2 + 25} ${bodyY + 38} L${cfg.bodyX + cfg.bodyW - 88} ${bodyY + 38}`}
              />
              <animate attributeName="opacity" values="0;1;0" dur="1.8s" begin={`${delay}s`} repeatCount="indefinite" />
            </circle>
          ))}
        </g>
      )}

      <style>{`
        @keyframes wheel-spin { to { transform: rotate(360deg); } }
      `}</style>
    </svg>
  );
}

// One solar wing = panel substrate + cells + frame + support strut.
function Wing({ x1, x2, y, cellsId, side }) {
  const left = Math.min(x1, x2);
  const right = Math.max(x1, x2);
  const w = right - left;
  const h = 76;
  const inset = 8;
  // perspective skew toward the body
  const farTop = side === "L" ? y - 4 : y - 4;
  return (
    <g>
      {/* underside shadow plate */}
      <polygon
        points={`${left},${y + h} ${right},${y + h} ${right + (side === "R" ? -6 : 0)},${y + h + 14} ${left + (side === "L" ? 6 : 0)},${y + h + 14}`}
        fill="#05070d"
        opacity="0.65"
      />
      {/* frame */}
      <rect x={left} y={farTop} width={w} height={h + 8} fill="#0a0f1a" stroke="#2a3a5c" strokeWidth="0.8" />
      {/* cell field */}
      <rect x={left + inset} y={farTop + inset} width={w - inset * 2} height={h - inset * 2 + 8} fill={`url(#${cellsId})`} />
      {/* glare highlight */}
      <rect
        x={left + inset}
        y={farTop + inset}
        width={w - inset * 2}
        height={h - inset * 2 + 8}
        fill="url(#glare)"
        opacity="0.18"
      />
      {/* a moving glare sweep */}
      <rect x={left + inset} y={farTop + inset} width={w - inset * 2} height={h - inset * 2 + 8} fill="white" opacity="0">
        <animate
          attributeName="x"
          values={`${left + inset};${right - inset}`}
          dur="6s"
          begin={`${side === "R" ? 1.5 : 0}s`}
          repeatCount="indefinite"
        />
        <animate
          attributeName="width"
          values="20;20"
          dur="6s"
          repeatCount="indefinite"
        />
        <animate attributeName="opacity" values="0;0.18;0" dur="6s" begin={`${side === "R" ? 1.5 : 0}s`} repeatCount="indefinite" />
      </rect>
      {/* outer frame highlight top */}
      <line x1={left} y1={farTop + 1} x2={right} y2={farTop + 1} stroke="#4a5a7c" strokeWidth="0.5" />
      {/* support strut(s) */}
      {side === "L" ? (
        <>
          <line x1={left + 12} y1={y + h} x2={left + 32} y2={y + h + 60} stroke="#5c5c52" strokeWidth="1.4" />
          <line x1={right - 12} y1={y + h} x2={right - 32} y2={y + h + 60} stroke="#5c5c52" strokeWidth="1.4" />
        </>
      ) : (
        <>
          <line x1={left + 12} y1={y + h} x2={left + 32} y2={y + h + 60} stroke="#5c5c52" strokeWidth="1.4" />
          <line x1={right - 12} y1={y + h} x2={right - 32} y2={y + h + 60} stroke="#5c5c52" strokeWidth="1.4" />
        </>
      )}
      {/* foot pad */}
      <rect x={left + 28} y={y + h + 58} width="8" height="3" rx="0.5" fill="#3a3a35" />
      <rect x={right - 36} y={y + h + 58} width="8" height="3" rx="0.5" fill="#3a3a35" />
    </g>
  );
}

window.SolarTrailer = SolarTrailer;