(() => {
const { Icon } = window.SwivelDesignSystem_a628db;
const { inner, Section, headline } = window.SwivelSite;

const V = ['Sweeps casino', 'Social casino', 'ADW', 'Card rips', 'Prediction markets', 'Sports', 'Crypto', 'Politics'];
const CASINO = [0, 2, 1];   // Sweeps, ADW, Social: one at a time, listed in that order
const STANDALONE = [3, 4];  // Card rips, Prediction markets: on their own or combined
const SUB = [5, 6, 7];      // Prediction market sub-markets, shown while 4 is on

// Verticals not permitted, by state name, as of September 2026. Illustrative,
// not legal advice; update here as the rules change.
// 0 Sweeps: statutory bans, plus states enforcing existing gambling law.
// 2 ADW: states that do not permit advance deposit wagering.
// 4 Prediction markets: states that block the platforms outright.
// 5 Sports contracts: blocked by court order.
// 7 Politics: election contracts under state cease-and-desist or criminal action.
// 6 Crypto: no state block on record.
const BAN = {
  0: ['California', 'Connecticut', 'Indiana', 'Louisiana', 'Maine', 'Montana', 'Nevada', 'New Jersey', 'New York', 'Oklahoma', 'Tennessee', 'Idaho', 'Michigan', 'Washington'],
  2: ['Alaska', 'Georgia', 'Hawaii', 'Maine', 'Mississippi', 'Nevada', 'North Carolina', 'South Carolina', 'Texas', 'Utah'],
  4: ['Nevada', 'Utah', 'Michigan'],
  5: ['Massachusetts', 'Washington'],
  7: ['Connecticut', 'Arizona'],
};
const blocked = (i, name) => !!(BAN[i] && BAN[i].includes(name));

// Starting switches for a state: Sweeps on where allowed, otherwise Social;
// Card rips on; Prediction markets off, with every permitted sub-market ready.
const defaults = (name) => {
  const b = (i) => blocked(i, name);
  return [!b(0), b(0) && !b(1), false, !b(3), false, !b(5), !b(6), !b(7)];
};

const DEFAULT_STATE = 'Texas';

function StateMap() {
  const [states, setStates] = React.useState([]);
  const [sel, setSel] = React.useState(DEFAULT_STATE);
  const [cfg, setCfg] = React.useState({});
  const [touched, setTouched] = React.useState(false);
  const [tip, setTip] = React.useState({ show: false, name: '', x: 0, y: 0 });
  const mapRef = React.useRef(null);

  React.useEffect(() => {
    fetch('site/data/us-states.json').then((r) => r.json()).then(setStates).catch(() => {});
  }, []);

  const on = cfg[sel] || defaults(sel);
  const flip = (i) => {
    setTouched(true);
    const next = on.slice();
    if (CASINO.includes(i)) { const was = next[i]; CASINO.forEach((j) => { next[j] = false; }); next[i] = !was; }
    else next[i] = !next[i];
    setCfg({ ...cfg, [sel]: next });
  };

  const moveTip = (e) => {
    const r = mapRef.current.getBoundingClientRect();
    setTip((t) => ({ ...t, x: e.clientX - r.left, y: e.clientY - r.top }));
  };

  const row = (i) => {
    const b = blocked(i, sel);
    const isOn = on[i] && !b;
    return <div key={i} className={'cr-row' + (b ? ' off' : '') + (SUB.includes(i) ? ' sub' : '')}>
      <span className="cr-label">
        {V[i]}
        {i === 4 && !b && <span className={'cr-chev' + (on[4] ? ' open' : '')} style={{ display: 'inline-flex' }}><Icon name="chevron-down" size={14}/></span>}
        {b && <small>Not permitted</small>}
      </span>
      <button type="button" role="switch" aria-checked={isOn} aria-label={`${V[i]} in ${sel}`} disabled={b}
        className={'cr-tg' + (isOn ? ' on' : '')} title={b ? 'Not permitted in this state' : 'Toggle ' + V[i]}
        onClick={b ? undefined : () => flip(i)}/>
    </div>;
  };

  return <div className={'cr' + (touched ? ' touched' : '')}>
    <div className="cr-body">
      <div className="cr-upper">
        <div className="cr-map" ref={mapRef}>
          <svg viewBox="0 0 960 600" preserveAspectRatio="xMidYMid meet" role="group" aria-label="Map of US states">
            <g>{states.map((s) => <path key={s.id} d={s.d} className={'cr-st' + (s.name === sel ? ' sel' : '')} aria-label={s.name}
              onClick={() => { setTouched(true); setSel(s.name); }}
              onMouseEnter={(e) => { setTip({ show: true, name: s.name, x: 0, y: 0 }); moveTip(e); }}
              onMouseMove={moveTip}
              onMouseLeave={() => setTip((t) => ({ ...t, show: false }))}/>)}</g>
          </svg>
          <div className={'cr-tip' + (tip.show ? ' show' : '')} style={{ left: tip.x, top: tip.y }}>{tip.name}</div>
          <div className="cr-callout"><span className="cr-ico" style={{ display: 'inline-flex' }}><Icon name="mouse-pointer-click" size={14}/></span>Interactive · click any state</div>
        </div>
        <div className="cr-panel" aria-live="polite">
          <div className="cr-head">
            <div className="cr-title">Control Room<sup>™</sup></div>
            <div className="cr-eyebrow"><Icon name="toggle-right" size={12}/>{touched ? 'Toggle' : 'Flip the switches'}</div>
          </div>
          <h4>{sel}</h4>
          <div className="cr-grp">Casino · one at a time</div>
          {CASINO.map(row)}
          <div className="cr-grp">Standalone or combined</div>
          {STANDALONE.map(row)}
          {on[4] && !blocked(4, sel) && SUB.map(row)}
        </div>
      </div>
      <p className="cr-blurb">With Control Room™, you switch any vertical on or off, state by state, with the regulatory rules applied for you. When regulations change, you flip a switch and you are live or paused the same day.</p>
    </div>
    <div className="cr-foot">
      <div className="cr-hint"><Icon name="mouse-pointer-click" size={16}/>Try it: click a state, then flip the switches</div>
      <div className="cr-note">Regulatory status as of Sept 2026, illustrative</div>
    </div>
  </div>;
}

// Solid yellow slide: headline, then the map and panel side by side.
function ControlRoom() {
  return <Section id="products" label="03 Control Room" bg="var(--swivel-portal-yellow)" color="var(--swivel-signal-black)" mark="black">
    <div style={inner('96px', { display: 'flex', flexDirection: 'column', gap: 64 })}>
      <h2 style={headline('clamp(36px, 4.5cqw, 68px)', { lineHeight: 0.96, textWrap: 'balance', color: 'var(--swivel-signal-black)' })}>Compliant in every state. Live in every vertical.</h2>
      <StateMap/>
    </div>
  </Section>;
}

Object.assign(window, { ControlRoom });
})();