/* Captivair cinematic homepage — single component file.
   Hero + Marquee + 4 product scenes + Why Us + Final CTA + Footer.
   Each scene has its own bespoke animated background. */

/* ===== HERO RIG ===== */
const HeroRig = () =>
<svg viewBox="0 0 600 720" preserveAspectRatio="xMidYMid meet" className="hero-rig-svg">
    <defs>
      <linearGradient id="hr-pipe" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#1a1a1e" />
        <stop offset="0.5" stopColor="#2c2c32" />
        <stop offset="1" stopColor="#16161a" />
      </linearGradient>
      <linearGradient id="hr-block" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#1c1c20" />
        <stop offset="1" stopColor="#0e0e10" />
      </linearGradient>
      <radialGradient id="hr-glow" cx="0.5" cy="0.5">
        <stop offset="0" stopColor="#C41E1E" stopOpacity="0.9" />
        <stop offset="1" stopColor="#C41E1E" stopOpacity="0" />
      </radialGradient>
      <filter id="hr-soft"><feGaussianBlur stdDeviation="2" /></filter>
    </defs>

    {/* Top supply rail */}
    <rect x="40" y="80" width="520" height="14" fill="url(#hr-pipe)" />
    <rect x="40" y="80" width="520" height="2" fill="#000" opacity="0.5" />
    <rect x="32" y="76" width="14" height="22" fill="url(#hr-pipe)" />
    <rect x="554" y="76" width="14" height="22" fill="url(#hr-pipe)" />

    {/* Tracer dots flowing along rail */}
    {[0, 0.33, 0.66].map((d, i) =>
  <circle key={i} cx="40" cy="87" r="2.5" fill="#C41E1E" filter="url(#hr-soft)">
        <animate attributeName="cx" values="40;560" dur="3s" repeatCount="indefinite" begin={`${d * 3}s`} />
        <animate attributeName="opacity" values="0;1;1;0" dur="3s" repeatCount="indefinite" begin={`${d * 3}s`} />
      </circle>
  )}

    {/* Pressure gauge */}
    <g transform="translate(490, 38)">
      <circle cx="0" cy="0" r="26" fill="#0a0a0b" stroke="#2c2c32" strokeWidth="2" />
      <circle cx="0" cy="0" r="22" fill="#111114" />
      {[-60, -30, 0, 30, 60, 90, 120].map((a) => {
      const r = a * Math.PI / 180;
      return <line key={a} x1={Math.cos(r) * 17} y1={Math.sin(r) * 17}
      x2={Math.cos(r) * 21} y2={Math.sin(r) * 21}
      stroke="#5c5c64" strokeWidth="1" />;
    })}
      <line x1="0" y1="0" x2="0" y2="-15" stroke="#C41E1E" strokeWidth="1.6"
    strokeLinecap="round" className="gauge-needle" />
      <circle cx="0" cy="0" r="2.5" fill="#C41E1E" />
      <text x="0" y="40" textAnchor="middle" fontSize="6" fill="#9a9aa2"
    fontFamily="'JetBrains Mono', monospace" letterSpacing="1">PSI</text>
    </g>

    {/* 3 valve+cylinder stations */}
    {[0, 1, 2].map((i) => {
    const cx = 130 + i * 170;
    return (
      <g key={i}>
          {/* Feed tube down to valve */}
          <rect x={cx - 3} y="94" width="6" height="50" fill="url(#hr-pipe)" />

          {/* Valve block */}
          <rect x={cx - 36} y="144" width="72" height="60" fill="url(#hr-block)" stroke="#000" strokeWidth="0.5" />
          <rect x={cx - 36} y="144" width="72" height="4" fill="#C41E1E" opacity="0.85" />
          <text x={cx} y="172" textAnchor="middle" fontSize="6" fill="#9a9aa2"
        fontFamily="'JetBrains Mono', monospace" letterSpacing="1.5">CAPTIVAIR</text>
          <line x1={cx - 24} y1="178" x2={cx + 24} y2="178" stroke="#2c2c32" strokeWidth="0.5" />
          <text x={cx} y="190" textAnchor="middle" fontSize="5" fill="#5c5c64"
        fontFamily="'JetBrains Mono', monospace" letterSpacing="1">5/2 · 24V</text>

          {/* LED */}
          <circle cx={cx + 28} cy="164" r="4" fill="#C41E1E" className={`led-blink-${i + 1}`} />
          <circle cx={cx + 28} cy="164" r="8" fill="url(#hr-glow)" className={`led-blink-${i + 1}`} />

          {/* Tubes to cylinder */}
          <rect x={cx - 14} y="204" width="3" height="50" fill="url(#hr-pipe)" />
          <rect x={cx + 11} y="204" width="3" height="50" fill="url(#hr-pipe)" />

          {/* Cylinder body */}
          <rect x={cx - 28} y="254" width="56" height="14" fill="url(#hr-block)" />
          <rect x={cx - 22} y="268" width="44" height="180" fill="url(#hr-block)" stroke="#000" strokeWidth="0.4" />
          <rect x={cx - 28} y="448" width="56" height="14" fill="url(#hr-block)" />
          <text x={cx} y="358" textAnchor="middle" fontSize="5" fill="#5c5c64"
        fontFamily="'JetBrains Mono', monospace" letterSpacing="1.2" opacity="0.5">ISO 15552</text>

          {/* Rod (animates) */}
          <g className={`cyl-rod-${i + 1}`}>
            <rect x={cx - 4} y="462" width="8" height="100" fill="#3c3c44" />
            <rect x={cx - 12} y="560" width="24" height="10" fill="url(#hr-block)" />
            <circle cx={cx} cy="578" r="8" fill="none" stroke="#3c3c44" strokeWidth="3" />
          </g>

          {/* Floor shadow */}
          <ellipse cx={cx} cy="640" rx="26" ry="4" fill="#000" opacity="0.5" />
        </g>);

  })}

    {/* Floor line */}
    <line x1="0" y1="650" x2="600" y2="650" stroke="#222226" strokeWidth="1" />
    <line x1="0" y1="652" x2="600" y2="652" stroke="#C41E1E" strokeWidth="0.5" opacity="0.3" />
  </svg>;


