/* =========================================================================
   BRAND  —  73media logo mark, lockup, and the live pipeline gauge
   Reconstructed from the supplied vector art, with the metallic silver
   gradient applied (#504d4d -> #959999 -> #e5e6e6 -> #838080 -> #333).
   ========================================================================= */

const SILVER_STOPS = (
  <>
    <stop offset="0" stopColor="#504d4d" />
    <stop offset="0.28" stopColor="#959999" />
    <stop offset="0.52" stopColor="#e5e6e6" />
    <stop offset="0.84" stopColor="#838080" />
    <stop offset="1" stopColor="#333333" />
  </>
);

/* The "3" play-button mark. */
function Mark({ size = 64, glow = true, id = 'mk' }) {
  return (
    <svg viewBox="800 330 360 384" width={size} height={size * (384 / 360)} aria-label="73 Media" role="img"
         style={{ display: 'block', filter: glow ? 'drop-shadow(0 4px 22px rgba(229,230,230,0.18))' : 'none' }}>
      <defs>
        <linearGradient id={id + '-g'} x1="850" y1="360" x2="1130" y2="690" gradientUnits="userSpaceOnUse">
          {SILVER_STOPS}
        </linearGradient>
      </defs>
      <path fill={`url(#${id}-g)`} d="M986.56,424.34l-8.9,15.43-16.96,29.43-17.7,30.61h.15c42.98,0,77.94,34.97,77.94,77.89s-34.96,77.94-77.94,77.94c-28.83,0-54.06-15.78-67.46-39.17l-42.33,73.29-1.24,2.13c28.68,27.99,67.9,45.2,111.03,45.2,87.88,0,159.4-71.51,159.4-159.4,0-72.8-49.16-134.42-115.97-153.36Z" />
      <polygon fill={`url(#${id}-g)`} points="1033.57 342.9 817.47 342.9 817.47 424.34 986.55 424.34 1033.57 342.9" />
      <path fill="#e9eaea" d="M919.17,551.44v52.58c0,6.66,7.21,10.83,12.98,7.49l45.53-26.29c5.77-3.33,5.77-11.66,0-14.99l-45.53-26.29c-5.77-3.33-12.98.83-12.98,7.49Z" />
    </svg>
  );
}

/* Full horizontal lockup: mark + "73 MEDIA". */
function Lockup({ height = 40, id = 'lk' }) {
  const w = height * (1366 - 539) / (621 - 442);
  return (
    <svg viewBox="525 430 855 198" height={height} width={w} aria-label="73 Media" role="img"
         style={{ display: 'block' }}>
      <defs>
        <linearGradient id={id + '-g'} x1="539" y1="470" x2="1366" y2="600" gradientUnits="userSpaceOnUse">
          {SILVER_STOPS}
        </linearGradient>
      </defs>
      <g fill={`url(#${id}-g)`}>
        <path d="M622.69,483.05l-4.38,7.6-8.35,14.49-8.72,15.07h.07c21.16,0,38.38,17.22,38.38,38.35s-17.22,38.38-38.38,38.38c-14.2,0-26.62-7.77-33.21-19.29l-20.84,36.09-.61,1.05c14.12,13.78,33.43,22.26,54.67,22.26,43.27,0,78.48-35.21,78.48-78.48,0-35.84-24.21-66.19-57.1-75.51Z" />
        <polygon points="645.84 442.95 539.43 442.95 539.43 483.05 622.68 483.05 645.84 442.95" />
        <polygon points="721.2 522.78 737.74 522.78 737.74 506.52 775.32 506.52 739.38 587.15 758.37 587.15 795.54 503.38 795.54 491.49 721.2 491.49 721.2 522.78" />
        <path d="M851.03,530.98l23.23-27.6v-11.89h-65.19v14.9h43.46l-26.76,31.35.62,7.64,4.41-.99h8.75c7.01,0,12.23,1.25,15.65,3.76,3.42,2.51,5.12,5.99,5.12,10.45s-1.8,7.99-5.4,10.59c-3.6,2.6-8.54,3.89-14.83,3.89-5.29,0-10.41-.84-15.37-2.53-4.97-1.68-9.18-3.98-12.64-6.9l-7.65,13.8c4.46,3.46,9.86,6.17,16.19,8.13,6.33,1.96,12.91,2.94,19.75,2.94,8.2,0,15.15-1.35,20.84-4.03,5.69-2.69,9.95-6.31,12.78-10.86,2.82-4.55,4.24-9.61,4.24-15.17,0-7.38-2.32-13.53-6.97-18.45-4.65-4.92-11.39-7.93-20.23-9.02Z" />
        <polygon points="979.44 573.08 1009 523.74 1009.14 587.15 1025.94 587.15 1025.81 491.49 1011.18 491.49 973.88 554.9 935.89 491.49 921.26 491.49 921.26 587.15 938.21 587.15 938.21 524.56 967.73 573.08 979.44 573.08" />
        <polygon points="1066.8 545.88 1112.99 545.88 1112.99 531.25 1066.8 531.25 1066.8 506.38 1118.87 506.38 1118.87 491.49 1049.03 491.49 1049.03 587.15 1120.78 587.15 1120.78 572.25 1066.8 572.25 1066.8 545.88" />
        <path d="M1225.32,514.24c-4.37-7.24-10.52-12.84-18.45-16.81-7.93-3.96-16.99-5.94-27.19-5.94h-41.82v95.66h41.82c10.2,0,19.27-1.98,27.19-5.95,7.93-3.96,14.08-9.57,18.45-16.8,4.38-7.24,6.56-15.6,6.56-25.08s-2.18-17.83-6.56-25.08ZM1209.67,556.6c-2.87,4.97-6.97,8.8-12.3,11.48-5.33,2.69-11.5,4.03-18.52,4.03h-23.23v-65.6h23.23c7.01,0,13.19,1.35,18.52,4.04,5.33,2.69,9.43,6.51,12.3,11.47,2.87,4.97,4.31,10.73,4.31,17.29s-1.43,12.32-4.31,17.28Z" />
        <rect x="1248" y="491.49" width="17.77" height="95.66" />
        <path d="M1337.39,491.49h-20.52l-43.05,95.66h18.84l9.71-22.79h49.22l9.85,22.79h19.13l-43.18-95.66ZM1308.56,550.02l18.43-43.04,18.56,43.04h-36.99Z" />
      </g>
      <path fill="#e9eaea" d="M589.5,545.63v25.89c0,3.28,3.55,5.33,6.39,3.69l22.42-12.94c2.84-1.64,2.84-5.74,0-7.38l-22.42-12.94c-2.84-1.64-6.39.41-6.39,3.69Z" />
    </svg>
  );
}

