// Product clip components — hover to play

const LapCompareClip = () => (
  <div className="clip scene-lap">
    <div className="clip-chrome">
      <div className="dot-row"><span/><span/><span/></div>
      <div className="title">lap-compare · spa-francorchamps.laps</div>
    </div>
    <div className="clip-canvas">
      <div className="gridline" style={{top:'30%'}}/>
      <div className="gridline" style={{top:'50%'}}/>
      <div className="gridline" style={{top:'70%'}}/>
      <div className="axis"/>
      <svg viewBox="0 0 400 200" preserveAspectRatio="none">
        <path className="trace trace-b" d="M 10 140 C 60 80, 90 60, 130 100 S 200 160, 250 110 S 330 60, 390 90"/>
        <path className="trace trace-a" d="M 10 150 C 50 60, 100 40, 140 90 S 200 170, 260 100 S 340 70, 390 80"/>
      </svg>
      <div className="scrub"/>
      <div className="legend">
        <div><span className="sw" style={{background:'var(--red)'}}/> LAP 14 · 1:42.108</div>
        <div><span className="sw" style={{background:'#6effa2'}}/> LAP 09 · 1:42.884</div>
      </div>
      <div className="delta">
        <span className="sub">Δ TIME</span>
        <span className="big">−0.776</span>
      </div>
    </div>
    <div className="clip-play-badge">Live</div>
    <div className="clip-label">
      <h3>Lap comparison</h3>
      <p>Overlay up to 8 laps. Spot where you lose time, meter by meter.</p>
    </div>
  </div>
);

const TrackMapClip = () => (
  <div className="clip scene-map">
    <div className="clip-chrome">
      <div className="dot-row"><span/><span/><span/></div>
      <div className="title">track-view · monza.session</div>
    </div>
    <div className="clip-canvas">
      <svg className="track" viewBox="0 0 460 320">
        <path className="trk-base" d="M 60 180 C 60 100, 120 40, 220 40 S 380 80, 400 160 S 340 260, 240 260 S 80 260, 60 180 Z"/>
        <path className="trk-color" stroke="#6effa2" d="M 60 180 C 60 100, 120 40, 220 40"/>
        <path className="trk-color" stroke="#d4c93a" d="M 220 40 C 320 40, 380 80, 400 160"/>
        <path className="trk-color" stroke="var(--red)" d="M 400 160 C 380 240, 340 260, 240 260"/>
        <path className="trk-color" stroke="#3a9aff" d="M 240 260 C 140 260, 60 240, 60 180"/>
        <circle className="car" r="5"/>
      </svg>
      <div className="stat-panel">
        <div className="stat"><div className="k">Sector</div><div className="v r">S2</div></div>
        <div className="stat"><div className="k">Speed</div><div className="v">284</div></div>
        <div className="stat"><div className="k">Gear</div><div className="v">7</div></div>
        <div className="stat"><div className="k">Lap</div><div className="v">1:42.9</div></div>
      </div>
    </div>
    <div className="clip-play-badge">Live</div>
    <div className="clip-label">
      <h3>Interactive track map</h3>
      <p>Every channel plotted onto a reconstructed circuit. Scrub, zoom, compare.</p>
    </div>
  </div>
);

const InputsClip = () => (
  <div className="clip scene-inputs">
    <div className="clip-chrome">
      <div className="dot-row"><span/><span/><span/></div>
      <div className="title">driver-inputs · t1-braking</div>
    </div>
    <div className="clip-canvas">
      <div className="inputs-wrap">
        <div className="ch">
          <div className="ch-label">Throttle</div>
          <div className="ch-val">84%</div>
          <div className="ch-bar"><div className="ch-fill t"/></div>
        </div>
        <div className="ch">
          <div className="ch-label">Brake</div>
          <div className="ch-val">12%</div>
          <div className="ch-bar"><div className="ch-fill b"/></div>
        </div>
        <div className="ch">
          <div className="ch-label">Steering</div>
          <div className="ch-val">−14°</div>
          <div className="ch-bar"><div className="ch-fill s"/></div>
        </div>
      </div>
    </div>
    <div className="clip-play-badge">Live</div>
    <div className="clip-label">
      <h3>Driver inputs</h3>
      <p>Throttle, brake, steering — sampled 100× per second, visualized in real time.</p>
    </div>
  </div>
);