/* ===== COMPRESSOR SCENE BG ===== */
const CompressorBg = () =>
<svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"
style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}>
    <defs>
      <linearGradient id="cs-bg" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#0a0a0b" />
        <stop offset="1" stopColor="#0e0e10" />
      </linearGradient>
      <linearGradient id="cs-tank" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0" stopColor="#16161a" />
        <stop offset="0.5" stopColor="#2c2c32" />
        <stop offset="1" stopColor="#16161a" />
      </linearGradient>
      <radialGradient id="cs-haze" cx="0.7" cy="0.5">
        <stop offset="0" stopColor="#C41E1E" stopOpacity="0.06" />
        <stop offset="1" stopColor="#C41E1E" stopOpacity="0" />
      </radialGradient>
    </defs>
    <rect width="1600" height="900" fill="transparent" />
    <rect width="1600" height="900" fill="url(#cs-haze)" />

    {/* Big horizontal tank silhouette */}
    <g opacity="0.7">
      <rect x="900" y="320" width="640" height="280" fill="url(#cs-tank)" stroke="#000" strokeWidth="1" />
      <ellipse cx="900" cy="460" rx="40" ry="140" fill="url(#cs-tank)" />
      <ellipse cx="1540" cy="460" rx="40" ry="140" fill="url(#cs-tank)" />
      {/* tank bands */}
      {[1000, 1140, 1280, 1420].map((x) =>
    <line key={x} x1={x} y1="320" x2={x} y2="600" stroke="#000" strokeWidth="0.6" opacity="0.4" />
    )}
      {/* support legs */}
      <rect x="980" y="600" width="20" height="80" fill="#0a0a0b" />
      <rect x="1440" y="600" width="20" height="80" fill="#0a0a0b" />
      <line x1="900" y1="685" x2="1540" y2="685" stroke="#222226" strokeWidth="1" />
    </g>

    {/* Compressor head with spinning fan */}
    <g transform="translate(1200, 240)">
      <rect x="-90" y="-60" width="180" height="120" fill="#16161a" stroke="#000" strokeWidth="1" />
      <rect x="-90" y="-60" width="180" height="6" fill="#C41E1E" opacity="0.7" />
      <circle cx="0" cy="0" r="48" fill="#0a0a0b" stroke="#2c2c32" strokeWidth="2" />
      <g className="fan-spin-fast">
        {[0, 60, 120, 180, 240, 300].map((a) =>
      <ellipse key={a} cx="0" cy="0" rx="5" ry="40" fill="#3c3c44"
      transform={`rotate(${a})`} />
      )}
        <circle cx="0" cy="0" r="10" fill="#1c1c20" />
      </g>
      <circle cx="-70" cy="-40" r="3" fill="#C41E1E" className="led-blink-1" />
    </g>

    {/* Pressure gauges row */}
    {[200, 290, 380].map((x, i) =>
  <g key={i} transform={`translate(${x}, 460)`}>
        <circle cx="0" cy="0" r="36" fill="#0a0a0b" stroke="#2c2c32" strokeWidth="2" />
        <circle cx="0" cy="0" r="32" fill="#111114" />
        {[-90, -60, -30, 0, 30, 60, 90].map((a) => {
      const r = a * Math.PI / 180;
      return <line key={a} x1={Math.cos(r) * 24} y1={Math.sin(r) * 24}
      x2={Math.cos(r) * 30} y2={Math.sin(r) * 30}
      stroke="#5c5c64" strokeWidth="1" />;
    })}
        <line x1="0" y1="0" x2="0" y2="-22" stroke="#C41E1E" strokeWidth="2"
    strokeLinecap="round" className="gauge-needle"
    style={{ animationDelay: `${i * -0.5}s` }} />
        <circle cx="0" cy="0" r="3" fill="#C41E1E" />
      </g>
  )}

    {/* Steam/exhaust puffs */}
    {[300, 700, 1100].map((x, i) =>
  <g key={i}>
        <circle cx={x} cy="200" r="20" fill="#fff" opacity="0.06" className="steam"
    style={{ animationDelay: `${i * -1.3}s` }} />
        <circle cx={x + 30} cy="180" r="14" fill="#fff" opacity="0.04" className="steam"
    style={{ animationDelay: `${i * -1.6}s` }} />
      </g>
  )}

    {/* Floor */}
    <line x1="0" y1="700" x2="1600" y2="700" stroke="#222226" strokeWidth="1" />
    <line x1="0" y1="702" x2="1600" y2="702" stroke="#C41E1E" strokeWidth="0.5" opacity="0.25" />

    {/* Drifting particles */}
    {[
  [200, 300, 'drift-1'], [600, 250, 'drift-2'], [1000, 400, 'drift-3'],
  [1400, 200, 'drift-1'], [400, 500, 'drift-2']].
  map(([x, y, cls], i) =>
  <circle key={i} cx={x} cy={y} r="1.5" fill="#C41E1E" opacity="0.4" className={cls} />
  )}
  </svg>;


