function ChangingPage({ onNav = () => {} }) {
  const [ctaEmail, setCtaEmail] = React.useState('');
  const { isPhone } = window.useIsMobile();
  const sx = (v) => isPhone ? v.replace(/ 48px/g, ' 20px').replace(/ 40px/g, ' 20px') : v;
  const roadmap = [
    { at: 4, up: true, shift: '-10%', when: 'Sept 2026', what: 'NFL', detail: 'Launching with the season. All 32 teams.', live: true },
    { at: 32, when: 'Nov 2026', what: 'Synth Sidecar', detail: 'Our premium tier arrives.' },
    { at: 52, up: true, when: 'Dec 2026', what: 'NHL', detail: 'Full league coverage begins.' },
    { at: 88, span: [74, 100], shift: '-85%', when: 'Spring 2027', what: 'MLB · NBA', detail: 'Just in time for MLB Opening Day, and the NBA playoffs.' },
  ];
  const gap = [
    { side: 'The Sportsbooks', kind: 'books', body: 'Machine learning and sharp action create the most accurate prediction models in sports, but they have no incentive to make users smarter.' },
    { side: 'Legacy Media', kind: 'media', body: 'Built to write stories one beat at a time. The loudest voices and the hottest takes dominate coverage.' },
  ];
  // irregular ring: big core nodes inside, mid + small nodes fanning outward
  const kgNodes = [
    { x: 105, y: 48, r: 13, o: 1 },    // 0 core
    { x: 136, y: 84, r: 11.5, o: 1 },  // 1 core
    { x: 76, y: 80, r: 10, o: 1 },     // 2 core
    { x: 58, y: 40, r: 8.5, o: .72 },  // 3 mid
    { x: 160, y: 50, r: 8, o: .72 },   // 4 mid
    { x: 106, y: 110, r: 7.5, o: .72 },// 5 mid
    { x: 74, y: 12, r: 5, o: .5 },     // 6 outer — hex perimeter
    { x: 142, y: 9, r: 4.2, o: .5 },
    { x: 198, y: 38, r: 5.4, o: .5 },
    { x: 206, y: 88, r: 4, o: .5 },
    { x: 152, y: 124, r: 4.6, o: .5 },
    { x: 70, y: 126, r: 4, o: .5 },
    { x: 16, y: 94, r: 5.2, o: .5 },
    { x: 8, y: 50, r: 4.4, o: .5 },
    { x: 32, y: 18, r: 3.6, o: .5 },
  ];
  // inbound: outer/mid -> core. staggered, uneven delays
  // [from, to, delay(s), duration(s)] — deliberately uneven so nothing beats in unison
  const kgIn = [
    [6, 0, 0, 3.1], [7, 4, 1.4, 4.7], [8, 4, 2.6, 3.6], [9, 1, .5, 5.3], [10, 1, 3.2, 4.1],
    [11, 5, 1.9, 2.9], [12, 2, 2.2, 5.8], [13, 3, .8, 3.4], [14, 3, 4.1, 4.4], [6, 3, 2.9, 6.2],
    [8, 0, 1.1, 5.1], [10, 5, 3.7, 3.3], [12, 5, .3, 4.9], [9, 4, 2.4, 6.7],
  ];
  // core cross-links carry flow between the big nodes
  const kgCore = [[0, 1, 1.7, 2.6], [1, 2, 3.4, 3.9], [2, 0, .6, 5.5], [0, 4, 2.1, 3.2], [1, 5, 4.3, 4.6], [2, 3, 1.2, 6.1], [3, 0, 3.9, 2.8], [4, 1, .2, 4.3], [5, 2, 2.7, 3.7]];
  // static structural web
  const kgWeb = [[6, 7], [8, 9], [10, 11], [12, 13], [13, 14], [14, 6], [3, 2], [4, 8], [5, 10], [12, 2], [7, 0], [11, 5], [9, 8]];
  const synth = { side: 'Synth', body: (<React.Fragment>Data-native from day one. A single intelligence engine that sees the stats, the reporting, the markets, and the fanbase at once — <b style={{ fontWeight: 700 }}>working for you, not the house.</b></React.Fragment>) };
  return (
    <main>
      <section style={{ padding: sx('88px 48px 64px') }}>
        <div style={{ maxWidth: 1120, margin: '0 auto' }}>
          <div style={{ marginBottom: 22, display: 'flex' }}>
            <span style={{ position: 'relative', display: 'inline-block' }}>
              <span aria-hidden="true" style={{
                position: 'absolute', top: 0, bottom: 0, left: -15, right: -15,
                background: 'var(--syn-red-700)', opacity: .5,
                clipPath: 'polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%)',
              }} />
              <span style={{
                position: 'relative', display: 'inline-block',
                fontFamily: 'var(--syn-font-mono)', fontSize: 12, letterSpacing: '0.16em',
                textTransform: 'uppercase', color: '#FBF7F1', fontWeight: 800,
                background: 'var(--syn-red-700)', padding: '7px 16px',
                clipPath: 'polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%)',
              }}>How we're changing sports media</span>
            </span>
          </div>
          <h1 style={{
            fontFamily: 'var(--syn-font-display)', fontSize: isPhone ? 40 : 78, fontWeight: 600,
            letterSpacing: '-0.035em', lineHeight: 1.05, color: '#000000',
            margin: '0 0 26px', maxWidth: 980, textWrap: 'balance',
          }}><span style={{ fontWeight: 300, display: 'block', marginBottom: 18 }}><span style={{ fontSize: isPhone ? 28 : 72 }}>The smartest AI models in sports were built to take your money.</span></span><span style={{ fontSize: isPhone ? 36 : 95 }}>We built one to make you smarter.</span></h1>
          <p style={{
            fontFamily: 'var(--syn-font-display)', fontSize: isPhone ? 17 : 21, lineHeight: 1.5,
            color: '#4A4A4A', maxWidth: 720, margin: 0, fontWeight: 400,
          }}>There has always been a gap between what fans know and what the house knows. Legacy media isn’t equipped to close that gap. We are.</p>
        </div>
      </section>

      {/* The gap, visualized */}
      <section style={{ padding: sx('8px 48px 88px') }}>
        <style>{`
          @keyframes synBar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
          @keyframes synSpin{to{transform:rotate(1turn)}}
          @keyframes synLivePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}
          @keyframes synWrite{0%{background-position:220% 0}100%{background-position:-120% 0}}
          .syn-write{background:linear-gradient(90deg,#C4C4C4 0%,#C4C4C4 42%,#7A7A7A 50%,#C4C4C4 58%,#C4C4C4 100%);background-size:220% 100%;animation:synWrite 2.6s linear infinite}
          .syn-bar{transform-origin:bottom;animation:synBar 1.5s ease-in-out infinite}
          .syn-live-dot{animation:synLivePulse 1.3s ease-in-out infinite}
          @keyframes synKgTravel{0%{stroke-dashoffset:100;opacity:0}14%{opacity:1}72%{stroke-dashoffset:0;opacity:1}86%,100%{stroke-dashoffset:0;opacity:0}}
          @keyframes synKgPulse{0%,100%{transform:scale(.9);opacity:var(--o,1)}44%{transform:scale(1.08);opacity:1}}
          .syn-kg-line{stroke:#FFFFFF;stroke-opacity:.22;stroke-width:1;fill:none}
          .syn-kg-flow{stroke:#FFFFFF;stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:8 100;animation:synKgTravel 3.8s cubic-bezier(.3,.05,.25,1) infinite;animation-duration:var(--dur,3.8s)}
          .syn-kg-node{fill:#FFFFFF;transform-box:fill-box;transform-origin:center;opacity:var(--o,1);animation:synKgPulse 3.8s ease-in-out infinite;animation-duration:var(--dur,3.8s)}
          @media (prefers-reduced-motion:reduce){.syn-bar,.syn-live-dot,.syn-write,.syn-kg-flow,.syn-kg-node{animation:none}.syn-kg-flow{opacity:.5;stroke-dashoffset:0}}
        `}</style>
        <div style={{ maxWidth: 1120, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: isPhone ? '1fr' : 'repeat(2, 1fr)', gap: 24, alignItems: 'stretch' }}>
            {gap.map(col => (
              <div key={col.side} style={{
                background: '#FFFFFF', border: '1px solid var(--syn-border)', borderRadius: 20,
                padding: isPhone ? '24px 20px' : '40px 40px', display: 'flex', flexDirection: 'column',
              }}>
                <div style={{ height: 76, marginBottom: 34, display: 'flex', alignItems: 'flex-end' }}>
                  {col.kind === 'books' ? (
                    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10, height: '100%' }}>
                      {[0.5, 0.85, 0.35, 0.7, 0.55, 0.95].map((h, i) => (
                        <span key={i} className="syn-bar" style={{ width: 12, height: `${h * 100}%`, background: '#6E6E6E', borderRadius: 2, animationDelay: `${i * 0.18}s` }} />
                      ))}
                    </div>
                  ) : (
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 13, width: '100%', justifyContent: 'center', height: '100%' }}>
                      {[100, 74, 88].map((w, i) => (
                        <span key={i} className="syn-write" style={{ height: 10, width: `${w}%`, maxWidth: 240, borderRadius: 5, animationDelay: `${i * 0.65}s` }} />
                      ))}
                    </div>
                  )}
                </div>
                <div style={{
                  fontFamily: 'var(--syn-font-mono)', fontSize: 14, letterSpacing: '0.16em',
                  textTransform: 'uppercase', color: '#6E6E6E', fontWeight: 600, marginBottom: 18,
                }}>{col.side}</div>
                <p style={{ fontFamily: 'var(--syn-font-body)', fontSize: 16, lineHeight: 1.62, color: '#4A4A4A', margin: 0 }}>{col.body}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 24, background: 'var(--syn-red-700)', borderRadius: 20, padding: isPhone ? '28px 20px' : '44px 48px', display: 'flex', flexDirection: isPhone ? 'column' : 'row', alignItems: isPhone ? 'flex-start' : 'center', gap: isPhone ? 24 : 52 }}>
            <svg viewBox="0 2 214 132" width="214" height="132" aria-hidden="true" style={{ display: 'block', flex: '0 0 auto', overflow: 'visible' }}>
              {kgWeb.map(([a, b], i) => (
                <line key={`w${i}`} className="syn-kg-line" x1={kgNodes[a].x} y1={kgNodes[a].y} x2={kgNodes[b].x} y2={kgNodes[b].y} />
              ))}
              {[...kgIn, ...kgCore].map(([a, b, d, dur], i) => (
                <g key={`f${i}`}>
                  <line className="syn-kg-line" x1={kgNodes[a].x} y1={kgNodes[a].y} x2={kgNodes[b].x} y2={kgNodes[b].y} />
                  <line className="syn-kg-flow" pathLength={100} x1={kgNodes[a].x} y1={kgNodes[a].y} x2={kgNodes[b].x} y2={kgNodes[b].y} style={{ animationDelay: `${d}s`, '--dur': `${dur}s` }} />
                </g>
              ))}
              {kgNodes.map((n, i) => (
                <circle key={`n${i}`} className="syn-kg-node" cx={n.x} cy={n.y} r={n.r} style={{ '--o': n.o, animationDelay: `${[0,1.8,.6,3.2,2.3,4.1,1.1,2.9,.4,3.7,1.5,4.6,2.6,.9,3.4][i]}s`, '--dur': `${[3.4,5.1,4.2,6.3,3.8,5.7,4.6,3.1,6.8,4.9,5.4,3.6,6.1,4.4,5.9][i]}s` }} />
              ))}
            </svg>
            <div>
              <div style={{
                fontFamily: 'var(--syn-font-mono)', fontSize: 14, letterSpacing: '0.16em',
                textTransform: 'uppercase', color: '#FFFFFF', fontWeight: 600, marginBottom: 18,
              }}>{synth.side}</div>
              <p style={{ fontFamily: 'var(--syn-font-display)', fontSize: isPhone ? 21 : 32, lineHeight: 1.4, color: '#FFFFFF', margin: 0, maxWidth: 820, fontWeight: 400 }}>{synth.body}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Roadmap */}
      <section style={{ padding: sx('64px 48px 56px'), background: '#FFFFFF', borderTop: '1px solid var(--syn-rule)' }}>
        <div style={{ maxWidth: 1120, margin: '0 auto' }}>
          <div style={{
            fontFamily: 'var(--syn-font-mono)', fontSize: 12, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: '#6E6E6E', fontWeight: 500, marginBottom: 44,
          }}>The roadmap</div>
          {isPhone ? (
            /* PHONE: the horizontal timeline can't fit — render it as a vertical
               list with a left rail. Same content, same order, fully readable. */
            <div style={{ position: 'relative', paddingLeft: 26 }}>
              <div style={{ position: 'absolute', left: 5, top: 6, bottom: 6, width: 2, background: 'var(--syn-rule)' }} />
              {roadmap.map(r => (
                <div key={r.when} style={{ position: 'relative', marginBottom: 30 }}>
                  <span style={{
                    position: 'absolute', left: -26 + 5, top: 4, transform: 'translateX(-50%)',
                    width: r.live ? 16 : 12, height: r.live ? 16 : 12, borderRadius: 999,
                    background: r.live ? 'var(--syn-red-700)' : '#FFFFFF',
                    border: r.live ? 'none' : '2px solid #6E6E6E', boxShadow: '0 0 0 4px #FFFFFF',
                  }} />
                  <div style={{
                    fontFamily: 'var(--syn-font-mono)', fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase',
                    color: r.live ? 'var(--syn-red-700)' : '#6E6E6E', fontWeight: 700, marginBottom: 6,
                  }}>{r.when}</div>
                  <h3 style={{
                    fontFamily: 'var(--syn-font-display)', fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em',
                    color: '#000000', margin: '0 0 6px', lineHeight: 1.12,
                  }}>{r.what}</h3>
                  <p style={{
                    fontFamily: 'var(--syn-font-body)', fontSize: 15, lineHeight: 1.55,
                    color: '#4A4A4A', margin: 0,
                  }}>{r.detail}</p>
                </div>
              ))}
            </div>
          ) : (
          <div style={{ padding: '0 24px' }}>
            <div style={{ position: 'relative', height: 320 }}>
              <div style={{ position: 'absolute', left: 0, right: 0, top: 148, height: 2, background: 'var(--syn-rule)' }} />
              <div style={{ position: 'absolute', left: 0, top: 148, height: 2, width: '4%', background: 'var(--syn-red-700)' }} />
              {roadmap.filter(r => r.span).map(r => (
                <div key={`s${r.at}`} style={{
                  position: 'absolute', top: 144, left: `${r.span[0]}%`, width: `${r.span[1] - r.span[0]}%`,
                  height: 12, borderRadius: 6, background: 'var(--syn-rule)',
                }} />
              ))}
              {roadmap.map(r => (
                <div key={r.when} style={{
                  position: 'absolute', left: `${r.at}%`, transform: `translateX(${r.shift || '-50%'})`,
                  ...(r.up ? { bottom: 194 } : { top: 172 }),
                  width: 210, display: 'flex', flexDirection: 'column', alignItems: 'flex-start',
                }}>
                  <div style={{
                    fontFamily: 'var(--syn-font-mono)', fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase',
                    color: r.live ? 'var(--syn-red-700)' : '#6E6E6E', fontWeight: 700, marginBottom: 8,
                  }}>{r.when}</div>
                  <h3 style={{
                    fontFamily: 'var(--syn-font-display)', fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em',
                    color: '#000000', margin: '0 0 10px', lineHeight: 1.12,
                  }}>{r.what}</h3>
                  <p style={{
                    fontFamily: 'var(--syn-font-body)', fontSize: 16, lineHeight: 1.55,
                    color: '#4A4A4A', margin: 0,
                  }}>{r.detail}</p>
                </div>
              ))}
              {roadmap.map(r => (
                <span key={`d${r.at}`} style={{
                  position: 'absolute', left: `${r.at}%`, top: 149, transform: 'translate(-50%,-50%)',
                  width: r.live ? 22 : 16, height: r.live ? 22 : 16, borderRadius: 999,
                  background: r.live ? 'var(--syn-red-700)' : '#FFFFFF',
                  border: r.live ? 'none' : '2px solid #6E6E6E', boxShadow: '0 0 0 6px #FFFFFF',
                }} />
              ))}
            </div>
          </div>
          )}
        </div>
      </section>

      {/* Closing CTA */}
      <section style={{ padding: sx('108px 48px'), background: '#3A3A3A', textAlign: 'center' }}>
        <div style={{ maxWidth: 640, margin: '0 auto' }}>
          <h2 style={{
            fontFamily: 'var(--syn-font-display)', fontSize: isPhone ? 32 : 52, fontWeight: 600,
            letterSpacing: '-0.035em', lineHeight: 1.06, color: '#FFFFFF', margin: '0 0 18px',
          }}>Read the game the way the Vegas reads it.</h2>
          <p style={{
            fontFamily: 'var(--syn-font-display)', fontSize: 19, lineHeight: 1.45,
            color: 'rgba(255,255,255,.72)', margin: '0 0 36px', fontWeight: 400,
          }}>Top insights, free, every morning — starting with the 2026 NFL season.</p>
          <form onSubmit={e => { e.preventDefault(); onNav('onboarding', ctaEmail); }} style={{ display: 'flex', flexDirection: isPhone ? 'column' : 'row', gap: 8, maxWidth: 460, margin: '0 auto' }}>
            <input type="email" value={ctaEmail} onChange={e => setCtaEmail(e.target.value)} placeholder="Enter your email" style={{
              flex: 1, padding: '14px 16px', fontFamily: 'var(--syn-font-body)', fontSize: 15,
              border: '1px solid rgba(255,255,255,.28)', borderRadius: 12, background: '#FFFFFF',
              color: '#000000', outline: 'none',
            }} />
            <button style={{
              background: 'var(--syn-red-700)', color: '#FFFFFF', border: 0, borderRadius: 12,
              padding: '14px 24px', fontFamily: 'var(--syn-font-body)', fontSize: 15, fontWeight: 500,
              cursor: 'pointer', whiteSpace: 'nowrap',
            }}>Join the waitlist</button>
          </form>
        </div>
      </section>
    </main>
  );
}
window.ChangingPage = ChangingPage;