/* global React */
const { useState, useEffect, useRef, useMemo } = React;

/* ===========================================================================
   Watch frame + atoms (shared)
   =========================================================================== */

function WatchFrame({ children, scale = 1, screenW = 198, screenH = 242 }) {
  const bezel = 18;
  const W = screenW + bezel * 2;
  const H = screenH + bezel * 2;
  const radius = 56;
  return (
    <div style={{
      width: W * scale,
      height: H * scale,
      position: "relative",
      filter: "drop-shadow(0 40px 60px rgba(0,0,0,.7))"
    }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, #1a1d23 0%, #0a0c10 60%)",
        borderRadius: radius * scale,
        boxShadow: "inset 0 0 0 2px #2b2f37, inset 0 1px 0 rgba(255,255,255,.06)"
      }} />
      <div style={{
        position: "absolute",
        right: -6 * scale,
        top: H * scale * 0.32,
        width: 8 * scale,
        height: 22 * scale,
        background: "linear-gradient(180deg,#3a3e46,#1a1d23)",
        borderRadius: 4 * scale
      }} />
      <div style={{
        position: "absolute",
        right: -3 * scale,
        top: H * scale * 0.55,
        width: 5 * scale,
        height: 26 * scale,
        background: "linear-gradient(180deg,#2c2f36,#0e1014)",
        borderRadius: 3 * scale
      }} />
      <div style={{
        position: "absolute",
        left: bezel * scale,
        top: bezel * scale,
        width: screenW * scale,
        height: screenH * scale,
        borderRadius: (radius - bezel) * scale,
        overflow: "hidden",
        background: "#000"
      }}>
        <div style={{
          width: screenW,
          height: screenH,
          transform: `scale(${scale})`,
          transformOrigin: "0 0",
          color: "#F4F7FA",
          fontFamily: "Archivo, system-ui, sans-serif",
          background: "#000",
          position: "relative"
        }}>
          {children}
        </div>
      </div>
    </div>
  );
}

const WLabel = ({ children, color = "#6F7E8E", style }) => (
  <div style={{
    fontFamily: "Archivo, system-ui, sans-serif",
    fontWeight: 600,
    fontSize: 9,
    letterSpacing: "0.16em",
    textTransform: "uppercase",
    color,
    lineHeight: 1,
    ...style
  }}>{children}</div>
);

const WReadout = ({ value, size = 44, color = "#F4F7FA", style }) => (
  <div style={{
    fontFamily: "Chivo Mono, ui-monospace, monospace",
    fontWeight: 700,
    fontSize: size,
    letterSpacing: "-0.03em",
    lineHeight: 1,
    fontVariantNumeric: "tabular-nums slashed-zero",
    color,
    ...style
  }}>{value}</div>
);

const WStatus = ({ time = "13:42", recording = true }) => (
  <div style={{
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: "8px 14px 0",
    fontFamily: "Archivo, system-ui, sans-serif",
    fontSize: 11,
    fontWeight: 500
  }}>
    <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
      {recording && <span style={{
        width: 6, height: 6, borderRadius: 999, background: "#FF3B47",
        boxShadow: "0 0 6px #FF3B47"
      }} />}
      <span style={{ color: recording ? "#FF3B47" : "#46C5FF", letterSpacing: "0.04em" }}>
        {recording ? "REC" : "Sail Tactician"}
      </span>
    </span>
    <span style={{ color: "#F4F7FA" }}>{time}</span>
  </div>
);

