/* parts3.jsx — модалка пабов + модалка развода мостов */
const W3 = window.WC;
const U3 = window.U;

/* ════════ МОДАЛКА ПАБОВ ════════ */
function BarsModal({ onClose }) {
  const spb = W3.bars.filter((b) => b.city === 'СПб');
  const msk = W3.bars.filter((b) => b.city === 'Москва');

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal modal-full" onClick={(e) => e.stopPropagation()}>
        <div className="modal-grab"></div>
        <div className="modal-header">
          <div>
            <span className="eyebrow" style={{ color: 'var(--accent)' }}>Где смотреть</span>
            <h3 style={{ margin: '6px 0 0' }}>Пабы</h3>
          </div>
          <button className="modal-close" onClick={onClose}><Icon name="close" size={20} /></button>
        </div>
        <div className="modal-scroll">
          <div className="bars-city-label">Санкт-Петербург</div>
          <div className="bars-compact bars-grid">
            {spb.map((b) => <BarCardCompact key={b.id} b={b} />)}
          </div>
          <div className="bars-city-label" style={{ marginTop: 18 }}>Москва</div>
          <div className="bars-compact">
            {msk.map((b) => <BarCardCompact key={b.id} b={b} />)}
          </div>
        </div>
      </div>
    </div>
  );
}

function BarCardCompact({ b }) {
  const mapUrl = 'https://yandex.ru/maps/?text=' + encodeURIComponent(b.addr + ', ' + b.city);
  return (
    <div className="bcc">
      <div className="bcc-body">
        <div className="bcc-name">{b.name}</div>
        <a href={mapUrl} target="_blank" rel="noopener" className="bcc-addr-link"><Icon name="pin" size={13} stroke={1.8} /> {b.addr}</a>
        <a href={'tel:' + b.phone} className="bcc-phone"><Icon name="phone" size={13} stroke={1.8} /> {b.phoneDisplay}</a>
        {b.telegram &&
          <a href={b.telegram} target="_blank" rel="noopener" className="bcc-telegram" aria-label={'Telegram ' + b.name}>
            <Icon name="telegram" size={13} stroke={1.8} />
            Telegram
          </a>
        }
      </div>
      <a href={b.link} target="_blank" rel="noopener" className="bcc-book">
        Забронировать
        <Icon name="arrow" size={14} stroke={2} />
      </a>
    </div>
  );
}

/* ════════ МОДАЛКА РАЗВОДА МОСТОВ ════════ */
function BridgesModal({ onClose }) {
  const bridges = W3.bridges;
  // Таймлайн от 1:00 до 6:00 (5 часов)
  const tStart = 1; // 1:00
  const tEnd = 6;   // 6:00
  const totalMin = (tEnd - tStart) * 60; // 300 min

  function timeToMin(s) {
    const [h, m] = s.split(':').map(Number);
    return (h - tStart) * 60 + m;
  }
  function pct(min) {
    return (min / totalMin) * 100;
  }

  const mainBridges = bridges.filter((b) => b.slots.length > 0);
  const byRequest = bridges.filter((b) => b.slots.length === 0);

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal modal-full" onClick={(e) => e.stopPropagation()}>
        <div className="modal-grab"></div>
        <div className="modal-header">
          <div>
            <span className="eyebrow" style={{ color: 'var(--accent)' }}>Петербург</span>
            <h3 style={{ margin: '6px 0 0' }}>Развод мостов</h3>
          </div>
          <button className="modal-close" onClick={onClose}><Icon name="close" size={20} /></button>
        </div>
        <div className="modal-scroll">
          <div className="bridge-note">Навигация 2026 · время закрытия для транспорта</div>

          {/* Таймлайн-инфографика */}
          <div className="bridge-chart">
            {/* Часовая шкала */}
            <div className="bc-timeline">
              {[1, 2, 3, 4, 5, 6].map((h) => (
                <div key={h} className="bc-hour" style={{ left: pct((h - tStart) * 60) + '%' }}>
                  <span className="bc-hour-line"></span>
                  <span className="bc-hour-label tnum">{h}:00</span>
                </div>
              ))}
            </div>

            {/* Мосты */}
            {mainBridges.map((b, i) => (
              <div className="bc-row" key={i}>
                <div className="bc-name">{b.name}</div>
                <div className="bc-track">
                  {b.slots.map((slot, j) => {
                    const left = pct(timeToMin(slot[0]));
                    const width = pct(timeToMin(slot[1]) - timeToMin(slot[0]));
                    return (
                      <div key={j} className="bc-bar" style={{ left: left + '%', width: width + '%' }}>
                        <span className="bc-bar-label tnum">{slot[0]}</span>
                        <span className="bc-bar-label bc-bar-end tnum">{slot[1]}</span>
                      </div>
                    );
                  })}
                </div>
                <div className="bc-river">{b.river}</div>
              </div>
            ))}
          </div>

          {/* По заявке */}
          <div className="bridge-byreq">
            <div className="bridge-byreq-title">По предварительной заявке (за 2 суток)</div>
            {byRequest.map((b, i) => (
              <div key={i} className="bridge-byreq-row">
                <span className="bridge-byreq-name">{b.name}</span>
                <span className="bridge-byreq-note">{b.note}</span>
              </div>
            ))}
          </div>

          <div className="bridge-source">Источник: <a href="https://mostotrest-spb.ru/razvodka-mostov" target="_blank" rel="noopener">СПб ГБУ «Мостотрест», mostotrest-spb.ru</a></div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BarsModal, BridgesModal });