/* ===== CYLINDER SCENE BG (horizontal pistons) ===== */
const CylinderBg = () =>
<svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"
style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}>
    <defs>
      <linearGradient id="cy-body" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#0c0c0e" />
        <stop offset="0.15" stopColor="#2c2c34" />
        <stop offset="0.4" stopColor="#48484f" />
        <stop offset="0.55" stopColor="#3a3a42" />
        <stop offset="0.8" stopColor="#16161a" />
        <stop offset="1" stopColor="#08080a" />
      </linearGradient>
      <linearGradient id="cy-cap" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#1c1c20" />
        <stop offset="0.4" stopColor="#3a3a42" />
        <stop offset="0.55" stopColor="#5a5a62" />
        <stop offset="0.7" stopColor="#3a3a42" />
        <stop offset="1" stopColor="#0c0c0e" />
      </linearGradient>
      <radialGradient id="oil-stain" cx="0.5" cy="0.5">
        <stop offset="0" stopColor="#000" stopOpacity="0.8" />
        <stop offset="0.5" stopColor="#000" stopOpacity="0.4" />
        <stop offset="1" stopColor="#000" stopOpacity="0" />
      </radialGradient>
      <pattern id="hazard-stripe" x="0" y="0" width="14" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(-20)">
        <rect width="14" height="6" fill="#0a0a0c" />
        <rect width="7" height="6" fill="#d4a014" />
      </pattern>
    </defs>
    <rect width="1600" height="900" fill="transparent" />

    {/* 3 horizontal cylinders firing — BIG, anchored right side, with bolt detail */}
    <g transform="translate(220, 0)">
    {[
  { y: 200, cls: 'bigrod-1' },
  { y: 450, cls: 'bigrod-2' },
  { y: 700, cls: 'bigrod-3' }].
  map((c, i) =>
  <g key={i}>
        {/* Mount left */}
        <rect x="600" y={c.y - 56} width="22" height="112" fill="#0a0a0c" />
        <rect x="600" y={c.y - 56} width="22" height="2" fill="#3a3a42" opacity="0.7" />
        <circle cx="611" cy={c.y - 42} r="3" fill="#000" />
        <circle cx="611" cy={c.y + 42} r="3" fill="#000" />
        {/* End cap left */}
        <rect x="622" y={c.y - 64} width="30" height="128" fill="url(#cy-cap)" stroke="#000" strokeWidth="0.8" />
        {/* Cap bolts (left) */}
        {[-50, -25, 0, 25, 50].map((off) =>
    <g key={off}>
            <circle cx="637" cy={c.y + off} r="4" fill="#1c1c20" stroke="#000" strokeWidth="0.4" />
            <circle cx="637" cy={c.y + off} r="2.4" fill="#3a3a42" />
            <line x1="634.5" y1={c.y + off} x2="639.5" y2={c.y + off} stroke="#000" strokeWidth="0.6" />
          </g>
    )}
        {/* Body */}
        <rect x="652" y={c.y - 50} width="320" height="100" fill="url(#cy-body)" stroke="#000" strokeWidth="0.8" />
        {/* Brushed-metal highlights */}
        <rect x="652" y={c.y - 24} width="320" height="1" fill="#6a6a72" opacity="0.4" />
        <rect x="652" y={c.y - 8} width="320" height="1" fill="#6a6a72" opacity="0.25" />
        <rect x="652" y={c.y + 18} width="320" height="1" fill="#000" opacity="0.6" />
        {/* Tie rods (top + bottom) */}
        <rect x="652" y={c.y - 60} width="320" height="10" fill="#0a0a0c" />
        <rect x="652" y={c.y - 60} width="320" height="1" fill="#3a3a42" opacity="0.5" />
        <rect x="652" y={c.y + 50} width="320" height="10" fill="#0a0a0c" />
        <rect x="652" y={c.y + 59} width="320" height="1" fill="#3a3a42" opacity="0.5" />
        {/* Hazard stripe near base */}
        <rect x="652" y={c.y + 42} width="320" height="8" fill="url(#hazard-stripe)" opacity="0.55" />
        {/* Brand stripe */}
        <rect x="652" y={c.y - 50} width="320" height="5" fill="#C41E1E" opacity="0.9" />
        <text x="812" y={c.y - 14} textAnchor="middle" fontSize="16" fill="#9a9aa2"
    fontFamily="'JetBrains Mono', monospace" letterSpacing="3" fontWeight="700">CAPTIVAIR · ISO 15552</text>
        <text x="812" y={c.y + 6} textAnchor="middle" fontSize="11" fill="#6a6a72"
    fontFamily="'JetBrains Mono', monospace" letterSpacing="2">P-MAX 12 BAR · STK CV-{8000 + i * 17}</text>
        {/* End cap right */}
        <rect x="972" y={c.y - 64} width="30" height="128" fill="url(#cy-cap)" stroke="#000" strokeWidth="0.8" />
        {[-50, -25, 0, 25, 50].map((off) =>
    <g key={off}>
            <circle cx="987" cy={c.y + off} r="4" fill="#1c1c20" stroke="#000" strokeWidth="0.4" />
            <circle cx="987" cy={c.y + off} r="2.4" fill="#3a3a42" />
            <line x1="984.5" y1={c.y + off} x2="989.5" y2={c.y + off} stroke="#000" strokeWidth="0.6" />
          </g>
    )}

        {/* Rod (slides out right) */}
        <g className={c.cls}>
          <rect x="1002" y={c.y - 14} width="260" height="28" fill="#3c3c44" />
          <rect x="1002" y={c.y - 14} width="260" height="3" fill="#6a6a72" opacity="0.65" />
          <rect x="1002" y={c.y + 11} width="260" height="3" fill="#000" opacity="0.6" />
          <rect x="1262" y={c.y - 22} width="30" height="44" fill="#1c1c20" />
          <circle cx="1277" cy={c.y} r="16" fill="none" stroke="#3c3c44" strokeWidth="4" />
          <circle cx="1277" cy={c.y} r="8" fill="#0a0a0c" />
        </g>

        {/* Air burst at port */}
        <circle cx="612" cy={c.y} r="10" fill="#C41E1E" opacity="0.4" className="led-blink-1"
    style={{ animationDelay: `${i * -0.5}s` }} />

        {/* Pneumatic feed line */}
        <path d={`M 460 ${c.y - 100} Q 540 ${c.y - 100} 600 ${c.y - 50}`}
    stroke="#1a1a1e" strokeWidth="12" fill="none" />
        <path d={`M 460 ${c.y - 100} Q 540 ${c.y - 100} 600 ${c.y - 50}`}
    stroke="#3a3a42" strokeWidth="4" fill="none" opacity="0.7" />
        <path d={`M 460 ${c.y - 100} Q 540 ${c.y - 100} 600 ${c.y - 50}`}
    stroke="#C41E1E" strokeWidth="2" fill="none"
    className="flow-1" opacity="0.8" />

        {/* Oil stain on floor below each cylinder */}
        <ellipse cx={812 + i * 30} cy="800" rx={120 - i * 10} ry="10" fill="url(#oil-stain)" opacity="0.85" />
        <ellipse cx={760 + i * 60} cy="795" rx="30" ry="4" fill="#000" opacity="0.5" />
        <ellipse cx={880 - i * 20} cy="805" rx="22" ry="3" fill="#000" opacity="0.4" />
      </g>
  )}
    </g>

    {/* Big background number — left side */}
    <text x="260" y="500" textAnchor="middle" fontSize="500" fontWeight="900"
  fill="none" stroke="rgba(196,30,30,0.05)" strokeWidth="1"
  fontFamily="'Inter'" letterSpacing="-30">02</text>

    {/* Floor */}
    <line x1="0" y1="800" x2="1600" y2="800" stroke="#222226" strokeWidth="1" />
  </svg>;