/* Pre-start watch screen (animated countdown) — matches actual app UI */
function WatchPreStart({ seconds }) {
  const safe = Math.max(0, seconds);
  const m = Math.floor(safe / 60);
  const s = Math.floor(safe % 60);
  const urgent = seconds <= 30 && seconds > 0;
  const ocs = seconds <= 0;
  const countdownColor = ocs ? "#FF3B47" : urgent ? "#FFB300" : "#F4F7FA";
  const bias = 87;

  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
      {/* Status bar: time only */}
      <div style={{
        display: "flex", justifyContent: "flex-end", alignItems: "center",
        padding: "8px 14px 0"
      }}>
        <span style={{ color: "#F4F7FA", fontFamily: "Archivo, system-ui, sans-serif", fontSize: 11, fontWeight: 500 }}>9:34</span>
      </div>

      {/* Big MM:SS countdown */}
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
        <div style={{
          fontFamily: "Chivo Mono, ui-monospace, monospace",
          fontWeight: 800,
          fontSize: 58,
          letterSpacing: "-0.02em",
          lineHeight: 1,
          fontVariantNumeric: "tabular-nums slashed-zero",
          color: countdownColor,
          display: "flex", alignItems: "center"
        }}>
          <span>{String(m).padStart(2, "0")}</span>
          <span style={{ margin: "0 3px", opacity: 0.85 }}>:</span>
          <span>{String(s).padStart(2, "0")}</span>
        </div>
      </div>

      {/* Action buttons: cancel (red), sync (orange), pause (blue) */}
      <div style={{ display: "flex", gap: 8, padding: "0 12px 8px" }}>
        {[
          {
            bg: "#FF3B47",
            icon: (
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <line x1="3" y1="3" x2="13" y2="13" stroke="white" strokeWidth="2.5" strokeLinecap="round" />
                <line x1="13" y1="3" x2="3" y2="13" stroke="white" strokeWidth="2.5" strokeLinecap="round" />
              </svg>
            )
          },
          {
            bg: "#C97000",
            icon: (
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M 16.5 10 A 6.5 6.5 0 1 1 10 3.5" stroke="white" strokeWidth="2.2" strokeLinecap="round" fill="none"/>
                <polyline points="7.5,1.5 10,3.5 7.5,6" stroke="white" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            )
          },
          {
            bg: "#007AFF",
            icon: (
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <rect x="2.5" y="2" width="4" height="12" rx="1.5" fill="white" />
                <rect x="9.5" y="2" width="4" height="12" rx="1.5" fill="white" />
              </svg>
            )
          }
        ].map((btn, i) => (
          <div key={i} style={{
            flex: 1, height: 46,
            background: btn.bg,
            borderRadius: 999,
            display: "flex", alignItems: "center", justifyContent: "center"
          }}>
            {btn.icon}
          </div>
        ))}
      </div>

      {/* DTL + BURN */}
      <div style={{ display: "flex", justifyContent: "center", gap: 24, paddingBottom: 7 }}>
        {[{ label: "DTL", value: "6m", color: "#F4F7FA" }, { label: "BURN", value: "0:08", color: "#FFB300" }].map(item => (
          <div key={item.label} style={{ textAlign: "center" }}>
            <div style={{
              fontFamily: "Archivo, system-ui, sans-serif",
              fontSize: 9, color: "#6F7E8E", fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase"
            }}>{item.label}</div>
            <div style={{
              fontFamily: "Chivo Mono, ui-monospace, monospace",
              fontSize: 14, color: item.color, fontWeight: 700,
              fontVariantNumeric: "tabular-nums slashed-zero", marginTop: 2
            }}>{item.value}</div>
          </div>
        ))}
      </div>

      {/* Bias bar */}
      <div style={{ padding: "0 14px 12px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
          <WLabel>BOAT</WLabel>
          <WLabel color="#3CE0A1">PIN +{bias}°</WLabel>
          <WLabel>PIN</WLabel>
        </div>
        <div style={{ height: 4, background: "#1C1C1F", borderRadius: 2, position: "relative" }}>
          <div style={{
            position: "absolute",
            left: "50%",
            width: `${Math.min(bias / 90 * 48, 48)}%`,
            height: "100%",
            background: "#3CE0A1",
            borderRadius: 2
          }} />
          <div style={{ position: "absolute", left: "50%", top: -2, bottom: -2, width: 1, background: "#A9B7C5" }} />
        </div>
      </div>
    </div>
  );
}

/* Race-view watch screen — VMG + compass */
function WatchRaceView() {
  const heading = 324;
  const noSailHalf = 35;
  const lift = 18;
  const size = 132;
  const cx = size / 2, cy = size / 2;
  const r = size / 2 - 4;
  const ticks = [];
  for (let i = 0; i < 36; i++) {
    const a = (i * 10) * Math.PI / 180;
    const major = i % 9 === 0;
    const inner = r - (major ? 8 : 4);
    ticks.push(
      <line key={i}
        x1={cx + Math.sin(a) * r} y1={cy - Math.cos(a) * r}
        x2={cx + Math.sin(a) * inner} y2={cy - Math.cos(a) * inner}
        stroke={major ? "#A9B7C5" : "#3D4D5E"} strokeWidth={major ? 1.25 : 0.75} />
    );
  }
  const wind = heading - lift;
  const start = (wind - noSailHalf) * Math.PI / 180;
  const end = (wind + noSailHalf) * Math.PI / 180;
  const arcR = r - 12;
  const x1 = cx + Math.sin(start) * arcR;
  const y1 = cy - Math.cos(start) * arcR;
  const x2 = cx + Math.sin(end) * arcR;
  const y2 = cy - Math.cos(end) * arcR;

  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
      <WStatus recording={true} time="14:18" />
      <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 4 }}>
        <div style={{ position: "relative", width: size, height: size }}>
          <svg width={size} height={size}>
            <circle cx={cx} cy={cy} r={r} fill="none" stroke="#28282B" strokeWidth={1} />
            {ticks}
            <path
              d={`M ${cx} ${cy} L ${x1} ${y1} A ${arcR} ${arcR} 0 0 1 ${x2} ${y2} Z`}
              fill="rgba(255,59,71,.18)"
              stroke="#FF3B47"
              strokeWidth={0.75}
              strokeDasharray="2 2"
            />
            <polygon points={`${cx - 5},${cy + 10} ${cx + 5},${cy + 10} ${cx},${cy - 22}`} fill="#46C5FF" />
            <text x={cx} y={cy - 30} fontSize="9" fontFamily="Archivo" fontWeight="700" textAnchor="middle" fill="#F4F7FA">N</text>
          </svg>
          <div style={{
            position: "absolute", inset: 0,
            display: "flex", flexDirection: "column",
            alignItems: "center", justifyContent: "center",
            pointerEvents: "none"
          }}>
            <WLabel color="#46C5FF" style={{ marginBottom: 2 }}>VMG</WLabel>
            <WReadout value="4.2" size={26} color="#3CE0A1" />
            <div style={{ fontSize: 8, fontFamily: "Archivo", color: "#6F7E8E", letterSpacing: "0.1em", marginTop: 2 }}>KTS</div>
          </div>
        </div>
        <div style={{ display: "flex", gap: 16, marginTop: 6 }}>
          <div style={{ textAlign: "center" }}>
            <WLabel color="#3CE0A1">LIFT</WLabel>
            <WReadout value="+18°" size={16} color="#3CE0A1" style={{ marginTop: 4 }} />
          </div>
          <div style={{ textAlign: "center" }}>
            <WLabel>HDG</WLabel>
            <WReadout value="324°" size={16} color="#F4F7FA" style={{ marginTop: 4 }} />
          </div>
          <div style={{ textAlign: "center" }}>
            <WLabel>LAY</WLabel>
            <WReadout value="0:42" size={16} color="#46C5FF" style={{ marginTop: 4 }} />
          </div>
        </div>
      </div>
    </div>
  );
}