const GhostClip = () => (
  <div className="clip scene-ghost">
    <div className="clip-chrome">
      <div className="dot-row"><span/><span/><span/></div>
      <div className="title">ghost-car · live-overlay</div>
    </div>
    <div className="clip-canvas">
      <div className="horizon"/>
      <div className="road"/>
      <div className="lane"/>
      <div className="car-ghost"/>
      <div className="car-me"/>
      <div className="hud">
        <div className="speed">284</div>
        <div className="kph">KM/H · GEAR 7</div>
        <div className="lap">+0.142s vs. ghost</div>
      </div>
    </div>
    <div className="clip-play-badge">Live</div>
    <div className="clip-label">
      <h3>Ghost car replay</h3>
      <p>Race a previous lap as a translucent reference car — on track, in real time.</p>
    </div>
  </div>
);

const HeatmapClip = () => {
  const cells = [];
  const palette = ['#1a7a3e', '#2f9a4a', '#78b83a', '#b4b43a', '#d4a93a', '#d47a3a', '#d45a3a', '#e34a30', '#e3201c'];
  for (let i = 0; i < 160; i++) {
    const r = Math.floor(Math.random() * palette.length);
    const delay = (Math.random() * 4).toFixed(2);
    cells.push(<span key={i} style={{background: palette[r], animationDelay: `-${delay}s`}}/>);
  }
  return (
    <div className="clip scene-heat">
      <div className="clip-chrome">
        <div className="dot-row"><span/><span/><span/></div>
        <div className="title">sector-heatmap · 18-laps</div>
      </div>
      <div className="clip-canvas">
        <div className="cells">{cells}</div>
        <div className="label-row">TIME LOSS PER SECTOR</div>
        <div className="scale"/>
        <div className="scale-lbl"><span>GAINED</span><span>NEUTRAL</span><span>LOST</span></div>
      </div>
      <div className="clip-play-badge">Live</div>
      <div className="clip-label">
        <h3>Sector heatmap</h3>
        <p>Your entire session at a glance. Red where you're slow, green where you fly.</p>
      </div>
    </div>
  );
};

const GaugeClip = () => (
  <div className="clip scene-gauge">
    <div className="clip-chrome">
      <div className="dot-row"><span/><span/><span/></div>
      <div className="title">vehicle-telemetry · tires.gforce</div>
    </div>
    <div className="clip-canvas">
      <div className="gauges">
        <div className="tires">
          {['FL','FR','RL','RR'].map((p,i) => (
            <div key={p} className="tire">
              <div className="t-lbl">{p}</div>
              <div className="t-row">
                <span style={{animationDelay:`-${i*0.2}s`}}/>
                <span style={{animationDelay:`-${i*0.2+0.3}s`}}/>
                <span style={{animationDelay:`-${i*0.2+0.6}s`}}/>
              </div>
              <div className="t-val">{[98,104,92,101][i]}°C</div>
            </div>
          ))}
        </div>
        <div className="gcircle">
          <div className="glbl">G-FORCE</div>
          <div className="gdot"/>
        </div>
      </div>
    </div>
    <div className="clip-play-badge">Live</div>
    <div className="clip-label">
      <h3>Tire temps &amp; G-force</h3>
      <p>Monitor tire wear, camber load, lateral Gs. Tune your setup with real data.</p>
    </div>
  </div>
);

window.LapCompareClip = LapCompareClip;
window.TrackMapClip = TrackMapClip;
window.InputsClip = InputsClip;
window.GhostClip = GhostClip;
window.HeatmapClip = HeatmapClip;
window.GaugeClip = GaugeClip;