// Scroll-pinned orchestrator assembly — Apple/SpaceX style narrative build

function ScrollPinnedSection() {
  const sectionRef = useRef(null);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const el = sectionRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      // 0 when section top hits viewport top; 1 when bottom hits viewport bottom
      const totalScrollable = el.offsetHeight - vh;
      if (totalScrollable <= 0) { setProgress(0); return; }
      const scrolled = Math.max(0, Math.min(totalScrollable, -rect.top));
      setProgress(scrolled / totalScrollable);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  // New narrative — the car is THE ANCHOR
  // B1 0.00–0.28: front-view F1 zooms in from distance (small → fills screen)
  // B2 0.28–0.46: car holds center; telemetry signals radiate outward
  // B3 0.46–0.72: six agent cards fan out in an orbit around the car
  // B4 0.72–1.00: connection lines draw, orchestrator card slides out with recommendation
  const p = progress;
  const ease = t => t < 0 ? 0 : t > 1 ? 1 : t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
  const bandProg = (start, end) => ease((p - start) / (end - start));

  const zoomP      = bandProg(0.00, 0.28);   // car grows from tiny → hero-size
  const signalsP   = bandProg(0.28, 0.50);   // telemetry rays fan out
  const agentP     = bandProg(0.46, 0.74);   // agents slide into position
  const connectP   = bandProg(0.68, 0.88);   // connection lines draw
  const decisionP  = bandProg(0.84, 1.00);   // orchestrator card + pulse

  // Car zoom: starts at scale 0.06 at far vanishing point (slight y offset — horizon)
  // ends at scale 1.0 filling central region. After B1, holds at 1.0 then slightly backs off
  // during B3 so agents read. Max scale = 1.0 at p≈0.28.
  const carScale = (() => {
    if (p < 0.28) return 0.06 + zoomP * 0.94;        // 0.06 → 1.00
    if (p < 0.46) return 1.0 - (p - 0.28) / 0.18 * 0.15; // 1.0 → 0.85 (backs off a touch)
    return 0.85;                                      // holds
  })();
  // Car Y: starts slightly up at the horizon; settles at vertical center
  const carY = (() => {
    if (p < 0.28) return 310 - zoomP * 40;           // 310 → 270 (horizon → center)
    return 270;
  })();

  const agents = [
    { id: 'pace',  name: 'Pace Agent',         color: '#a29bfe', model: 'XGBoost',   x: 180, y: 120, out: '1:27.48' },
    { id: 'tire',  name: 'Tire Agent',         color: '#ff5a3f', model: 'TCN + MCD', x: 980, y: 120, out: '12 laps' },
    { id: 'race',  name: 'Race Situation',     color: '#ffbd33', model: 'LightGBM',  x: 110, y: 360, out: 'Pit L35' },
    { id: 'pit',   name: 'Pit Strategy',       color: '#3385ff', model: 'HistGBT',   x: 1050, y: 360, out: 'Box now' },
    { id: 'radio', name: 'Radio Agent',        color: '#43d67a', model: 'RoBERTa',   x: 240, y: 590, out: 'Tires ok' },
    { id: 'rag',   name: 'RAG Agent',          color: '#b58cff', model: 'BGE-M3',    x: 920, y: 590, out: 'Art. 36' },
  ];
  const cx = 580, cy = 270;

  const captions = [
    { from: 0.02, to: 0.26, eyebrow: 'SPAIN · LAP 34', text: 'One car. Six agents watching.',
      sub: 'Lap 34 of 66. Hard tires, 12 laps old. Gap to P2 is 1.2s and closing \u2014 a decision is about to be needed.' },
    { from: 0.28, to: 0.46, eyebrow: 'INGEST', text: 'Fourteen megabytes per second.',
      sub: 'Throttle, tire temperatures, radio chatter, race-control flags \u2014 every signal streams live into the system.' },
    { from: 0.48, to: 0.70, eyebrow: 'REASON', text: 'Each agent produces its own call.',
      sub: 'Six specialists run in parallel. Structured Pydantic output, calibrated confidence, under a second.' },
    { from: 0.72, to: 1.00, eyebrow: 'DECIDE', text: 'One recommendation.',
      sub: 'The orchestrator weighs the six opinions against FIA rules and simulation, and returns the call.' },
  ];
  const activeCap = captions.find(c => p >= c.from && p <= c.to) || captions[captions.length - 1];
  const capOpacity = (() => {
    const c = activeCap;
    const fade = 0.04;
    if (p < c.from + fade) return (p - c.from) / fade;
    if (p > c.to - fade) return Math.max(0, (c.to - p) / fade);
    return 1;
  })();

  return (
    <section ref={sectionRef} id="pinned" className="pinned-section">
      <div className="pinned-stage">
        {/* backdrop */}
        <div className="pinned-grid"/>
        <div className="pinned-halo" style={{ opacity: 0.3 + decisionP * 0.5 }}/>

        {/* Progress rail */}
        <div className="pinned-rail">
          <div className="pinned-rail-label mono">
            <span style={{ color: 'rgba(255,255,255,0.5)' }}>{Math.round(p * 100).toString().padStart(2, '0')}</span>
            <span style={{ color: 'rgba(255,255,255,0.25)' }}> / 100</span>
          </div>
          <div className="pinned-rail-track">
            <div className="pinned-rail-fill" style={{ transform: `scaleY(${p})` }}/>
            {[0.28, 0.48, 0.72].map((t, i) => (
              <div key={i} className="pinned-rail-tick"
                   style={{ top: `${t * 100}%`, background: p >= t ? '#a29bfe' : 'rgba(255,255,255,0.2)' }}/>
            ))}
          </div>
        </div>

        {/* Eyebrow */}
        <div className="pinned-eyebrow mono">
          <span>The decision loop</span>
          <span className="pinned-counter">
            {activeCap?.eyebrow || 'INGEST'}
          </span>
        </div>

        {/* Main SVG scene */}
        <svg className="pinned-svg" viewBox="0 0 1160 720" preserveAspectRatio="xMidYMid meet">
          <defs>
            <CarDefs/>
            <linearGradient id="pinHeroLine" x1="0" x2="1">
              <stop offset="0%" stopColor="#a29bfe" stopOpacity="0"/>
              <stop offset="50%" stopColor="#a29bfe" stopOpacity="0.7"/>
              <stop offset="100%" stopColor="#3385ff" stopOpacity="0"/>
            </linearGradient>
            <radialGradient id="pinCore">
              <stop offset="0%" stopColor="#a29bfe" stopOpacity="0.9"/>
              <stop offset="50%" stopColor="#6c5ce7" stopOpacity="0.5"/>
              <stop offset="100%" stopColor="#6c5ce7" stopOpacity="0"/>
            </radialGradient>
            <linearGradient id="speedTrail" x1="0" x2="1">
              <stop offset="0%" stopColor="#a29bfe" stopOpacity="0"/>
              <stop offset="100%" stopColor="#a29bfe" stopOpacity="0.6"/>
            </linearGradient>
            <filter id="pinGlow">
              <feGaussianBlur stdDeviation="3"/>
            </filter>
          </defs>

          {/* soft vignette / vanishing point glow */}
          <circle cx={cx} cy={cy} r="320" fill="url(#pinCore)"
                  opacity={0.15 + signalsP * 0.3 + connectP * 0.2}/>

          {/* PERSPECTIVE FLOOR — a grid that recedes to the car's position.
              Acts as a vanishing-point cue during the zoom. */}
          {zoomP > 0 && zoomP < 1 && (() => {
            const vanishX = cx, vanishY = cy;
            const lines = [];
            for (let i = -6; i <= 6; i++) {
              const bottomX = cx + i * 140;
              lines.push(
                <line key={'r' + i} x1={bottomX} y1="720" x2={vanishX} y2={vanishY}
                      stroke="rgba(162,155,254,0.12)" strokeWidth="0.8"/>
              );
            }
            // horizon lines
            for (let j = 1; j <= 6; j++) {
              const t = j / 7;
              const y = vanishY + (720 - vanishY) * t;
              const shrink = 1 - (1 - t);
              const x1 = vanishX - 900 * shrink;
              const x2 = vanishX + 900 * shrink;
              lines.push(
                <line key={'h' + j} x1={x1} y1={y} x2={x2} y2={y}
                      stroke="rgba(162,155,254,0.08)" strokeWidth="0.8"/>
              );
            }
            return <g opacity={Math.max(0, 1 - signalsP) * 0.9}>{lines}</g>;
          })()}

          {/* TELEMETRY RAYS — fan out from the car as it settles */}
          {signalsP > 0 && (
            <g>
              {Array.from({ length: 16 }, (_, i) => {
                const angle = (i / 16) * Math.PI * 2;
                const len = 110 + signalsP * 150;
                const x1 = cx + Math.cos(angle) * 95;
                const y1 = cy + Math.sin(angle) * 95;
                const x2 = cx + Math.cos(angle) * len;
                const y2 = cy + Math.sin(angle) * len;
                return (
                  <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
                        stroke="#a29bfe"
                        strokeOpacity={0.42 * signalsP * (1 - agentP * 0.5)}
                        strokeWidth="1"/>
                );
              })}
              {/* inner pulse ring */}
              {(() => {
                const pulseT = (p * 2) % 1;
                return (
                  <circle cx={cx} cy={cy} r={90 + pulseT * 80} fill="none"
                          stroke="#a29bfe" strokeWidth="1.2"
                          opacity={(1 - pulseT) * 0.5 * signalsP}/>
                );
              })()}
            </g>
          )}

          {/* THE CAR — F1 front view, scaling from distance to fill screen */}
          {/* The SVG is 384×322, origin top-left. Translate so center = (cx, cy) */}
          <g transform={`translate(${cx} ${carY}) scale(${carScale}) translate(-192 -161)`}>
            <image href="assets/f1-front-brand.svg?v=3" x="0" y="0" width="384" height="322"/>
            {/* headlight / core glow, shown once car is hero-size */}
            {carScale > 0.7 && (
              <circle cx="192" cy="190" r="70"
                      fill="url(#pinCore)" opacity={Math.min(1, (carScale - 0.7) * 3) * 0.7}/>
            )}
          </g>

          {/* AGENT CARDS — fan out around the settled car */}
          {agents.map((a, i) => {
            const delay = i * 0.04;
            const ap = Math.max(0, Math.min(1, (agentP - delay) * 1.6));
            if (ap <= 0) return null;

            // slide in from the center
            const x = cx + (a.x - cx) * ap;
            const y = cy + (a.y - cy) * ap;

            const cDraw = Math.max(0, Math.min(1, connectP * 1.3 - i * 0.04));

            return (
              <g key={a.id}>
                {/* Connection line from car to card */}
                {connectP > 0 && (() => {
                  const lx = cx + (a.x - cx) * cDraw;
                  const ly = cy + (a.y - cy) * cDraw;
                  return (
                    <g>
                      <line x1={cx} y1={cy} x2={a.x} y2={a.y}
                            stroke="rgba(255,255,255,0.06)" strokeWidth="1"/>
                      <line x1={cx} y1={cy} x2={lx} y2={ly}
                            stroke={a.color} strokeWidth="1.3" opacity="0.75"
                            style={{ filter: `drop-shadow(0 0 4px ${a.color})` }}/>
                      {/* moving pulse along the line */}
                      {decisionP > 0 && cDraw >= 1 && (() => {
                        const pulseT = ((p * 3) + i * 0.16) % 1;
                        const px = cx + (a.x - cx) * pulseT;
                        const py = cy + (a.y - cy) * pulseT;
                        return <circle cx={px} cy={py} r="2.5" fill={a.color}
                                       style={{ filter: `drop-shadow(0 0 6px ${a.color})` }}/>;
                      })()}
                    </g>
                  );
                })()}

                {/* card — hidden on mobile via CSS */}
                <g className="pinned-agent-cards">
                  <g transform={`translate(${x - 92} ${y - 32})`} style={{ opacity: ap }}>
                    <rect width="184" height="64" rx="10"
                          fill="#13141e"
                          stroke={connectP > 0 ? a.color : 'rgba(255,255,255,0.15)'}
                          strokeWidth={connectP > 0 ? 1.3 : 1}
                          style={{ transition: 'stroke 0.4s' }}/>
                    <circle cx="16" cy="18" r="4" fill={a.color}
                            style={{ filter: `drop-shadow(0 0 6px ${a.color})` }}/>
                    <text x="28" y="22" fontFamily="var(--font-display)" fontSize="13"
                          fill="#fff" fontWeight="500" letterSpacing="-0.01em">{a.name}</text>
                    <text x="16" y="40" fontFamily="var(--font-mono)" fontSize="9"
                          fill="rgba(255,255,255,0.45)" letterSpacing="0.1em">{a.model.toUpperCase()}</text>
                    {/* Output value */}
                    <text x="16" y="56" fontFamily="var(--font-mono)" fontSize="10"
                          fill={a.color} letterSpacing="0.04em" opacity={connectP}>→ {a.out}</text>
                  </g>
                </g>
              </g>
            );
          })}

          {/* DECISION CARD — slides out from the car, with a connecting pulse line */}
          {decisionP > 0 && (() => {
            const dy = cy + 260 - (1 - decisionP) * 40;
            return (
              <g style={{ opacity: decisionP }}>
                {/* connector line from car center down to card */}
                <line x1={cx} y1={cy + 60} x2={cx} y2={dy - 36}
                      stroke="#a29bfe" strokeWidth="1.4" opacity="0.85"
                      style={{ filter: 'drop-shadow(0 0 6px rgba(162,155,254,0.7))' }}/>
                {/* moving pulse along the connecting line */}
                {(() => {
                  const pulseT = (p * 2.5) % 1;
                  const py = (cy + 60) + (dy - 36 - (cy + 60)) * pulseT;
                  return <circle cx={cx} cy={py} r="3.5" fill="#a29bfe"
                                 style={{ filter: 'drop-shadow(0 0 8px #a29bfe)' }}/>;
                })()}
                <circle cx={cx} cy={cy + 60} r="4" fill="#a29bfe"
                        style={{ filter: 'drop-shadow(0 0 8px #a29bfe)' }}/>
                <circle cx={cx} cy={dy - 36} r="4" fill="#a29bfe"
                        style={{ filter: 'drop-shadow(0 0 8px #a29bfe)' }}/>

                <g transform={`translate(${cx}, ${dy})`}>
                  <rect x="-240" y="-28" width="480" height="76" rx="14"
                        fill="rgba(15,16,32,0.96)"
                        stroke="rgba(162,155,254,0.6)"
                        strokeWidth="1.3"
                        style={{ filter: 'drop-shadow(0 0 24px rgba(108,92,231,0.35))' }}/>
                  <rect x="-240" y="-28" width="4" height="76" rx="2" fill="#a29bfe"/>
                  <text x="-220" y="-8" fontFamily="var(--font-mono)" fontSize="9"
                        fill="#a29bfe" letterSpacing="0.2em">▶ ORCHESTRATOR · CONF 0.87</text>
                  <text x="-220" y="20" fontFamily="var(--font-display)" fontSize="22"
                        fill="#fff" fontWeight="600" letterSpacing="-0.02em">
                    Pit now for mediums
                  </text>
                  <text x="-220" y="40" fontFamily="var(--font-mono)" fontSize="10"
                        fill="rgba(255,255,255,0.55)" letterSpacing="0.05em">
                    undercut L35 · +0.9s stop · gain 2.1s vs P2
                  </text>
                </g>
              </g>
            );
          })()}
        </svg>

        {/* Captions */}
        <div className="pinned-caption" style={{ opacity: capOpacity }}>
          <div className="pinned-caption-eyebrow mono">
            STEP 0{captions.indexOf(activeCap) + 1} · OF 04
          </div>
          <h3>{activeCap.text}</h3>
          <p>{activeCap.sub}</p>
        </div>

        {/* Skip hint */}
        {p < 0.04 && (
          <div className="pinned-skiphint mono">
            <span>Scroll</span>
            <svg width="10" height="14" viewBox="0 0 10 14" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M5 1v12m0 0l-4-4m4 4l4-4"/>
            </svg>
          </div>
        )}
      </div>

      <style>{`
        .pinned-section {
          height: 420vh;
          position: relative;
          background: var(--bg-0);
        }
        .pinned-stage {
          position: sticky;
          top: 0;
          height: 100vh;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          background:
            radial-gradient(ellipse at center, rgba(108,92,231,0.07) 0%, transparent 70%),
            var(--bg-0);
        }
        .pinned-grid {
          position: absolute; inset: 0;
          background-image:
            linear-gradient(rgba(162,155,254,0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(162,155,254,0.035) 1px, transparent 1px);
          background-size: 60px 60px;
          mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
          -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
        }
        .pinned-halo {
          position: absolute; left: 50%; top: 50%;
          width: 900px; height: 900px;
          transform: translate(-50%, -50%);
          background: radial-gradient(circle, rgba(108,92,231,0.12) 0%, transparent 60%);
          pointer-events: none;
          transition: opacity 0.4s;
        }
        .pinned-rail {
          position: absolute;
          top: 50%;
          right: 40px;
          transform: translateY(-50%);
          display: flex; flex-direction: column; align-items: center; gap: 14px;
          z-index: 3;
        }
        .pinned-rail-label {
          font-size: 10px;
          letter-spacing: 0.14em;
        }
        .pinned-rail-track {
          position: relative;
          width: 2px; height: 240px;
          background: rgba(255,255,255,0.08);
          border-radius: 1px;
        }
        .pinned-rail-fill {
          position: absolute;
          top: 0; left: 0; right: 0;
          height: 100%;
          background: linear-gradient(180deg, transparent 0%, #a29bfe 100%);
          transform-origin: top;
          border-radius: 1px;
        }
        .pinned-rail-tick {
          position: absolute;
          left: -3px;
          width: 8px; height: 2px;
          background: rgba(255,255,255,0.2);
          transition: background 0.3s;
        }
        .pinned-eyebrow {
          position: absolute;
          top: 40px; left: 40px;
          display: flex; gap: 18px; align-items: center;
          font-size: 10px;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          color: rgba(255,255,255,0.5);
          z-index: 3;
        }
        .pinned-counter {
          color: #a29bfe;
          padding: 4px 10px;
          border: 1px solid rgba(162,155,254,0.4);
          border-radius: 999px;
        }
        .pinned-svg {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 90%;
          max-width: 1160px;
          height: auto;
          aspect-ratio: 1160 / 720;
          z-index: 2;
        }
        .pinned-caption {
          position: absolute;
          bottom: 56px;
          left: 50%;
          transform: translateX(-50%);
          max-width: 640px;
          text-align: center;
          z-index: 4;
          transition: opacity 0.3s;
        }
        .pinned-caption-eyebrow {
          font-size: 10px;
          letter-spacing: 0.2em;
          color: #a29bfe;
          margin-bottom: 10px;
        }
        .pinned-caption h3 {
          font-family: var(--font-display);
          font-size: 38px;
          font-weight: 600;
          letter-spacing: -0.025em;
          line-height: 1.1;
          color: #fff;
          margin: 0 0 10px;
        }
        .pinned-caption p {
          font-size: 15px;
          line-height: 1.55;
          color: var(--fg-3);
          margin: 0;
          max-width: 520px;
          margin-inline: auto;
        }
        .pinned-skiphint {
          position: absolute;
          bottom: 32px; right: 40px;
          display: flex; align-items: center; gap: 8px;
          font-size: 10px; letter-spacing: 0.2em;
          color: rgba(255,255,255,0.4);
          animation: skipBob 2s ease-in-out infinite;
        }
        @keyframes skipBob {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(4px); }
        }
        @media (max-width: 900px) {
          .pinned-section { height: 360vh; }
          .pinned-caption h3 { font-size: 26px; }
          .pinned-rail { right: 14px; }
          .pinned-eyebrow { top: 20px; left: 20px; font-size: 9px; }
        }
        @media (max-width: 640px) {
          .pinned-agent-cards { display: none; }
          .pinned-rail-track { height: 160px; }
          .pinned-eyebrow { font-size: 8px; }
        }
        @media (max-width: 480px) {
          .pinned-caption h3 { font-size: 22px; }
          .pinned-caption p { font-size: 13px; }
          .pinned-caption { bottom: 32px; padding: 0 16px; }
        }
      `}</style>
    </section>
  );
}

