/* parts1.jsx — иконки, флаг, карточка матча, хедер, баннеры «сегодня/завтра» */
const { useState } = React;
const W = window.WC;
const U = window.U;

/* ── Иконки (простые контуры) ── */
function Icon({ name, size = 16, stroke = 2 }) {
  const p = {
    star: <path d="M12 3.2l2.6 5.5 6 .7-4.5 4.2 1.2 6L12 16.9 6.7 19.6l1.2-6L3.4 9.4l6-.7z" />,
    pin: <><path d="M12 21s7-6.3 7-11a7 7 0 10-14 0c0 4.7 7 11 7 11z" /><circle cx="12" cy="10" r="2.6" /></>,
    phone: <path d="M6.5 4h3l1.4 4-2 1.3a12 12 0 005.8 5.8l1.3-2 4 1.4v3a2 2 0 01-2.2 2A16 16 0 014.5 6.2 2 2 0 016.5 4z" />,
    check: <path d="M5 12.5l4.5 4.5L19 7" />,
    cal: <><rect x="3.5" y="5" width="17" height="15.5" rx="2.5" /><path d="M3.5 9.5h17M8 3v4M16 3v4" /></>,
    arrow: <path d="M5 12h13M13 6l6 6-6 6" />,
    close: <path d="M6 6l12 12M18 6L6 18" />,
    telegram: <path d="M21.5 4.8L18.3 20c-.2 1-.8 1.2-1.6.8l-4.8-3.5-2.3 2.2c-.3.3-.5.5-1 .5l.4-5 9.1-8.2c.4-.4-.1-.6-.6-.2L6.2 13.7 1.4 12.2c-1-.3-1-1 .2-1.5L20.2 3.5c.9-.3 1.6.2 1.3 1.3z" />,
  };
  const fill = name === 'star' ? 'currentColor' : 'none';
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor"
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block' }}>
      {p[name]}
    </svg>
  );
}

function Flag({ code }) {
  return <img src={U.flagUrl(code)} alt="" loading="lazy" width="27" height="20" />;
}

/* ── Карточка матча ── */
function MatchCard({ m, favs, toggleFav, dark }) {
  const isFav = favs.has(m.home) || favs.has(m.away);
  const tag = m.stage === 'group' ? 'Группа ' + m.group : m.name;
  function TeamRow({ code }) {
    const fav = favs.has(code);
    return (
      <div className={'mteam' + (fav ? '' : ' dim')}>
        <Flag code={code} />
        <span className="nm">{U.teamName(code)}</span>
        {fav && <span className="star"><Icon name="star" size={11} /></span>}
      </div>
    );
  }
  return (
    <div className={'mcard' + (isFav ? ' fav' : '')}>
      <div className="mteams">
        <TeamRow code={m.home} />
        <TeamRow code={m.away} />
      </div>
      <div className="mmeta">
        <span className="mtime tnum">{m.time}</span>
        <span className="mtag">{tag}</span>
      </div>
      <button className={'mfav' + (isFav ? ' on' : '')} aria-label="В избранное"
        onClick={() => { toggleFav(m.home); }}>
        <Icon name="star" size={17} stroke={1.8} />
      </button>
    </div>
  );
}