/* ===========================================================================
   iPhone composite (post-race review)
   =========================================================================== */

function PhoneFrame({ children, scale = 1 }) {
  const W = 320, H = 660;
  return (
    <div style={{
      width: W * scale,
      height: H * scale,
      position: "relative",
      filter: "drop-shadow(0 60px 80px rgba(0,0,0,.65))"
    }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg,#1c1f24,#0a0c10)",
        borderRadius: 50 * scale,
        boxShadow: "inset 0 0 0 2px #2b2f37, inset 0 1px 0 rgba(255,255,255,.06)"
      }} />
      <div style={{
        position: "absolute",
        left: 8 * scale,
        top: 8 * scale,
        right: 8 * scale,
        bottom: 8 * scale,
        borderRadius: 42 * scale,
        overflow: "hidden",
        background: "#0E0E10"
      }}>
        <div style={{
          width: W - 16,
          height: H - 16,
          transform: `scale(${scale})`,
          transformOrigin: "0 0",
          color: "#F4F7FA",
          fontFamily: "Archivo, system-ui, sans-serif",
          background: "#0E0E10",
          position: "relative"
        }}>
          {/* Dynamic Island */}
          <div style={{
            position: "absolute",
            top: 10,
            left: "50%",
            transform: "translateX(-50%)",
            width: 100, height: 28,
            background: "#000",
            borderRadius: 999,
            zIndex: 5
          }} />
          {/* Status bar */}
          <div style={{
            position: "absolute",
            top: 14,
            left: 24,
            right: 24,
            display: "flex",
            justifyContent: "space-between",
            fontSize: 12,
            fontWeight: 600,
            color: "#F4F7FA",
            zIndex: 4
          }}>
            <span>14:42</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
              <svg width="14" height="9" viewBox="0 0 14 9" fill="none">
                <rect x="0" y="6" width="2" height="3" fill="#F4F7FA" />
                <rect x="4" y="4" width="2" height="5" fill="#F4F7FA" />
                <rect x="8" y="2" width="2" height="7" fill="#F4F7FA" />
                <rect x="12" y="0" width="2" height="9" fill="#F4F7FA" />
              </svg>
              <svg width="16" height="10" viewBox="0 0 16 10" fill="none">
                <rect x="0.5" y="0.5" width="13" height="9" rx="2" stroke="#F4F7FA" />
                <rect x="2" y="2" width="9" height="6" fill="#F4F7FA" />
                <rect x="14" y="3" width="1" height="4" fill="#F4F7FA" />
              </svg>
            </span>
          </div>
          {children}
        </div>
      </div>
    </div>
  );
}

