// site/calendar.jsx — interactive ATP 2026 calendar

function Calendar() {
  const [filter, setFilter] = React.useState("all");
  const [today] = React.useState(new Date(2026, 4, 20)); // simulate Roma live

  const filtered = React.useMemo(() => {
    if (!window.TOURNAMENTS_2026) return [];
    if (filter === "all") return window.TOURNAMENTS_2026;
    if (filter === "GS") return window.TOURNAMENTS_2026.filter(t => t.cat === "GS" || t.cat === "FINALS");
    return window.TOURNAMENTS_2026.filter(t => t.surface === filter);
  }, [filter]);

  const filters = [
    { id: "all", label: "All" },
    { id: "GS", label: "Grand Slams" },
    { id: "clay", label: "Clay" },
    { id: "grass", label: "Grass" },
    { id: "hard", label: "Hard" },
    { id: "indoor", label: "Indoor" },
  ];

  const trackRef = React.useRef(null);
  React.useEffect(() => {
    if (!trackRef.current) return;
    const liveCard = trackRef.current.querySelector('.cal-card.live');
    if (liveCard) {
      const rect = liveCard.getBoundingClientRect();
      const trackRect = trackRef.current.getBoundingClientRect();
      trackRef.current.scrollLeft = liveCard.offsetLeft - trackRect.width / 2 + rect.width / 2;
    }
  }, [filter]);

  return (
    <section className="section" id="calendar" style={{ background: 'var(--bg)' }}>
      <div className="section-head">
        <div>
          <div className="section-eyebrow">
            <span className="num">02</span>
            <span>ATP 2026 — Live</span>
          </div>
          <h2 className="section-title">Fourteen<br/>tournaments.<br/>One scroll.</h2>
        </div>
        <p className="section-kicker">
          The full 2026 ATP main-draw calendar — Grand Slams, Masters 1000s, the Finals.
          Filter by surface, scroll horizontally, tap any card.
        </p>
      </div>

      <div className="calendar-wrap">
        <div className="cal-controls">
          {filters.map(f => (
            <button
              key={f.id}
              className={`cal-chip ${filter === f.id ? 'active' : ''}`}
              onClick={() => setFilter(f.id)}>
              {f.label}
            </button>
          ))}
        </div>

        <div className="cal-track" ref={trackRef}>
          {filtered.map(t => {
            const status = window.tournamentStatus(t, today);
            return (
              <div key={t.id} className={`cal-card ${status}`} data-surface={t.surface}>
                <div className="cal-surface-bar"></div>
                <div>
                  <div className="cal-cat">{t.cat === "GS" ? "GRAND SLAM" : t.cat === "FINALS" ? "ATP FINALS" : "MASTERS 1000"}</div>
                  <div className="cal-name">{t.short}</div>
                  <div className="cal-city">{t.city} · {t.country}</div>
                </div>
                <div className="cal-meta">
                  <div className="cal-date">{window.fmtDateRange(t)}</div>
                  <div className="cal-pill">{status === "live" ? "● LIVE" : status === "upcoming" ? "Upcoming" : t.winner ? `🏆 ${t.winner.split(" ").pop()}` : "Past"}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Calendar });