/* ---- The live pipeline gauge -------------------------------------------- */
/* value: 0..1. duringQuiz hides the number and shows a soft reading state.  */
const GAUGE_R = 100;
const GAUGE_LEN = Math.PI * GAUGE_R; // semicircle arc length

function PipelineGauge({ value = 0, reveal = false, size = 260 }) {
  const v = Math.max(0, Math.min(1, value));
  const offset = GAUGE_LEN * (1 - v);
  const pct = Math.round(v * 100);
  // node position along the arc (cx 120, cy 130, r 100); angle sweeps PI -> 0 left to right
  const a = Math.PI - v * Math.PI;
  const nx = 120 + 100 * Math.cos(a);
  const ny = 130 - 100 * Math.sin(a);
  return (
    <div style={{ width: size, maxWidth: '100%', position: 'relative' }}>
      <svg viewBox="0 0 240 150" width="100%" style={{ display: 'block', overflow: 'visible' }}>
        <defs>
          <linearGradient id="gauge-arc" x1="20" y1="130" x2="220" y2="130" gradientUnits="userSpaceOnUse">
            <stop offset="0" stopColor="#504d4d" />
            <stop offset="0.5" stopColor="#bfc1c1" />
            <stop offset="1" stopColor="#e9eaea" />
          </linearGradient>
          <filter id="gauge-glow" x="-60%" y="-60%" width="220%" height="220%">
            <feGaussianBlur stdDeviation="3.2" result="b" />
            <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
          </filter>
        </defs>
        {/* ticks */}
        {Array.from({ length: 21 }).map((_, i) => {
          const ang = Math.PI - (i / 20) * Math.PI;
          const r1 = GAUGE_R + 9, r2 = GAUGE_R + (i % 5 === 0 ? 17 : 13);
          const cx = 120, cy = 130;
          return (
            <line key={i}
              x1={cx + r1 * Math.cos(ang)} y1={cy - r1 * Math.sin(ang)}
              x2={cx + r2 * Math.cos(ang)} y2={cy - r2 * Math.sin(ang)}
              stroke={i / 20 <= v + 0.0001 ? '#9a9c9c' : '#262626'} strokeWidth={i % 5 === 0 ? 1.6 : 1}
              style={{ transition: 'stroke 600ms ease' }} />
          );
        })}
        {/* track */}
        <path d="M 20 130 A 100 100 0 0 1 220 130" fill="none" stroke="#1a1a1a" strokeWidth="9" strokeLinecap="round" />
        {/* fill */}
        <path d="M 20 130 A 100 100 0 0 1 220 130" fill="none" stroke="url(#gauge-arc)" strokeWidth="9"
              strokeLinecap="round" strokeDasharray={GAUGE_LEN} strokeDashoffset={offset}
              filter="url(#gauge-glow)"
              style={{ transition: 'stroke-dashoffset 950ms cubic-bezier(0.22,1,0.36,1)' }} />
        {/* travelling node rides the end of the fill */}
        <g filter="url(#gauge-glow)"
           style={{ transition: 'transform 950ms cubic-bezier(0.22,1,0.36,1)', transformOrigin: '120px 130px' }}
           transform={`translate(${(nx - 120).toFixed(2)} ${(ny - 130).toFixed(2)})`}>
          <circle cx="120" cy="130" r="7.5" fill="#0a0a0a" stroke="#e9eaea" strokeWidth="2.2" />
          <circle cx="120" cy="130" r="3" fill="#e9eaea" />
        </g>
      </svg>
      <div style={{ textAlign: 'center', marginTop: 4 }}>
        {reveal ? (
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 4 }}>
            <span className="metal" style={{ fontSize: 46, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>{pct}</span>
            <span style={{ fontSize: 18, fontWeight: 600, color: '#6a6a6a', lineHeight: 1 }}>/ 100</span>
          </div>
        ) : (
          <div style={{ fontSize: 30, fontWeight: 700, color: '#2c2c2c', lineHeight: 1, letterSpacing: '0.18em' }}>&middot;&middot;</div>
        )}
        <div style={{ fontSize: 10.5, letterSpacing: '0.22em', color: '#6a6a6a', marginTop: 9, textTransform: 'uppercase' }}>
          {reveal ? 'Pipeline health' : 'Reading signal'}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Mark, Lockup, PipelineGauge });