function PhoneRaceReview() {
  return (
    <div style={{
      position: "absolute",
      top: 56,
      left: 0,
      right: 0,
      bottom: 0,
      display: "flex",
      flexDirection: "column",
      gap: 0
    }}>
      {/* Top nav */}
      <div style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        padding: "6px 18px 12px"
      }}>
        <span style={{ fontSize: 13, color: "#46C5FF", fontWeight: 500 }}>‹ Races</span>
        <span style={{ fontSize: 12, color: "#6F7E8E" }}>Race 4 / 6</span>
        <span style={{ fontSize: 13, color: "#46C5FF", fontWeight: 500 }}>•••</span>
      </div>
      {/* Heading */}
      <div style={{ padding: "0 18px 12px" }}>
        <div style={{ fontSize: 11, color: "#6F7E8E", letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 600 }}>
          Sat · 21 Jun · 14:32
        </div>
        <div style={{ fontSize: 22, fontWeight: 700, color: "#F4F7FA", letterSpacing: "-0.02em", marginTop: 2 }}>
          Wednesday Series — R4
        </div>
      </div>
      {/* Map / track */}
      <div style={{
        margin: "0 14px",
        height: 200,
        borderRadius: 14,
        background: "linear-gradient(180deg, #08263e 0%, #0a3658 100%)",
        position: "relative",
        overflow: "hidden",
        border: "1px solid rgba(255,255,255,0.08)"
      }}>
        {/* Cellular noise */}
        <svg width="100%" height="100%" viewBox="0 0 290 200" preserveAspectRatio="none" style={{ position: "absolute", inset: 0 }}>
          <defs>
            <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
              <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1" />
            </pattern>
          </defs>
          <rect width="290" height="200" fill="url(#grid)" />
          {/* Track */}
          <path d="M 40 170 Q 60 130 90 110 T 150 70 Q 175 60 200 80 T 250 150 Q 235 175 200 170 T 130 165 Q 90 165 70 175"
                fill="none" stroke="#46C5FF" strokeWidth="2.25" strokeLinecap="round" strokeOpacity="0.85" />
          {/* Track shadow / coverage */}
          <path d="M 40 170 Q 60 130 90 110 T 150 70 Q 175 60 200 80 T 250 150 Q 235 175 200 170 T 130 165 Q 90 165 70 175"
                fill="none" stroke="#46C5FF" strokeWidth="6" strokeLinecap="round" strokeOpacity="0.12" />
          {/* Marks */}
          <circle cx="150" cy="70" r="6" fill="none" stroke="#FFB300" strokeWidth="1.5" />
          <circle cx="150" cy="70" r="2" fill="#FFB300" />
          <circle cx="250" cy="150" r="5" fill="#FF3B47" />
          <circle cx="40" cy="170" r="5" fill="#3CE0A1" />
          <text x="158" y="68" fontSize="9" fontFamily="Archivo" fontWeight="700" fill="#FFB300">Windward</text>
          <text x="258" y="153" fontSize="9" fontFamily="Archivo" fontWeight="700" fill="#FF3B47">Pin</text>
          <text x="48" y="173" fontSize="9" fontFamily="Archivo" fontWeight="700" fill="#3CE0A1">Start</text>
        </svg>
        {/* Scrubber */}
        <div style={{
          position: "absolute",
          left: 12, right: 12, bottom: 10,
          background: "rgba(11,20,28,0.6)",
          backdropFilter: "blur(20px)",
          borderRadius: 10,
          padding: "8px 12px",
          display: "flex", alignItems: "center", gap: 10,
          fontFamily: "Chivo Mono, monospace",
          fontSize: 11,
          fontWeight: 700,
          color: "#F4F7FA"
        }}>
          <span>00:14:22</span>
          <div style={{ flex: 1, height: 3, background: "rgba(255,255,255,0.15)", borderRadius: 2, position: "relative" }}>
            <div style={{ position: "absolute", left: 0, top: 0, height: "100%", width: "62%", background: "#46C5FF", borderRadius: 2 }} />
            <div style={{ position: "absolute", left: "62%", top: -3, width: 9, height: 9, marginLeft: -4, background: "#fff", borderRadius: 999, boxShadow: "0 0 0 2px #46C5FF" }} />
          </div>
          <span style={{ color: "#6F7E8E" }}>00:23:11</span>
        </div>
      </div>
      {/* Stats grid */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 8,
        padding: "14px"
      }}>
        {[
          { lab: "AVG VMG", val: "4.18", u: "kts", c: "#3CE0A1" },
          { lab: "TOP SPEED", val: "6.92", u: "kts", c: "#F4F7FA" },
          { lab: "LIFT %", val: "62", u: "%", c: "#3CE0A1" },
          { lab: "TACKS", val: "11", u: "", c: "#F4F7FA" }
        ].map(s => (
          <div key={s.lab} style={{
            background: "#1C1C1F",
            borderRadius: 12,
            padding: "10px 12px"
          }}>
            <div style={{ fontSize: 9, fontWeight: 600, color: "#6F7E8E", letterSpacing: "0.14em" }}>{s.lab}</div>
            <div style={{ fontFamily: "Chivo Mono, monospace", fontWeight: 700, fontSize: 22, color: s.c, marginTop: 2, fontVariantNumeric: "tabular-nums slashed-zero" }}>
              {s.val}<span style={{ fontSize: 11, color: "#6F7E8E", marginLeft: 3, fontWeight: 500 }}>{s.u}</span>
            </div>
          </div>
        ))}
      </div>
      {/* Polar mini */}
      <div style={{
        margin: "0 14px",
        background: "#1C1C1F",
        borderRadius: 12,
        padding: 12,
        display: "flex",
        gap: 12,
        alignItems: "center"
      }}>
        <PolarMini size={70} />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 9, fontWeight: 600, color: "#6F7E8E", letterSpacing: "0.14em" }}>POLAR</div>
          <div style={{ fontSize: 13, color: "#F4F7FA", fontWeight: 600, marginTop: 2 }}>92% target</div>
          <div style={{ fontSize: 11, color: "#A9B7C5", marginTop: 2 }}>Best on starboard, 110° TWA</div>
        </div>
        <div style={{ fontSize: 16, color: "#46C5FF", fontWeight: 500 }}>›</div>
      </div>
    </div>
  );
}