/* ===== VALVE SCENE BG ===== */
const ValveBg = () =>
<svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"
style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}>
    <defs>
      <linearGradient id="vs-bg" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#0a0a0b" />
        <stop offset="1" stopColor="#0e0e10" />
      </linearGradient>
      <linearGradient id="vs-block" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#1c1c20" />
        <stop offset="1" stopColor="#0e0e10" />
      </linearGradient>
    </defs>
    <rect width="1600" height="900" fill="transparent" />

    {/* Manifold rail */}
    <rect x="600" y="380" width="1000" height="160" fill="url(#vs-block)" stroke="#000" strokeWidth="1" />
    <rect x="600" y="380" width="1000" height="6" fill="#C41E1E" opacity="0.85" />

    {/* 5 valve stations */}
    {[0, 1, 2, 3, 4].map((i) => {
    const x = 680 + i * 170;
    return (
      <g key={i}>
          {/* Valve cap */}
          <rect x={x - 50} y="320" width="100" height="60" fill="url(#vs-block)" stroke="#000" strokeWidth="0.6" />
          {/* Solenoid coils */}
          <rect x={x - 70} y="290" width="20" height="100" fill="#16161a" stroke="#000" strokeWidth="0.5" />
          <rect x={x + 50} y="290" width="20" height="100" fill="#16161a" stroke="#000" strokeWidth="0.5" />
          {/* Coil windings */}
          {[0, 1, 2, 3, 4, 5, 6].map((k) =>
        <g key={k}>
              <line x1={x - 70} y1={293 + k * 14} x2={x - 50} y2={293 + k * 14}
          stroke="#000" strokeWidth="1" />
              <line x1={x + 50} y1={293 + k * 14} x2={x + 70} y2={293 + k * 14}
          stroke="#000" strokeWidth="1" />
            </g>
        )}
          {/* LED on top */}
          <circle cx={x} cy="300" r="5" fill="#C41E1E" className="coil-pulse"
        style={{ animationDelay: `${i * -0.3}s` }} />
          <circle cx={x} cy="300" r="14" fill="#C41E1E" opacity="0.15" className="coil-pulse"
        style={{ animationDelay: `${i * -0.3}s` }} />

          {/* Spool indicator (slides) */}
          <rect x={x - 30} y="350" width="60" height="14" fill="#0a0a0b" />
          <rect x={x - 8} y="352" width="16" height="10" fill="#C41E1E"
        className={`valve-spool-${i % 3 + 1}`} />

          {/* Brand label */}
          <text x={x} y="430" textAnchor="middle" fontSize="9" fill="#9a9aa2"
        fontFamily="'JetBrains Mono', monospace" letterSpacing="1.5">CAPTIVAIR</text>
          <text x={x} y="445" textAnchor="middle" fontSize="7" fill="#5c5c64"
        fontFamily="'JetBrains Mono', monospace" letterSpacing="1">5/2 · 24V</text>
          <text x={x} y="500" textAnchor="middle" fontSize="20" fontWeight="600" fill="#3c3c44"
        fontFamily="'JetBrains Mono', monospace">{String(i + 1).padStart(2, '0')}</text>

          {/* Output ports (downward) */}
          <rect x={x - 14} y="540" width="6" height="80" fill="#1c1c20" />
          <rect x={x + 8} y="540" width="6" height="80" fill="#1c1c20" />
          {/* Flow tracers */}
          <line x1={x - 11} y1="540" x2={x - 11} y2="620" stroke="#C41E1E" strokeWidth="1"
        className="flow-1" opacity="0.5" />
          <line x1={x + 11} y1="540" x2={x + 11} y2="620" stroke="#C41E1E" strokeWidth="1"
        className="flow-2" opacity="0.5" />
        </g>);

  })}

    {/* Big number */}
    <text x="200" y="780" fontSize="280" fontWeight="900"
  fill="none" stroke="rgba(196,30,30,0.06)" strokeWidth="1"
  fontFamily="'Inter'" letterSpacing="-15">03</text>

    {/* Floor */}
    <line x1="0" y1="800" x2="1600" y2="800" stroke="#222226" strokeWidth="1" />
  </svg>;