/* ── Хедер ── */
function Hero({ cur, onOpenBars, onOpenBridges }) {
  const start = W.tournamentStart;
  const d = U.daysUntil(start, cur);
  const started = d <= 0;
  let countLabel, countNum;
  if (started) {
    const left = U.daysUntil(W.finalDate, cur);
    countLabel = left > 0 ? 'дней до финала' : 'турнир завершён';
    countNum = left > 0 ? left : '—';
  } else {
    countLabel = 'дней до старта';
    countNum = d;
  }
  return (
    <header className="hero">
      <div className="hero-top">
        <div className="hero-brand"><span className="dot"></span>КОМИТЕТ</div>
        <div className="hero-live">{started ? '● в эфире' : 'Канада · Мексика · США'}</div>
      </div>
      <h1 className="hero-h1">ЧЕМПИОНАТ МИРА <em>2026</em></h1>
      <p className="hero-sub">
        <span>Транслируем все значимые матчи на больших экранах</span>
        <span>в гастрономических пабах Санкт-Петербурга и Москвы.</span>
      </p>
      <div className="hero-count">
        <div className="u">
          <span className="n tnum">{countNum}</span>
          <span className="l">{countLabel}</span>
        </div>
        <div className="u">
          <span className="n tnum">48</span>
          <span className="l">сборных</span>
        </div>
        <div className="u">
          <span className="n tnum">7</span>
          <span className="l">площадок</span>
        </div>
      </div>
      <div className="hero-actions">
        <button className="hero-btn primary" onClick={onOpenBars}>
          <Icon name="pin" size={16} stroke={2} />
          Пабы
        </button>
        <button className="hero-btn ghost" onClick={onOpenBridges}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{display:'block'}}>
            <path d="M4 21V14C4 14 6 10 12 10C18 10 20 14 20 14V21" />
            <line x1="4" y1="21" x2="20" y2="21" />
            <line x1="8" y1="21" x2="8" y2="14.5" />
            <line x1="12" y1="21" x2="12" y2="10" />
            <line x1="16" y1="21" x2="16" y2="14.5" />
            <line x1="4" y1="10" x2="4" y2="7" />
            <line x1="20" y1="10" x2="20" y2="7" />
          </svg>
          Развод мостов
        </button>
      </div>
    </header>
  );
}

/* ── Баннер «Смотри у нас сегодня» ── */
function TodayBanner({ cur, favs, toggleFav }) {
  let matches = U.matchesOn(cur);
  let dateForLabel = cur;
  let preTournament = false;
  if (matches.length === 0) {
    const nd = U.nextDayWithMatches(cur);
    if (nd) { matches = U.matchesOn(nd); dateForLabel = nd; preTournament = true; }
  }
  matches = [...matches].sort((a, b) => a.time.localeCompare(b.time));
  const d = U.daysUntil(W.tournamentStart, cur);

  return (
    <section className="banner banner-today on-dark">
      <span className="eyebrow"><span className="pulse"><span className="d"></span></span>&nbsp; Смотри у нас сегодня</span>
      {preTournament ? (
        <>
          <div className="b-title">Совсем скоро — старт!</div>
          <div className="b-date">{d > 0 ? 'До первого матча ' + d + ' дн. · ' : ''}Открытие {U.fmtLong(dateForLabel)}</div>
        </>
      ) : (
        <>
          <div className="b-title">{matches.length} {matchWord(matches.length)} сегодня</div>
          <div className="b-date">{U.fmtLong(cur)}, {U.wdShort(cur)}</div>
        </>
      )}
      <div className="mlist" style={{ marginTop: 14 }}>
        {matches.map((m) => <MatchCard key={m.id} m={m} favs={favs} toggleFav={toggleFav} dark />)}
      </div>
    </section>
  );
}

/* ── Баннер «Смотри у нас завтра» ── */
function TomorrowBanner({ cur, favs, toggleFav }) {
  const tomorrow = U.addDays(cur, 1);
  let matches = U.matchesOn(tomorrow);
  let label = U.fmtLong(tomorrow) + ', ' + U.wdShort(tomorrow);
  let empty = false;
  if (matches.length === 0) {
    const nd = U.nextDayWithMatches(tomorrow);
    if (nd) { matches = U.matchesOn(nd); label = 'Ближайшие — ' + U.fmtLong(nd); }
    else empty = true;
  }
  matches = [...matches].sort((a, b) => a.time.localeCompare(b.time)).slice(0, 4);
  return (
    <section className="banner banner-tomorrow">
      <span className="eyebrow">Смотри у нас завтра</span>
      <div className="b-title">{empty ? 'Матчей нет' : label}</div>
      {!empty && <div className="b-date">Бронируйте стол заранее — мест меньше, чем болельщиков</div>}
      {empty ? (
        <div className="b-empty">Турнир завершён. Спасибо, что были с нами!</div>
      ) : (
        <div className="mlist" style={{ marginTop: 12 }}>
          {matches.map((m) => <MatchCard key={m.id} m={m} favs={favs} toggleFav={toggleFav} />)}
        </div>
      )}
    </section>
  );
}

function matchWord(n) {
  const a = n % 10, b = n % 100;
  if (a === 1 && b !== 11) return 'матч';
  if (a >= 2 && a <= 4 && (b < 10 || b >= 20)) return 'матча';
  return 'матчей';
}

Object.assign(window, { Icon, Flag, MatchCard, Hero, TodayBanner, TomorrowBanner, matchWord });