function PolarMini({ size = 80 }) {
  const cx = size / 2, cy = size / 2;
  const r = size / 2 - 4;
  // Pseudo-polar: lobe shape
  const pts = [];
  for (let i = 0; i < 60; i++) {
    const t = (i / 60) * 2 * Math.PI;
    // VMG-like polar: zero at 0° and 180°, max around 110°
    const v = Math.max(0, Math.sin(t) * (0.6 + 0.4 * Math.cos(t - Math.PI / 1.6)));
    const rr = r * v;
    pts.push([cx + Math.sin(t) * rr, cy - Math.cos(t) * rr]);
  }
  const polyL = pts.map(p => p.join(",")).join(" ");
  const polyR = pts.map(([x, y]) => [size - x, y].join(",")).join(" ");
  return (
    <svg width={size} height={size}>
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth={1} />
      <circle cx={cx} cy={cy} r={r * 0.66} fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth={1} />
      <circle cx={cx} cy={cy} r={r * 0.33} fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth={1} />
      <line x1={cx} y1={2} x2={cx} y2={size - 2} stroke="rgba(255,255,255,0.06)" />
      <polygon points={polyL} fill="rgba(70,197,255,0.22)" stroke="#46C5FF" strokeWidth={1.25} />
      <polygon points={polyR} fill="rgba(60,224,161,0.22)" stroke="#3CE0A1" strokeWidth={1.25} />
    </svg>
  );
}