/* ===== FITTINGS SCENE BG ===== */
const FittingBg = () =>
<svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"
style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}>
    <defs>
      <linearGradient id="ft-bg" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#0a0a0b" />
        <stop offset="1" stopColor="#0e0e10" />
      </linearGradient>
      <linearGradient id="ft-tube" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#3c3c44" />
        <stop offset="0.5" stopColor="#54545c" />
        <stop offset="1" stopColor="#2c2c32" />
      </linearGradient>
      <linearGradient id="ft-fitting" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#1c1c20" />
        <stop offset="0.5" stopColor="#3c3c44" />
        <stop offset="1" stopColor="#16161a" />
      </linearGradient>
    </defs>
    <rect width="1600" height="900" fill="transparent" />

    {/* Pipework routes - clean orthogonal industrial */}
    <g fill="none" strokeWidth="14" stroke="url(#ft-tube)">
      <path d="M 0 200 H 400 V 500 H 800" />
      <path d="M 0 700 H 600 V 400 H 1000 V 700 H 1600" />
      <path d="M 1600 250 H 1200 V 600 H 900" />
      <path d="M 200 0 V 200" />
      <path d="M 1300 0 V 250" />
      <path d="M 700 900 V 700" />
    </g>

    {/* Flow indicators along pipes */}
    <g fill="none" strokeWidth="3" stroke="#C41E1E" opacity="0.7">
      <path d="M 0 200 H 400 V 500 H 800" className="flow-1" />
      <path d="M 0 700 H 600 V 400 H 1000 V 700 H 1600" className="flow-2" />
      <path d="M 1600 250 H 1200 V 600 H 900" className="flow-3" />
    </g>

    {/* Fittings at junctions */}
    {[
  [400, 200], [400, 500], [800, 500],
  [600, 700], [600, 400], [1000, 400], [1000, 700],
  [1200, 250], [1200, 600],
  [200, 200], [1300, 250], [700, 700]].
  map(([cx, cy], i) =>
  <g key={i}>
        <rect x={cx - 16} y={cy - 16} width="32" height="32" fill="url(#ft-fitting)"
    stroke="#000" strokeWidth="0.6" />
        <circle cx={cx} cy={cy} r="6" fill="#0a0a0b" stroke="#5c5c64" strokeWidth="1" />
        <circle cx={cx} cy={cy} r="2" fill="#C41E1E" opacity="0.7" />
      </g>
  )}

    {/* End connectors */}
    {[[0, 200], [0, 700], [1600, 250], [1600, 700], [800, 500], [900, 600], [200, 0], [1300, 0], [700, 900]].map(([cx, cy], i) =>
  <rect key={i} x={cx - 22} y={cy - 22} width="44" height="44" fill="url(#ft-fitting)"
  stroke="#C41E1E" strokeWidth="0.5" opacity="0.9" />
  )}

    {/* Big number */}
    <text x="1300" y="850" textAnchor="end" fontSize="280" fontWeight="900"
  fill="none" stroke="rgba(196,30,30,0.06)" strokeWidth="1"
  fontFamily="'Inter'" letterSpacing="-15">04</text>
  </svg>;