// F1 car — side view, brand colors, nose pointing RIGHT.
// Coordinates: origin at cockpit center. Length ~260, height ~44.
// Usage: <g transform="translate(x, y) scale(k)"><CarSilhouette /></g>
function CarSilhouette({ wheelPhase = 0 }) {
  return (
    <g>
      {/* shadow under car */}
      <ellipse cx="0" cy="22" rx="130" ry="5" fill="#000" opacity="0.4" filter="blur(4px)"/>

      {/* REAR wheel */}
      <g transform={`translate(-86, 14)`}>
        <circle r="18" fill="#0c0d14" stroke="#1a1b29" strokeWidth="1.5"/>
        <circle r="18" fill="none" stroke="rgba(162,155,254,0.25)" strokeWidth="0.6"/>
        <g transform={`rotate(${wheelPhase})`}>
          {[0, 60, 120].map(a => (
            <line key={a} x1="-14" y1="0" x2="14" y2="0"
                  transform={`rotate(${a})`}
                  stroke="rgba(255,255,255,0.15)" strokeWidth="1.5" strokeLinecap="round"/>
          ))}
        </g>
        <circle r="6" fill="#1a1b29" stroke="#a29bfe" strokeWidth="0.8"/>
        <circle r="2" fill="#a29bfe"/>
      </g>

      {/* REAR wing */}
      <g>
        <path d="M -108 -8 L -94 -24 L -76 -24 L -76 -6 L -108 -6 Z"
              fill="#6c5ce7"/>
        <rect x="-94" y="-26" width="18" height="3" fill="#a29bfe"/>
        {/* endplate detail */}
        <line x1="-94" y1="-23" x2="-94" y2="-6" stroke="#3d3a6b" strokeWidth="0.6"/>
      </g>

      {/* MAIN BODY / chassis — sidepod + engine cover */}
      <path d="
        M -88 -6
        L -78 -12
        L -54 -14
        L -32 -16
        L -10 -16
        L 18 -14
        L 42 -10
        L 62 -6
        L 80 -4
        L 100 -2
        L 118 0
        L 128 2
        L 128 6
        L 90 10
        L 60 12
        L 30 14
        L 0 14
        L -30 14
        L -60 14
        L -82 12
        L -88 6
        Z"
        fill="#0f1020"
        stroke="rgba(162,155,254,0.5)" strokeWidth="0.8"/>

      {/* subtle body highlight */}
      <path d="M -70 -10 L -30 -13 L 20 -12 L 55 -8 L 90 -4"
            fill="none" stroke="rgba(255,255,255,0.15)" strokeWidth="0.6"/>

      {/* SIDEPOD / air intake */}
      <path d="M -52 -6 L -30 -8 L -8 -8 L -14 2 L -52 2 Z"
            fill="#1a1b29" stroke="rgba(108,92,231,0.6)" strokeWidth="0.6"/>
      {/* intake louvers */}
      <line x1="-44" y1="-3" x2="-34" y2="-3" stroke="#a29bfe" strokeWidth="0.6" opacity="0.7"/>
      <line x1="-44" y1="0" x2="-30" y2="0" stroke="#a29bfe" strokeWidth="0.6" opacity="0.5"/>

      {/* HALO */}
      <path d="M -22 -16 C -22 -30, 6 -30, 12 -22 L 12 -16"
            fill="none" stroke="#0c0d14" strokeWidth="3" strokeLinecap="round"/>
      <path d="M -22 -16 C -22 -30, 6 -30, 12 -22 L 12 -16"
            fill="none" stroke="#1e1f2e" strokeWidth="1.5" strokeLinecap="round"/>

      {/* COCKPIT opening / helmet */}
      <path d="M -16 -17 L 4 -23 L 14 -18 L 14 -14 L -16 -14 Z"
            fill="#0c0d14"/>
      {/* helmet */}
      <ellipse cx="-2" cy="-20" rx="10" ry="6" fill="#a29bfe"/>
      <ellipse cx="-2" cy="-20" rx="10" ry="6" fill="url(#helmetGrad)" opacity="0.7"/>
      {/* visor */}
      <path d="M -6 -22 L 4 -22 L 4 -19 L -6 -19 Z" fill="#0c0d14"/>
      <path d="M -6 -22 L 4 -22 L 4 -19 L -6 -19 Z" fill="#3385ff" opacity="0.6"/>

      {/* FRONT wing */}
      <g>
        <path d="M 118 2 L 152 -2 L 150 8 L 118 10 Z" fill="#a29bfe"/>
        <rect x="134" y="-4" width="20" height="3" fill="#6c5ce7"/>
        <rect x="144" y="-6" width="10" height="2" fill="#a29bfe"/>
        {/* endplate */}
        <path d="M 152 -6 L 156 -8 L 156 12 L 152 10 Z" fill="#6c5ce7"/>
      </g>

      {/* NOSE cone */}
      <path d="M 100 -2 L 132 0 L 132 4 L 100 2 Z"
            fill="#13142a" stroke="rgba(162,155,254,0.4)" strokeWidth="0.6"/>

      {/* FRONT wheel */}
      <g transform={`translate(92, 14)`}>
        <circle r="18" fill="#0c0d14" stroke="#1a1b29" strokeWidth="1.5"/>
        <circle r="18" fill="none" stroke="rgba(162,155,254,0.25)" strokeWidth="0.6"/>
        <g transform={`rotate(${wheelPhase * 1.2})`}>
          {[0, 60, 120].map(a => (
            <line key={a} x1="-14" y1="0" x2="14" y2="0"
                  transform={`rotate(${a})`}
                  stroke="rgba(255,255,255,0.15)" strokeWidth="1.5" strokeLinecap="round"/>
          ))}
        </g>
        <circle r="6" fill="#1a1b29" stroke="#a29bfe" strokeWidth="0.8"/>
        <circle r="2" fill="#a29bfe"/>
      </g>

      {/* brake duct hint */}
      <rect x="80" y="9" width="8" height="4" rx="1" fill="#6c5ce7" opacity="0.7"/>
      <rect x="-102" y="9" width="8" height="4" rx="1" fill="#6c5ce7" opacity="0.7"/>

      {/* number / livery accent */}
      <text x="-40" y="2" fontFamily="var(--font-mono)" fontSize="7"
            fill="#a29bfe" letterSpacing="0.15em" opacity="0.8">F1SM</text>
    </g>
  );
}

// Shared gradient defs for the car (reference inside any SVG using it)
function CarDefs() {
  return (
    <defs>
      <linearGradient id="helmetGrad" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stopColor="#fff" stopOpacity="0.4"/>
        <stop offset="100%" stopColor="#fff" stopOpacity="0"/>
      </linearGradient>
    </defs>
  );
}

Object.assign(window, { ScrollPinnedSection, CarSilhouette, CarDefs });