/* Phone race-mode (full-screen instrument) — for the no-watch crowd */
function PhoneRaceMode() {
  return (
    <div style={{
      position: "absolute",
      top: 50,
      left: 0, right: 0, bottom: 0,
      display: "flex", flexDirection: "column",
      background: "#000",
      padding: "12px 0 0"
    }}>
      <div style={{ padding: "0 18px 10px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, color: "#FF3B47", letterSpacing: "0.1em", fontWeight: 700 }}>
          <span style={{ width: 7, height: 7, borderRadius: 999, background: "#FF3B47", boxShadow: "0 0 8px #FF3B47" }} /> REC
        </span>
        <span style={{ fontSize: 11, color: "#6F7E8E", letterSpacing: "0.14em", fontWeight: 600, textTransform: "uppercase" }}>Pre-Start</span>
        <span style={{ fontSize: 11, color: "#46C5FF", letterSpacing: "0.06em", fontWeight: 600 }}>SYNC</span>
      </div>

      {/* Big countdown */}
      <div style={{ flex: "0 0 auto", padding: "20px 18px", textAlign: "center" }}>
        <div style={{ fontSize: 11, color: "#46C5FF", letterSpacing: "0.16em", fontWeight: 700, textTransform: "uppercase" }}>Time to Start</div>
        <div style={{
          fontFamily: "Chivo Mono, monospace",
          fontWeight: 700,
          fontSize: 92,
          color: "#FFB300",
          lineHeight: 1,
          letterSpacing: "-0.04em",
          fontVariantNumeric: "tabular-nums slashed-zero",
          textShadow: "0 0 32px rgba(255,179,0,0.45)",
          marginTop: 4
        }}>0:08</div>
        <div style={{
          fontFamily: "Chivo Mono, monospace",
          fontSize: 13,
          color: "#6F7E8E",
          letterSpacing: "0.08em",
          marginTop: 4
        }}>BURN  ·  T-0:08</div>
      </div>

      {/* Bias bar */}
      <div style={{ padding: "0 18px 14px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
          <span style={{ fontSize: 10, color: "#6F7E8E", letterSpacing: "0.14em", fontWeight: 700 }}>BOAT</span>
          <span style={{ fontSize: 10, color: "#3CE0A1", letterSpacing: "0.14em", fontWeight: 700 }}>PIN +4°</span>
          <span style={{ fontSize: 10, color: "#6F7E8E", letterSpacing: "0.14em", fontWeight: 700 }}>PIN</span>
        </div>
        <div style={{ height: 6, background: "#1C1C1F", borderRadius: 3, position: "relative" }}>
          <div style={{ position: "absolute", left: "50%", height: "100%", width: "16%", background: "#3CE0A1", borderRadius: 3 }} />
          <div style={{ position: "absolute", left: "50%", top: -3, bottom: -3, width: 1.5, background: "#A9B7C5" }} />
        </div>
      </div>

      {/* 3-up readouts */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr 1fr",
        gap: 1,
        background: "rgba(255,255,255,0.06)",
        margin: "0 14px",
        borderRadius: 10,
        overflow: "hidden"
      }}>
        {[
          { l: "VMG", v: "4.2", c: "#3CE0A1" },
          { l: "TO LINE", v: "42m", c: "#F4F7FA" },
          { l: "HDG", v: "324°", c: "#F4F7FA" }
        ].map(s => (
          <div key={s.l} style={{ background: "#0A0C10", padding: "10px 8px", textAlign: "center" }}>
            <div style={{ fontSize: 9, color: "#6F7E8E", letterSpacing: "0.14em", fontWeight: 700 }}>{s.l}</div>
            <div style={{ fontFamily: "Chivo Mono, monospace", fontWeight: 700, fontSize: 22, color: s.c, marginTop: 4, letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums slashed-zero" }}>{s.v}</div>
          </div>
        ))}
      </div>

      {/* Mini compass */}
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: "8px 0 16px" }}>
        <svg width="180" height="180" viewBox="0 0 180 180">
          <circle cx="90" cy="90" r="84" fill="none" stroke="rgba(255,255,255,0.08)" />
          {Array.from({ length: 36 }).map((_, i) => {
            const a = i * 10 * Math.PI / 180;
            const major = i % 9 === 0;
            const r1 = 84, r2 = major ? 72 : 78;
            return <line key={i}
              x1={90 + Math.sin(a) * r1} y1={90 - Math.cos(a) * r1}
              x2={90 + Math.sin(a) * r2} y2={90 - Math.cos(a) * r2}
              stroke={major ? "#A9B7C5" : "#3D4D5E"} strokeWidth={major ? 1.25 : 0.75}
            />;
          })}
          <path d="M 90 90 L 138 50 A 60 60 0 0 1 138 130 Z" fill="rgba(255,59,71,0.14)" stroke="#FF3B47" strokeWidth="0.75" strokeDasharray="2 2" />
          <polygon points="84,108 96,108 90,52" fill="#46C5FF" />
          <text x="90" y="32" fontSize="10" fontFamily="Archivo" fontWeight="700" textAnchor="middle" fill="#F4F7FA">N</text>
        </svg>
      </div>
    </div>
  );
}

/* Export to window */
Object.assign(window, {
  WatchFrame, WatchPreStart, WatchRaceView,
  PhoneFrame, PhoneRaceReview, PhoneRaceMode, PolarMini
});