/* ===== HERO ===== */
const Hero = () => {
  const [psi, setPsi] = React.useState(120.7);
  React.useEffect(() => {
    const id = setInterval(() => {
      setPsi(+(120.7 + Math.sin(Date.now() / 1500) * 4 + (Math.random() - 0.5) * 1).toFixed(1));
    }, 400);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="scene-grid" />

      <div className="hero-corner hero-corner-tl">
        <span><strong>● LIVE</strong>&nbsp;&nbsp;WORKSHOP FEED</span>
        <span>GRAVESEND · DA11 0DL</span>
      </div>
      <div className="hero-corner hero-corner-tr">
        <span><strong>{psi.toFixed(1)} PSI</strong></span>
        <span>SYSTEM PRESSURE · NOMINAL</span>
      </div>

      <div className="hero-content">
        <div className="hero-text">
          <div className="eyebrow">
            <span className="eyebrow-dot" />
            <span>EST 1968 · FAMILY OWNED · GRAVESEND, KENT</span>
          </div>
          <h1 className="hero-h1">
            Pneumatics<br />
            that <em>never miss</em><br />
            <span style={{ color: "#fff" }}>a cycle</span>.
          </h1>
          <p className="hero-sub">
            <strong>15,000+ products</strong> in stock from Parker, ASCO, Crouzet, John Guest, PCL and Avelair! picked, packed and out the door the same day. Specified by engineers who actually use it.
          

          </p>
          <div className="hero-ctas">
            <a className="btn-primary" href={window.CAP_URLS.shop}>
              Shop now
              <svg width="16" height="10" viewBox="0 0 16 10" fill="none">
                <path d="M0 5h14m-4-4 4 4-4 4" stroke="currentColor" strokeWidth="1.6" />
              </svg>
            </a>
            <a className="btn-ghost" href={window.CAP_URLS.contact}>Speak to engineering</a>
          </div>
          <div className="hero-trust">
            <span>Same-day despatch</span>
            <span>Open Mon–Fri 8:30–5:00</span>
            <span>2 in-house engineers</span>
            <span>2 drivers · 1 van</span>
          </div>
        </div>

        <div className="hero-rig">
          <HeroRig />
          <div className="hero-anno hero-anno-1"><strong>A</strong>5/2 SOLENOID · 24V</div>
          <div className="hero-anno hero-anno-2"><strong>B</strong>ISO 15552 · ø32</div>
          <div className="hero-anno hero-anno-3"><strong>C</strong>{psi.toFixed(0)} PSI WORKING</div>
        </div>
      </div>

      <div className="hero-stats">
        <div className="hero-stats-inner">
          <div className="hero-stat">
            <div className="hero-stat-num">15,000+</div>
            <div className="hero-stat-lbl">Lines stocked<br />same-day despatch</div>
          </div>
          <div className="hero-stat">
            <div className="hero-stat-num">1968</div>
            <div className="hero-stat-lbl">Established<br />Gravesend, Kent</div>
          </div>
          <div className="hero-stat">
            <div className="hero-stat-num">ISO 9001</div>
            <div className="hero-stat-lbl">ISO 9001 ACCREDITED<br />QUALITY MANAGEMENT</div>
          </div>
          <div className="hero-stat">
            <div className="hero-stat-num live">{psi.toFixed(1)} PSI</div>
            <div className="hero-stat-lbl">Workshop pressure<br />live · nominal</div>
          </div>
        </div>
      </div>
    </section>);

};

/* ===== MARQUEE ===== */
const Marquee = () => {
  const items = [
  'PARKER', 'ASCO', 'CROUZET', 'JOHN GUEST', 'PCL', 'AVELAIR',
  'EMERSON', 'SAME-DAY DESPATCH', 'TRADE PRICING', 'EST 1968'];

  const row =
  <div className="marquee-item">
      {items.map((it, i) =>
    <React.Fragment key={i}>
          <span>{it}</span>
          <span className="marquee-dot" />
        </React.Fragment>
    )}
    </div>;

  return (
    <div className="marquee">
      <div className="marquee-track">
        {row}{row}{row}
      </div>
    </div>);

};

/* ===== PRODUCT SCENES ===== */
const ProductScene = ({ num, eyebrow, title, italic, lead, specs, brands, BgComp, id, flip, browseHref }) =>
<section className={`scene scene-product${flip ? ' flip' : ''}`} id={id} data-screen-label={`${num} ${eyebrow}`}>
    <div className="scene-bg"><BgComp /></div>
    <div className="scene-grid" />
    <div className="scene-content">
      <div className="scene-product-text">
        <div className="eyebrow">
          <span className="eyebrow-dot" />
          <span className="eyebrow-num">{num} ·</span>
          <span>{eyebrow}</span>
        </div>
        <h2 className="scene-product-h" style={{ color: "rgb(255, 255, 255)", fontSize: "70.52px" }}>
          {title} <em style={{ fontFamily: "Arial", fontSize: "70.52px" }}>{italic}</em>
        </h2>
        <p className="scene-product-lead">{lead}</p>
        <div className="scene-product-specs">
          {specs.map((s, i) =>
        <div key={i} className="spec-cell">
              <div className="spec-cell-h">{s.h}</div>
              <div className="spec-cell-v" style={{ color: "rgb(157, 157, 157)" }}>{s.v}</div>
            </div>
        )}
        </div>
        <div className="scene-product-brands">
          <strong>Brands ›</strong>&nbsp;&nbsp;{brands}
        </div>
        <a className="btn-primary" href={browseHref || window.CAP_URLS.shop}>Browse range
          <svg width="16" height="10" viewBox="0 0 16 10" fill="none">
            <path d="M0 5h14m-4-4 4 4-4 4" stroke="currentColor" strokeWidth="1.6" />
          </svg>
        </a>
      </div>
      <div className="scene-product-stage" style={{ background: 'transparent', border: 'none', height: 'auto' }}>
        {/* visual handled by scene-bg */}
      </div>
    </div>
  </section>;


/* ===== WHY US ===== */
const WhyUs = () => {
  const cells = [
  { num: '01', title: 'Same-day despatch', body: 'Order by 14:00, out the door the same afternoon. For in stock items.',
    icon:
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <rect x="2" y="8" width="18" height="12" stroke="currentColor" strokeWidth="1.6" />
          <path d="M20 12h4l2 4v4h-6" stroke="currentColor" strokeWidth="1.6" />
          <circle cx="8" cy="22" r="2.5" stroke="currentColor" strokeWidth="1.6" />
          <circle cx="22" cy="22" r="2.5" stroke="currentColor" strokeWidth="1.6" />
        </svg>

  },
  { num: '02', title: 'Engineers, not pickers', body: 'Three pneumatic engineers on staff who specify, build and commission. Ring the workshop direct.',
    icon:
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <circle cx="14" cy="14" r="11" stroke="currentColor" strokeWidth="1.6" />
          <path d="M14 6v8l5 3" stroke="currentColor" strokeWidth="1.6" />
        </svg>

  },
  { num: '03', title: '58 years in Kent', body: 'Family-owned since 1968. Same workshop in Gravesend, three generations on. Real continuity.',
    icon:
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <path d="M4 24V10l10-6 10 6v14" stroke="currentColor" strokeWidth="1.6" />
          <path d="M11 24v-8h6v8" stroke="currentColor" strokeWidth="1.6" />
        </svg>

  },
  { num: '04', title: 'Authorised distributor', body: 'Genuine Parker, ASCO, Crouzet, John Guest, PCL and Avelair stock — never grey-market clones.',
    icon:
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <path d="M14 3l3 5 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6L5 9l6-1z" stroke="currentColor" strokeWidth="1.6" />
        </svg>

  }];

  return (
    <section className="why" id="about" data-screen-label="06 Why Captivair">
      <div className="why-bg-text">CAPTIVAIR</div>
      <div className="why-inner">
        <div className="why-head">
          <div>
            <div className="eyebrow">
              <span className="eyebrow-dot" />
              <span>WHY CAPTIVAIR</span>
            </div>
            <h2 className="h-display">
              Built by <em style={{ fontFamily: "Arial" }}>engineers,</em><br />
              run by a family,<br />
              shipped today.
            </h2>
          </div>
          <p className="why-head-sub">Four people who know every line we stock, Two engineers, two sales, one purchasing, two delivery drivers. No call centres, no automated specs, no excuses. Just the right air-line kit, on your bench, first time.




          </p>
        </div>
        <div className="why-grid">
          {cells.map((c) =>
          <div className="why-cell" key={c.num}>
              <div className="why-num">{c.num}</div>
              <div className="why-icon" style={{ color: 'var(--accent)' }}>{c.icon}</div>
              <div className="why-h">{c.title}</div>
              <div className="why-p">{c.body}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

/* ===== FINAL CTA ===== */
const FinalCTA = () => (
  <section className="final-cta" id="cta" data-screen-label="07 Final CTA">
    <div className="final-cta-inner">
      <div className="final-cta-eyebrow">CAPTIVAIR · EST 1968</div>
      <h2 className="final-cta-h">Parts You Need.</h2>
      <p className="final-cta-tagline">When You Need Them.</p>
      <div className="final-cta-btns">
        <a className="final-cta-btn-primary" href={window.CAP_URLS.shop}>
          Shop Now
          <svg width="14" height="10" viewBox="0 0 14 10" fill="none">
            <path d="M0 5h12m-4-4 4 4-4 4" stroke="currentColor" strokeWidth="1.6"/>
          </svg>
        </a>
        <a className="final-cta-btn-outline" href="tel:01474334537">
          Call Us — 01474 334537
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M2 3a1 1 0 011-1h2l1 3-1.5 1a8 8 0 003.5 3.5L8 8l3 1v2a1 1 0 01-1 1A9 9 0 012 3z"
              stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
          </svg>
        </a>
      </div>
    </div>
  </section>
);


/* ===== FOOTER ===== */
const Footer = () =>
<footer className="footer" id="contact" data-screen-label="08 Footer">
    <div className="footer-inner">
      <div className="footer-brand">
        <CaptivairLogo height={44} onDark={false} />
        <p className="footer-tag">
          Pneumatics &amp; engineering supplies.<br />
          Family owned since 1968.
        </p>
      </div>
      <div className="footer-col">
        <div className="footer-h">Products</div>
        <a href={window.CAP_URLS.shop}>Compressors</a>
        <a href={window.CAP_URLS.shop}>Cylinders</a>
        <a href={window.CAP_URLS.shop}>Solenoid valves</a>
        <a href={window.CAP_URLS.shop}>Fittings &amp; tubing</a>
        <a href={window.CAP_URLS.shop}>FRL units</a>
      </div>
      <div className="footer-col">
        <div className="footer-h">Brands</div>
        <a href={window.CAP_URLS.shop}>Parker</a>
        <a href={window.CAP_URLS.emersonasco}>ASCO</a>
        <a href={window.CAP_URLS.shop}>Crouzet</a>
        <a href={window.CAP_URLS.johnguest}>John Guest</a>
        <a href={window.CAP_URLS.shop}>PCL</a>
        <a href={window.CAP_URLS.avelair}>Avelair</a>
      </div>
      <div className="footer-col">
        <div className="footer-h">Company</div>
        <a href={window.CAP_URLS.about}>About us</a>
        <a href={window.CAP_URLS.contact}>Engineering</a>
        <a href={window.CAP_URLS.trade}>Trade accounts</a>
        <a href={window.CAP_URLS.contact}>Datasheets</a>
        <a href={window.CAP_URLS.contact}>Contact</a>
        <a href="/terms/">Terms &amp; Conditions</a>
        <a href="/shipping/">Shipping Policy</a>
        <a href="/returns/">Returns Policy</a>
        <a href="/privacy-policy/">Privacy Policy</a>
      </div>
      <div className="footer-col">
        <div className="footer-h">Workshop &amp; trade counter</div>
        <div className="footer-contact">
          <div className="fc-row">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M7 13s5-4.5 5-8a5 5 0 10-10 0c0 3.5 5 8 5 8z" stroke="currentColor" strokeWidth="1.4" />
              <circle cx="7" cy="5" r="1.6" stroke="currentColor" strokeWidth="1.4" />
            </svg>
            <div className="fc-row-text">
              <strong>Captivair Pneumatics Ltd</strong><br />
              Gravesend, Kent<br />
              DA11 0DL
            </div>
          </div>
          <div className="fc-row">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M2 3a1 1 0 011-1h2l1 3-1.5 1a8 8 0 003.5 3.5L8 8l3 1v2a1 1 0 01-1 1A9 9 0 012 3z"
            stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
            </svg>
            <div className="fc-row-text"><strong>01474 334537</strong></div>
          </div>
          <div className="fc-row">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <rect x="1.5" y="3" width="11" height="8" stroke="currentColor" strokeWidth="1.4" />
              <path d="M2 3.5l5 4 5-4" stroke="currentColor" strokeWidth="1.4" />
            </svg>
            <div className="fc-row-text"><strong>sales@captivair.co.uk</strong></div>
          </div>
        </div>
        <div className="footer-live">
          <span className="footer-live-dot" />
          TRADE COUNTER OPEN · MON–FRI · 8:30–17:00
        </div>
      </div>
    </div>
    <div className="footer-bottom">
      <span>© {new Date().getFullYear()} Captivair Pneumatics Ltd · Co. No. 00897412</span>
    </div>
  </footer>;


/* Nav is rendered as static PHP HTML in template-homepage-v2.php */


/* ===== STATS COUNTER (real, credible numbers) ===== */
const useCountUp = (target, duration = 2200) => {
  const [value, setValue] = React.useState(0);
  const ref = React.useRef(null);
  const startedRef = React.useRef(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !startedRef.current) {
          startedRef.current = true;
          const t0 = performance.now();
          const step = (now) => {
            const t = Math.min(1, (now - t0) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setValue(Math.floor(target * eased));
            if (t < 1) requestAnimationFrame(step);else
            setValue(target);
          };
          requestAnimationFrame(step);
        }
      });
    }, { threshold: 0.3 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [target, duration]);

  return [value, ref];
};

const StatCell = ({ target, label, sub, suffix, duration }) => {
  const [v, ref] = useCountUp(target, duration);
  return (
    <div className="oc-stat" ref={ref}>
      <div className="oc-stat-num">
        {v.toLocaleString()}{suffix && <span className="oc-stat-suffix">{suffix}</span>}
      </div>
      <div className="oc-stat-lbl">{label}</div>
      <div className="oc-stat-sub">{sub}</div>
    </div>);

};

const OrderCounter = () => {
  return (
    <section className="scene order-counter-section" id="stats" data-screen-label="05 Stats">
      <div className="oc-bg">
        <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"
        style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}>
          {[120, 280, 440, 600, 760].map((y) =>
          <line key={y} x1="0" y1={y} x2="1600" y2={y}
          stroke="rgba(255,255,255,0.04)" strokeWidth="0.5" />
          )}
          {[[80, 80], [1520, 80], [80, 820], [1520, 820]].map(([x, y], i) =>
          <g key={i} stroke="rgba(255,255,255,0.18)" strokeWidth="1" fill="none">
              <line x1={x - 12} y1={y} x2={x + 12} y2={y} />
              <line x1={x} y1={y - 12} x2={x} y2={y + 12} />
            </g>
          )}
          <circle r="3" fill="#C41E1E">
            <animate attributeName="cx" values="0;1600" dur="10s" repeatCount="indefinite" />
            <animate attributeName="cy" values="200;200" dur="10s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0;1;1;0" dur="10s" repeatCount="indefinite" />
          </circle>
        </svg>
      </div>

      <div className="oc-inner oc-inner-stats">
        <div className="oc-head oc-head-stats">
          <div className="eyebrow">
            <span className="eyebrow-dot" />
            <span className="eyebrow-num">05 ·</span>
            <span>BY THE NUMBERS</span>
          </div>
          <h2 className="oc-h">
            <em>Real</em> numbers,<br />real workshop.
          </h2>
          <p className="oc-lead">
            55 years on the same Gravesend industrial estate. Independently
            family-owned. ISO 9001 quality-managed. The stock and the
            credentials to keep your line running.
          </p>
        </div>

        <div className="oc-stats">
          <StatCell target={15000} label="Products in stock"
          sub="Lines on the shelf, same-day despatch"
          suffix="+" duration={2400} />
          <StatCell target={55} label="Years trading"
          sub="Family-owned since 1968 · Gravesend, Kent"
          duration={1800} />
          <StatCell target={9001} label="ISO certified"
          sub="Quality-management standard"
          duration={2200} />
        </div>
      </div>
    </section>);

};

window.OrderCounter = OrderCounter;
window.Hero = Hero;
window.Marquee = Marquee;
window.ProductScene = ProductScene;
window.CompressorBg = CompressorBg;
window.CylinderBg = CylinderBg;
window.ValveBg = ValveBg;
window.FittingBg = FittingBg;
window.WhyUs = WhyUs;
window.FinalCTA = FinalCTA;
window.Footer = Footer;

/* ===== APP BOOTSTRAP ===== */
const App = () => (
  <>
    <Hero/>
    <Marquee/>
    <Manufacturers/>
    <ProductScene
      id="compressors" num="01"
      eyebrow="COMPRESSORS · AIR GENERATION"
      title="Compressed air," italic="generated."
      lead="Piston, screw and silent compressors from Avelair and SIP. Sized for garages and bodyshops up to multi-bay industrial workshops. Specified, installed and serviced by our in-house engineers."
      specs={[
        { h: 'Range',     v: '1.5 – 160 kW' },
        { h: 'Pressure',  v: '2 – 13 bar' },
        { h: 'Tank sizes',v: '24 – 250L' },
        { h: 'Pricing',   v: 'Competitive' },
      ]}
      brands="Avelair · ABAC · SIP"
      BgComp={CompressorBg}
      browseHref={window.CAP_URLS.avelair}
    />
    <ProductScene
      id="cylinders" num="02"
      eyebrow="CYLINDERS · LINEAR ACTUATION"
      title="Force," italic="repeatable."
      lead="ISO 15552, ISO 6432, compact, guided and rodless. Bore sizes ø8 to ø320, strokes from 5 mm to 3 m. Cushioning, magnetic pistons, stainless options — pulled from stock and on a van today."
      specs={[
        { h: 'Bore',      v: 'ø8 – ø320 mm' },
        { h: 'Stroke',    v: '5 – 3000 mm' },
        { h: 'Force',     v: 'up to 22 kN' },
        { h: 'Standards', v: 'ISO 9001' },
      ]}
      brands="Parker · Emerson"
      BgComp={CylinderBg}
    />
    <ProductScene
      id="valves" num="03"
      eyebrow="SOLENOID VALVES · CONTROL"
      title="Logic," italic="at any volts."
      lead="2/2, 3/2, 5/2 and 5/3 solenoid valves — single and double pilot, manifold or sub-base mounted. Crouzet pneumatic logic, ASCO process valves, Parker pilot valves. Wired, tested, ready to bolt down."
      specs={[
        { h: 'Config',   v: '2/2 – 5/3' },
        { h: 'Voltage',  v: '24V DC / 110–240V AC' },
        { h: 'Response', v: '< 20 ms' },
        { h: 'Standards',v: 'ISO 9001' },
      ]}
      brands="Crouzet · ASCO · Parker"
      BgComp={ValveBg}
    />
    <ProductScene
      id="fittings" num="04"
      eyebrow="FITTINGS · CONNECTORS · TUBING"
      title="Every joint," italic="sealed."
      lead="Push-in, threaded, quick-release, elbow, tee, Y — the full catalogue from John Guest and Parker. Polyurethane, nylon and PTFE tubing cut to length or supplied in coils. Nothing leaves here leaking."
      specs={[
        { h: 'Thread',    v: 'BSP / NPT / Metric' },
        { h: 'Material',  v: 'Brass / SS / Composite' },
        { h: 'Tubing OD', v: '4 – 25 mm' },
        { h: 'Max PSI',   v: '230 PSI' },
      ]}
      brands="John Guest · Parker"
      BgComp={FittingBg}
      flip
    />
    <OrderCounter/>
    <WhyUs/>
    <FinalCTA/>
    <Footer/>
  </>
);

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);