/* hero.jsx — 関西 compact photo hero + live strip */
function Hero({ counts }) {
  return (
    <header className="hero">
      <div className="h-bg" aria-hidden="true" />
      <image-slot id="kansai-hero" class="h-slot" fit="cover"></image-slot>
      <span className="h-scrim" aria-hidden="true" />
      <span className="h-lanes" aria-hidden="true" />
      <p className="h-tagline" aria-hidden="true">EVERY<br />STROKE<br />COUNTS.</p>
      {/* 水面アニメ：波＋6クルーが左→右に競漕（タイトルの下の水面ゾーンに配置） */}
      <div className="h-water" aria-hidden="true">
        <svg className="hw-wave back" viewBox="0 0 800 40" preserveAspectRatio="none">
          <path d="M0 22 Q100 10 200 22 T400 22 T600 22 T800 22 V40 H0 Z" />
        </svg>
        <div className="hw-race">
          {[
            { y: 1, w: 62, o: 0.28, d: 41, delay: -19 },
            { y: 12, w: 71, o: 0.36, d: 42.5, delay: -21 },
            { y: 23, w: 80, o: 0.45, d: 40, delay: -18.5 },
            { y: 33, w: 89, o: 0.54, d: 43, delay: -20 },
            { y: 44, w: 99, o: 0.63, d: 41.5, delay: -19.5 },
            { y: 55, w: 110, o: 0.72, d: 42, delay: -20.5 },
          ].map((b, i) => (
            <div className="hw-lane" key={i} style={{ "--y": b.y + "px", "--d": b.d + "s", "--delay": b.delay + "s" }}>
              <svg className="hw-boat" viewBox="0 0 120 18" style={{ width: b.w + "px", color: "rgba(255,255,255," + b.o + ")" }}>
                <g stroke="currentColor" strokeWidth="1.1" strokeLinecap="round">
                  <line x1="38" y1="9" x2="32" y2="3" /><line x1="54" y1="9" x2="60" y2="15" />
                  <line x1="70" y1="9" x2="64" y2="3" /><line x1="86" y1="9" x2="92" y2="15" />
                </g>
                <path d="M8 9 C30 6.5 92 6.5 114 8.4 C115 8.7 115 9.3 114 9.6 C92 11.5 30 11.5 8 9 Z" fill="currentColor" />
              </svg>
            </div>
          ))}
        </div>
        <svg className="hw-wave front" viewBox="0 0 800 40" preserveAspectRatio="none">
          <path d="M0 24 Q100 12 200 24 T400 24 T600 24 T800 24 V40 H0 Z" />
        </svg>
      </div>
      <div className="inner">
        <h1>
          <span className="en">Kansai Rowing Championships</span>
          関西選手権 <span className="yr">2026</span>
        </h1>
        <div className="h-meta">
          <span className="h-line"><IconPin size={14} />大阪府立漕艇センター（浜寺水路）</span>
          <span className="h-line"><IconCal size={14} />7月4日(土) – 5日(日)</span>
        </div>
        <div className="h-stats">
          {[[counts.events, "種目"], [counts.entries, "クルー"], [counts.athletes, "選手"], [counts.teams, "団体"], ["2", "日間"]].map(([n, l]) => (
            <div className="h-stat" key={l}>
              <span className="tick" /><b>{n}</b><span>{l}</span>
            </div>
          ))}
        </div>
      </div>
      <a className="h-credit" href="https://www.instagram.com/hiroshi.rowing/" target="_blank" rel="noopener noreferrer">created by 中野紘志</a>
    </header>
  );
}

function LiveStrip({ ord, phase, onOpen, onOpenRace, onOpenResults }) {
  const { live, next } = window.RW.liveAndNext(ord);
  const cur = live[0], up = next[0];
  if (phase === "during" && cur) {
    return (
      <div className="livestrip" onClick={onOpenRace ? () => onOpenRace(cur.id) : onOpen}>
        <span className="lanes" />
        <div className="ls-in">
          <span className="dotlive" /><span className="ls-lbl">Live</span>
          <div className="ls-text">
            <div className="t1">進行中 · {cur.t}　{window.RW.DIV[cur.ev.div].label}</div>
            <div className="t2">{cur.ev.code}　{cur.ev.name}　<span style={{ opacity: .7 }}>{cur.round}</span></div>
          </div>
          <span className="ls-go">見る ›</span>
        </div>
      </div>
    );
  }
  const firstLabel = phase === "before" ? "最初のレース" : "次のレース";
  const afterClick = onOpenResults || onOpen;
  return (
    <div className="livestrip idle" onClick={phase === "after" ? afterClick : (up && onOpenRace ? () => onOpenRace(up.id) : onOpen)}>
      <div className="ls-in">
        <span className="dotlive" />
        <span className="ls-lbl" style={{ letterSpacing: ".1em" }}>{phase === "after" ? "RESULT" : "NEXT"}</span>
        <div className="ls-text">
          <div className="t1">{phase === "after" ? "大会終了 · リザルト確定" : up ? `${firstLabel} · ${up.date}(${up.dow}) ${up.t}` : "本日は終了しました"}</div>
          <div className="t2">{phase === "after" ? "メダル・順位を見る" : up ? `${up.ev.code}　${up.ev.name}` : "—"}</div>
        </div>
        <span className="ls-go" style={{ color: "var(--ph-ink)" }}>{phase === "after" ? "結果 ›" : "ホーム ›"}</span>
      </div>
    </div>
  );
}

Object.assign(window, { Hero, LiveStrip });