/* eslint-disable */
/* global React, Reveal, useInView, prefersReducedMotion */

function Capability() {
  const [svgRef, inView] = useInView({ threshold: 0.3 });
  const draw = inView || prefersReducedMotion;

  const stages = [
    { y: 60,  label: 'Mechanical' },
    { y: 160, label: 'Fabrication' },
    { y: 260, label: 'Wiring' },
    { y: 360, label: 'Tuning' },
    { y: 460, label: 'Support' },
  ];

  return (
    <section className="section" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div className="capability__grid">
          <Reveal>
            <div className="capability__copy">
              <hr className="hr-gold" />
              <span className="eyebrow">Capability</span>
              <h2>Every stage. <span className="gold">One roof.</span></h2>
              <p>
                Mechanical, electrical, fabrication and tuning happen on the same floor.
                No outsourced labour, honest workmanship — the car never leaves the
                workshop, never gets handed off, and the same hands that built the engine
                are the ones tuning it on our dyno.
              </p>
            </div>
          </Reveal>

          <Reveal delay={200}>
            <div className="flow">
              <svg viewBox="0 0 360 540" ref={svgRef} preserveAspectRatio="xMidYMid meet">
                <defs>
                  <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
                    <path d="M0,0 L10,5 L0,10 Z" fill="var(--gold)" />
                  </marker>
                </defs>

                {/* Background grid */}
                <g opacity="0.08">
                  {[0, 1, 2, 3, 4].map((i) => (
                    <line key={'h' + i} x1="0" x2="360" y1={108 * i} y2={108 * i} stroke="var(--gold)" strokeWidth="1" />
                  ))}
                </g>

                {/* Connecting line — draws on scroll */}
                <path
                  d="M 80 60 L 240 60 L 240 160 L 80 160 L 80 260 L 240 260 L 240 360 L 80 360 L 80 460 L 240 460"
                  stroke="var(--gold)"
                  strokeWidth="2"
                  fill="none"
                  strokeLinecap="square"
                  strokeDasharray="1200"
                  strokeDashoffset={draw ? 0 : 1200}
                  style={{ transition: 'stroke-dashoffset 2200ms cubic-bezier(0.65,0,0.35,1) 200ms' }}
                  markerEnd="url(#arrow)"
                />

                {/* Stage nodes */}
                {stages.map((s, i) => {
                  const cx = i % 2 === 0 ? 80 : 240;
                  const delay = 240 + i * 280;
                  return (
                    <g key={s.label}>
                      <rect
                        x={cx - 56} y={s.y - 22}
                        width="112" height="44"
                        fill="var(--bg-2)"
                        stroke="var(--gold)"
                        strokeWidth="1.5"
                        rx="2"
                        opacity={draw ? 1 : 0}
                        style={{ transition: `opacity 600ms cubic-bezier(0.65,0,0.35,1) ${delay}ms` }}
                      />
                      <text
                        x={cx} y={s.y + 5}
                        textAnchor="middle"
                        fontFamily="JetBrains Mono, monospace"
                        fontSize="11"
                        letterSpacing="2"
                        fill="var(--gold)"
                        opacity={draw ? 1 : 0}
                        style={{ textTransform: 'uppercase', transition: `opacity 600ms ${delay + 120}ms` }}
                      >
                        {s.label.toUpperCase()}
                      </text>
                      <text
                        x={cx + (i % 2 === 0 ? -74 : 74)} y={s.y + 5}
                        textAnchor={i % 2 === 0 ? 'end' : 'start'}
                        fontFamily="JetBrains Mono, monospace"
                        fontSize="10"
                        fill="var(--fg-3)"
                        opacity={draw ? 1 : 0}
                        style={{ transition: `opacity 600ms ${delay + 200}ms` }}
                      >
                        {String(i + 1).padStart(2, '0')}
                      </text>
                    </g>
                  );
                })}
              </svg>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.Capability = Capability;